/* ═══════════════════════════════════════════════════════════════════════
   Dynamic Data Tabs — Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── App Container ─────────────────────────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-app {
  padding-top: 48px;
}

/* ─── Tabs Wrapper (relative container for search input) ────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs {
  position: relative;
}

/* ─── Tab List ──────────────────────────────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-list {
  border-bottom: 1px solid var(--cadn-dynamic-data-tabs-border-color-primary);
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 19px 12%;
}

@media (max-width: 767px) {
  #cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-list {
    align-items: center;
    border: none;
    flex-direction: column;
  }
}

/* ─── Individual Tab ────────────────────────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab {
  color: var(--cadn-dynamic-data-tabs-tab-color);
  cursor: pointer;
  display: flex;
  font-size: var(--cadn-dynamic-data-tabs-tab-font-size);
  font-weight: var(--cadn-dynamic-data-tabs-tab-font-weight);
  justify-content: center;
  line-height: 1.2;
  padding: 0 20px;
  position: relative;
}

/* Underline indicator (hidden by default) */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab:after {
  background-position: 50%;
  bottom: -20px;
  content: "";
  opacity: 0;
  position: absolute;
}

@media (max-width: 767px) {
  #cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab:after {
    bottom: 0;
  }
}

/* ─── Selected Tab ──────────────────────────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab_selected {
  color: var(--cadn-dynamic-data-tabs-tab-selected-color);
  font-weight: var(--cadn-dynamic-data-tabs-tab-selected-font-weight);
}

#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab_selected:after {
  background-color: var(--cadn-dynamic-data-tabs-accent-color);
  height: 3px;
  opacity: 1;
  transition: 0.3s;
  width: 100%;
}

@media (max-width: 767px) {
  #cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab {
    line-height: 1.2;
    margin-bottom: 17px;
    padding: 5px;
  }
}

/* ─── Tab Panel ─────────────────────────────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel {
  overflow-x: auto;
  overflow-y: hidden;
  transition: 0.3s;
}

/* ─── Table ─────────────────────────────────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table {
  border-collapse: collapse;
  margin-bottom: 16px;
}

/* Table Header */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table thead {
  border-bottom: 1px solid var(--cadn-dynamic-data-tabs-border-color-secondary);
}

#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table thead tr th {
  background-color: transparent;
  border: none;
  color: var(--cadn-dynamic-data-tabs-table-header-color);
  font-size: var(--cadn-dynamic-data-tabs-table-header-font-size);
  font-weight: var(--cadn-dynamic-data-tabs-table-header-font-weight);
  line-height: 1.2;
  padding: 0 24px;
  text-align: center;
  vertical-align: middle;
}

/* First header column left-aligned */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table thead tr th:first-child {
  text-align: start;
}

@media (max-width: 767px) {
  #cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table thead tr th {
    white-space: nowrap;
  }
}

/* Table Body Rows */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table tbody tr {
  background: none;
  border-bottom: 1px solid var(--cadn-dynamic-data-tabs-border-color-secondary);
  transition: 0.3s;
}

#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table tbody tr:hover {
  background: var(--cadn-dynamic-data-tabs-row-hover-color);
}

/* Table Data Cells */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table tbody tr td {
  background-color: transparent;
  border: none;
  color: var(--cadn-dynamic-data-tabs-table-data-cell-color);
  font-size: var(--cadn-dynamic-data-tabs-table-data-cell-font-size);
  font-weight: var(--cadn-dynamic-data-tabs-table-data-cell-font-weight);
  line-height: 1.2;
  padding: 12px 24px;
  text-align: center;
  vertical-align: middle;
}

/* First data column left-aligned */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table tbody tr td:first-child {
  text-align: start;
}

@media (max-width: 767px) {
  #cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table tbody tr td {
    white-space: nowrap;
  }
}

/* Row height */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table tr {
  height: var(--cadn-dynamic-data-tabs-row-height);
}

/* Bold text inside tables */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table b,
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel table strong {
  font-weight: 700;
}

