/* The window: the toolbars, the tab strip, the tab area with its panes, the
   sheet (Tabulator, restyled on the theme properties), the status line, and
   the word-pack storage dialog. */

/* ---- Toolbars: the main toolbar, and the tab toolbar under the tab strip ---- */

.ribbon {
  display: flex;
  flex-wrap: wrap;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 6px 6px 0;
}
.grp {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 2px 10px 4px;
  border-right: 1px solid var(--border-subtle);
}
.grp:last-child { border-right: 0; }
.grp.push-right { margin-left: auto; }
.grp .row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
}
.gname {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.lbl, .word-count {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.ribbon select { max-width: 240px; }
.data-bar { display: flex; flex-wrap: wrap; flex: 1; }

/* ---- Tab strip (js/tabs.js): a data tab and its results form one group ---- */

.tab-strip {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 5px 6px 0;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.tab-group { display: flex; gap: 2px; }
.tab-group.g0 { --group: var(--accent); }
.tab-group.g1 { --group: var(--success); }
.tab-group.g2 { --group: var(--warning); }
.tab {
  display: flex;
  align-items: center;
  margin-bottom: -1px;
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--group);
  border-bottom-color: var(--border);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab.on {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border);
  border-top-color: var(--group);
  border-bottom-color: var(--bg-surface);
}
.tab-main {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 240px;
  padding: 4px 2px 4px 10px;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.tab.on .tab-main { font-weight: 600; }
.tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-x {
  margin-right: 4px;
  padding: 1px 5px;
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.tab-x:hover { color: var(--text-primary); background: var(--bg-hover); }
.tab-main:focus-visible, .tab-x:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; }
.tab-spin {
  flex: none;
  width: 11px;
  height: 11px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tab-spin 0.8s linear infinite;
}
@keyframes tab-spin { to { transform: rotate(360deg); } }
.tab-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.tab-err { color: var(--error); font-weight: 700; }

/* ---- Tab area: the tab toolbar, the red bar and the panes; a data tab's pop-up covers it ---- */

.tab-area {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.pane { position: absolute; inset: 0; }
/* Hidden by visibility, not display (js/tabs.js): a hidden report still lays itself out. */
.pane.off { visibility: hidden; }

/* Background download in the Language group */
.ribbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 260px;
}
.ribbar .track {
  flex: 1;
  height: 6px;
  min-width: 60px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.ribbar .fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent);
}

/* ---- Status line ---- */

.status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 10px;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
}
.status-main {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-width: 0;
}
.status .warn { color: var(--error); }
.status-right { margin-left: auto; }
.problem-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.problem-toggle input { margin: 0; }

/* ---- Sheet ---- */

.sheet {
  flex: 1;
  min-height: 0;
  position: relative;
  background: var(--bg-base);
}
.sheet-table { position: absolute; inset: 0; }
body.dragging .sheet { outline: 2px dashed var(--accent); outline-offset: -4px; }

.sheet .tabulator {
  border: 0;
  background: var(--bg-base);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
}
.sheet .tabulator .tabulator-header {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border);
}
.sheet .tabulator .tabulator-header .tabulator-col {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-subtle);
}
.sheet .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background: var(--bg-hover);
}
.sheet .tabulator .tabulator-header .tabulator-col.text-col { background: var(--accent-muted); }
.sheet .tabulator .tabulator-header .tabulator-col.tok-col { color: var(--text-muted); font-style: italic; }
.sheet .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left { border-right: 1px solid var(--border); }
.sheet .tabulator-arrow {
  border-top-color: var(--text-muted) !important;
  border-bottom-color: var(--text-muted) !important;
}
.sheet .tabulator-col[aria-sort="ascending"] .tabulator-arrow,
.sheet .tabulator-col[aria-sort="descending"] .tabulator-arrow {
  border-top-color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.sheet .tabulator-header-popup-button { color: var(--text-muted); }
.sheet .text-tag {
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.sheet .tabulator .tabulator-tableholder { background: var(--bg-base); }
.sheet .tabulator .tabulator-tableholder .tabulator-table {
  background: var(--bg-card);
  color: var(--text-primary);
}
.sheet .tabulator .tabulator-placeholder .tabulator-placeholder-contents {
  color: var(--text-muted);
  font-size: var(--font-size-md);
  font-weight: normal;
}
.sheet .tabulator-row,
.sheet .tabulator-row.tabulator-row-even {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-subtle);
}
.sheet .tabulator-row.tabulator-selectable:hover { background: var(--bg-hover); }
.sheet .tabulator-row .tabulator-cell {
  padding: 3px 7px;
  border-right: 1px solid var(--border-subtle);
}
.sheet .tabulator-row .tabulator-cell.rownum {
  background: var(--bg-surface);
  color: var(--text-muted);
}
.sheet .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { border-right: 1px solid var(--border); }
.sheet .tabulator-row .tabulator-cell.tok-col { color: var(--text-muted); }

/* Problem rows: red left edge on the row number, red background on the empty cell */
.sheet .tabulator-row.problem .tabulator-cell.rownum {
  box-shadow: inset 3px 0 0 var(--error);
  color: var(--error);
}
.sheet .tabulator-row .tabulator-cell.empty-cell { background: var(--error-bg); }

/* Tabulator's header menu and tooltips are attached to <body> */
.tabulator-popup-container {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
}
.tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover { background: var(--bg-hover); }
.tabulator-tooltip { font-size: var(--font-size-sm); }

/* ---- Where to keep word packs ---- */

dialog.dlg.store-dlg { max-width: min(520px, calc(100vw - 32px)); }
.store-dlg .dlg-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.store-dlg p { margin: 0; }
.store-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.store-recommended { color: var(--success); font-size: var(--font-size-sm); font-weight: 600; }
.store-hints { margin: 0; padding-left: 18px; }