/* ══════════════════════════════════════════════════════════════════════════
   qms.css — Quality Management Suite (Document Control, Deviations, CAPA)

   Reuses global primitives already loaded by index.html rather than
   redefining them: .modal / .modal-overlay / .modal-header / .modal-body /
   .modal-footer, .btn-primary / .btn-secondary, .badge, .form-grid /
   .form-field (all defined in style.css / risk.css and available app-wide).
   This file only adds QMS-specific layout, sidebar sub-nav, and the
   handful of new badge color variants QMS statuses need.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar: nested "Quality Management" section ─────────────────────────── */

.qms-nav-group { margin-top: 6px; }

.qms-nav-group-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.30);
  padding: 6px 10px 3px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.qms-nav-group-label:hover { color: rgba(255,255,255,0.55); }

.qms-nav-group-toggle {
  font-size: 8px;
  opacity: 0.6;
}

.qms-sub-item { padding-left: 18px; }

/* ── Page shell ─────────────────────────────────────────────────────────── */

/* Centralizes the flex/overflow layout every QMS/Risk top-level <main> needs
   to participate correctly in the app shell's single-scroll-region chain
   (body/.app-body flex+overflow:hidden -> one <main> at a time -> one inner
   .qms-body/.risk-body scroll region). Previously this exact declaration was
   duplicated as an inline style on every individual <main>, which is easy to
   forget on a new view (see the #qms-deviations-body fix below, once needed
   for exactly that reason) — centralizing it here fixes that class of bug
   at the source instead of per-view. display:none is the default (hidden);
   the show/hide toggle functions (showView/showRiskView/showAllRiskViews)
   still set element.style.display directly, which as an inline style always
   wins over this class rule — no JS change needed for this centralization. */
.qms-view {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--bg);
}

/* #qms-deviations-body is <main class="qms-view">'s only child, itself a
   flex item in <main>'s column flex layout — without flex:1/min-height:0 it
   sizes to its content instead of <main>'s bounded height, so a tall
   deviation detail view got clipped by <main>'s overflow:hidden instead of
   scrolling (the "need to browser-zoom-out" bug this view's redesign is
   fixing). flex:1 + min-height:0 lets .qms-page-header (flex-shrink:0) and
   .qms-body (flex:1; overflow-y:auto, both already defined below) actually
   split the available height, so .qms-body becomes the one scrolling
   region — independent of the .sidebar's own overflow-y:auto scroll. */
#qms-deviations-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.qms-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.qms-page-header h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 3px;
}

.qms-page-header p {
  font-size: 12.5px;
  color: var(--text-muted);
  margin: 0;
}

.qms-header-actions { display: flex; gap: 10px; }

.qms-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}

/* ── Stat cards ─────────────────────────────────────────────────────────── */

.qms-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.qms-stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.qms-stat-card.critical { border-left-color: #C35F5B; }
.qms-stat-card.warning  { border-left-color: var(--warning); }
.qms-stat-card.success  { border-left-color: var(--success); }
.qms-stat-card.info     { border-left-color: var(--info); }

.qms-stat-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}

.qms-stat-label {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Section cards ──────────────────────────────────────────────────────── */

.qms-section-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 20px;
  box-shadow: var(--shadow);
}

.qms-section-card h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qms-section-card h3 .icon { color: var(--blue-light); }

/* ── Toolbar / filters ──────────────────────────────────────────────────── */

.qms-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.qms-toolbar input[type="text"],
.qms-toolbar select {
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 12.5px;
  background: var(--surface);
  color: var(--text);
}

.qms-toolbar input[type="text"] { flex: 1; min-width: 180px; }

/* ── Table / list ───────────────────────────────────────────────────────── */

.qms-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.qms-table th {
  text-align: left;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  background: var(--bg);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.qms-table td {
  padding: 11px 14px;
  font-size: 12.5px;
  border-bottom: 1px solid var(--divider);
  color: var(--text);
}

.qms-table tr:last-child td { border-bottom: none; }
.qms-table tr.clickable { cursor: pointer; }
.qms-table tr.clickable:hover { background: var(--bg); }

.qms-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-muted);
}

.qms-empty-icon { font-size: 40px; margin-bottom: 10px; }
.qms-empty h3 { font-size: 15px; color: var(--text); margin-bottom: 6px; }
.qms-empty p { font-size: 12.5px; }

/* ── Loading spinner ────────────────────────────────────────────────────── */

