/* ===  Admin Layout === */

/* --- Admin tabs --- */
.tab-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.tab-button {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #333;
  background: #111;
  color: #ccc;
  font-size: 13px;
  cursor: pointer;
}

.tab-button.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* Tier blocks for Basic / Good */
.tier-block {
  margin-top: 6px;
  padding: 6px 8px;
  background: #0b0b0b;
  border-radius: 6px;
}

.tier-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
  color: #fff;
}

.rtmp-line,
.key-line {
  white-space: nowrap;
  font-size: 13px;
}

.price-line,
.extras-line {
  font-size: 15px;
  color: #2fa1ff;
  font-weight: 600;
}





.admin-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.admin-header {
  text-align: left;
  margin-bottom: 24px;
  border-bottom: 1px solid #333;
  padding-bottom: 12px;
}

.admin-title {
  font-size: 24px;
  margin: 0 0 4px;
}

.admin-subtitle {
  font-size: 13px;
  color: #aaa;
  margin: 0;
}

/* All cards stacked vertically */
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.card {
  background: #111;
  border-radius: 10px;
  border: 1px solid #222;
  padding: 16px 18px;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.02);
    position: relative;   /* <-- THIS FIXES EVERYTHING */
  z-index: 1;           /* ensures tooltip can sit above inside content */

}

.card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.card p {
  margin: 4px 0;
  font-size: 14px;
  color: #ccc;
}

/* Optional: for a bullet list inside the instructions card */
.card .instructions-list {
  margin: 8px 0 4px;
  padding-left: 18px;
  font-size: 13px;
  color: #ccc;
}



/* Provider list styles */

.provider-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
}

.provider-option {
  display: flex;
  align-items: flex-start;
  padding: 6px 8px;
  gap: 8px;
  border-radius: 6px;
  width: 100%;
border-radius: 20px;
border: 1px solid #333;
background: #111;

}

.provider-option:hover {
  background: #181818;
}

/* LEFT side: balance + RTMP + key + price */
.provider-right {
  order: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  flex: 1 1 auto;          /* take remaining space */
}

/* RIGHT side: radio + api server + badge */
.provider-left {
  order: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;       /* push to the right */
}

.provider-option input[type="radio"] {
  accent-color: #f5c400;
  cursor: pointer;
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  background: #222;
  color: #ddd;
  margin-left: 4px;
}

.badge.active {
  background: #f5c400;
  color: #000;
  font-weight: 600;
}

/* Text on the LEFT column */

.balance-value {
  font-size: 16px;
  font-weight: 600;
  color: #2fa1ff;
  text-align: left;
}





.endpoint-text {
  font-size: 13px;
  color: #888;
  text-align: left;
}



.price-text {
  font-size: 16px;
  color: #aaa;
  text-align: left;
  
}




/* Generic admin buttons / inputs */

.balance-label {
  font-size: 14px;
  color: #aaa;
}

.button-row {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

button {
  background: #222;
  border-radius: 6px;
  border: 1px solid #444;
  color: #f5f5f5;
  font-size: 13px;
  padding: 6px 12px;
  cursor: pointer;
}

button:hover {
  background: #2c2c2c;
  border-color: #666;
}

.status-text {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
}

.text-input {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #050505;
  color: #f5f5f5;
  font-size: 13px;
  box-sizing: border-box;
}

.text-input:focus {
  outline: none;
  border-color: #f5c400;
}




/* === Compact horizontal selector ONLY for #providerSelector === */

/* === FIXED HORIZONTAL PROVIDER SELECTOR (with URLs) === */

#providerSelector {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Override the giant .provider-option rules */
#providerSelector .provider-option {
  all: unset;                        /* remove ALL inherited styles */
  display: inline-flex;              /* horizontal pills */
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid #333;
  background: #111;
  cursor: pointer;
  font-size: 13px;
}

/* Make <label> clickable again after all:unset */
#providerSelector .provider-option {
  cursor: pointer;
}

/* Radio button */
#providerSelector input[type="radio"] {
  margin-right: 6px;
  transform: scale(1.0);
}

/* Short tag (CA / Core / LF) */
#providerSelector .badge {
  background: #222;
  color: #ddd;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
}

/* FULL URL text */
#providerSelector .provider-name {
  color: #aaa;
  font-size: 13px;
  white-space: nowrap;   /* keeps the URL clean */
}




/* === UPGRADED PROVIDER BLOCK STYLE (Streaming Servers tab) === */
#tab-providers .provider-option {
  border-radius: 16px !important;       /* softer corners */
  border: 1px solid #333 !important;    /* bright border like pills */
  background: #111 !important;
  padding: 12px 14px !important;
  margin-bottom: 6px;
  transition: 0.2s ease;
}

