@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* FoE brand (focus_branding.md) */
  --foe-blue: #034ea2;
  --foe-green: #00ab4e;
  --foe-body: #3c3c3c;
  --font-family: 'Inter', sans-serif;

  /* App-chrome tokens (matches focus-workspace's internal design system -
     this is an in-suite tool, not a public marketing page, so it follows
     the app conventions: rounded corners + soft shadows, not the public
     site's straight-edge/no-shadow rules). */
  --surface: #faf8ff;
  --surface-low: #f2f3ff;
  --on-background: #131b2e;
  --on-surface-variant: #45464d;
  --outline-variant: #c4c6d0;
  --card-radius: 0.5rem;
  --inner-radius: 0.375rem;
  --card-shadow: 0 2px 12px rgba(19, 27, 46, 0.08);
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

body { margin: 0; font-family: var(--font-family); color: var(--foe-body); background: var(--surface); }

/* ── Header: three-row top nav (white logo bar / blue app bar / tab strip) —
   the same polished pattern as the IRA HER Performance Tracker, whose tab
   strip itself matches the original Retool app's tab row. ─────────────── */
.app-header { position: sticky; top: 0; z-index: 40; }

.logo-bar {
  height: 52px; background: #fff; border-bottom: 1px solid var(--outline-variant);
  display: flex; align-items: center; padding: 0 1.25rem;
}
.logo-bar .logo { height: 34px; width: auto; }

