/*
The primary stylesheet for Oolith. This sheet pulls in all the components in order of appearance.
*/
@import url('css/normalize.css');
@import url('css/accessibility.css');
@import url('css/custom-properties.css');
@import url('css/global.css');
@import url('css/typography.css');
@import url('css/elements.css');
@import url('css/layout.css');
@import url('css/masthead.css');
@import url('css/navigation.css');
@import url('css/images.css');
@import url('css/content.css');
@import url('css/datatables.css');
@import url('css/tabs.css');
@import url('css/footer.css');
@import url('css/print.css');


.alert {
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 1.25rem;
}

.alert.error {
  background: #fff4f4;
  border-left: 5px solid #d33;
  color: #7a1f1f;
}

.region-working {
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f3f6ff;
  border-left: 5px solid #6b74e6;
  color: #2f357a;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.25rem;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #cbd1ff;
  border-top-color: #6b74e6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/*body.region-busy {
//  cursor: progress;
}*/


.region-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.region-row input[type="text"] {
  flex: 1;
  max-width: 300px;
}

.region-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  background: #f2f2f2;
  color: #555;
}

.region-clear:hover {
  background: #e8e8e8;
  color: #222;
}


.region-examples {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.region-examples-label {
  font-size: 0.9em;
  color: #666;
  margin-right: 4px;
}

.region-chip {
  appearance: none;
  border: 1px solid #ccc;
  background: #f3f3f3;
  color: #333;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  opacity: 1;              /* override inherited opacity */
  box-shadow: none;        /* remove default button shadow */
  transition: all 0.15s ease;
}

.region-chip:hover {
  background: #e6e6e6;
  border-color: #999;
  color: #000;
}

.overlaps-cell { white-space: nowrap; }
.overlaps-link { font-weight: 600; text-decoration: none; }
.overlaps-link:hover { text-decoration: underline; }

.overlaps-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.8em;
  border: 1px solid #ddd;
  background: #f6f6f6;
  text-decoration: none;
  color: #333;
  margin-left: 6px;
}
.overlaps-badge:hover { background: #eee; }

.region-summary{
  border: 1px solid #d7dcff;
  background: #f3f5ff;
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0 12px 0;
}

.region-summary-title{
  font-weight: 700;
  margin-bottom: 6px;
}

.region-summary-grid{
  display: grid;
  gap: 6px;
}

.region-summary .k{
  color: #444;
}

.actions-cell{ white-space: nowrap; }

.details-btn{
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid #cfd3ff;
  background: #f3f4ff;
  cursor: pointer;
  font-weight: 600;
}

.details-row td{ background: #fafbff; }

.details-panel{
  padding: 12px;
  border: 1px solid #e3e6ff;
  border-radius: 12px;
  background: #fff;
}

.details-kv{ width: 100%; border-collapse: collapse; }
.details-kv th{
  text-align: left;
  width: 260px;
  vertical-align: top;
  padding: 6px 10px;
  color: #333;
  background: #f6f7ff;
  border-bottom: 1px solid #eee;
}
.details-kv td{
  padding: 6px 10px;
  border-bottom: 1px solid #eee;
  word-break: break-word;
}

.details-btn{
  color: #4b57d1 !important;     /* visible text */
  background: #f3f4ff !important;
  border: 1px solid #cfd3ff !important;
  opacity: 1 !important;
}

.details-btn:hover{
  color: #2f3ab3 !important;
}

.details-btn:disabled{ opacity: 1 !important; }

/* Make the table use the full available width */
.table-area table#browse-table,
table.browse-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;      /* prevents one long cell from forcing weird widths */
  border-collapse: separate; /* keep your rounded/modern look if you use it */
}

/* Make the wrapper also span full width */
.table-area {
  width: 100%;
}

/* Optional: let the scroll area still work nicely */
.table-area {
  overflow-x: auto;   /* only matters if something still overflows */
}

/* Column sizing for the compact layout */
/*
#browse-table th:nth-child(1), #browse-table td:nth-child(1) { width: 18%; }  /* Identifier */
#browse-table th:nth-child(2), #browse-table td:nth-child(2) { width: 62%; }  /* trackName */
#browse-table th:nth-child(3), #browse-table td:nth-child(3) { width: 20%; }  /* Details */
**/
#browse-table th:nth-child(1), #browse-table td:nth-child(1)  { width: 5%; }  /* checkbox */
#browse-table th:nth-child(2), #browse-table td:nth-child(2)   { width: 22%; }  /* Identifier */
#browse-table th:nth-child(3), #browse-table td:nth-child(3)   { width: 50%; }  /* trackName */
#browse-table th:nth-child(4), #browse-table td:nth-child(4)  { width: 20%; }  /* Details */

/* If region search adds Overlaps column, you’ll have 4 cols—override widths */
.region-active #browse-tabl


/* Make column widths predictable */
#browse-table {
  width: 100%;
  table-layout: fixed; /* key */
}