#tab-providers .provider-option:hover {
  background: #181818 !important;
  border-color: #444 !important;
}


/* Keep right side centered, left side top-aligned */
#tab-providers .provider-left {
  align-items: center;
}

#tab-providers .provider-right {
  align-items: flex-start;
}



.balance-label-inline {
  font-size: 13px;
  color: #aaa;
  margin-right: 4px;
}

.advanced-details {
  margin-top: 6px;
  font-size: 12px;
    margin-bottom: 5px; /* adjust as needed */
}

.advanced-details summary {
  cursor: pointer;
  color: #aaa;
}

.advanced-json {
  max-height: 220px;
  overflow: auto;
  background: #050505;
  border-radius: 6px;
  padding: 8px;
  border: 1px solid #222;
  font-size: 11px;
  line-height: 1.3;
}



  /* admin page */


.fw-service-block {
  border-top: 1px solid #333;
  padding-top: 8px;
  margin-top: 8px;
}

.fw-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.fw-row input[type="checkbox"] {
  transform: scale(1.1);
}

.fw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.fw-grid label {
  display: block;
  font-size: 0.8rem;
  color: #ccc;
  margin-bottom: 2px;
}

.fw-grid input[type="text"],
.fw-grid input[type="password"] {
  width: 100%;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #111;
  color: #eee;
  font-size: 0.85rem;
}



.disabled-btn {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.feature-locked-note {
  font-size: 13px;
  color: #ff5555;
  margin-top: 4px;
}


#tab-general a[href*="simulcast.me"] {
  color: #4ea3ff !important;
}
#tab-general a[href*="simulcast.me"]:visited {
  color: #4ea3ff !important;
}



.bottom-links a {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 6px;
}




#quickBalancesBtn {
  margin: 10px;
}




/* Container: balances all on one line, wrapping if needed */
#quickBalancesList {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
}

/* Each provider shown as a small pill */
.quick-balance-row {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #111;
  border: 1px solid #333;
}

/* [ ... ] brackets around each pill */
.quick-balance-row::before {
  content: "[";
  margin-right: 3px;
  opacity: 0.6;
}

.quick-balance-row::after {
  content: "]";
  margin-left: 3px;
  opacity: 0.6;
}

/* Provider name */
.qb-name {
  opacity: 0.9;
}

/* Add a " - " between name and balance */
.qb-name::after {
  content: " - ";
  margin: 0 3px;
  opacity: 0.7;
}

/* Balance text (default) */
.qb-balance {
  font-weight: 600;
}

/* Tiny “Last checked at…” line */
.balance-updated-text {
  font-size: 12px;
  opacity: 0.7;
  margin-top: 4px;
}

/* Green style only for >0 balances */
.qb-has-balance {
  color: #2fa1ff;  /* soft green */
}



.announce-naddr-row {
  margin-top: 8px;
}

.announce-naddr-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.announce-naddr-inline input {
  flex: 1;
}

.field-help {
  font-size: 12px;
  /* opacity: 0.8;  <-- remove this */
  margin-top: 4px;
  color: #db8719;      /* use color instead of opacity */
}






.quick-balance-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.qb-name {
  flex: 0 0 auto;
}

.qb-balance {
  flex: 1 1 auto;
  text-align: right;
}

.qb-topup-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
}




.tier-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.copy-btn {
  background: #333;
  color: #fff;
  border: none;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.copy-btn:hover {
  background: #444;
}




/* Container wraps the pill + tooltip */
.price-help {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Price pill */
.day-price-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #111;
  border: 1px solid #333;
  font-size: 13px;
  cursor: pointer;
}

/* REMOVE the icon entirely */
.price-help-icon {
  display: none !important;
}

/* Tooltip */
.price-help-tooltip {
  position: absolute;
  left: 0;
  bottom: 140%;
  top: auto;

  width: 280px;
  max-width: 280px;
  padding: 8px 10px;

  background: #60acde;    /* your chosen blue */
  color: #000000;         /* black text */
  border: 1px solid #444;
  border-radius: 6px;

  font-size: 14px;
  line-height: 1.4;
  white-space: normal;

  box-shadow: 0 4px 12px rgba(0,0,0,1);

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
  z-index: 9999;
}

/* Hover anywhere on the pill -> show tooltip */
.price-help:hover .price-help-tooltip {
  opacity: 1;
  pointer-events: auto;
}

/* Collapsible Quick Guide */
.howto-card {
  cursor: pointer;   /* <- you can change this to default if you want */
  user-select: none;
  padding-bottom: 0;
}

.howto-header {
  margin: 0;
  padding: 6px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;   /* <-- this is the important one now */
}


.howto-header::after {
  content: "▶";
  font-size: 12px;
  opacity: 0.7;
  margin-left: auto;
  transition: transform 0.25s ease;
}




/* Hidden by default */
.howto-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding-top: 0;
  padding-bottom: 0;
}

