/* ============================================================
   Skeleton overrides — fixes for captured widgets whose runtime
   JS isn't present, so they render in an odd/expanded state.
   Loaded AFTER skygold.css (see index.html) so these win.
   ============================================================ */

/* angular-mydatepicker (<my-date-picker>): the library sizes `.mydp` and
   toggles the calendar via JS at runtime. In the static skeleton there is no
   JS, so `.mydp` (with its absolutely-positioned `.selection` + table layout)
   collapses/expands oddly and reserves extra vertical space. Force the field
   to render as a plain input row. Applies to every date picker (bet-list,
   reports, etc.). */
my-date-picker { display: block !important; }

my-date-picker .mydp {
  display: block !important;
  width: 100% !important;
  height: 38px !important;
  line-height: normal !important;
  border: 0 !important;
}

my-date-picker .selectiongroup {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 38px !important;
  background: #fff !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
}

my-date-picker .selection {
  position: static !important;
  display: block !important;
  flex: 1 1 auto !important;
  height: 36px !important;
  border: 0 !important;
  padding-left: 8px !important;
}

my-date-picker .selbtngroup {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
}

/* The calendar overlay panel should never take space in the skeleton. */
my-date-picker .selector { display: none !important; }

/* ── Clean tab styling for all built admin pages (settings, casino, reports,
   affiliate, compliance, per-entity settings, …). Skygold navy/gold look, and
   on narrow screens the tab strip scrolls horizontally instead of wrapping into
   many rows. Loaded last so it wins over Bootstrap's default .nav-tabs. ── */
.nav-tabs {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 2px solid #dfe3e6 !important;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.nav-tabs::-webkit-scrollbar { height: 4px; }
.nav-tabs::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 2px; }

.nav-tabs .nav-link {
  white-space: nowrap;
  color: #2e4b5e;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 9px 15px;
  margin-bottom: -2px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tabs .nav-link:hover {
  color: #d99400;
  border-bottom-color: #ffcc2f !important;
}
.nav-tabs .nav-link.active {
  color: #243a48 !important;
  font-weight: 700;
  border-bottom: 3px solid #ffb80c !important;
}

/* Inner (nested) tab strips — the limit sub-tabs, etc. — a touch smaller. */
.nav-tabs-inner { border-bottom-width: 1px !important; margin-top: 2px; }
.nav-tabs-inner .nav-link { font-size: 12px; padding: 6px 12px; }

/* ── market-details: Bookmaker "Suspended" label anchoring ──────────────────
   The label (.suspend-bookmaker-external, absolute top/right/bottom:0) must
   anchor to its own runner <tbody>, not the whole table. position:relative on
   a <tbody> doesn't reliably establish a containing block via innerHTML render,
   so the label was resolving to the outer .table-responsive and sitting ~76px
   too high (over the header). A transform forces the tbody to be a containing
   block, pinning the label to its 46px suspended row like the original. */
app-market-details tbody.position-relative {
  position: relative !important;
  transform: translateZ(0);
}