/* Boss HQ demo: admin styles (Changelog, Issues, Settings). */
.ad-wrap {
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ad-lead {
  margin: 0;
  font-size: 13px;
}
.ad-grp {
  padding: 10px 18px 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.ad-rel .feed {
  margin-bottom: 6px;
}
.ad-rel .feed > li {
  border-bottom: 0;
  padding: 6px 18px;
  line-height: 1.5;
}
.ad-rel .feed > li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
  flex-shrink: 0;
}
.ad-tabs {
  margin: 0;
}
.ad-tabs.ad-sub {
  margin-top: -6px;
}
.ad-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ad-who .who-av {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
.ad-c-when {
  white-space: nowrap;
}
.ad-c-text {
  min-width: 280px;
  line-height: 1.45;
}
.ad-c-act {
  text-align: right;
  white-space: nowrap;
  width: 120px;
}
.ad-c-rank {
  width: 44px;
}
.ad-note {
  margin-top: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.ad-intro {
  padding: 10px 18px;
  border-bottom: 1px solid var(--hair);
}
.ad-collapsed {
  padding: 12px 18px;
}
.ad-crown {
  color: #c9a227;
  display: inline-flex;
  vertical-align: middle;
}
.ad-board .tbl-wrap {
  border: 0;
}
.ad-sethead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.ad-sethead h2 {
  font-size: 20px;
  margin: 0 0 2px;
}
.ad-cols {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ad-set {
  max-width: none;
}
.ad-prof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.ad-av,
.ad-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}
.ad-av {
  background: #6d92a5;
  color: #1b2226;
  font-weight: 700;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme='dark'] .ad-av {
  background: #8fb6c9;
  color: #10171a;
}
.ad-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ad-row .mini {
  flex: 1;
  min-width: 180px;
}
.ad-foot {
  margin-top: 10px;
}
.ad-hint {
  margin-top: 8px;
}
.ad-rm {
  margin-top: 6px;
}
.ad-banner {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--hair);
  border-radius: 6px;
  background: var(--info-bg);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.ad-switch {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  border: 0;
  background: var(--input);
  position: relative;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.15s;
}
.ad-switch i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.15s;
}
.ad-switch.on {
  background: var(--accent);
}
.ad-switch.on i {
  left: 18px;
}
@media (max-width: 640px) {
  .ad-row .btn {
    flex: 1 1 100%;
    justify-content: center;
  }
  .ad-prof {
    flex-direction: column;
    align-items: flex-start;
  }
  .ad-c-text {
    min-width: 220px;
  }
  .ad-sethead h2 {
    font-size: 18px;
  }
}

/* ---------- phone (m5) ---------- */
@media (max-width: 768px) {
  th.sortable {
    padding-top: 14px;
    padding-bottom: 14px;
  }
  td a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }
}

/* 769 to 1100: the strip leaves about 750px, so the issue table drops its Viewed as column (the Who cell and the report text still name the person) and tightens, instead of hiding Status and the actions behind a sideways scroll */
@media (min-width: 769px) and (max-width: 1100px) {
  .ad-wrap .tbl-cards th:nth-child(4),
  .ad-wrap .tbl-cards td:nth-child(4) {
    display: none;
  }
  .ad-wrap .tbl-cards th,
  .ad-wrap .tbl-cards td {
    padding-left: 8px;
    padding-right: 8px;
  }
  .ad-c-text {
    min-width: 150px;
  }
}

/* phone shell (up to 768, app.js:3921): the issue table becomes cards; 769 and up keeps the desktop table under the strip */
@media (max-width: 768px) {
  .ad-wrap .tbl-wrap:has(.tbl-cards) {
    overflow: visible;
  }
  .ad-wrap .tbl-cards thead {
    display: none;
  }
  .ad-wrap .tbl-cards,
  .ad-wrap .tbl-cards tbody,
  .ad-wrap .tbl-cards tr,
  .ad-wrap .tbl-cards td {
    display: block;
    width: 100%;
  }
  .ad-wrap .tbl-ct tr {
    display: flex;
    flex-direction: column;
  }
  .ad-wrap .tbl-cards tr {
    border: 1px solid var(--hair);
    border-radius: 6px;
    background: var(--card);
    margin: 0 0 10px;
    padding: 10px 12px;
  }
  .ad-wrap .tbl-cards td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    text-align: right;
    min-width: 0;
  }
  .ad-wrap .tbl-cards td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    flex: none;
  }
  .ad-wrap .tbl-cards td[data-label='']::before,
  .ad-wrap .tbl-cards td.empty::before {
    content: none;
  }
  .ad-wrap .tbl-ct td.card-t {
    order: -1;
    display: block;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    padding: 0 0 8px;
    margin: 0 0 4px;
    border-bottom: 1px solid var(--hair);
  }
  .ad-wrap .tbl-ct td.card-t::before {
    content: none;
  }
}