/* Expanded */
.howto-card.open .howto-content {
  max-height: 300px;
  padding-top: 10px;
  padding-bottom: 10px;
}


.howto-card.collapsed .howto-content {
  display: none;
}


.howto-card.open .howto-header::after {
  transform: rotate(90deg);
}


#creditsResetCountdown {
  color: #888;
  transition: color 0.3s ease;
}

#creditsResetCountdown.warning {
  color: #ffb347; /* soft orange */
}

#creditsResetCountdown.danger {
  color: #ff4b4b; /* alert red */
}



.provider-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.provider-radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
}




.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}

.admin-header-main {
  flex: 1 1 auto;
}

.admin-header-mode {
  flex: 0 0 auto;
  font-size: 0.8rem;
  color: #aaa;
  display: flex;
  gap: 6px;
  align-items: center;
}

.mode-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  color: #777;
}

.mode-value {
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #2a2a2a;
  background: #151515;
}

/* When Simulcast is active, we’ll tweak this via a class */
.mode-value.mode-simulcast {
  background: #2b2f3b;
  border-color: #4a5161;
  color: #e9ecf6;
}


.text-input::placeholder {
  color: #888;
  opacity: 1; /* force show in Firefox too */
}


.text-input::placeholder {
  color: #888 !important;
  opacity: 1 !important;
}


/* Make sure placeholders actually show */
input.text-input::placeholder,
textarea.text-input::placeholder {
  color: #888 !important;
  opacity: 1 !important;  /* Firefox + any previous styles */
}








/* --- Stream Days card header (title + pill on right) --- */

#creditsSection .stream-days-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

#creditsSection .stream-days-header-row h3 {
  margin: 0;
}

/* The toggle pill on the right (e.g. "+ Add days ⚡1") */
.stream-days-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8); /* slate-ish border */
  background: transparent;
  color: #ffffff;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.stream-days-toggle:hover {
  background: rgba(15, 23, 42, 0.12); /* subtle hover like lfl-btn-secondary */
}

.stream-days-toggle.open {
  border-color: #2fa1ff;
  box-shadow: 0 0 0 1px rgba(47, 161, 255, 0.4);
}

.stream-days-label {
  opacity: 0.9;
}

.stream-days-icon {
  font-size: 0.9rem;
}


/* --- Collapsible area inside card (buy panel) --- */

.stream-days-panel {
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.6); /* same as lfl-buy-days-panel */
  background: rgba(15, 23, 42, 0.03);
  font-size: 0.9rem;
}

.stream-days-text {
  margin: 0 0 6px;
}


/* --- Buy button inside panel --- */

.stream-days-buy-btn {
  display: inline-block;
  margin-bottom: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  border: none;
  background: #2f5bff;      /* blue like .lfl-btn-primary */
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}

.stream-days-buy-btn:hover {
  filter: brightness(1.05);
}

/* Small note under the button */
.stream-days-note {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.75;
}






/* Prevent long keys from overflowing on mobile */
.balance-label code {
  display: block;
  max-width: 100%;
  word-break: break-all;        /* hard-break long strings */
  overflow-wrap: anywhere;      /* modern browsers */
  white-space: normal;          /* allow wrapping */
  font-size: 14px;            /* optional: slightly smaller */
}



#activeProviderModeLabel.mode-value {
  cursor: pointer;
  user-select: none;
  text-decoration: underline;
}





.provider-toggle {
  display: flex;
  gap: 6px;
}

.provider-btn {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid #2a2a2a;
  background: #141414;
  color: #9aa0a6;
  cursor: pointer;
  font-size: 0.85em;
}

.provider-btn.active {
  background: #243447;   /* soft slate blue */
  color: #e6f0ff;        /* light text */
  border-color: #3b82c4; /* muted blue border */
}



