/* ============================================================
   Data ▸ Table Status — desktop redesign
   Scoped entirely to #tab-data-tools .data-status so none of these
   generic class names leak into the rest of the app. Class names are
   ds- prefixed and CSS vars are --ds- prefixed for the same reason.
   ============================================================ */
#tab-data-tools .datatools-shell.data-status {
  --ds-well:#EEF3F9; --ds-surface:#FFFFFF; --ds-line:rgba(27,66,120,.14);
  --ds-ink:#16294A; --ds-ink-dim:#4A6386; --ds-ink-faint:#8298B5;
  --ds-cyan:#46B7E8; --ds-cyan-mid:#1FA0D9; --ds-cyan-deep:#1180B6;
  --ds-green:#179C63; --ds-amber:#C57E12; --ds-red:#D63B57; --ds-grey:#94A6C0;
  --ds-mono:'JetBrains Mono',ui-monospace,monospace;
  --ds-display:'Archivo',sans-serif;
  --ds-r:14px;
  --ds-shadow:0 1px 2px rgba(22,41,74,.05),0 6px 18px rgba(22,41,74,.09);
  max-width:1160px;
  margin:0 auto;
  padding:1.25rem clamp(12px,2.5vw,28px) 3rem;
  color:var(--ds-ink);
  font-size:14px;
}

/* Hero tile (dark gradient header + KPI band) */
#tab-data-tools .ds-hero-tile{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:22px;box-shadow:0 10px 30px rgba(11,23,48,.18);overflow:hidden;margin-bottom:22px}
#tab-data-tools .ds-page-head{position:relative;background:linear-gradient(135deg,#1C3A6A 0%,#13264A 45%,#0B1730 100%);padding:24px 26px}
#tab-data-tools .ds-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#7FB4E0;margin-bottom:5px}
#tab-data-tools .ds-h1{font-family:var(--ds-display);font-weight:800;font-size:27px;letter-spacing:.01em;line-height:1.1;color:#fff;margin:0}
#tab-data-tools .ds-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap}
#tab-data-tools .ds-scope-chips{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
#tab-data-tools .ds-scope-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:7px 12px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
#tab-data-tools .ds-scope-chip i{font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.09em;color:#8FA9CC}
#tab-data-tools .ds-scope-chip .ds-live{width:8px;height:8px;border-radius:50%;background:#37D98E;box-shadow:0 0 0 0 rgba(55,217,142,.6);animation:dsPulse 2.2s infinite}
@keyframes dsPulse{0%{box-shadow:0 0 0 0 rgba(55,217,142,.5)}70%{box-shadow:0 0 0 7px rgba(55,217,142,0)}100%{box-shadow:0 0 0 0 rgba(55,217,142,0)}}
#tab-data-tools .ds-fresh-pills{display:flex;gap:8px;flex-wrap:wrap}
#tab-data-tools .ds-fp{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#DCE8F6;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 12px}
#tab-data-tools .ds-fp .ds-d{width:8px;height:8px;border-radius:50%}
#tab-data-tools .ds-fp b{font-family:var(--ds-mono);font-weight:700;color:#fff}
#tab-data-tools .ds-fp.ds-s-up .ds-d{background:#37D98E}
#tab-data-tools .ds-fp.ds-s-age .ds-d{background:#F4B43F}
#tab-data-tools .ds-fp.ds-s-stale .ds-d{background:#FF6B82}
#tab-data-tools .ds-fp.ds-s-none .ds-d{background:#9AAAC2}

/* KPI band */
#tab-data-tools .ds-kpi-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;padding:18px 20px;background:var(--ds-surface)}
#tab-data-tools .ds-kpi{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r);padding:14px 16px;position:relative;overflow:hidden;box-shadow:var(--ds-shadow)}
#tab-data-tools .ds-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ds-accent,var(--ds-cyan));border-radius:3px 0 0 3px}
#tab-data-tools .ds-kpi .ds-v{font-family:var(--ds-display);font-weight:800;font-size:24px;line-height:1.1;letter-spacing:-.02em;color:var(--ds-ink)}
#tab-data-tools .ds-kpi .ds-l{font-size:11px;color:var(--ds-ink-dim);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;font-weight:500}
#tab-data-tools .ds-kpi .ds-meta{font-size:11px;margin-top:6px;color:var(--ds-ink-faint);font-family:var(--ds-mono)}
#tab-data-tools .ds-kpi .ds-meta.bad{color:var(--ds-red)}
#tab-data-tools .ds-kpi .ds-meta.up{color:var(--ds-green)}
#tab-data-tools .ds-barstrip{display:flex;height:9px;border-radius:5px;overflow:hidden;margin-top:11px;background:var(--ds-well)}
#tab-data-tools .ds-barstrip i{display:block;height:100%}