.qms-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  padding: 32px;
}

.qms-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: qms-spin 0.7s linear infinite;
}

@keyframes qms-spin { to { transform: rotate(360deg); } }

/* ── Detail view ────────────────────────────────────────────────────────── */

.qms-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
}

.qms-detail-number {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--accent);
  text-transform: uppercase;
}

.qms-detail-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 3px 0 8px;
}

.qms-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── Lifecycle tab: phase track ────────────────────────────────────────────
   Architecture refactor — "Review"/"CAPA" group several individual approval
   steps under one phase label here; the steps themselves are unchanged. */
.qms-lifecycle-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 12px;
}

.qms-lifecycle-phase {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
}

.qms-lifecycle-phase.done {
  background: var(--success-bg, #e6f4ea);
  border-color: var(--success, #2e7d32);
  color: var(--success, #2e7d32);
}

.qms-lifecycle-phase.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.qms-lifecycle-arrow {
  color: var(--text-muted);
  font-size: 11px;
}

.qms-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  /* .qms-body (the scroll container these tabs live in) already scrolls
     independently via its own overflow-y: auto — sticking the tabs to its
     top keeps them reachable without the page needing a browser zoom-out
     to see both tabs and content at once. */
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface);
}

.qms-tab {
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
}

.qms-tab:hover  { color: var(--navy); }
.qms-tab.active { color: var(--navy); border-bottom-color: var(--accent); }

/* ── Shared panels: attachments / comments / audit trail / approval ───────── */

.qms-panel-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  font-size: 12.5px;
}

.qms-panel-item:last-child { border-bottom: none; }

.qms-panel-item-meta {
  font-size: 11px;
  color: var(--text-disabled);
  margin-top: 2px;
}

.qms-attachment-icon { font-size: 15px; margin-right: 6px; }

.qms-audit-action {
  font-weight: 600;
  color: var(--navy);
}

/* ── Badges (new QMS status/priority variants; base .badge from risk.css) ── */

.badge-effective       { background: #E8F2EA; color: #5F8A61; }
.badge-under-review     { background: #F1ECE6; color: #8A6B52; }
.badge-pending-approval { background: #FFF4E5; color: #A97D2E; }
.badge-under-revision   { background: #F1ECE6; color: #C59A41; }
.badge-obsolete         { background: #F1ECE6; color: #66615B; }
.badge-initiated        { background: #F1ECE6; color: #8A6B52; }
.badge-open             { background: #FFF4E5; color: #A97D2E; }
.badge-minor            { background: #E8F2EA; color: #5F8A61; }
.badge-major            { background: #FFF4E5; color: #A97D2E; }
.badge-market           { background: #F7E8E7; color: #A9534F; }
.badge-overdue          { background: #F7E8E7; color: #C35F5B; }
.badge-escalated        { background: #F7E8E7; color: #C35F5B; }
.badge-pending          { background: #F1ECE6; color: #66615B; }
.badge-pass             { background: #E8F2EA; color: #5F8A61; }
.badge-fail             { background: #F7E8E7; color: #C35F5B; }

/* ── Change Control status/type variants (base .badge from risk.css) ─────── */
.badge-critical         { background: #F7E8E7; color: #A9534F; }
.badge-emergency        { background: #F7E8E7; color: #C35F5B; }
.badge-temporary        { background: #FFF4E5; color: #A97D2E; }
.badge-permanent        { background: #E8F2EA; color: #5F8A61; }
.badge-submitted        { background: #E7EEF6; color: #6E8FA5; }
.badge-rejected         { background: #F7E8E7; color: #C35F5B; }
.badge-draft            { background: #F1ECE6; color: #66615B; }
.badge-yes              { background: #F7E8E7; color: #A9534F; }
.badge-no               { background: #E8F2EA; color: #5F8A61; }
.badge-potential        { background: #FFF4E5; color: #A97D2E; }

/* ── Wizard / form modal ────────────────────────────────────────────────── */

.qms-modal-lg .modal { max-width: 720px; width: 92vw; }

.qms-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ── AI draft output ────────────────────────────────────────────────────── */

.qms-ai-output {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  max-height: 480px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1366px) {
  .qms-body { padding: 18px 20px; }
}
@media (max-width: 1024px) {
  .qms-body { overflow-x: auto; }
  .qms-table { min-width: 640px; }
}
@media (max-width: 900px) {
  .qms-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .qms-page-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}