/* =========================================================
   FlowPilot AI — application layer on top of the prototype design system
   1. Viewport/scrolling fix (root cause: fixed sidebar + body-level scrolling + fixed-height inbox)
   2. Components added for the working application (dialogs, reply composer, flash toasts, etc.)
   The original tokens/components in styles.css, components.css and responsive.css are unchanged.
   ========================================================= */

/* ---------- 1. Application shell: one scroll container, no clipped content ---------- */
html, body { height: 100%; }
body.app-body { overflow: hidden; }
.app { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.sidebar { position: relative; inset: auto; flex: 0 0 var(--fp-sidebar-w); height: 100%; min-height: 0; }
.sidebar-nav { min-height: 0; overscroll-behavior: contain; }
body.sb-collapsed .sidebar { flex-basis: var(--fp-sidebar-w-collapsed); }
.main, body.sb-collapsed .main { margin-left: 0; height: 100%; min-height: 0; overflow: hidden; }
.topbar { position: relative; flex: 0 0 auto; }
.main-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; scroll-padding-top: 16px; overscroll-behavior: contain; }
.main-scroll > .content { flex: 1 0 auto; max-width: 1600px; }
.main-scroll > .app-foot { flex: 0 0 auto; }

/* Pages that fill the viewport (Client Messages inbox): the 3-pane inbox owns the scroll areas. */
.page-fill .main-scroll > .content { display: flex; flex-direction: column; min-height: 0; }
.page-fill .inbox-card { flex: 1 1 0; min-height: 520px; display: flex; flex-direction: column; }
.page-fill .inbox { flex: 1 1 0; height: auto; min-height: 0; }
.inbox-card .inbox { height: auto; min-height: 0; }

@media (max-width: 1024px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; height: 100%; flex-basis: auto; z-index: 40; }
  body.sb-collapsed .sidebar { width: var(--fp-sidebar-w) !important; }
}
@media (max-width: 860px) {
  .page-fill .inbox-card { flex: 0 0 auto; min-height: 0; }
  .page-fill .inbox { flex: 0 0 auto; }
  .inbox-col { overflow: visible; }
}
@media (max-height: 640px) {
  .page-fill .inbox-card { min-height: 420px; }
}

/* ---------- Dialogs (native <dialog>, always fit the viewport) ---------- */
dialog.fp-dialog { border: 0; padding: 0; background: transparent; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); width: 560px; overflow: visible; }
dialog.fp-dialog.lg { width: 780px; }
dialog.fp-dialog.sm { width: 440px; }
dialog.fp-dialog::backdrop { background: rgba(15, 23, 42, .55); }
dialog.fp-dialog > .modal { max-width: none; max-height: calc(100dvh - 24px); width: 100%; animation: fp-pop .18s ease; }
dialog.fp-dialog > .modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }
dialog.fp-dialog .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* ---------- Flash messages rendered server-side as toasts ---------- */
.toast-stack .toast { pointer-events: auto; }
.toast-stack { pointer-events: none; }

