:root {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: #182229;
  background: #f3f5f6;
  line-height: 1.45;
  --ink: #182229;
  --muted: #64717a;
  --line: #dce2e5;
  --panel: #ffffff;
  --green: #16836b;
  --green-dark: #0e624f;
  --coral: #e36555;
  --blue: #357d9a;
  --gold: #c58a2b;
  --red: #b94b43;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
a { color: inherit; }
.topbar {
  min-height: 58px;
  background: #172326;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 28px;
}
.identity, .header-actions, .page-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand { font-weight: 750; }
.company { color: #b9c4c8; font-size: 14px; }
.header-actions form, .page-actions form { margin: 0; }
.admin-link { color: #d8e0e2; text-decoration: none; font-size: 14px; }
.admin-link:hover { color: #fff; }
.logout-button {
  border: 1px solid #536368;
  background: transparent;
  color: #fff;
  border-radius: 5px;
  padding: 6px 11px;
  cursor: pointer;
}
.primary-nav { background: #fff; border-bottom: 1px solid var(--line); }
.nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  gap: 26px;
  overflow-x: auto;
}
.primary-nav a {
  flex: 0 0 auto;
  padding: 14px 2px 12px;
  color: #56636b;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.primary-nav a:hover { color: var(--ink); }
.primary-nav a.active { color: var(--green-dark); border-bottom-color: var(--green); }
.container { max-width: 1440px; margin: 0 auto; padding: 28px; }
.page-head, .section-head, .panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}
.page-head { margin-bottom: 22px; }
.analytics-head { align-items: center; }
h1, h2, h3 { letter-spacing: 0; }
h1 { font-size: 27px; margin: 0 0 5px; }
h2 { font-size: 17px; margin: 0 0 4px; }
p { margin: 0; color: var(--muted); }
button, .button {
  border: 1px solid #b7c1c6;
  background: #fff;
  color: var(--ink);
  border-radius: 5px;
  padding: 9px 14px;
  font-weight: 650;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
button:hover, .button:hover { border-color: #7d8b92; }
.primary { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.primary:hover { background: #0a5342; border-color: #0a5342; }
.text-link { color: var(--green-dark); font-weight: 700; text-decoration: none; font-size: 14px; }
.text-link:hover { text-decoration: underline; }
.notice { padding: 11px 14px; border-radius: 5px; margin-bottom: 16px; background: #e5f2ed; color: #145b45; }
.notice.error { background: #f9e7e5; color: #91352f; }
.notice.info { background: #e6f0f5; color: #285d73; }
.period-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid #cfd7db;
  border-radius: 6px;
  background: #fff;
}
.period-switch a {
  min-width: 76px;
  padding: 7px 10px;
  border-radius: 4px;
  color: #59666e;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}
.period-switch a.active { background: #173f3b; color: #fff; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.kpi-card {
  min-height: 132px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: 6px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.kpi-card.accent-coral { border-top-color: var(--coral); }
.kpi-card.accent-blue { border-top-color: var(--blue); }
.kpi-card.accent-gold { border-top-color: var(--gold); }
.kpi-card.unavailable { border-top-color: #a7b0b5; background: #fafbfb; }
.kpi-label { color: var(--muted); font-size: 13px; margin-bottom: 12px; }
.kpi-card strong { font-size: 24px; line-height: 1.1; overflow-wrap: anywhere; }
.kpi-note, .delta { margin-top: auto; padding-top: 12px; color: var(--muted); font-size: 12px; }
.delta.positive { color: var(--green-dark); }
.delta.negative { color: var(--red); }
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
  gap: 16px;
}
.chart-panel {
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 19px;
}
.chart-panel-wide { min-height: 350px; }
.panel-head { align-items: flex-start; margin-bottom: 18px; }
.panel-head > strong { font-size: 18px; }
.bar-chart {
  height: 270px;
  display: flex;
  gap: 5px;
  align-items: stretch;
  border-bottom: 1px solid #cfd6d9;
  padding-top: 16px;
}
.bar-column {
  min-width: 0;
  flex: 1 1 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 28px;
  align-items: end;
}
.bar-track {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  border-radius: 3px 3px 0 0;
  background: #f0f3f4;
  overflow: hidden;
}
.bar-track span {
  display: block;
  width: 100%;
  min-height: 2px;
  background: var(--green);
  border-radius: 3px 3px 0 0;
}
.bar-column:hover .bar-track span { background: var(--green-dark); }
.bar-column small {
  display: block;
  height: 28px;
  padding-top: 7px;
  color: #7a858c;
  font-size: 10px;
  text-align: center;
  white-space: nowrap;
}
.gauge-row, .donut-row {
  display: flex;
  align-items: center;
  gap: 24px;
}
.gauge, .donut {
  flex: 0 0 144px;
  width: 144px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.gauge { background: conic-gradient(var(--green) var(--value), #e8ecee 0); }
.gauge::after, .donut::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: #fff;
}
.gauge strong, .donut > div {
  position: relative;
  z-index: 1;
}
.gauge strong { font-size: 24px; }
.compact-stats { margin: 0; flex: 1; min-width: 0; }
.compact-stats div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid #edf0f1;
}
.compact-stats dt { color: var(--muted); }
.compact-stats dd { margin: 0; font-weight: 700; text-align: right; }
.rank-list { display: grid; gap: 14px; }
.rank-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 14px;
  min-width: 0;
}
.rank-main { min-width: 0; }
.rank-main strong, .rank-main span { display: block; overflow-wrap: anywhere; }
.rank-main strong { font-size: 14px; }
.rank-main span { color: var(--muted); font-size: 12px; }
.rank-value { align-self: start; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rank-bar {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 3px;
  background: #edf1f2;
  overflow: hidden;
}
.rank-bar span { display: block; height: 100%; background: var(--blue); border-radius: 3px; }
.rank-bar.coral span { background: var(--coral); }
.recommendations-summary { align-self: start; grid-column: 1 / -1; }
.recommendations-summary .donut-row { max-width: 760px; }
.donut {
  background: conic-gradient(
    var(--coral) 0 var(--problem-end),
    var(--gold) var(--problem-end) var(--discount-end),
    var(--blue) var(--discount-end) 100%
  );
}
.donut > div { display: grid; text-align: center; }
.donut strong { font-size: 24px; line-height: 1; }
.donut span { color: var(--muted); font-size: 12px; margin-top: 4px; }
.legend { list-style: none; padding: 0; margin: 0; flex: 1; min-width: 0; }
.legend li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
}
.legend i { width: 9px; height: 9px; border-radius: 2px; }
.legend-problem { background: var(--coral); }
.legend-discount { background: var(--gold); }
.legend-transfer { background: var(--blue); }
.data-freshness {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
  padding: 12px 2px;
  color: #748087;
  font-size: 12px;
}
.data-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 18px;
}
.section-head { margin-bottom: 18px; }
.upload { display: flex; gap: 10px; align-items: center; }
.upload input[type="file"] {
  min-width: 0;
  flex: 1;
  border: 1px solid #cbd3d7;
  border-radius: 5px;
  padding: 8px;
  background: #fafbfb;
}
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  background: #f5f7f8;
  color: #59666e;
  font-weight: 650;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid #edf0f1; vertical-align: top; }
.status {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 7px;
  background: #e5f2ed;
  color: #145b45;
  font-size: 12px;
}
.empty { text-align: center; color: #7b868d; padding: 28px; }
.empty-state {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 42px 24px;
  text-align: center;
}
.empty-state p { margin-bottom: 20px; }
.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.metric {
  min-height: 92px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 15px;
  color: inherit;
  text-decoration: none;
}
.metric.active { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); }
.metric strong { display: block; font-size: 23px; }
.metric span { color: var(--muted); font-size: 13px; }
.recommendation-section { padding: 2px 0 20px; }
.recommendation-list { display: grid; gap: 12px; max-width: 1020px; margin: 0 auto; }
.recommendation-card {
  background: #142526;
  border: 1px solid #365456;
  border-radius: 8px;
  color: #f7faf9;
  padding: 20px 18px;
  min-width: 0;
}
.recommendation-card h3 {
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 16px;
  color: #fff;
  overflow-wrap: anywhere;
}
.recommendation-details {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
}
.recommendation-details dt { color: #9ccbd2; overflow-wrap: anywhere; }
.recommendation-details dd { color: #fff; margin: 0; overflow-wrap: anywhere; }
.recommendation-action { color: #78e2ae !important; }
.recommendation-transfer { border-left: 4px solid #45a7c4; }
.recommendation-discount_review { border-left: 4px solid #e0aa4f; }
.recommendation-problem_product { border-left: 4px solid #d86b62; }
.recommendation-article { margin: -8px 0 16px; color: #9ccbd2; font-size: 14px; }
.recommendation-article strong { color: #fff; font-family: Consolas, "Courier New", monospace; overflow-wrap: anywhere; }
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
}
.login-panel {
  max-width: 380px;
  margin: 12vh auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px;
}
.form-stack { display: grid; gap: 16px; }
.form-stack label { display: grid; gap: 6px; font-size: 14px; font-weight: 650; }
.form-stack input { width: 100%; border: 1px solid #b8c1ca; border-radius: 5px; padding: 10px; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid rgba(53, 125, 154, .28);
  outline-offset: 2px;
}
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .chart-panel-wide { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
  .container { padding: 20px 18px; }
  .topbar { padding: 0 18px; }
  .nav-inner { padding: 0 18px; }
  .company { display: none; }
  .page-head, .section-head { display: grid; }
  .analytics-head { align-items: start; }
  .page-actions { flex-wrap: wrap; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .chart-panel-wide, .recommendations-summary { grid-column: auto; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topbar { min-height: 54px; }
  .admin-link { display: none; }
  .primary-nav a { padding-top: 12px; }
  h1 { font-size: 23px; }
  .period-switch { width: 100%; }
  .period-switch a { min-width: 0; flex: 1; }
  .kpi-grid, .metrics { grid-template-columns: 1fr; }
  .kpi-card { min-height: 118px; }
  .chart-panel { padding: 16px 14px; }
  .bar-chart { height: 230px; gap: 3px; }
  .gauge-row, .donut-row { align-items: flex-start; flex-direction: column; }
  .gauge, .donut { align-self: center; }
  .upload { align-items: stretch; flex-direction: column; }
  .upload button { width: 100%; }
  .recommendation-card { padding: 17px 15px; }
  .recommendation-card h3 { font-size: 17px; }
  .recommendation-details { grid-template-columns: 1fr; gap: 3px; }
  .recommendation-details dd { margin-bottom: 8px; }
  .rank-item { grid-template-columns: minmax(0, 1fr); }
  .rank-value { grid-row: 2; }
  .rank-bar { grid-row: 3; }
}


/* Recommendation workflow */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.recommendation-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.recommendation-filter-panel { padding: 16px; }
.recommendation-filters {
  display: grid;
  grid-template-columns: minmax(230px, 1.5fr) repeat(5, minmax(130px, 1fr));
  gap: 12px;
  align-items: end;
}
.recommendation-filters label,
.bulk-toolbar label,
.decision-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.recommendation-filters input,
.recommendation-filters select,
.bulk-toolbar input,
.bulk-toolbar select,
.bulk-toolbar textarea,
.decision-form input,
.decision-form select,
.decision-form textarea,
.comment-form textarea {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid #bdc7cc;
  border-radius: 5px;
  padding: 8px 9px;
  background: #fff;
  color: var(--ink);
}
.recommendation-filters textarea,
.bulk-toolbar textarea,
.decision-form textarea,
.comment-form textarea {
  resize: vertical;
}
.filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.bulk-form { margin: 0; }
.bulk-toolbar {
  display: grid;
  grid-template-columns: auto minmax(150px, 1fr) minmax(170px, 1fr) 140px 140px minmax(170px, 1fr) minmax(220px, 1.5fr) auto;
  gap: 10px;
  align-items: end;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: #f8faf9;
}
.bulk-toolbar > strong {
  align-self: center;
  max-width: 115px;
  font-size: 13px;
}
.bulk-comment textarea { height: 38px; min-height: 38px; }
.mobile-select-all { display: none !important; }
.recommendation-table-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.bulk-form .recommendation-table-section { border-radius: 0 0 6px 6px; }
.recommendation-table-wrap { max-width: 100%; }
.recommendation-table { min-width: 1300px; table-layout: fixed; }
.recommendation-table th:nth-child(1),
.recommendation-table td:nth-child(1) { width: 42px; }
.recommendation-table th:nth-child(2),
.recommendation-table td:nth-child(2) { width: 120px; }
.recommendation-table th:nth-child(3),
.recommendation-table td:nth-child(3) { width: 220px; }
.recommendation-table th:nth-child(4),
.recommendation-table td:nth-child(4) { width: 330px; }
.recommendation-table th:nth-child(5),
.recommendation-table td:nth-child(5) { width: 155px; }
.recommendation-table th:nth-child(6),
.recommendation-table td:nth-child(6) { width: 150px; }
.recommendation-table th:nth-child(7),
.recommendation-table td:nth-child(7) { width: 150px; }
.recommendation-table th:last-child,
.recommendation-table td:last-child { width: 212px; }
.recommendation-row { cursor: pointer; }
.recommendation-row:hover { background: #f7faf9; }
.recommendation-row.recommendation-transfer { box-shadow: inset 3px 0 0 var(--blue); }
.recommendation-row.recommendation-discount_review { box-shadow: inset 3px 0 0 var(--gold); }
.recommendation-row.recommendation-problem_product { box-shadow: inset 3px 0 0 var(--coral); }
.recommendation-table td { overflow-wrap: anywhere; }
.recommendation-table td > span:not(.status):not(.type-label):not(.confidence):not(.overdue) {
  display: block;
  margin-top: 3px;
}
.select-cell { text-align: center; }
.select-cell input { width: 17px; height: 17px; cursor: pointer; }
.priority-value { display: block; font-size: 18px; }
.confidence {
  display: inline-block;
  margin-top: 5px;
  border-radius: 3px;
  padding: 2px 5px;
  color: #536168;
  background: #eef1f2;
  font-size: 10px;
  font-weight: 700;
}
.confidence-high { background: #e1f1eb; color: #145b45; }
.confidence-low { background: #f7ece2; color: #8b5e24; }
.product-link {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-weight: 750;
  text-decoration: none;
}
.product-link:hover { color: var(--green-dark); text-decoration: underline; }
.article-code {
  display: block;
  color: #43535b;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.subtle { color: var(--muted); font-size: 12px; font-weight: 400; }
.type-label {
  display: inline-block;
  margin-bottom: 5px;
  border-radius: 3px;
  padding: 2px 6px;
  background: #edf1f2;
  color: #485860;
  font-size: 11px;
  font-weight: 750;
}
.type-transfer { background: #e1eff4; color: #285d73; }
.type-discount_review { background: #f7edd9; color: #7c581f; }
.type-problem_product { background: #f8e6e3; color: #8c3f38; }
.recommendation-message { line-height: 1.35; }
.status { white-space: nowrap; }
.status-new { background: #edf1f2; color: #4d5b62; }
.status-review { background: #e1eff4; color: #285d73; }
.status-approved { background: #e2f1eb; color: #145b45; }
.status-rejected { background: #f8e6e3; color: #91352f; }
.status-completed { background: #dcefe5; color: #0e624f; }
.status-postponed { background: #f7edd9; color: #7c581f; }
.overdue {
  display: block;
  margin-top: 5px;
  color: var(--red);
  font-size: 11px;
  font-weight: 750;
}
.row-action { text-align: right; }
.row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.action-control {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.row-actions .small-button { white-space: nowrap; }
.action-help-trigger {
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  border: 1px solid #9aa8ae;
  border-radius: 50%;
  background: #f4f7f6;
  color: #425159;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}
.action-help-trigger:hover,
.action-help-trigger:focus-visible {
  border-color: var(--green);
  background: #e4f1ec;
  color: var(--green-dark);
}
.action-help-tooltip {
  position: fixed;
  z-index: 80;
  box-sizing: border-box;
  width: max-content;
  max-width: min(340px, calc(100vw - 16px));
  padding: 9px 11px;
  border: 1px solid #304247;
  border-radius: 6px;
  background: #17272a;
  color: #fff;
  box-shadow: 0 8px 24px rgba(16, 29, 32, .24);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  overflow-wrap: anywhere;
  pointer-events: none;
  text-align: left;
  white-space: pre-line;
}
.action-help-tooltip[hidden] { display: none; }
.row-action-select {
  width: 38px;
  min-width: 38px;
  min-height: 30px;
  padding: 4px 5px;
  border-color: var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 750;
  text-align: center;
}
.row-action-select:hover,
.row-action-select:focus { border-color: var(--green); }
.small-button { display: inline-block; padding: 6px 9px; font-size: 12px; }

.detail-overlay {
  position: fixed;
  z-index: 40;
  inset: 0;
  background: rgba(18, 28, 31, .42);
}
.recommendation-drawer {
  position: fixed;
  z-index: 41;
  top: 0;
  right: 0;
  width: min(620px, 94vw);
  height: 100vh;
  background: #fff;
  box-shadow: -12px 0 32px rgba(20, 32, 35, .18);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.drawer-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 5px 0; font-size: 20px; overflow-wrap: anywhere; }
.icon-button {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border: 1px solid #bdc7cc;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #435159;
  text-decoration: none;
  font-size: 25px;
  line-height: 1;
}
.drawer-body { overflow-y: auto; }
.drawer-section { padding: 20px 22px; border-bottom: 1px solid var(--line); }
.drawer-section h3 { margin: 0 0 13px; font-size: 15px; }
.drawer-recommendation { color: var(--ink); margin-bottom: 14px; }
.detail-facts { display: grid; gap: 0; margin: 0; }
.detail-facts > div {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid #eef1f2;
}
.detail-facts dt { color: var(--muted); }
.detail-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.quality-warning {
  margin-top: 14px;
  border-left: 3px solid var(--gold);
  padding: 10px 12px;
  background: #fbf7ef;
  color: #664c25;
  font-size: 12px;
}
.quality-warning p { margin-top: 4px; color: #664c25; }
.decision-form { display: grid; gap: 12px; }
.decision-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.decision-form textarea { min-height: 74px; }
.comment-form { display: grid; gap: 9px; }
.comment-form textarea { min-height: 72px; }
.comment-form button { justify-self: start; }
.history-list { display: grid; gap: 0; }
.history-event { padding: 11px 0; border-bottom: 1px solid #edf0f1; }
.history-event > div { display: flex; justify-content: space-between; gap: 12px; }
.history-event time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.history-event p { margin-top: 3px; font-size: 13px; color: var(--ink); }

@media (max-width: 1320px) {
  .recommendation-filters { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
  .filter-search { grid-column: span 2; }
  .bulk-toolbar { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
  .bulk-toolbar > strong { max-width: none; }
}
@media (max-width: 900px) {
  .recommendation-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recommendation-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-search { grid-column: 1 / -1; }
  .bulk-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); border-radius: 6px; margin-bottom: 12px; }
  .bulk-toolbar > strong,
  .bulk-comment { grid-column: 1 / -1; }
  .mobile-select-all { display: grid !important; grid-column: 1 / -1; }
  .mobile-select-all span { display: flex; align-items: center; gap: 8px; color: var(--ink); }
  .mobile-select-all input { width: 17px; min-height: 17px; }
  .recommendation-table-section,
  .bulk-form .recommendation-table-section { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .recommendation-table-wrap { overflow: visible; }
  .recommendation-table,
  .recommendation-table tbody,
  .recommendation-table tr,
  .recommendation-table td { display: block; width: 100% !important; min-width: 0; }
  .recommendation-table { min-width: 0; }
  .recommendation-table thead { display: none; }
  .recommendation-table tbody { display: grid; gap: 10px; }
  .recommendation-table tr {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
  }
  .recommendation-table td {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid #edf0f1;
    text-align: left;
  }
  .recommendation-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
  }
  .recommendation-table td:last-child { border-bottom: 0; }
  .recommendation-table .select-cell { grid-template-columns: 1fr; justify-items: end; }
  .recommendation-table .select-cell::before { display: none; }
  .recommendation-table .empty { display: block; }
  .recommendation-table .empty::before { display: none; }
  .row-action .button { justify-self: start; }
  .row-actions { justify-self: start; justify-content: flex-start; }
}
@media (max-width: 560px) {
  .recommendation-metrics,
  .recommendation-filters,
  .bulk-toolbar { grid-template-columns: 1fr; }
  .filter-search,
  .bulk-comment { grid-column: auto; }
  .filter-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-actions .button,
  .filter-actions button,
  .bulk-toolbar button { width: 100%; text-align: center; }
  .recommendation-table td { grid-template-columns: 105px minmax(0, 1fr); }
  .recommendation-drawer { width: 100vw; }
  .drawer-head,
  .drawer-section { padding-left: 16px; padding-right: 16px; }
  .decision-form .form-grid { grid-template-columns: 1fr; }
  .detail-facts > div { grid-template-columns: 1fr; gap: 3px; }
  .detail-facts dd { text-align: left; }
}
/* Data governance, rules and product insight surfaces. */
.health-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.health-item {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 6px;
  background: var(--panel);
}
.health-item > div { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.health-item dl { display: grid; gap: 7px; margin: 16px 0 0; }
.health-item dl div { display: flex; justify-content: space-between; gap: 12px; }
.health-item dt { color: var(--muted); }
.health-item dd { margin: 0; text-align: right; }
.health-item p { margin: 14px 0 0; color: var(--muted); }
.health-fresh { border-left-color: var(--green); }
.health-stale { border-left-color: var(--coral); }
.health-missing { border-left-color: var(--red); }
.health-unknown { border-left-color: var(--gold); }
.questionnaire-form { display: grid; gap: 16px; }
.questionnaire-section { margin: 0; }
.questionnaire-form label { display: grid; gap: 6px; min-width: 0; }
.questionnaire-form label > span { font-weight: 700; }
.questionnaire-form small { color: var(--muted); }
.questionnaire-form .errorlist { margin: 0; padding-left: 18px; color: var(--red); }
.mapping-edit-grid,
.mapping-discovery-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.questionnaire-publish { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.questionnaire-publish label { flex: 1; }
.rule-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.rule-facts div { padding: 14px; background: #fff; }
.rule-facts dt { color: var(--muted); font-size: 12px; }
.rule-facts dd { margin: 5px 0 0; font-weight: 750; }
.plain-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.plain-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
.notification-list { display: grid; border-top: 1px solid var(--line); background: #fff; }
.notification-item { padding: 15px 18px; border-bottom: 1px solid var(--line); }
.notification-item.unread { border-left: 4px solid var(--green); background: #f3faf7; }
.notification-item > div:first-child { display: flex; justify-content: space-between; gap: 16px; }
.notification-item time { color: var(--muted); white-space: nowrap; }
.notification-item p { margin: 7px 0; color: var(--muted); }
.notification-actions { display: flex; align-items: center; gap: 12px; }
.notification-actions form { margin: 0; }
.nav-notifications { display: inline-flex; align-items: center; gap: 6px; }
.notification-count { min-width: 20px; padding: 1px 6px; border-radius: 10px; background: var(--coral); color: #fff; font-size: 11px; text-align: center; }
.product-score { color: var(--green-dark); font-size: 30px; }
.score-components { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.score-components > div { position: relative; min-width: 0; padding-bottom: 7px; }
.score-components span { display: block; min-height: 38px; color: var(--muted); font-size: 12px; }
.score-components strong { font-size: 18px; }
.score-components span small { display: block; margin-top: 3px; color: #6d7b81; font-size: 11px; }
.score-components .score-unavailable strong { color: var(--muted); font-size: 13px; }
.product-metrics { margin-bottom: 18px; }
.score-components i { position: absolute; bottom: 0; left: 0; height: 3px; max-width: 100%; background: var(--green); }
.timeline-table { display: grid; overflow-x: auto; }
.timeline-table > div { display: grid; grid-template-columns: 110px repeat(4, minmax(110px, 1fr)); min-width: 650px; border-bottom: 1px solid var(--line); }
.timeline-table span { padding: 9px 10px; }
.timeline-head { color: var(--muted); font-size: 12px; font-weight: 750; }
.matrix-table th,
.matrix-table td { text-align: center; }
.matrix-table th:first-child,
.matrix-table td:first-child { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; }
.matrix-table td small { display: block; color: var(--muted); white-space: nowrap; }
.effect-list { display: grid; gap: 1px; background: var(--line); }
.effect-list article { display: grid; grid-template-columns: 180px 1fr auto; gap: 12px; align-items: center; padding: 12px; background: #fff; }
.effect-list time { color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
  .health-grid,
  .mapping-edit-grid,
  .mapping-discovery-grid,
  .rule-facts,
  .score-components { grid-template-columns: 1fr; }
  .questionnaire-publish { align-items: stretch; flex-direction: column; }
  .effect-list article { grid-template-columns: 1fr; }
  .notification-item > div:first-child { align-items: flex-start; flex-direction: column; gap: 3px; }
}
.compact-health-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.health-line { display: grid; gap: 3px; padding: 11px 12px; border-left: 3px solid var(--muted); background: #f7f9f9; }
.health-line span { font-size: 13px; }
.health-line small { color: var(--muted); }
.health-line.health-fresh { border-left-color: var(--green); }
.health-line.health-stale { border-left-color: var(--coral); }
.health-line.health-missing { border-left-color: var(--red); }
.health-line.health-unknown { border-left-color: var(--gold); }
.product-insight-link { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
@media (max-width: 900px) { .compact-health-list { grid-template-columns: 1fr; } }