@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;

  /* 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; }

body { margin: 0; font-family: 'Inter', sans-serif; color: var(--foe-body); background: var(--surface); }

/* Slim brand-color top accent, matching the original app's chrome. */
.topbar { height: 4px; background: var(--foe-blue); }

.shell { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 4px); }

aside {
  background: #ffffff;
  border-right: 1px solid var(--outline-variant);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}
aside .brand { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.5rem; }
aside .brand-logo { height: 22px; width: auto; }
aside .brand-app { font-size: .95rem; font-weight: 700; color: var(--foe-blue); }
aside .spacer { flex: 1; }
aside nav a {
  display: block;
  padding: .6rem .75rem;
  border-radius: 999px;
  color: var(--on-background);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: .25rem;
}
aside nav a.active { background: #d7f3e3; color: #0f6b3a; }
aside nav a:not(.active):hover { background: var(--surface-low); color: var(--foe-blue); }

main { padding: 2rem 2.5rem; max-width: 1300px; }
.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;
}

.toolbar { display: flex; gap: .5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar .spacer { flex: 1; }
.toolbar .role-note { font-size: .85rem; color: var(--on-surface-variant); }
.toolbar input[type=text] {
  padding: .5rem .75rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--inner-radius);
  font-family: inherit;
  min-width: 220px;
}
.toolbar select {
  padding: .5rem .6rem;
  border: 1px solid var(--outline-variant);
  border-radius: var(--inner-radius);
  font-family: inherit;
  color: var(--foe-body);
  background: #fff;
}

button {
  font-family: inherit;
  font-weight: 600;
  font-size: .9rem;
  border: none;
  border-radius: var(--inner-radius);
  padding: .55rem 1rem;
  cursor: pointer;
}
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; }

.table-card { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; white-space: nowrap; }
th, td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--outline-variant); }
th { color: var(--on-surface-variant); font-weight: 600; text-transform: uppercase; font-size: .72rem;
     letter-spacing: .04em; background: var(--surface-low); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tr:hover td { background: var(--surface-low); }
tr.selected td { background: #e0f3fd; }
td a { color: var(--foe-blue); }

.tag { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.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: .75rem; padding: .75rem .9rem; font-size: .85rem; color: var(--on-surface-variant); }
.pagination button { padding: .35rem .7rem; }
.pagination .spacer { flex: 1; }

.state-card { text-align: center; padding: 3rem 1rem; }
.state-card button { margin-top: 1rem; }

/* 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 h3 { margin-top: 0; }
.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; 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-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; font-size: .82rem; padding: .85rem;
}

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
dl.kv dt { color: var(--on-surface-variant); font-weight: 600; }
dl.kv dd { margin: 0; }