/* ─── First Tab Panel Special Alignment (swap data) ─────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel:first-of-type tbody tr td:first-child {
  padding-left: 0;
  padding-right: 0;
  text-align: end;
}

#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel:first-of-type tbody tr td:nth-child(2) {
  padding-left: 0;
  padding-right: 0;
  text-align: start;
}

#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__tab-panel:first-of-type tbody tr td:nth-child(2) .fflag {
  margin-inline-start: -5px;
}

/* ─── Expand / Collapse Toggle Button ───────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__toggle {
  align-items: center;
  background: none !important;
  border: none;
  color: var(--cadn-dynamic-data-tabs-accent-color);
  cursor: pointer;
  display: flex;
  font-size: var(--cadn-dynamic-data-tabs-toggle-font-size);
  font-weight: var(--cadn-dynamic-data-tabs-toggle-font-weight);
  margin: 0 auto;
  outline: none !important;
  width: max-content;
}

/* ─── Search Input ──────────────────────────────────────────────────── */
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__search-input {
  border: 1px solid var(--cadn-dynamic-data-tabs-border-color-primary);
  border-radius: 4px;
  color: var(--cadn-dynamic-data-tabs-search-input-color);
  font-size: var(--cadn-dynamic-data-tabs-search-input-font-size);
  font-weight: var(--cadn-dynamic-data-tabs-search-input-font-weight);
  height: 48px;
  left: 0;
  margin: 0;
  max-width: 260px;
  outline: 0;
  position: absolute;
  top: 0;
  transform: translateY(-48px);
}

#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__search-input:active,
#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__search-input:focus {
  box-shadow: 0 0 0 4px var(--cadn-dynamic-data-tabs-search-input-focus-box-shadow-color);
}

#cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__search-input::placeholder {
  color: var(--cadn-dynamic-data-tabs-search-input-placeholder-color);
  font-size: var(--cadn-dynamic-data-tabs-search-input-font-size);
  font-weight: var(--cadn-dynamic-data-tabs-search-input-font-weight);
}

@media (max-width: 767px) {
  #cadn-dynamic-data-tabs-root .cadn-dynamic-data-tabs-tabs__search-input {
    max-width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Flag Sprites
   ═══════════════════════════════════════════════════════════════════════ */
.fflag {
  background-image: url(../images/flagSprite42.png);
  background-repeat: no-repeat;
  background-size: 100% 49494%;
  box-sizing: content-box;
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}

.fflag-CH { box-shadow: none !important; }
.fflag-ZA { background-position: left 0.2287%; }
.fflag-BR { background-position: center 0.4524%; }
.fflag-CA { background-position: center 0.6721%; }
.fflag-MX { background-position: center 0.8958%; }
.fflag-US { background-position: center 1.1162%; }
.fflag-CN { background-position: left 1.3379%; }
.fflag-HK { background-position: center 1.5589%; }
.fflag-JP { background-position: center 1.7805%; }
.fflag-SG { background-position: left 2.0047%; }
.fflag-CZ { background-position: left 2.2247%; }
.fflag-DK { background-position: center 2.4467%; }
.fflag-HU { background-position: center 2.6674%; }
.fflag-NO { background-position: center 2.8931%; }
.fflag-PL { background-position: center 3.1125%; }
.fflag-RU { background-position: center 3.3325%; }
.fflag-SE { background-position: center 3.5542%; }
.fflag-CH { background-position: center 3.7759%; }
.fflag-TR { background-position: center 4.0015%; }
.fflag-GB { background-position: center 4.2229%; }
.fflag-IL { background-position: center 4.441%; }
.fflag-AU { background-position: center 4.66663%; }
.fflag-NZ { background-position: center 4.8844%; }
.fflag-EU { background-position: center 5.1061%; }

/* Flag sizes */
.fflag.ff-sm { height: 11px; width: 18px; }
.fflag.ff-md { height: 17px; width: 27px; }
.fflag.ff-lg { height: 27px; width: 42px; }
.fflag.ff-xl { height: 37px; width: 60px; }

/* Round flags */
.ff-round {
  background-clip: content-box;
  background-size: 160%;
  border-radius: 50%;
}
.ff-round.ff-sm { height: 12px; width: 12px; }
.ff-round.ff-md { height: 18px; width: 18px; }
.ff-round.ff-lg { height: 24px; width: 24px; }
.ff-round.ff-xl { height: 32px; width: 32px; }