/* Table panel */
#tab-data-tools .ds-panel{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:var(--ds-r);box-shadow:var(--ds-shadow);overflow:hidden;margin-bottom:22px}
#tab-data-tools .ds-tile-head{position:relative;display:flex;align-items:center;height:56px;padding:0 14px;background:linear-gradient(90deg,#26508A 0%,#15294E 38%,#0A1428 72%,#0F1E3A 100%)}
#tab-data-tools .ds-th-left{display:flex;flex-direction:column;font-size:10px;line-height:1.4;color:#8FA9CC;padding-left:4px}
#tab-data-tools .ds-th-left b{color:#C8DCF4;font-weight:600}
#tab-data-tools .ds-th-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;white-space:nowrap}
#tab-data-tools .ds-th-center h2{font-family:var(--ds-display);font-weight:800;font-size:16px;color:#fff;letter-spacing:.01em;margin:0}
#tab-data-tools .ds-th-icon{display:flex;color:var(--ds-cyan)}
#tab-data-tools .ds-th-actions{margin-left:auto;display:flex;gap:8px}
#tab-data-tools .ds-th-btn{height:34px;display:inline-flex;align-items:center;gap:6px;padding:0 12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.3);border-radius:9px;color:#fff;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}
#tab-data-tools .ds-th-btn:hover{background:rgba(255,255,255,.16)}

/* Toolbar (search + filter chips) */
#tab-data-tools .ds-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 16px 4px}
#tab-data-tools .ds-search{display:flex;align-items:center;gap:10px;flex:1;min-width:200px;background:var(--ds-well);border:1px solid var(--ds-line);border-radius:11px;padding:10px 13px}
#tab-data-tools .ds-search svg{flex:none;color:var(--ds-ink-faint)}
#tab-data-tools .ds-search input{flex:1;background:none;border:none;outline:none;color:var(--ds-ink);font-size:13px;font-family:inherit}
#tab-data-tools .ds-search input::placeholder{color:var(--ds-ink-faint)}
#tab-data-tools .ds-fchips{display:flex;gap:6px;flex-wrap:wrap}
#tab-data-tools .ds-fchip{font-size:12px;font-weight:600;color:var(--ds-ink-dim);background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:9px;padding:9px 12px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit}
#tab-data-tools .ds-fchip .ds-c{font-family:var(--ds-mono);font-size:10.5px;color:var(--ds-ink-faint)}
#tab-data-tools .ds-fchip.active{background:#13264A;color:#fff;border-color:transparent}
#tab-data-tools .ds-fchip.active .ds-c{color:rgba(255,255,255,.7)}
#tab-data-tools .ds-fchip.active.ds-s-up{box-shadow:inset 0 -2px 0 var(--ds-green)}
#tab-data-tools .ds-fchip.active.ds-s-age{box-shadow:inset 0 -2px 0 var(--ds-amber)}
#tab-data-tools .ds-fchip.active.ds-s-stale{box-shadow:inset 0 -2px 0 var(--ds-red)}
#tab-data-tools .ds-fchip.active.ds-s-none{box-shadow:inset 0 -2px 0 var(--ds-grey)}

