/* ==========================================================================
   anthill.css - JoeAnt.com Anthill (hill/) interface
   Sits on top of the front end's Bootstrap 3.3.6 (/css3/bootstraps.css).
   Everything the old sliced corner/tab/shading GIFs did is plain CSS here.
   ========================================================================== */

:root {
  --ah-blue: #336699;        /* JoeAnt brand blue (logo, links, old tab bar) */
  --ah-blue-dark: #24496e;
  --ah-blue-mid: #8eb3d9;    /* old page background */
  --ah-blue-light: #bcd2e9;  /* old table header cells */
  --ah-blue-pale: #e9f0f8;   /* old table body cells */
  --ah-red: #990000;         /* old status / table text */
  --ah-orange: #ffa500;      /* front-end call-to-action */
  --ah-peach: #ffe3c4;       /* old #FFCC99 form panels, softened */
  --ah-peach-border: #f3c58f;
  --ah-ink: #1f2933;
  --ah-muted: #5f6b7a;
  --ah-line: #d7e2ee;
  --ah-bg: #f2f6fb;
  --ah-card: #ffffff;
  --ah-radius: 10px;
  --ah-shadow: 0 1px 2px rgba(20, 40, 70, .06), 0 4px 14px rgba(20, 40, 70, .08);
}

/* ---- Page ---------------------------------------------------------------- */
body.ah {
  background: var(--ah-bg) linear-gradient(180deg, #dfe9f5 0, var(--ah-bg) 320px) no-repeat;
  color: var(--ah-ink);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.ah a { color: var(--ah-blue); }
.ah a:hover, .ah a:focus { color: var(--ah-blue-dark); }
.ah :focus-visible { outline: 3px solid rgba(255, 165, 0, .85); outline-offset: 2px; }
.ah-skip {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--ah-blue); color: #fff !important; padding: 8px 14px; border-radius: 0 0 6px 0;
}
.ah-skip:focus { left: 0; }
.ah-main { flex: 1 0 auto; padding-top: 18px; padding-bottom: 32px; outline: 0; }
.ah-narrow { max-width: 820px; }
.ah h1, .ah .ah-title { font-size: 24px; margin: 0 0 14px; color: var(--ah-blue-dark); font-weight: 700; }
.ah h2 { font-size: 19px; margin: 18px 0 10px; color: var(--ah-blue-dark); font-weight: 700; }
.ah h3 { font-size: 16px; margin: 14px 0 8px; font-weight: 700; }
.ah-muted, .ah .text-muted { color: var(--ah-muted); }
.ah-back { margin: 0 0 12px; font-size: 14px; }
.ah img { max-width: 100%; height: auto; }

/* ---- Header -------------------------------------------------------------- */
.ah-navbar.navbar-default {
  background: #fff;
  border: 0;
  border-bottom: 3px solid var(--ah-blue);
  border-radius: 0;
  margin-bottom: 0;
  box-shadow: 0 2px 10px rgba(20, 40, 70, .08);
}
.ah-brand.navbar-brand { height: auto; padding: 6px 15px; display: flex; align-items: center; gap: 8px; }
.ah-brand img { width: 104px; height: auto; }
.ah-brand-sub {
  font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 13px;
  color: #fff; background: var(--ah-blue); padding: 2px 8px; border-radius: 999px;
}
.ah-navbar .navbar-toggle { margin-top: 18px; }
.ah-navbar .navbar-nav > li > a { color: var(--ah-blue); font-weight: 600; }
@media (min-width: 768px) {
  .ah-navbar .navbar-nav > li > a { padding-top: 22px; padding-bottom: 22px; }
  .ah-navbar .navbar-form { margin-top: 15px; }
  .ah-welcome.navbar-text { float: right; margin: 22px 12px 0 0; }
}
.ah-navbar .navbar-nav > .active > a,
.ah-navbar .navbar-nav > .active > a:hover,
.ah-navbar .navbar-nav > .active > a:focus { background: transparent; color: var(--ah-ink); box-shadow: inset 0 -3px 0 var(--ah-orange); }
.ah-search { display: flex; gap: 6px; }
.ah-search .form-control { width: 190px; }
.ah-welcome { color: var(--ah-muted); }
@media (max-width: 767px) {
  .ah-search { padding: 0 15px; margin: 8px 0; border: 0; box-shadow: none; }
  .ah-search .form-control { flex: 1; width: auto; }
  .ah-welcome.navbar-text { margin: 4px 15px 12px; }
}

/* ---- Footer -------------------------------------------------------------- */
.ah-footer { flex-shrink: 0; background: var(--ah-blue); color: #dce8f5; padding: 18px 0; font-size: 13px; text-align: center; }
.ah-footer p { margin: 0; }
.ah-footer a { color: #fff !important; text-decoration: underline; }

/* ---- Cards (replace the bordered table boxes) ----------------------------- */
.ah-card {
  background: var(--ah-card);
  border: 1px solid var(--ah-line);
  border-radius: var(--ah-radius);
  box-shadow: var(--ah-shadow);
  margin-bottom: 18px;
  overflow: hidden;
}
.ah-card-head {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 10px 14px;
  background: linear-gradient(180deg, #4a7fb3 0, var(--ah-blue) 100%);
  color: #fff;
}
.ah-card-head h2, .ah-card-head h3, .ah-card-head .ah-card-title { margin: 0; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.ah-card-body { padding: 14px; }
.ah-card-body > :last-child { margin-bottom: 0; }
.ah-card-foot { padding: 10px 14px; background: var(--ah-blue-pale); border-top: 1px solid var(--ah-line); }
.ah-card.ah-warm { background: #fffaf3; border-color: var(--ah-peach-border); }
.ah-card.ah-warm > .ah-card-head { background: linear-gradient(180deg, #ffb84d 0, var(--ah-orange) 100%); color: #3a2400; }
.ah-card.ah-warm > .ah-card-head h2, .ah-card.ah-warm > .ah-card-head h3, .ah-card.ah-warm > .ah-card-head .ah-card-title { color: #3a2400; }
.ah-solo { max-width: 980px; }

.ah-linklist { list-style: none; margin: 0; padding: 0; }
.ah-linklist li { padding: 3px 0; border-bottom: 1px dashed #e6edf5; }
.ah-linklist li:last-child { border-bottom: 0; }
.ah-linklist .ah-off { color: var(--ah-muted); }
.ah-badge { display: inline-block; min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; background: var(--ah-orange); color: #3a2400; }
.ah-badge.ah-zero { background: #e3e9f0; color: var(--ah-muted); }

/* "?" help toggles (replace the old hover tooltip script) */
.ah-help { display: inline-block; position: relative; vertical-align: middle; }
.ah-help > summary {
  list-style: none; cursor: pointer; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255, 255, 255, .25); color: inherit; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
}
.ah-help > summary::-webkit-details-marker { display: none; }
.ah-help-body {
  position: absolute; right: 0; top: 26px; z-index: 30; width: 260px; max-width: 80vw;
  background: var(--ah-ink); color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 13px; font-weight: 400; line-height: 1.45;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.ah-card-body .ah-help > summary, .ah-main > .ah-help > summary { background: var(--ah-blue-light); color: var(--ah-blue-dark); }

/* ---- Dashboard (My Anthill) ------------------------------------------------ */
.ah-dash { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.ah-sidebar-toggle { display: none; }
@media (max-width: 991px) {
  .ah-dash { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ah-sidebar-toggle {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    background: #fff; border: 1px solid var(--ah-line); border-radius: var(--ah-radius); box-shadow: var(--ah-shadow);
    padding: 10px 14px; font-weight: 700; color: var(--ah-blue-dark);
  }
  .ah-sidebar-toggle .ah-chev { transition: transform .2s; }
  .ah-sidebar-toggle[aria-expanded="true"] .ah-chev { transform: rotate(180deg); }
  .ah-sidebar { display: none; }
  .ah-sidebar.is-open { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .ah-sidebar.is-open .ah-card { margin-bottom: 0; }
  .ah-dash-main { order: 2; }
}
.ah-topics li a { font-weight: 600; }
.ah-staff .ah-linklist a { font-weight: 600; }
.ah-editor-search { display: flex; gap: 6px; margin-top: 8px; }
.ah-editor-search .form-control { flex: 1; min-width: 0; }

/* Tabs */
.ah-tabs {
  display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 8px 8px 0; list-style: none;
  background: linear-gradient(180deg, var(--ah-blue-pale) 0, #dbe7f3 100%);
  border-bottom: 1px solid var(--ah-line);
}
.ah-tab {
  appearance: none; border: 1px solid transparent; border-bottom: 0;
  background: transparent; color: var(--ah-blue); font-weight: 700; font-size: 14px;
  padding: 9px 14px; border-radius: 8px 8px 0 0; cursor: pointer; position: relative; top: 1px;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.ah-tab:hover { background: rgba(255, 255, 255, .6); }
.ah-tab[aria-selected="true"] { background: #fff; color: var(--ah-ink); border-color: var(--ah-line); box-shadow: inset 0 3px 0 var(--ah-orange); }
.ah-tab[aria-disabled="true"] { color: #8a96a3; cursor: not-allowed; background: transparent; font-weight: 600; }
.ah-tab svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 600px) {
  .ah-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .ah-tab { padding: 8px 11px; font-size: 13px; }
}
.ah-panel { position: relative; min-height: 260px; padding: 18px; }
.ah-panel:focus { outline: 0; }
.ah-panel[aria-busy="true"]::after {
  content: ""; position: absolute; top: 18px; right: 18px; width: 22px; height: 22px;
  border: 3px solid var(--ah-blue-light); border-top-color: var(--ah-blue); border-radius: 50%;
  animation: ah-spin .8s linear infinite;
}
.ah-panel[aria-busy="true"] > * { opacity: .5; transition: opacity .15s; }
@keyframes ah-spin { to { transform: rotate(360deg); } }
.ah-welcome-art { display: block; margin: 0 auto; max-width: 400px; }
.ah-online { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.ah-online a { background: var(--ah-blue-pale); border-radius: 999px; padding: 2px 10px; font-weight: 600; text-decoration: none; }

/* ---- Tables (replace the fixed-width coloured cell tables) --------------- */
.ah-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--ah-line); border-radius: 8px; margin-bottom: 16px; background: #fff; }
.ah-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }
.ah-table th { background: var(--ah-blue-light); color: var(--ah-blue-dark); font-weight: 700; text-align: left; padding: 8px 10px; white-space: nowrap; }
.ah-table td { padding: 8px 10px; border-top: 1px solid var(--ah-line); vertical-align: top; }
.ah-table tbody tr:nth-child(even) td { background: #f8fbfe; }
.ah-table tbody tr:hover td { background: var(--ah-blue-pale); }
.ah-table .ah-status { color: var(--ah-red); font-weight: 600; }
.ah-table tr.ah-new td { background: #fff4e5 !important; color: var(--ah-red); }
.ah-table td.ah-actions { white-space: nowrap; text-align: right; }
.ah-table form { display: inline; margin: 0; }
.ah-table .ah-kv th { width: 34%; background: var(--ah-blue-pale); white-space: normal; }
/* Stacked rows on phones: each cell shows its column name (data-label) */
@media (max-width: 640px) {
  .ah-table-wrap.ah-stack { border: 0; background: transparent; overflow: visible; }
  .ah-stack .ah-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ah-stack .ah-table, .ah-stack .ah-table tbody, .ah-stack .ah-table tr, .ah-stack .ah-table td { display: block; width: 100%; }
  .ah-stack .ah-table tr { background: #fff; border: 1px solid var(--ah-line); border-radius: 8px; margin-bottom: 10px; box-shadow: var(--ah-shadow); overflow: hidden; }
  .ah-stack .ah-table td { border-top: 1px solid #eef3f8; display: flex; gap: 10px; background: #fff !important; }
  .ah-stack .ah-table td:first-child { border-top: 0; }
  .ah-stack .ah-table td[data-label]::before { content: attr(data-label); flex: 0 0 38%; font-weight: 700; color: var(--ah-blue-dark); }
  .ah-stack .ah-table td.ah-actions { justify-content: flex-end; text-align: left; }
  .ah-stack .ah-table td.ah-actions::before { content: none; }
}

/* ---- Forms -------------------------------------------------------------------- */
.ah-form { max-width: 760px; }
.ah-form .form-group { margin-bottom: 16px; }
.ah-form label, .ah-label { font-weight: 700; color: var(--ah-ink); }
.ah-form .help-block, .ah-hint { color: var(--ah-muted); font-size: 13px; margin: 4px 0 0; }
.ah-form textarea.form-control { min-height: 110px; }
.ah .form-control { border-radius: 6px; border-color: #c4d3e3; box-shadow: none; }
.ah .form-control:focus { border-color: var(--ah-blue); box-shadow: 0 0 0 3px rgba(51, 102, 153, .18); }
.ah-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; }
.ah-checks label, .ah-radio-row label { font-weight: 500; display: flex; align-items: center; gap: 8px; margin: 0; }
.ah-checks input, .ah-radio-row input { margin: 0; }
.ah-radio-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ah-radio-row label { padding: 8px 12px; border: 1px solid var(--ah-line); border-radius: 8px; background: #fff; cursor: pointer; }
.ah-radio-row label:has(input:checked) { border-color: var(--ah-blue); background: var(--ah-blue-pale); }
.ah-actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ah-required { color: var(--ah-red); }
.ah fieldset.ah-fieldset { border: 1px solid var(--ah-line); border-radius: 8px; padding: 12px 14px 4px; margin: 0 0 16px; }
.ah fieldset.ah-fieldset > legend { width: auto; border: 0; padding: 0 6px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ah-blue-dark); }
.ah .btn { border-radius: 6px; font-weight: 600; }
.ah .btn-primary { background: var(--ah-blue); border-color: var(--ah-blue-dark); }
.ah .btn-primary:hover, .ah .btn-primary:focus { background: var(--ah-blue-dark); }
.ah .btn-cta { background: var(--ah-orange); border-color: #e69500; color: #2b1b00; }
.ah .btn-cta:hover, .ah .btn-cta:focus { background: #ff9a00; color: #2b1b00; }
.ah .btn-xs { font-size: 12px; }
@media (max-width: 480px) {
  .ah-actions-row .btn { flex: 1 1 auto; }
}

/* ---- Messages / notices --------------------------------------------------- */
.ah-note { border-radius: 8px; padding: 10px 14px; margin: 0 0 14px; background: var(--ah-blue-pale); border-left: 4px solid var(--ah-blue); }
.ah-note.ah-warn { background: #fff4e5; border-left-color: var(--ah-orange); }
.ah-note.ah-error { background: #fdecec; border-left-color: var(--ah-red); color: #6b0000; }
.ah-note.ah-ok { background: #e9f7ee; border-left-color: #2e8b57; }

/* ---- Category (ecat) ------------------------------------------------------ */
.ah-crumbs { font-size: 14px; margin: 0 0 12px; }
.ah-crumbs a { font-weight: 600; }
.ah-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ah-toolbar a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ah-line); font-weight: 600; font-size: 13px; text-decoration: none; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.ah-toolbar a:hover { background: var(--ah-blue-pale); }
.ah-cat { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 767px) { .ah-cat { grid-template-columns: minmax(0, 1fr); } .ah-cat-side { order: 2; } }
.ah-cat-side .ah-card { background: #fffaf3; border-color: var(--ah-peach-border); }
.ah-dig { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.ah-dig label { margin: 0; font-weight: 800; color: var(--ah-blue-dark); }
.ah-dig .form-control { flex: 1; min-width: 0; }
.ah-count { color: var(--ah-red); font-size: 13px; margin: 0 0 8px; }
.ah-listing { display: grid; grid-template-columns: 64px minmax(0, 1fr) 210px; gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--ah-line); }
.ah-listing:last-child { border-bottom: 0; }
.ah-listing-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; word-break: break-word; }
.ah-listing-desc { margin: 0; }
.ah-listing-url { color: #8a96a3; font-size: 13px; word-break: break-all; }
.ah-listing-links { font-size: 13px; display: flex; flex-direction: column; gap: 2px; }
.ah-listing-flag { color: var(--ah-red); font-size: 12px; font-weight: 600; }
.ah-listing-meta { font-size: 12px; color: var(--ah-red); }
@media (max-width: 640px) {
  .ah-listing { grid-template-columns: minmax(0, 1fr); }
  .ah-listing-links { flex-direction: row; gap: 12px; order: 3; }
}
/* rating bars: one dark-red bar per star level */
.ah-rating { display: inline-flex; gap: 2px; align-items: center; margin-bottom: 6px; }
.ah-rating i { display: block; width: 8px; height: 12px; border-radius: 2px; background: #ccd4dc; }
.ah-rating i.on { background: var(--ah-red); }
/* feature chips: Audio Chat Downloads E-commerce Games Membership Shopping Video */
.ah-feats { display: flex; flex-wrap: wrap; gap: 3px; margin: 0 0 6px; padding: 0; list-style: none; }
.ah-feats li { font-size: 11px; font-weight: 700; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 4px; background: #e6ebf0; color: #a0aab4; }
.ah-feats li.on { background: var(--ah-blue); color: #fff; }
.ah-pager { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 16px 0 4px; }
.ah-pager a, .ah-pager strong { display: inline-block; min-width: 34px; padding: 5px 10px; border-radius: 6px; text-align: center; border: 1px solid var(--ah-line); background: #fff; text-decoration: none; }
.ah-pager strong { background: var(--ah-blue); color: #fff; border-color: var(--ah-blue); }

/* ---- Search results ------------------------------------------------------- */
.ah-results { list-style: none; margin: 0; padding: 0; }
.ah-results > li { padding: 12px 0; border-bottom: 1px solid var(--ah-line); }
.ah-results > li:last-child { border-bottom: 0; }
.ah-ext-search { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-ext-search a { padding: 3px 10px; border-radius: 999px; background: var(--ah-blue-pale); font-size: 13px; text-decoration: none; }

/* ---- Profile -------------------------------------------------------------- */
.ah-profile { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.ah-profile-pic { width: 150px; height: 150px; object-fit: cover; border-radius: 12px; border: 1px solid var(--ah-line); background: var(--ah-blue-pale); }
@media (max-width: 520px) { .ah-profile { grid-template-columns: minmax(0, 1fr); } }
.ah-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ah-stat { background: var(--ah-blue-pale); border-radius: 8px; padding: 10px 12px; }
.ah-stat b { display: block; font-size: 20px; color: var(--ah-blue-dark); }
.ah-stat span { font-size: 12px; color: var(--ah-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Messages ------------------------------------------------------------- */
.ah-message { white-space: pre-wrap; background: var(--ah-blue-pale); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
.ah-unread td { font-weight: 700; }

/* ---- Small helpers --------------------------------------------------------- */
.ah-inline-form { display: inline; }
.ah-break { word-break: break-word; overflow-wrap: anywhere; }
.ah-center { text-align: center; }
.ah-mt { margin-top: 14px; }
@media print { .ah-header, .ah-footer, .ah-sidebar, .ah-tabs, .ah-sidebar-toggle { display: none !important; } }
.ah .ah-w-auto { width: auto; max-width: 100%; }
.ah-guide { font-size: 12px; font-weight: 400; margin-left: 6px; }
.ah-avatar-empty { display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; font-size: 13px; }
.ah-stat b.ah-stat-sm { font-size: 15px; }
.ah-topic-name { color: var(--ah-blue); }

.ah-mt0{margin-top:0}
.ah-checks.ah-plain{list-style:none;padding:0}
.ah-listing-title{margin-top:0}

/* keep long URLs/topics from widening the page on phones */
.ah-main { min-width: 0; max-width: 100%; }
.ah-narrow { max-width: 820px; }
.ah-kv td, .ah-table td { overflow-wrap: anywhere; }

.ah .ah-table a.btn-primary, .ah .ah-table a.btn-danger, .ah .ah-table a.btn-success { color: #fff; }
table.ah-kv th { padding-right: 12px; vertical-align: top; white-space: nowrap; }
.ah a.btn.btn-primary, .ah a.btn.btn-danger, .ah a.btn.btn-success, .ah a.btn.btn-cta { color: #fff; }
@media (max-width: 767px) { .ah-main { width: 100%; } }
.ah-static h1,.ah-static h2{color:var(--ah-blue-dark)}
.ah-static .ah-card-body{line-height:1.6}