/* ============================================================================
   Contigo Data Explorer — CSV Files Overview styles
   ============================================================================ */

.sch-page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 28px 80px;
}

/* ---- Hero ---- */
.sch-hero {
  background:
    radial-gradient(1200px 300px at 0% 0%, rgba(0, 117, 143, 0.22), transparent 60%),
    linear-gradient(135deg, #0b3a53 0%, #00758f 48%, #2684ff 100%);
  color: #fff;
  border-radius: 16px;
  padding: 18px 24px 16px;
  box-shadow: var(--shadow-lg);
  margin-bottom: 18px;
}
.sch-hero-badge {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: 0.16em;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 4px 10px; border-radius: 999px; margin-bottom: 9px;
}
.sch-hero h1 { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 5px; }
.sch-hero-body {
  font-size: 12.5px; line-height: 1.5; max-width: 820px;
  color: rgba(255, 255, 255, 0.92); margin: 0 0 12px;
}
.sch-tabs { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.sch-tab {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; text-decoration: none; color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.26);
  padding: 7px 13px; border-radius: 999px;
  transition: background 0.12s, transform 0.12s;
}
.sch-tab em { font-style: normal; opacity: 0.75; font-size: 11px; }
.sch-tab:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-1px); }
.sch-search {
  width: 100%;
  font-size: 13.5px;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.95);
  color: #0b2330;
  outline: none;
}
.sch-search::placeholder { color: #5a6b73; }
.sch-overview-link {
  display: inline-flex;
  align-items: center;
  width: max-content;
  margin: 0 0 12px;
  padding: 6px 11px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
  text-decoration: none;
}
.sch-overview-link:hover { background: rgba(255, 255, 255, 0.24); }

/* ---- App section ---- */
.sch-app {
  margin-bottom: 20px;
  scroll-margin-top: 12px;
  border-top: 4px solid var(--c);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-top: 4px solid var(--c);
  border-radius: 14px;
  padding: 14px 16px 14px;
  box-shadow: var(--shadow-sm);
}
.sch-app-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sch-app-icon {
  font-size: 24px; width: 44px; height: 44px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; background: color-mix(in srgb, var(--c) 13%, transparent);
}
.sch-app-head h2 {
  font-size: 19px; font-weight: 800; margin: 0; color: var(--text);
  display: flex; align-items: center; gap: 9px;
}
.sch-ver {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  padding: 2px 7px; border-radius: 6px;
}
.sch-app-head p { font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 0; }
.sch-app-count {
  margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text-muted);
  white-space: nowrap;
}

/* ---- Key files echo ---- */
.sch-keyfiles {
  background: color-mix(in srgb, var(--c) 5%, var(--bg-sunken));
  border: 1px solid color-mix(in srgb, var(--c) 18%, var(--border));
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px;
}
.sch-kf-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c); margin-bottom: 6px;
}
.sch-kf-row {
  display: grid; grid-template-columns: minmax(150px, 250px) 1fr; gap: 12px;
  padding: 3px 0; border-top: 1px solid color-mix(in srgb, var(--c) 10%, var(--border));
}
.sch-kf-row:first-of-type { border-top: none; }
.sch-kf-file { font-size: 11.5px; font-family: var(--font-mono, monospace); font-weight: 600; color: var(--text); word-break: break-word; }
.sch-kf-note { font-size: 12px; line-height: 1.5; color: var(--text-secondary); }

/* ---- File cards (collapsible) ---- */
.sch-files { display: flex; flex-direction: column; gap: 5px; }
.sch-file {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  overflow: hidden;
}
.sch-file summary {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; cursor: pointer; list-style: none; user-select: none;
  transition: background 0.12s;
}
.sch-file summary::-webkit-details-marker { display: none; }
.sch-file summary:hover { background: color-mix(in srgb, var(--c) 6%, transparent); }
.sch-file-name {
  font-size: 12.5px; font-weight: 700; font-family: var(--font-mono, monospace);
  color: var(--text); word-break: break-word;
}
.sch-file-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.sch-pill {
  font-size: 10.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-sunken); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.sch-pill-warn {
  color: var(--amber, #b45309);
  background: color-mix(in srgb, #f59e0b 14%, transparent);
  border-color: color-mix(in srgb, #f59e0b 32%, transparent);
}
.sch-caret { font-size: 10px; color: var(--text-muted); transition: transform 0.2s; }
.sch-file[open] .sch-caret { transform: rotate(180deg); }
.sch-file-desc {
  font-size: 12px; line-height: 1.5; color: var(--text-secondary);
  margin: 0; padding: 2px 12px 9px; border-bottom: 1px solid var(--border);
}

/* ---- Column table ---- */
.sch-table { width: 100%; border-collapse: collapse; }
.sch-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-muted); padding: 5px 12px; background: var(--bg-sunken);
  border-bottom: 1px solid var(--border);
}
.sch-table td { font-size: 12px; padding: 4px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.sch-col:last-child td { border-bottom: none; }
.sch-col-name {
  font-family: var(--font-mono, monospace); font-weight: 600; color: var(--text);
  width: 230px; word-break: break-word;
}
.sch-col-desc { color: var(--text-secondary); line-height: 1.5; }
.sch-need { font-size: 11px; font-style: italic; color: var(--text-muted); }
@media (max-width: 560px) { .sch-col-name { width: 140px; } }

/* ---- Footer ---- */
.sch-foot {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-sunken); border-radius: 12px; padding: 14px 16px;
  font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}
.sch-foot-tag {
  flex-shrink: 0; font-weight: 800; color: var(--green);
  background: var(--green-soft); padding: 2px 9px; border-radius: 6px; font-size: 11px;
}

/* ---- Sidebar entry (colorful, below Atlas) ---- */
.app-btn.csvfiles-nav {
  background: linear-gradient(135deg, #00758f, #2684ff);
  color: #fff; text-decoration: none; border-radius: 10px;
  margin: 0 8px 10px; width: calc(100% - 16px);
  box-shadow: 0 4px 12px rgba(0, 117, 143, 0.32);
}
.app-btn.csvfiles-nav .app-btn-label { color: #fff; font-weight: 800; letter-spacing: 0.02em; }
.app-btn.csvfiles-nav:hover { filter: brightness(1.07); }
.app-btn.csvfiles-nav.active { outline: 2px solid rgba(255, 255, 255, 0.6); outline-offset: -2px; }
.csvfiles-nav-cap {
  position: relative;
  margin: -4px 10px 12px 14px;
  padding: 8px 9px 8px 12px;
  border: 1px solid rgba(38, 132, 255, 0.28);
  border-left: 4px solid #2684ff;
  border-radius: 7px;
  background: rgba(38, 132, 255, 0.1);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.subnav-item.schema-breakdown {
  color: var(--text);
  font-weight: 750;
  background: color-mix(in srgb, #2684ff 9%, transparent);
  border-left: 3px solid #2684ff;
}