* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #f0f2f5; color: #1a1a2e; }
.hidden { display: none !important; }

#login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); }
.login-card { background: #fff; border-radius: 12px; padding: 48px; width: 360px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.login-card h1 { font-size: 28px; color: #1a1a2e; margin-bottom: 4px; }
.login-card .subtitle { color: #6b7280; margin-bottom: 32px; }
#login-form input { width: 100%; padding: 12px 16px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 15px; margin-bottom: 12px; outline: none; transition: border-color 0.2s; }
#login-form input:focus { border-color: #2563eb; }
#login-form button { width: 100%; padding: 12px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; }
#login-form button:hover { background: #1d4ed8; }
.error { color: #ef4444; font-size: 13px; margin-top: 8px; }

header { background: #1a1a2e; color: #fff; padding: 0 32px; height: 60px; display: flex; align-items: center; }
.header-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.header-title { font-size: 17px; font-weight: 600; }
#logout-btn { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 13px; }
#logout-btn:hover { background: rgba(255,255,255,0.1); }

nav { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 32px; display: flex; }
.tab-btn { padding: 14px 20px; border: none; background: none; font-size: 14px; font-weight: 500; color: #6b7280; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-btn:hover { color: #1a1a2e; }
.tab-btn.active { color: #2563eb; border-bottom-color: #2563eb; }

main { padding: 32px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.section-header h2 { font-size: 20px; font-weight: 600; }
.section-header h3 { font-size: 15px; font-weight: 600; }

#status-mapping-tool { padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid #e5e7eb; }
.status-map-select { padding: 6px 10px; border: 1.5px solid #e5e7eb; border-radius: 6px; font-size: 13px; font-family: inherit; outline: none; }
.status-map-select:focus { border-color: #2563eb; }

.btn-primary { background: #2563eb; color: #fff; border: none; padding: 9px 18px; border-radius: 7px; font-size: 14px; font-weight: 500; cursor: pointer; }
.btn-primary:hover { background: #1d4ed8; }
.btn-primary:disabled { background: #93c5fd; cursor: default; }
.btn-secondary { background: #fff; color: #374151; border: 1px solid #d1d5db; padding: 9px 18px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.btn-secondary:hover { background: #f9fafb; }
.btn-edit { background: #eff6ff; color: #2563eb; border: none; padding: 5px 12px; border-radius: 5px; font-size: 13px; cursor: pointer; margin-right: 6px; }
.btn-delete { background: #fef2f2; color: #ef4444; border: none; padding: 5px 12px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.btn-launch { background: #ecfdf5; color: #059669; border: none; padding: 5px 12px; border-radius: 5px; font-size: 13px; font-weight: 500; cursor: pointer; margin-right: 6px; }
.btn-launch:hover { background: #d1fae5; }
.btn-launch-lg { background: #059669; color: #fff; border: none; padding: 9px 24px; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-launch-lg:hover { background: #047857; }
.btn-launch-lg:disabled { background: #6ee7b7; cursor: default; }
.btn-add-value { background: none; border: 1px dashed #d1d5db; color: #6b7280; padding: 4px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; margin-top: 4px; }
.btn-add-value:hover { border-color: #2563eb; color: #2563eb; }

table { width: 100%; background: #fff; border-radius: 10px; border-collapse: collapse; box-shadow: 0 1px 3px rgba(0,0,0,0.08); overflow: hidden; }
th { text-align: left; padding: 12px 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
td { padding: 12px 16px; font-size: 14px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fafafa; }
td.actions { white-space: nowrap; }
.empty-row td { text-align: center; color: #9ca3af; padding: 40px; }
.badge { display: inline-block; padding: 2px 10px; background: #eff6ff; color: #2563eb; border-radius: 999px; font-size: 12px; font-weight: 500; }

.app-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.app-tab-btn { padding: 8px 16px; border: 1.5px solid #e5e7eb; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; color: #6b7280; cursor: pointer; }
.app-tab-btn:hover { border-color: #d1d5db; color: #1a1a2e; }
.app-tab-btn.active { background: #eff6ff; border-color: #2563eb; color: #2563eb; }
.app-config-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.app-config-header .app-desc { color: #9ca3af; font-size: 13px; font-weight: 400; margin-left: 8px; }
.app-config-header .actions { display: flex; gap: 8px; }

.org-selector { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.org-selector label { font-size: 14px; font-weight: 500; white-space: nowrap; }
.org-selector select { padding: 9px 12px; border: 1.5px solid #d1d5db; border-radius: 7px; font-size: 14px; outline: none; min-width: 280px; }
.org-selector select:focus { border-color: #2563eb; }
.empty-msg { text-align: center; color: #9ca3af; padding: 60px 0; font-size: 14px; }
.config-val { width: 100%; padding: 7px 10px; border: 1.5px solid #e5e7eb; border-radius: 6px; font-size: 14px; font-family: inherit; outline: none; margin-bottom: 4px; display: block; }
.config-val:focus { border-color: #2563eb; }
.opt-name { font-weight: 500; font-size: 14px; min-width: 160px; }
.desc-cell { color: #9ca3af; font-size: 13px; max-width: 240px; }
.save-row { display: flex; justify-content: flex-end; margin-top: 20px; }
.md-snippet { font-size: 13px; color: #4b5563; line-height: 1.5; margin-bottom: 6px; cursor: pointer; }
.md-snippet:hover { color: #2563eb; }
.md-snippet-empty { font-size: 13px; color: #9ca3af; margin-bottom: 6px; }
.md-row-btns { display: flex; gap: 6px; }

/* Tool table */
.tool-url { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6b7280; font-size: 12px; font-family: monospace; }
.tool-desc { max-width: 200px; color: #4b5563; font-size: 13px; }

/* Standard modal */
#modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; z-index: 100; }
#modal { background: #fff; border-radius: 12px; width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
#modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
#modal-title { font-size: 17px; font-weight: 600; }
#modal-close { background: none; border: none; font-size: 22px; cursor: pointer; color: #9ca3af; line-height: 1; }
#modal-body { padding: 24px; }
#modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px; border-top: 1px solid #e5e7eb; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: #374151; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 9px 12px; border: 1.5px solid #d1d5db; border-radius: 7px; font-size: 14px; outline: none; font-family: inherit; transition: border-color 0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: #2563eb; }
.form-group input[readonly] { background: #f9fafb; color: #6b7280; }
.form-group textarea { height: 80px; resize: vertical; }
.form-group.checkbox { display: flex; align-items: center; gap: 10px; }
.form-group.checkbox input { width: auto; }
.form-group.checkbox label { margin: 0; }
.form-hint { font-size: 11px; color: #9ca3af; font-weight: 400; margin-left: 6px; }

.day-checkboxes { display: flex; gap: 10px; flex-wrap: wrap; }
.day-checkbox { display: flex; align-items: center; gap: 4px; font-size: 13px; color: #374151; font-weight: 400; }
.day-checkbox input { width: auto; }

/* Parameter editor rows */
.param-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.param-row .param-name { flex: 1; padding: 7px 10px; border: 1.5px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none; }
.param-row .param-name:focus { border-color: #2563eb; }
.param-row .param-type { flex: 0 0 90px; padding: 7px 8px; border: 1.5px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none; background: #fff; }
.param-row .param-desc { flex: 2; padding: 7px 10px; border: 1.5px solid #d1d5db; border-radius: 6px; font-size: 13px; outline: none; }
.param-row .param-desc:focus, .param-row .param-type:focus { border-color: #2563eb; }
.param-row .btn-delete { padding: 5px 9px; flex-shrink: 0; }
.params-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.params-header span { font-size: 13px; font-weight: 500; color: #374151; }
.params-col-heads { display: flex; gap: 8px; margin-bottom: 4px; padding: 0 2px; }
.params-col-heads span { font-size: 11px; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.04em; }
.params-col-heads .ph-name { flex: 1; }
.params-col-heads .ph-type { flex: 0 0 90px; }
.params-col-heads .ph-desc { flex: 2; }
.params-col-heads .ph-del { flex: 0 0 30px; }

/* Launch overlay */
#launch-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 150; }
#launch-modal { background: #fff; border-radius: 12px; width: 620px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
#launch-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
#launch-header h3 { font-size: 17px; font-weight: 600; margin-bottom: 2px; }
.launch-desc { font-size: 13px; color: #6b7280; }
#launch-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #9ca3af; line-height: 1; padding: 0 2px; flex-shrink: 0; }
#launch-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
#launch-params .form-group:last-child { margin-bottom: 0; }
.launch-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; margin-bottom: 8px; }
#launch-template-preview { margin-top: 20px; }
#launch-template-pre { background: #1e293b; color: #94a3b8; padding: 14px 16px; border-radius: 8px; font-size: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; overflow-x: auto; max-height: 180px; overflow-y: auto; }
#launch-response { border-top: 1px solid #e5e7eb; padding: 16px 24px; flex-shrink: 0; }
#launch-response-pre { background: #1e293b; color: #e2e8f0; padding: 14px 16px; border-radius: 8px; font-size: 12px; font-family: 'Courier New', monospace; white-space: pre-wrap; max-height: 200px; overflow-y: auto; margin-top: 8px; }
#launch-response-pre.ok { border-left: 3px solid #059669; }
#launch-response-pre.err { border-left: 3px solid #ef4444; }
#launch-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px; border-top: 1px solid #e5e7eb; flex-shrink: 0; }

/* Markdown overlay */
#md-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 200; }
#md-modal { background: #fff; border-radius: 12px; width: 90vw; max-width: 1200px; height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
#md-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
#md-header h3 { font-size: 16px; font-weight: 600; }
#md-header-btns { display: flex; align-items: center; gap: 10px; }
#md-x { background: none; border: none; font-size: 24px; cursor: pointer; color: #9ca3af; line-height: 1; padding: 0 4px; }
#md-view-body { flex: 1; overflow-y: auto; padding: 32px 40px; }
#md-edit-body { flex: 1; display: flex; overflow: hidden; }
#md-panes { display: flex; flex: 1; overflow: hidden; }
#md-editor-pane { flex: 1; display: flex; flex-direction: column; border-right: 1px solid #e5e7eb; }
#md-preview-pane { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.md-pane-label { padding: 8px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; background: #f9fafb; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
#md-textarea { flex: 1; border: none; outline: none; resize: none; padding: 16px; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.7; color: #1a1a2e; }
#md-live-preview { flex: 1; overflow-y: auto; padding: 16px 24px; }
#md-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 24px; border-top: 1px solid #e5e7eb; flex-shrink: 0; }
.md-rendered { line-height: 1.75; font-size: 15px; color: #1a1a2e; }
.md-rendered h1,.md-rendered h2,.md-rendered h3,.md-rendered h4 { margin: 20px 0 8px; font-weight: 600; line-height: 1.3; }
.md-rendered h1 { font-size: 24px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; }
.md-rendered h2 { font-size: 20px; }
.md-rendered h3 { font-size: 17px; }
.md-rendered p { margin-bottom: 14px; }
.md-rendered ul,.md-rendered ol { margin: 6px 0 14px 24px; }
.md-rendered li { margin-bottom: 4px; }
.md-rendered code { background: #f3f4f6; border: 1px solid #e5e7eb; padding: 1px 6px; border-radius: 4px; font-size: 13px; font-family: 'Courier New', monospace; }
.md-rendered pre { background: #1e293b; color: #e2e8f0; padding: 16px 20px; border-radius: 8px; overflow-x: auto; margin: 14px 0; }
.md-rendered pre code { background: none; border: none; padding: 0; color: inherit; }
.md-rendered blockquote { border-left: 3px solid #2563eb; padding: 4px 0 4px 16px; color: #6b7280; margin: 14px 0; background: #eff6ff; border-radius: 0 6px 6px 0; }
.md-rendered a { color: #2563eb; text-decoration: underline; }
.md-rendered hr { border: none; border-top: 1px solid #e5e7eb; margin: 20px 0; }
.md-rendered strong { font-weight: 600; }
.md-rendered em { font-style: italic; }
/* ── Tech chat bubble ────────────────────────────────────────────────────── */
#tech-chat-widget { position: fixed; right: 24px; bottom: 24px; z-index: 900;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
#tech-chat-bubble { width: 56px; height: 56px; border-radius: 50%; border: none;
  background: #2563eb; color: #fff; cursor: pointer; box-shadow: 0 6px 20px rgba(37,99,235,.35);
  display: flex; align-items: center; justify-content: center; transition: transform .12s, background .12s; }
#tech-chat-bubble:hover { background: #1d4ed8; transform: translateY(-2px); }
#tech-chat-bubble .tc-icon-close { display: none; }
#tech-chat-bubble.tc-open .tc-icon-open { display: none; }
#tech-chat-bubble.tc-open .tc-icon-close { display: block; }

#tech-chat-panel { width: 420px; max-width: calc(100vw - 48px); height: 560px;
  max-height: calc(100vh - 130px); background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; }
#tech-chat-header { display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; background: #1a1a2e; color: #fff; }
#tech-chat-header strong { font-size: 15px; }
#tech-chat-header .tc-sub { font-size: 11px; opacity: .7; margin-top: 2px; }
#tech-chat-header .tc-actions { display: flex; align-items: center; gap: 6px; }
#tech-chat-header button { background: transparent; border: none; color: #fff; cursor: pointer;
  opacity: .75; font-size: 13px; padding: 3px 7px; border-radius: 5px; }
#tech-chat-header button:hover { opacity: 1; background: rgba(255,255,255,.12); }
#tech-chat-close { font-size: 20px !important; line-height: 1; }

#tech-chat-log { flex: 1; overflow-y: auto; padding: 16px; background: #f8fafc;
  display: flex; flex-direction: column; gap: 10px; }
.tc-msg { max-width: 86%; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  word-break: break-word; }
.tc-user { background: #2563eb; color: #fff; align-self: flex-end; border-bottom-right-radius: 4px;
  white-space: pre-wrap; }
.tc-bot { background: #fff; color: #111827; align-self: flex-start; border: 1px solid #e5e7eb;
  border-bottom-left-radius: 4px; }
.tc-bot p { margin: 0 0 8px; } .tc-bot p:last-child { margin-bottom: 0; }
.tc-bot ul, .tc-bot ol { margin: 0 0 8px; padding-left: 20px; }
.tc-bot code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
.tc-bot pre { background: #1e293b; color: #e2e8f0; padding: 10px 12px; border-radius: 8px;
  overflow-x: auto; font-size: 12px; margin: 0 0 8px; }
.tc-bot pre code { background: none; padding: 0; color: inherit; }
.tc-bot table { font-size: 12px; margin: 0 0 8px; }
.tc-sources { margin-top: 8px; padding-top: 7px; border-top: 1px solid #e5e7eb;
  font-size: 11px; color: #6b7280; }
.tc-typing { align-self: flex-start; font-size: 12px; color: #6b7280; padding: 4px 2px; }
.tc-empty { color: #94a3b8; font-size: 13px; text-align: center; margin: auto; padding: 0 24px; line-height: 1.6; }

#tech-chat-composer { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #e5e7eb;
  background: #fff; align-items: flex-end; }
#tech-chat-input { flex: 1; resize: none; max-height: 120px; padding: 9px 12px;
  border: 1px solid #d1d5db; border-radius: 8px; font-family: inherit; font-size: 13px; line-height: 1.4; }
#tech-chat-input:focus { outline: none; border-color: #2563eb; }
#tech-chat-composer .btn-primary { padding: 9px 16px; }

@media (max-width: 560px) {
  #tech-chat-panel { width: calc(100vw - 32px); height: calc(100vh - 120px); }
  #tech-chat-widget { right: 16px; bottom: 16px; }
}

/* Action offered by a tool response -- currently the QuickBooks authorisation
   link, which has to be clicked rather than copied out of the response body. */
#launch-action { margin-bottom: 16px; }
.launch-action-btn { display: inline-block; padding: 11px 20px; background: #2563eb; color: #fff;
  border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; }
.launch-action-btn:hover { background: #1d4ed8; }
.launch-action-note { color: #6b7280; font-size: 12px; margin-top: 8px; }
/* Customer Portal app config: one bordered section per organisation, each
   holding that org's timeline editor and its status mapping. Bordered rather
   than separated by rules because the two tables inside are themselves full
   of rows -- without an outline it stops being obvious where one org ends. */
.portal-org {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 18px 18px;
  margin-bottom: 18px;
  background: #fcfcfd;
}
.portal-org-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.portal-org-head h4 { margin: 0; font-size: 15px; color: #111827; }
.portal-org-head .app-desc { font-family: monospace; font-size: 0.8em; color: #9ca3af; }

.portal-sub {
  margin: 18px 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

/* Every field full-width and stacked: the copy customers read is long, and a
   40-character box encourages writing to fit the box. */
.portal-stage-table td { vertical-align: top; }
.portal-stage-table input[type="text"],
.portal-stage-table input:not([type]),
.portal-stage-table textarea {
  width: 100%;
  margin-bottom: 6px;
  font-size: 13px;
}
.portal-stage-table textarea { resize: vertical; font-family: inherit; }
.portal-stage-table .btn-edit { padding: 2px 7px; }
.portal-stage-table .btn-edit[disabled] { opacity: 0.35; cursor: default; }

/* Colour config: a picker for choosing and a text box that holds the value.
   Two inputs because <input type="color"> cannot be empty -- an untouched one
   reads #000000 -- and these settings are all "leave blank to derive". Only the
   text box carries .config-val, so blank still means unset. */
.color-field { display: flex; align-items: center; gap: 8px; }
.color-field .color-pick {
  width: 34px;
  height: 30px;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  flex: none;
}
.color-field .config-val { flex: 1; min-width: 90px; font-family: monospace; }

/* Document folder picker (App Configs -> Customer Portal). Checkboxes rather
   than a text field: the setting is matched on folder name, and "Dry book" for
   "Dry Book" fails silently -- the documents simply never appear. */
.folder-boxes { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
.folder-box {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}
.folder-box:hover { border-color: #d1d5db; }
.folder-box em { font-style: normal; font-size: 11px; color: #9ca3af; }
.folder-box input { margin: 0; }

/* Second line in a table cell: an email under a name, what a column means
   under its header. Muted so the cell still reads as one thing. */
.hint-sm {
  font-size: 11px;
  font-weight: 400;
  color: #9ca3af;
  margin-top: 2px;
}