/* Identifier column */
/*
#browse-table th:nth-child(1),
#browse-table td:nth-child(1) {
  width: 220px;
}*/

/* Overlaps column (only exists when regionActive) */
#browse-table th#overlaps-header,
#browse-table td.overlaps-cell {
  width: 220px; /*140px;*/        /* adjust to taste (120–160) */
  white-space: nowrap;   /* keep number + BED button on one line */
  text-align: center;
}

/* Trackname should take the remaining space */
/*
#browse-table th:nth-child(3),
#browse-table td:nth-child(3) {
  width: auto;
}*/

/* Details column */
/*#browse-table th:nth-child(4),
#browse-table td:nth-child(4) {
  width: 150px;
}*/

.table-area {
  width: 100%;
}

#browse-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  margin: 0;              /* remove left margin */
}

#browse-table th,
#browse-table td {
  padding-left: 14px;     /* control spacing inside cells instead */
  padding-right: 14px;
}

/* Force the RIGHT panel + table wrapper to actually stretch */
.browse-layout {
  width: 100%;
}

.results-panel {
  flex: 1 1 auto;
  min-width: 0;            /* important inside flex layouts */
}

.table-area {
  width: 100% !important;
  max-width: none !important;
  display: block !important;
}

/* Force the table itself to fill the available width */
#browse-table,
table.browse-table {
  width: 100% !important;
  max-width: none !important;
  table-layout: fixed;     /* keep your controlled column sizing */
}

/* If some theme sets margins/padding weirdly */
#browse-table {
  margin: 0 !important;
}

/* Common wrapper fixes (harmless if not present) */
.table-area > div,
.table-area > .tf_wrapper,
.table-area > .tablefilter,
.table-area > .tf_container {
  width: 100% !important;
  max-width: none !important;
}

/* --- FULL-WIDTH OVERRIDES (nuclear) --- */

/* If your site uses a "container" pattern, kill max-width */
.content,
.selections,
.browse-layout,
.results-panel,
.table-area,
.container,
.container-fluid {
  width: 100% !important;
  max-width: none !important;
}