/* Make cards collapsible (except Stream Days) */
.card:not(#creditsSection):not(.lfl-collapse) { overflow: hidden; }

.card:not(#creditsSection):not(.lfl-collapse) > h3 {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.card:not(#creditsSection):not(.lfl-collapse) > h3::after {
  content: "▶";
  font-size: 12px;
  opacity: 0.6;
  margin-left: auto;
  transition: transform 0.25s ease;
}

.card:not(#creditsSection):not(.lfl-collapse) > h3 + * {
  transition: max-height 0.3s ease, padding 0.25s ease;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.card.open:not(#creditsSection):not(.lfl-collapse) > h3 + * {
  max-height: 3000px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.card.open:not(#creditsSection):not(.lfl-collapse) > h3::after {
  transform: rotate(90deg);
}



.card:not(#creditsSection):not(.lfl-collapse) .card-body {
  transition: max-height 0.3s ease, padding 0.25s ease;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
}

.card.open:not(#creditsSection):not(.lfl-collapse) .card-body {
  max-height: 3000px;
  padding-top: 10px;
  padding-bottom: 10px;
}



/* LFL collapse system (Admin) */
.lfl-collapse .lfl-collapse-content[hidden] { display: none; }
.lfl-collapse.open .lfl-collapse-content { display: block; }

/* Optional: arrow indicator on the header */
.lfl-collapse .lfl-collapse-header {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.lfl-collapse .lfl-collapse-header::after {
  content: "▶";
  font-size: 12px;
  opacity: 0.6;
  margin-left: auto;
  transition: transform 0.25s ease;
}
.lfl-collapse.open .lfl-collapse-header::after {
  transform: rotate(90deg);
}

/* Never hide Stream Days (it isn't lfl-collapse anyway, but safe) */
#creditsSection .lfl-collapse-content { display: block !important; }


.provider-ingest {
  color: #4ade80;        /* nice soft green */
  font-weight: 600;
  background: rgba(74, 222, 128, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
}








/* 1) Allow the right column to actually shrink inside flex */
.provider-option,
.provider-right,
.tier-value {
  min-width: 0;
}

/* 2) Force long URLs/keys to wrap instead of blowing out the card */
.rtmp-text,
.key-text,
.endpoint-text,
.advanced-json {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 3) Make the JSON <pre> wrap on mobile (pre defaults to no wrapping) */
.advanced-json {
  white-space: pre-wrap;
}

/* 4) Mobile layout: stack left/right instead of squeezing */
@media (max-width: 700px) {
  .provider-option {
    flex-direction: column;
    align-items: stretch;
  }

  .provider-left,
  .provider-right {
    width: 100%;
  }

  .btn-topup {
    width: 100%;
  }
}



.tab-row {
  display: flex;
  align-items: center;
}

/* push ONLY tab4 to the right */
.tab-button[data-tab="tab4"] {
  margin-left: auto;
}


.btn-regenerate-key {
  background: #222;
  border: 1px solid #444;
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.btn-clear-key {
  background: transparent;
  border: 1px solid #333;
  color: #aaa;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
}

.btn-regenerate-key:hover { border-color: #666; }
.btn-clear-key:hover { border-color: #555; color: #ddd; }



.time-line {
  color: #00ff66;          /* green */
  font-weight: 600;        /* optional */
}



.howto-list a {
  color: #5db7ff; /* or your LFL link color */
  text-decoration: underline;
}

.howto-list a:visited {
  color: #5db7ff;
}

.howto-list a:hover {
  text-decoration: none;
}


.card p a,
.card .howto-list a {
  color: #5db7ff;
}




.provider-toggle { display: none; }



.provider-select {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: 6px;
}

/* label looks like your existing provider button */
.provider-label {
  pointer-events: none; /* not clickable */
  cursor: default;
}

/* the caret is the only clickable thing */
.provider-caret {
  border: 1px solid #333;
  background: transparent;
  border-radius: 8px;
  padding: 6px 10px;
  line-height: 1;
  cursor: pointer;
}

.provider-caret:hover {
  background: rgba(255,255,255,0.06);
}

/* dropdown panel */
.provider-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  display: none;
  z-index: 999;
  background: #111;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 6px;
}

.provider-menu.open { display: block; }

/* dropdown items */
.provider-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.provider-item:hover {
  background: rgba(255,255,255,0.06);
}

.db-row { margin: 2px 0; }
.db-label { margin-bottom: 0; line-height: 1.2; }
.db-value { margin-top: 0; line-height: 1.2; }



.lfl-info-row code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;   /* modern + best */
  word-break: break-word;    /* fallback */
  white-space: normal;       /* override nowrap */
}


.auto-activate-btn {
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  line-height: 1.5;
}
.auto-activate-btn.on {
  border-color: rgba(0,255,0,0.25);
}




.live-dot {
  border:0;
  background:none;
  font-size:18px;
  cursor:pointer;
}

.live-dot.checking {
  animation: dotblink 1s infinite;
}

@keyframes dotblink {
  0% { opacity:1; }
  50% { opacity:0.2; }
  100% { opacity:1; }
}