/* ---------- Forms: validation from the server ---------- */
.field .error-msg.show, .field-validation-error { display: flex; font-size: 12px; color: var(--fp-danger); align-items: center; gap: 4px; }
.input-validation-error { border-color: var(--fp-danger) !important; background: #FFFBFB !important; }
.validation-summary-errors ul { margin: 6px 0 0; padding-left: 18px; }
.inline-form { display: inline; margin: 0; }
.radio-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Labels distinguishing real vs sample/simulated content ---------- */
.sample-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #475569; background: var(--fp-slate-50); border: 1px dashed var(--fp-border-2); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.engine-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; border: 1px solid; white-space: nowrap; }
.engine-tag.ai { color: var(--fp-purple); background: var(--fp-purple-50); border-color: var(--fp-purple-100); }
.engine-tag.rule { color: #B45309; background: var(--fp-warning-50); border-color: var(--fp-warning-100); }
.engine-tag.data { color: #0B5ED7; background: var(--fp-primary-50); border-color: var(--fp-primary-100); }
.engine-tag.sample { color: #475569; background: var(--fp-slate-50); border-color: var(--fp-border-2); border-style: dashed; }
.fact-tag { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: #047A45; background: var(--fp-success-50); border: 1px solid var(--fp-success-100); border-radius: 4px; padding: 1px 6px; }

/* ---------- Reply composer ---------- */
.reply-card .reply-dest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--fp-radius); background: var(--fp-primary-50); border: 1px solid var(--fp-primary-100); font-weight: 600; color: #0B4FB3; flex-wrap: wrap; }
.reply-card .reply-dest .muted { font-weight: 500; }
.reply-card textarea.textarea { min-height: 180px; font-family: var(--fp-font); }
.reply-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--fp-text-2); }
.reply-history .list-item { align-items: flex-start; }
.reply-body-preview { white-space: pre-wrap; font-size: 13px; color: var(--fp-text); background: var(--fp-slate-50); border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 10px 12px; max-height: 220px; overflow: auto; }
.status-steps { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; }
.status-steps .st { padding: 3px 8px; border-radius: 10px; background: var(--fp-slate-50); color: var(--fp-text-3); border: 1px solid var(--fp-border); font-weight: 600; }
.status-steps .st.done { background: var(--fp-success-50); color: #047A45; border-color: var(--fp-success-100); }
.status-steps .st.current { background: var(--fp-primary-50); color: var(--fp-primary); border-color: var(--fp-primary-100); }
.status-steps .st.bad { background: var(--fp-danger-50); color: #C81E1E; border-color: var(--fp-danger-100); }

/* ---------- Misc ---------- */
.kv-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pre-wrap { white-space: pre-wrap; }
.break-word { overflow-wrap: anywhere; }
.w-auto { width: auto; }
.min-w-0 { min-width: 0; }
.list-item form { margin: 0; }
.table td form { margin: 0; }
.t-actions form { display: inline-flex; }
.chart-empty { height: 180px; display: flex; align-items: center; justify-content: center; color: var(--fp-text-3); border-bottom: 1px solid var(--fp-border); }
.audit-details { max-width: 420px; overflow-wrap: anywhere; }
.secret-box { font-family: var(--fp-mono); font-size: 13px; background: var(--fp-slate-50); border: 1px solid var(--fp-border); border-radius: 6px; padding: 8px 10px; overflow-wrap: anywhere; user-select: all; }
.setup-list { margin: 0; padding-left: 18px; font-size: 13px; }
.setup-list li { margin-bottom: 6px; }
.setup-list code, .code-inline { font-family: var(--fp-mono); font-size: 12px; background: var(--fp-slate-50); border: 1px solid var(--fp-border); border-radius: 4px; padding: 0 4px; }
.empty-sm { padding: 20px; text-align: center; color: var(--fp-text-2); font-size: 13px; }
.pager a, .pager span.pg { min-width: 32px; height: 32px; border: 1px solid var(--fp-border); background: #fff; border-radius: 6px; font: 600 12.5px var(--fp-font); color: var(--fp-text); display: inline-flex; align-items: center; justify-content: center; padding: 0 8px; text-decoration: none; }
.pager a:hover { border-color: var(--fp-primary); color: var(--fp-primary); text-decoration: none; }
.pager span.pg.active { background: var(--fp-primary); border-color: var(--fp-primary); color: #fff; }
.pager span.pg.disabled { opacity: .45; }
.seg a { border: 0; background: transparent; padding: 6px 12px; border-radius: 6px; font: 600 12.5px var(--fp-font); color: var(--fp-text-2); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.seg a:hover { color: var(--fp-text); text-decoration: none; }
.seg a.active { background: #fff; color: var(--fp-primary); box-shadow: var(--fp-shadow-sm); }
.seg a .count { background: var(--fp-slate-100); color: var(--fp-text-2); border-radius: 9px; padding: 0 6px; font-size: 11px; }
.seg a.active .count { background: var(--fp-primary-50); color: var(--fp-primary); }
.tabs a.tab { text-decoration: none; }
.th-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.th-sort:hover { color: var(--fp-text); text-decoration: none; }
.th-sort.sorted { color: var(--fp-primary); }
.folder { text-decoration: none; }
.folder:hover { text-decoration: none; }
.msg-item.active .mi-subject { color: var(--fp-primary); }
.preview-pane .quote-box { max-height: 280px; overflow: auto; }
.login-error { margin-bottom: 14px; }
.u-meta { line-height: 1.2; }
.nav-item .nav-badge.hidden { display: none; }
.donut { width: 140px; height: 140px; }
.hb-legend { margin-top: 10px; }
.notif-menu .nm-list form { margin: 0; }
.notif-menu .notif { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.notif-menu .notif.unread { background: #F7FAFF; }
@media (max-width: 768px) {
  dialog.fp-dialog { width: calc(100vw - 16px); }
  .reply-card textarea.textarea { min-height: 150px; }
}
@media print {
  body.app-body, .app, .main, .main-scroll { height: auto !important; overflow: visible !important; }
}
.avatar.avatar-none { background: #CBD5E1; color: #475569; }
.sb-overlay { cursor: pointer; }
.kpi-blue { --acc: var(--fp-primary); } .kpi-purple { --acc: var(--fp-purple); } .kpi-red { --acc: var(--fp-danger); } .kpi-orange { --acc: var(--fp-warning); } .kpi-green { --acc: var(--fp-success); }
.acc-blue { --acc: var(--fp-primary); } .acc-green { --acc: var(--fp-success); } .acc-orange { --acc: var(--fp-warning); } .acc-red { --acc: var(--fp-danger); } .acc-purple { --acc: var(--fp-purple); }
a.link-plain { color: var(--fp-text); font-weight: 500; }
a.link-plain:hover { color: var(--fp-primary); text-decoration: none; }
a.chip { color: var(--fp-text); text-decoration: none; }
a.chip:hover { border-color: var(--fp-primary); color: var(--fp-primary); }

/* ---------- stat strip links / misc helpers ---------- */
.stat-inline a.si { color: inherit; text-decoration: none; border-radius: 8px; padding: 2px 6px; margin: -2px -6px; }
.stat-inline a.si:hover { background: var(--fp-bg, #F5F7FA); }
.grow { flex: 1 1 220px; min-width: 0; }
.text-right { text-align: right; }
.w-progress { min-width: 150px; }
a.card.kpi { display: flex; }
.progress-row .progress { flex: 1 1 auto; }
.transcript { max-height: none; overflow: visible; }
/* proposal status stepper */
.pr-steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-steps .pr-sep { flex: 1 1 24px; min-width: 16px; height: 1px; background: var(--fp-border-2); }
/* report charts (colours via classes — CSP forbids inline styles) */
.bar-chart .bc-bar.orange { background: var(--fp-warning); }
.bar-chart .bc-bar.red { background: var(--fp-danger); }
.legend i.c-green, .hb-track .c-green { background: var(--fp-success); }
.legend i.c-orange, .hb-track .c-orange { background: var(--fp-warning); }
.legend i.c-red, .hb-track .c-red { background: var(--fp-danger); }
.legend i.c-blue, .hb-track .c-blue { background: var(--fp-primary); }
.legend i.c-purple, .hb-track .c-purple { background: var(--fp-purple); }
.legend i.c-slate, .hb-track .c-slate { background: #94A3B8; }
.report-table td.num, .report-table th.num { text-align: right; white-space: nowrap; }
.report-table td.zero { color: var(--fp-text-3); }
.stat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stat-tile { border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 10px 12px; }
.stat-tile .st-l { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--fp-text-2); }
.stat-tile .st-v { font-size: 20px; font-weight: 700; margin-top: 4px; }
.accent-left.acc-purple { --acc: var(--fp-purple); }
.accent-left.acc-off { --acc: var(--fp-border-2); }
.wf-letter { width: 40px; height: 40px; font-weight: 700; font-size: 16px; }
.flow-node .fn-ic .ic { width: 18px; height: 18px; }
.switch-card { padding: 8px 14px; display: inline-flex; align-items: center; } .text-success { color: var(--fp-success); }
.settings-nav { top: 0; }
.text-center { text-align: center; }
.due-cell { display: inline-flex; flex-direction: column; line-height: 1.35; }
@media (max-width: 640px) {
  .card-head { flex-wrap: wrap; row-gap: 8px; }
  .card-head > .row, .card-head > .legend { flex-wrap: wrap; }
  .table.responsive td .due-cell { align-items: flex-end; }
}
.settings-card .kpi-ic { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .settings-card .kpi-ic .ic { width: 22px; height: 22px; }
.kpi > .kpi-fill { flex: 1 1 auto; min-width: 0; }
/* toast accent per type (CSP: no inline styles) */
.toast.toast-error { --t: var(--fp-danger); }
.toast.toast-warning { --t: var(--fp-warning); }
.toast.toast-info { --t: var(--fp-primary); }
.toast.toast-ai { --t: var(--fp-purple); }