/* List table */
#tab-data-tools .ds-table-wrap{overflow:auto;max-height:620px}
#tab-data-tools table.ds-list{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
#tab-data-tools table.ds-list thead th{position:sticky;top:0;background:var(--ds-well);color:var(--ds-ink-dim);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:11px 14px;white-space:nowrap;border-bottom:1px solid var(--ds-line);z-index:1}
#tab-data-tools table.ds-list thead th.r{text-align:right}
#tab-data-tools table.ds-list thead th.ds-th-sort{cursor:pointer;user-select:none}
#tab-data-tools table.ds-list thead th.ds-th-sort:hover{color:var(--ds-ink)}
#tab-data-tools table.ds-list thead th.ds-sorted{color:var(--ds-cyan-deep)}
#tab-data-tools table.ds-list thead th.ds-sorted .ds-ar{opacity:1;color:var(--ds-cyan-deep)}
#tab-data-tools .ds-ar{font-size:10px;opacity:.4;margin-left:4px}
#tab-data-tools table.ds-list tbody td{padding:13px 14px;border-bottom:1px solid var(--ds-line);font-size:13px;white-space:nowrap;vertical-align:middle}
#tab-data-tools table.ds-list tbody td.r{text-align:right}
#tab-data-tools table.ds-list tbody tr:last-child td{border-bottom:none}
#tab-data-tools table.ds-list tbody tr:hover td{background:#F4F9FE}
#tab-data-tools .ds-empty{text-align:center;color:var(--ds-ink-faint);padding:1.4rem}
#tab-data-tools .ds-led{width:11px;height:11px;border-radius:50%;display:inline-block}
#tab-data-tools .ds-led.ds-s-up{background:var(--ds-green);box-shadow:0 0 0 3px rgba(23,156,99,.16)}
#tab-data-tools .ds-led.ds-s-age{background:var(--ds-amber);box-shadow:0 0 0 3px rgba(197,126,18,.16)}
#tab-data-tools .ds-led.ds-s-stale{background:var(--ds-red);box-shadow:0 0 0 3px rgba(214,59,87,.16)}
#tab-data-tools .ds-led.ds-s-none{background:#B7C4D6}
#tab-data-tools .ds-tname{font-weight:700;font-size:13.5px;color:var(--ds-ink)}
#tab-data-tools .ds-tsub{font-size:11px;color:var(--ds-ink-faint);font-family:var(--ds-mono);margin-top:3px}
#tab-data-tools .ds-trows{font-family:var(--ds-mono);font-weight:600;font-size:14px;color:var(--ds-ink)}
#tab-data-tools .ds-trows.zero{color:var(--ds-ink-faint);font-weight:500}
#tab-data-tools .ds-fresh{display:flex;flex-direction:column;gap:6px;min-width:150px}
#tab-data-tools .ds-fresh .ds-ago{font-family:var(--ds-mono);font-size:12px;font-weight:600}
#tab-data-tools .ds-fresh .ds-track{height:6px;border-radius:4px;background:var(--ds-well);overflow:hidden}
#tab-data-tools .ds-fresh .ds-fill{height:100%;border-radius:4px}
#tab-data-tools .ds-ago.ds-s-up{color:var(--ds-green)}
#tab-data-tools .ds-ago.ds-s-age{color:var(--ds-amber)}
#tab-data-tools .ds-ago.ds-s-stale{color:var(--ds-red)}
#tab-data-tools .ds-ago.ds-s-none{color:var(--ds-ink-faint)}
#tab-data-tools .ds-fill.ds-s-up{background:var(--ds-green)}
#tab-data-tools .ds-fill.ds-s-age{background:var(--ds-amber)}
#tab-data-tools .ds-fill.ds-s-stale{background:var(--ds-red)}
#tab-data-tools .ds-fill.ds-s-none{background:#C5CFDD}
#tab-data-tools .ds-pill{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:5px 11px;border:1px solid;white-space:nowrap;display:inline-block}
#tab-data-tools .ds-pill.ds-sp-up{color:var(--ds-green);background:rgba(23,156,99,.1);border-color:rgba(23,156,99,.3)}
#tab-data-tools .ds-pill.ds-sp-age{color:var(--ds-amber);background:rgba(197,126,18,.1);border-color:rgba(197,126,18,.32)}
#tab-data-tools .ds-pill.ds-sp-stale{color:var(--ds-red);background:rgba(214,59,87,.1);border-color:rgba(214,59,87,.34)}
#tab-data-tools .ds-pill.ds-sp-none{color:var(--ds-ink-faint);background:var(--ds-well);border-color:var(--ds-line)}
#tab-data-tools .ds-foot{padding:11px 16px;font-size:12px;color:var(--ds-ink-faint);border-top:1px solid var(--ds-line);background:#FBFDFF;display:flex;justify-content:space-between;font-family:var(--ds-mono)}

/* ============================================================
   Mobile (≤767px): card layout matching the mobile mockup.
   Desktop keeps the table; ds-cards is hidden until mobile.
   ============================================================ */
#tab-data-tools .ds-cards{display:none}
#tab-data-tools .ds-msub{display:none}
#tab-data-tools .ds-head-export{display:none}

