body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; margin:0; color:#222; }
header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#0b5fff; color:white; }
header button { background: #e9edf6; border:0; padding:6px 10px; border-radius:6px; cursor:pointer; }
.toolbar { display:flex; gap:24px; padding:16px; background:#f5f6f8; flex-wrap:wrap; }
.field { display:flex; flex-direction:column; min-width:200px; }
.field .hint { font-size:12px; color:#666; }
.actions { justify-content:flex-end; align-self:flex-end; gap:8px; }
button { background:#0b5fff; color:#fff; border:0; padding:8px 12px; border-radius:6px; cursor:pointer; }
button:hover { opacity:0.9; }
table { width:100%; border-collapse:collapse; margin:16px; }
th, td { padding:8px 10px; border-bottom:1px solid #e3e6ea; }
th { background:#f0f2f5; cursor:pointer; text-align:left; }
td.num { text-align:right; }
.login .card { max-width:360px; margin:12vh auto; padding:24px; border:1px solid #e3e3e3; border-radius:10px; background:#f59e0b; }
.msg { color:#b00020; margin-top:8px; }

/* Tabs */
.tabs { display: flex; gap: 8px; padding: 8px 16px; background:#f5f6f8; border-bottom:1px solid #e3e6ea; }
.tab { background:#e9edf6; border:0; padding:8px 12px; border-radius:6px; cursor:pointer; }
.tab.active { background:#0b5fff; color:#fff; }
.pane { display:none; }
.pane.active { display:block; }

/* Keep all unwrapped except Name, Actions, and File (existing rule); Continuity has no File/Name so unchanged */

/* Optional: tighter numeric cols */
#c-results td.num, #c-results th.num { text-align: right; }
/* Loading overlay */
.loading {
  position: fixed; inset: 0; background: rgba(255,255,255,0.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 9999; color: #0b5fff; font-weight: 600;
}
.spinner {
  width: 36px; height: 36px; border: 4px solid #cbd5ff; border-top-color: #0b5fff;
  border-radius: 50%; animation: spin 0.9s linear infinite; margin-bottom: 10px;
}
/* --- Wrapping rules --- */
/* Keep all cells single-line by default */
#results th, #results td,
#results th.col-file, #results td.col-file,
#c-results th, #c-results td,
#i-results th, #i-results td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Allow wrapping in Name/Actions/File on all tables */
#results th.col-name, #results td.col-name,
#results th.col-actions, #results td.col-actions,
/* #results th.col-file, #results td.col-file,
*/
#i-results th.col-name, #i-results td.col-name,
#i-results th.col-actions, #i-results td.col-actions,
#i-results th.col-file, #i-results td.col-file {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

/* (optional) fixed layout helps long cells behave */
#i-results { table-layout: fixed; }

/* Selection column */
#results th.col-select,
#results td.col-select {
  width: 36px;
  text-align: center;
  white-space: nowrap;
}
#results td.col-select input[type="checkbox"] {
  transform: scale(1.1);
  cursor: pointer;
}
/* ----- Professional toolbar layout (FF Portal) ----- */
.toolbar--portal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f5f6f8;
  border-bottom: 1px solid #e3e6ea;
}

/* Filters grid: responsive, tidy alignment */
.grid--filters {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(4, minmax(160px, 1fr));
  gap: 16px 20px;
}

/* Action row: buttons on right */
.actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.actions-right .split {
  width: 1px; height: 24px; background: #d7dbe3; margin: 0 6px;
}

/* Buttons */
.btn { background:#e9edf6; color:#1f2937; border:0; padding:8px 12px; border-radius:6px; cursor:pointer; }
.btn:hover { filter: brightness(0.97); }
.btn-primary { background:#0b5fff; color:#fff; }
.btn-primary:hover { filter: brightness(0.95); }
.btn-danger { background:#ef4444; color:#fff; }
.btn-warning { background:#f59e0b; color:#111827; }

/* Selection column (unchanged semantics, ensures narrow width) */
#results th.col-select,
#results td.col-select {
  width: 36px;
  text-align: center;
  white-space: nowrap;
}
#results td.col-select input[type="checkbox"] { transform: scale(1.1); cursor: pointer; }

/* Keep global table rules; Name/File can wrap; others no-wrap (your earlier config) */
/* (optional) If the file names are extremely long, give that column a max width to keep row height reasonable: */
/* #results th.col-file, #results td.col-file { max-width: 520px; } */
/* If you want to control max width for wrapping columns, uncomment:
#results th.col-name, #results td.col-name { width: 22%; }
#results th.col-actions, #results td.col-actions { width: 10%; }
*/
@keyframes spin { to { transform: rotate(360deg); } }