.app-bar {
  height: 34px; background: var(--foe-blue);
  display: flex; align-items: center; padding: 0 1.25rem;
}
.app-bar-title {
  color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.app-bar-viewer { margin-left: auto; color: rgba(255,255,255,.7); font-size: .72rem; white-space: nowrap; }

.tab-strip {
  height: 40px; background: #fff; border-bottom: 1px solid var(--outline-variant);
  display: flex; align-items: center; padding: 0 1.25rem; gap: .25rem;
}
.tab-strip a {
  padding: .3rem .7rem; border-radius: var(--inner-radius);
  color: var(--on-surface-variant); text-decoration: none;
  font-size: .8125rem; font-weight: 500; white-space: nowrap;
}
.tab-strip a.active { background: #d7f3e3; color: #0f6b3a; font-weight: 600; }
.tab-strip a:not(.active):hover { background: var(--surface-low); color: var(--foe-body); }

main { padding: .9rem 1.25rem 3.5rem; min-width: 0; }
.hidden { display: none !important; }

.card {
  background: #ffffff;
  border: 1px solid var(--outline-variant);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* Search sits on its own slim full-width row above the table, matching the
   original app's layout. */
.search-row { display: flex; gap: .5rem; margin-bottom: .6rem; }
.search-wrap { position: relative; flex: 1; display: flex; min-width: 0; }
.search-wrap .search-ic {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: #9aa0a6; pointer-events: none;
}
.search-wrap input[type=text] {
  flex: 1; padding: .42rem .75rem .42rem 2rem;
  border: 1px solid var(--outline-variant); border-radius: 999px;
  font-family: inherit; font-size: .8125rem; min-width: 0; background: #fff;
}
.search-row select {
  flex: none; width: 150px; padding: .35rem .6rem;
  border: 1px solid var(--outline-variant); border-radius: var(--inner-radius);
  font-family: inherit; font-size: .8125rem; color: var(--foe-body); background: #fff;
}

/* Toolbar lives INSIDE the table card, right-aligned above the header row —
   compact gray text-buttons with line icons, like the original app. */
.toolbar {
  display: flex; gap: .25rem; align-items: center; flex-wrap: wrap;
  padding: .45rem .6rem; border-bottom: 1px solid var(--outline-variant);
}
.toolbar .spacer { flex: 1; }
.toolbar .role-note { font-size: .75rem; color: var(--on-surface-variant); padding-left: .35rem; }

.ic { width: 14px; height: 14px; flex: none; }

.tool-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: none; cursor: pointer;
  color: #4b5563; font-family: inherit; font-weight: 500; font-size: .78rem;
  padding: .35rem .6rem; border-radius: var(--inner-radius); white-space: nowrap;
}
.tool-btn:hover:not(:disabled) { background: var(--surface-low); color: var(--foe-blue); }
.tool-btn:disabled { opacity: .45; cursor: not-allowed; }
#quests-delete-btn:hover:not(:disabled) { background: #fdeceb; color: #93000a; }

button.primary, button.secondary, button.danger {
  font-family: inherit; font-weight: 600; font-size: .85rem;
  border: none; border-radius: var(--inner-radius);
  padding: .5rem .9rem; cursor: pointer; white-space: nowrap;
}
button.primary { background: var(--foe-blue); color: #fff; }
button.primary:hover { background: #023d80; }
button.secondary { background: var(--surface-low); color: var(--foe-blue); }
button.danger { background: #ffdad6; color: #93000a; }
button:disabled { opacity: .5; cursor: not-allowed; }

/* Dense tables (small font, tight rows, more rows on screen — matching the
   original app). Long values wrap within their own column instead of forcing
   horizontal scroll. */
.table-card { padding: 0; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8125rem; }
th, td { text-align: left; padding: .38rem .7rem; border-bottom: 1px solid #e8eaf0;
         overflow: hidden; text-overflow: ellipsis; }
td.wrap { white-space: normal; word-break: break-word; }
th { color: var(--on-surface-variant); font-weight: 600; font-size: .7rem;
     letter-spacing: .02em; background: #fff; border-bottom: 1px solid var(--outline-variant);
     position: sticky; top: 0; user-select: none; white-space: nowrap; }
th[data-sort] { cursor: pointer; }
th[data-sort]:hover { color: var(--foe-blue); }
/* The sort arrow only occupies space on the actively-sorted column — a
   permanently reserved arrow slot pushed the centered "Mute" label off
   center and crowded "Link To" out of its narrow fixed column. */
th[data-sort].sorted[data-sort-dir="asc"]::after { content: '\2191'; margin-left: .25em; }
th[data-sort].sorted[data-sort-dir="desc"]::after { content: '\2193'; margin-left: .25em; }
/* Column widths (table-layout:fixed splits space evenly otherwise, which
   looks wrong with columns this different in content length). */
#tab-quests th:nth-child(1) { width: 130px; }
#tab-quests th:nth-child(3) { width: 130px; }
/* Quest Name (2nd column) takes whatever's left. */

#tab-discoveries th:nth-child(1) { width: 62px; }
#tab-discoveries th:nth-child(2) { width: 96px; }
#tab-discoveries th:nth-child(4) { width: 20%; }
#tab-discoveries th:nth-child(5) { width: 110px; }
#tab-discoveries th:nth-child(6) { width: 80px; }
#tab-discoveries th:nth-child(7) { width: 118px; }
/* Quest Name (3rd column) takes whatever's left. */

tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tr:hover td { background: #f7f9fc; }
tr.selected td { background: #e6f6ec; }
td a { color: var(--foe-blue); }

.tag { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .7rem; font-weight: 600; white-space: nowrap; }
.tag-running { background: #d7f3e3; color: #0f6b3a; }
.tag-inactive { background: #f1f5f9; color: #475569; }
.tag-dev { background: #ffe4c9; color: #8a4b00; }
.tag-sent { background: #eaf558; color: #4a4d00; }
.tag-unsent { background: #f1f5f9; color: #475569; }

.checkbox-cell { text-align: center; }

.pagination { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; font-size: .78rem; color: var(--on-surface-variant); border-top: 1px solid var(--outline-variant); }
.pagination button { padding: .25rem .6rem; font-size: .78rem; }
.pagination .spacer { flex: 1; }

.state-card { text-align: center; padding: 3rem 1rem; max-width: 560px; margin: 3rem auto; }
.state-card button { margin-top: 1rem; }

/* ── Focus Toolbox federated module: fixed dock, bottom-left, ALWAYS visible
   (every auth state, both tabs) — the suite convention shared with
   QuickSuite Manager. ──────────────────────────────────────────────────── */
.cc-dock {
  position: fixed; left: 16px; bottom: 16px; z-index: 60;
  background: #fff; border: 1px solid #e5e7eb;
  border-radius: var(--inner-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  padding: 6px 8px;
}

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(19,27,46,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: #fff; border-radius: var(--card-radius); box-shadow: 0 8px 32px rgba(19,27,46,0.14);
  width: 560px; max-width: 92vw; max-height: 85vh; overflow: auto; padding: 1.5rem;
}
.modal.modal-wide { width: 820px; }
.modal { position: relative; }
.modal h3 { margin-top: 0; padding-right: 2.25rem; }
.modal-close {
  position: absolute; top: .8rem; right: .8rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer;
  color: var(--on-surface-variant); padding: .35rem; border-radius: var(--inner-radius);
}
.modal-close:hover { background: var(--surface-low); color: var(--foe-body); }
.modal-close .ic { width: 16px; height: 16px; }
.modal label { display: block; font-weight: 600; font-size: .85rem; margin: .75rem 0 .25rem; }
.modal input[type=text], .modal select, .modal textarea {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--outline-variant);
  border-radius: var(--inner-radius); font-family: inherit; font-size: .9rem;
}
.modal .actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

/* Modal-internal tabs (Quest Details / Quest SQL) */
.modal-tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--outline-variant); margin: .75rem 0 0; }
.modal-tab {
  background: transparent; border: none; cursor: pointer; font-family: inherit;
  color: var(--on-surface-variant); font-weight: 600; font-size: .85rem;
  padding: .5rem .9rem; border-radius: 999px 999px 0 0; margin-bottom: -1px;
}
.modal-tab.active { background: #d7f3e3; color: #0f6b3a; }
.modal-tab-body { padding-top: .25rem; }

/* Quest SQL: Quill.js editor/viewer (same widget + stored HTML format the
   original Retool app used, so chunked code blocks + explanatory text
   render/edit exactly as authored). Quill ships its own font stack by
   default, so it's forced back to the FoE brand font here. */
.quill-host, .quill-host .ql-editor, .quill-host .ql-toolbar {
  font-family: var(--font-family) !important;
}
.quill-host { background: #fff; }
.quill-host .ql-toolbar { border-radius: var(--inner-radius) var(--inner-radius) 0 0; border-color: var(--outline-variant); }
.quill-host .ql-container {
  border-radius: 0 0 var(--inner-radius) var(--inner-radius); border-color: var(--outline-variant);
  min-height: 280px; max-height: 55vh; overflow-y: auto; font-size: .92rem;
}
.quill-host .ql-editor.quill-readonly { padding: 1rem; }
.quill-host .ql-editor pre.ql-syntax {
  background: #1e1e1e; color: #d4d4d4; border-radius: var(--inner-radius);
  font-family: 'JetBrains Mono', ui-monospace, monospace !important; font-size: .82rem; padding: .85rem;
}

/* Discovery modal: labeled meta grid + striped key/value contents list. */
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1.5rem; margin: 1rem 0; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field-label, .section-label {
  font-size: .68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--on-surface-variant);
}
.field-label { margin-bottom: .15rem; }
.section-label { margin: 1.1rem 0 .4rem; }
.field-value { font-size: .85rem; overflow-wrap: anywhere; }

.kv-list { border: 1px solid var(--outline-variant); border-radius: var(--inner-radius); overflow: hidden; }
.kv-row {
  display: grid; grid-template-columns: 190px 1fr; gap: 1rem;
  padding: .5rem .75rem; border-bottom: 1px solid #e8eaf0; font-size: .85rem;
}
.kv-row:nth-child(even) { background: #fafbfe; }
.kv-row:last-child { border-bottom: none; }
.kv-key { font-weight: 600; color: var(--on-surface-variant); overflow-wrap: anywhere; }
.kv-val { overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 640px) {
  .meta-grid { grid-template-columns: 1fr; }
  .kv-row { grid-template-columns: 1fr; gap: .15rem; }
}

/* Narrow viewports: header rows shrink, table still wraps in-cell. */
@media (max-width: 720px) {
  .logo-bar { height: 44px; }
  .logo-bar .logo { height: 28px; }
  main { padding: .75rem .75rem 4rem; }
  .tab-strip { overflow-x: auto; }
}