/* Card styles (only visible on mobile, but defined unconditionally) */
#tab-data-tools .ds-scard{background:var(--ds-surface);border:1px solid var(--ds-line);border-radius:12px;margin-bottom:8px;padding:12px 13px;box-shadow:0 1px 2px rgba(22,41,74,.04)}
#tab-data-tools .ds-sc-top{display:flex;align-items:center;gap:10px}
#tab-data-tools .ds-sc-name{flex:1;font-weight:700;font-size:13.5px;color:var(--ds-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#tab-data-tools .ds-sc-bar{height:6px;border-radius:4px;background:var(--ds-well);overflow:hidden;margin-top:10px}
#tab-data-tools .ds-sc-fill{height:100%;border-radius:4px}
#tab-data-tools .ds-sc-fill.ds-s-up{background:var(--ds-green)}
#tab-data-tools .ds-sc-fill.ds-s-age{background:var(--ds-amber)}
#tab-data-tools .ds-sc-fill.ds-s-stale{background:var(--ds-red)}
#tab-data-tools .ds-sc-fill.ds-s-none{background:#C5CFDD}
#tab-data-tools .ds-sc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:9px}
#tab-data-tools .ds-sc-rows{font-family:var(--ds-mono);font-weight:600;font-size:12px;color:var(--ds-ink-dim)}
#tab-data-tools .ds-sc-rows.zero{color:var(--ds-ink-faint);font-weight:500}
#tab-data-tools .ds-sc-when{font-family:var(--ds-mono);font-weight:600;font-size:12px}
#tab-data-tools .ds-sc-when.ds-s-up{color:var(--ds-green)}
#tab-data-tools .ds-sc-when.ds-s-age{color:var(--ds-amber)}
#tab-data-tools .ds-sc-when.ds-s-stale{color:var(--ds-red)}
#tab-data-tools .ds-sc-when.ds-s-none{color:var(--ds-ink-faint)}

@media (max-width:767px){
  /* Full-bleed: drop the tab + shell padding so the header reaches the edges */
  #tab-data-tools.tab-pane{padding:0}
  #tab-data-tools .datatools-shell.data-status{padding:0;max-width:100%}

  /* Gradient app head, edge-to-edge */
  #tab-data-tools .ds-hero-tile{border:0;border-radius:0;box-shadow:none;margin-bottom:0}
  #tab-data-tools .ds-page-head{padding:14px 16px}
  #tab-data-tools .ds-h1{font-size:20px;line-height:1.05}
  #tab-data-tools .ds-eyebrow{font-size:10px}
  #tab-data-tools .ds-head-row{align-items:flex-start}
  #tab-data-tools .ds-scope-chips{display:none}
  #tab-data-tools .ds-fresh-pills{display:none}
  #tab-data-tools .ds-msub{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11px;color:#9DB9D8;font-family:var(--ds-mono)}
  #tab-data-tools .ds-msub .ds-live{width:8px;height:8px;border-radius:50%;background:#37D98E;box-shadow:0 0 0 0 rgba(55,217,142,.6);animation:dsPulse 2.2s infinite;flex:none}
  #tab-data-tools .ds-head-export{display:flex;align-items:center;justify-content:center;position:absolute;top:14px;right:16px;width:36px;height:36px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#E5EEF9}

  /* KPI band → horizontal snap scroll of compact cards */
  #tab-data-tools .ds-kpi-band{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;padding:12px 16px 4px}
  #tab-data-tools .ds-kpi-band::-webkit-scrollbar{display:none}
  #tab-data-tools .ds-kpi{flex:0 0 auto;min-width:118px;scroll-snap-align:start;padding:10px 12px;border-radius:12px}
  #tab-data-tools .ds-kpi .ds-v{font-size:19px}
  #tab-data-tools .ds-kpi .ds-l{font-size:9.5px}
  #tab-data-tools .ds-kpi .ds-meta{display:none}
  #tab-data-tools .ds-barstrip{height:7px;margin-top:8px}

  /* Panel collapses to a transparent container; drop the dark tile header */
  #tab-data-tools .ds-panel{border:0;border-radius:0;box-shadow:none;background:transparent;margin-bottom:0}
  #tab-data-tools .ds-tile-head{display:none}

  /* Search + filter chips */
  #tab-data-tools .ds-toolbar{flex-direction:column;align-items:stretch;gap:0;padding:12px 16px 8px}
  #tab-data-tools .ds-fchips{margin-top:9px;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #tab-data-tools .ds-fchips::-webkit-scrollbar{display:none}
  #tab-data-tools .ds-fchip{flex:0 0 auto;white-space:nowrap}

  /* Hide the table, show the cards */
  #tab-data-tools .ds-table-wrap{display:none}
  #tab-data-tools .ds-cards{display:block;padding:10px 14px 4px}

  /* Centered footer line */
  #tab-data-tools .ds-foot{justify-content:center;text-align:center;border-top:0;background:transparent;padding:8px 16px 18px}
  #tab-data-tools .ds-foot span:last-child{display:none}

  /* Keep the preserved upload panel inset from the edges */
  #tab-data-tools .datatools-shell.data-status .datatools-panel{margin:14px 12px}
}