/* If any parent is centering with margin auto */
.content,
.selections,
.browse-layout,
.results-panel,
.table-area {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Flex layouts: allow children to actually stretch */
.browse-layout,
.results-panel,
.table-area {
  min-width: 0 !important;
}

/* TableFilter wrappers often get a fixed pixel width */
.tf_wrapper,
.tablefilter,
.tf_container,
.tf_footer,
.tf_header,
.tf_row {
  width: 100% !important;
  max-width: none !important;
}

/* Force the table to fill whatever space exists */
#browse-table,
table.browse-table,
#browse-table[style],
table.browse-table[style] {
  width: 100% !important;
  max-width: none !important;
  display: table !important;     /* just in case something made it inline-table */
  table-layout: fixed;
}

/* Optional: prevent huge left padding from a wrapper */
.table-area,
.results-panel {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


.region-dist { margin-top: 12px; padding: 10px; border: 1px solid #e6e6ef; border-radius: 10px; background: #fff; }
.region-dist-title { font-weight: 700; margin-bottom: 8px; }
.region-dist-table { width: 100%; border-collapse: collapse; }
.region-dist-table td { padding: 6px 8px; vertical-align: middle; font-size: 14px; }
.region-dist-table td.lbl { width: 38%; }
.region-dist-table td.barcell { width: 42%; }
.region-dist-table td.num { width: 12%; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.region-dist-table td.pct { width: 8%; text-align: right; white-space: nowrap; color: #666; }

.region-dist-table .bar { height: 10px; background: #f1f1f8; border-radius: 999px; overflow: hidden; }
.region-dist-table .bar .fill { height: 100%; background: #6c6ee6; border-radius: 999px; }

.region-dist.compact .region-dist-title { font-size: 16px; margin: 0 0 6px 0; }
.region-dist.compact .region-dist-table td { padding: 6px 8px; }
.region-dist.compact .lbl { width: 260px; }          /* adjust */
.region-dist.compact .bar { height: 10px; }

.region-summary-wrap{
  border:1px solid #e6e6f5;
  background:#fff;
  border-radius:14px;
  padding:14px;
  margin:10px 0 14px 0;
}

.region-summary-head{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}

.region-summary-title{
  font-weight:700;
  font-size:18px;
  margin-right:8px;
}

.region-summary-sub{
  color:#555;
  font-size:14px;
  margin-right:auto;
}

.region-summary-kpis{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.region-summary-kpis .k{
  color:#666;
  font-size:13px;
  margin-right:6px;
}

.region-toggle{
  border:1px solid #dcdcff;
  background:#f5f5ff;
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:600;
}

.region-breakdown{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid #eee;
}

.region-empty{
  padding:10px 12px;
  background:#fff7f7;
  border:1px solid #ffd8d8;
  border-radius:10px;
  color:#7a2b2b;
}

.region-toggle{
  color: #3b5bdb !important;          /* pick your theme color */
  opacity: 1 !important;
}

.region-toggle:hover{
  color: #2f4fcb !important;
}

.region-toggle .lbl-show,
.region-toggle .lbl-hide{
  color: inherit !important;
  opacity: 1 !important;
}


/* Make the card actually constrain its contents */
.region-dist { 
  max-width: 100%;
  overflow: hidden;              /* prevents child bleed */
}

/* Tables must not exceed container */
.region-dist-table{
  width: 100%;
  max-width: 100%;
  table-layout: fixed;           /* key: prevents long text from expanding table */
  border-collapse: collapse;
}

/* Cells must be allowed to shrink/wrap */
.region-dist-table td{
  max-width: 100%;
  overflow: hidden;
}

/* Label column: wrap instead of forcing width */
.region-dist-table td.lbl{
  white-space: normal;           /* allow wrapping */
  overflow-wrap: anywhere;       /* break long tokens */
  word-break: break-word;
}

/* Bar column: take remaining width */
.region-dist-table td.barcell{
  width: auto;
}

/* Numbers: keep compact, don't grow */
.region-dist-table td.num,
.region-dist-table td.pct{
  white-space: nowrap;
  width: 3.5rem;                 /* tweak */
  text-align: right;
}

/* Bar itself should never overflow */
.region-dist-table .bar{
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
}
.region-dist-table .fill{
  max-width: 100%;
}

@media (max-width: 520px){
  .region-dist-table td.num{ width: 3rem; }
  .region-dist-table td.pct{ width: 3rem; }
}


.region-dist-table{
  width: 100%;
  table-layout: fixed;
}

/* Explicit 4-column layout */
.region-dist-table td.lbl{
  width: 42%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.region-dist-table td.barcell{
  width: 38%;
}

.region-dist-table td.num{
  width: 10%;
  white-space: nowrap;
  text-align: right;
}

.region-dist-table td.pct{
  width: 10%;
  white-space: nowrap;
  text-align: right;
}


@media (max-width: 380px){
  .region-dist-table td.pct{ display:none; }
  /* reclaim that width for the bar */
  .region-dist-table td.barcell{ width: 46%; }
  .region-dist-table td.num{ width: 12%; }
}


.region-dist-scroll{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.region-dist-table{
  width: 100%;
  min-width: 520px;   /* forces scroll on phones instead of squishing cols away */
  table-layout: fixed;
}

/* Optional: nicer mobile feel */
.region-dist-scroll::-webkit-scrollbar{ height: 10px; }

.region-dist-table td.num{ width: 90px; white-space: nowrap; text-align:right; }
.region-dist-table td.pct{ width: 70px; white-space: nowrap; text-align:right; }

/* =========================
   6) CSS (add to your stylesheet)
   ========================= */
.global-search{margin:10px 0 14px;padding:10px;border:1px solid #e3e3e3;border-radius:10px;background:#fff}
.global-search label{display:inline-block;margin-bottom:6px}
.global-search .help{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-left:6px;border-radius:50%;border:1px solid #bbb;font-size:12px;cursor:help;user-select:none}
.global-search-row{display:flex;gap:8px;align-items:center}
.global-search-row input[type="text"]{flex:1;min-width:0;padding:8px 10px;border:1px solid #cfcfcf;border-radius:8px}
.global-search-row .q-clear{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;border:1px solid #ddd;text-decoration:none;color:#555}
.global-search-modes{display:flex;gap:12px;margin-top:8px;font-size:13px;color:#333}
.global-search-modes label{display:flex;gap:6px;align-items:center;margin:0}

.q-submit{
  padding:8px 12px;
  border:1px solid #1f1f1f;
  border-radius:8px;
  background:#1f1f1f;
  color:#fff;
  cursor:pointer;
  white-space:nowrap;
}
.q-submit:hover{opacity:.92}