/* Eldritch Clockwork — Sidebar
   build: 2025-09-24
   Purpose: All sidebar styling consolidated
--------------------------------------------------------------------- */

/* ---------- Base Sidebar Structure ---------- */
#sidebar > .list-group { 
  background: transparent; 
  border: 0; 
  padding: 0; 
  margin: 0; 
  list-style: none;
}

#sidebar > .list-group > .list-group-item.sidebar {
  background: transparent; 
  border: 0; 
  padding: 0; 
  margin: 0 0 16px;
  list-style: none;
}

/* ---------- Panel Chrome for Each Sidebar Block ---------- */
/* Give the first child inside each sidebar block the EC panel shell */
#sidebar > .list-group > .list-group-item.sidebar > * {
  background: var(--panel, #161b1f);
  border: 1px solid var(--line, rgba(255,255,255,.10));
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* ---------- Pill Rows Inside Sidebar Panels ---------- */
/* Nice "pill rows" for nested lists (e.g., Who's Online entries) */
#sidebar > .list-group > .list-group-item.sidebar > .list-group > .list-group-item {
  background: var(--ec-row-bg, rgba(255,255,255,.06));
  border: 1px solid var(--ec-row-bdr, rgba(255,255,255,.12));
  border-radius: 10px;
  margin: 0 0 8px;
  padding: 12px;
  box-shadow: none;
}

#sidebar > .list-group > .list-group-item.sidebar > .list-group > .list-group-item:last-child {
  margin-bottom: 0;
}

/* ---------- Table Styling in Sidebar ---------- */
/* Remove Bootstrap shine/gradients and apply pill styling */
#sidebar .list-group-item,
#sidebar .table,
#sidebar .table th,
#sidebar .table td {
  background: var(--panel2, #242424);
  background-image: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,.08);
}

#sidebar .table > tbody > tr > th,
#sidebar .table > tbody > tr > td {
  border-top-color: rgba(255,255,255,.08);
}

/* Soft rounded row "pills" for the two-column table */
#sidebar .table {
  border-collapse: separate;
  border-spacing: 0;
}

#sidebar .table > tbody > tr > th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

#sidebar .table > tbody > tr > td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* ---------- EC Panel Tables in Sidebar ---------- */
#sidebar .ec-panel .table {
  margin: 8px 0 0;
  width: 100%;
  background: transparent;
  border-collapse: separate;
  border-spacing: 0;
}

#sidebar .ec-panel .table > tbody > tr > th,
#sidebar .ec-panel .table > tbody > tr > td {
  background: var(--panel2, rgba(255,255,255,.04));
  color: var(--text, #e7ecef);
  border: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px;
  line-height: 1.25;
  vertical-align: middle;
  background-image: none !important;
  box-shadow: none !important;
}

/* Pill edges for each row */
#sidebar .ec-panel .table > tbody > tr > th:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  width: 36%;
  font-weight: 700;
  opacity: .95;
  border-right-color: rgba(255,255,255,.06);
}

#sidebar .ec-panel .table > tbody > tr > td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-left-color: rgba(0,0,0,0);
}

/* Condensed table spacing */
#sidebar .ec-panel .table.table-condensed > tbody > tr > th,
#sidebar .ec-panel .table.table-condensed > tbody > tr > td {
  padding: 8px 10px;
}

/* ---------- List Group Styling ---------- */
/* Optional: alternate row tint for list items */
#sidebar .list-group-item.striped {
  background: rgba(255,255,255,.03);
}

/* Remove Bootstrap's top border/shadow from compact info tables */
#sidebar .ec-panel .table > tbody > tr > th,
#sidebar .ec-panel .table > tbody > tr > td {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* ---------- Feed Items (Recent Messages, etc.) ---------- */
#sidebar .feed-mixed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#sidebar .feed-mixed .feed-item {
  background: var(--ec-row-bg, rgba(255,255,255,.06));
  border: 1px solid var(--ec-row-bdr, rgba(255,255,255,.12));
  border-radius: 12px;
  margin: 0 0 8px;
  padding: 10px 12px;
  box-shadow: none;
  list-style: none;
}

#sidebar .feed-mixed .feed-item:last-child {
  margin-bottom: 0;
}

#sidebar .feed-mixed > .feed-item .row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#sidebar .feed-mixed > .feed-item .row1 .left {
  min-width: 0;
}

#sidebar .feed-mixed > .feed-item .title {
  font-weight: 600;
}

#sidebar .feed-mixed > .feed-item time.dt {
  opacity: .9;
}

#sidebar .feed-mixed .feed-item a {
  color: var(--accent2, #00e0ff);
  text-decoration: none;
}

#sidebar .feed-mixed .feed-item a:hover {
  text-decoration: underline;
}

/* ---------- Responsive Sidebar ---------- */
.sidebar-offcanvas .ec-panel {
    margin-bottom: 20px;
}

.sidebar-offcanvas .ec-panel:last-child {
    margin-bottom: 0;
}

/* ---------- Responsive Adjustments ---------- */
@media (max-width: 480px) {
  #sidebar .feed-mixed .feed-item,
  #sidebar .list-group > .list-group-item,
  #sidebar .ec-panel .table > tbody > tr > th,
  #sidebar .ec-panel .table > tbody > tr > td {
    padding: 9px 10px;
  }
}

/* Kill the outer pill just for this panel */
.feed-site-news[data-version="2025-10-07d"] .feed-item{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0;                 /* no inner padding on the LI */
}

/* Keep spacing between items */
.feed-site-news[data-version="2025-10-07d"] .feed-item + .feed-item{
  margin-top: 6px;
}

/* Belt & suspenders: some themes add decoration via pseudo-elements */
.feed-site-news[data-version="2025-10-07d"] .feed-item::before,
.feed-site-news[data-version="2025-10-07d"] .feed-item::after{
  content: none !important;
}

/* tighter gap between pills */
.feed-site-news[data-version="2025-10-07d"] .feed-item + .feed-item{
  margin-top: 4px;   /* was 6px */
}

/* title at 16px (keep date at 12px) */
.feed-site-news[data-version="2025-10-07d"] .title{
  font-size: 16px;            /* was inherited ~14px */
  font-weight: 700;
  opacity: 0.95;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* compact mode: scale title down a bit so 3 items still fit */
.feed-site-news[data-version="2025-10-07d"].compact .title{
  font-size: 16px;
}