/* /websys/mock/css/mock_base.css */

/* ベース設定 */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body.mock-body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", sans-serif;
  font-size: 14px;
  color: var(--mock-text);
  background: var(--mock-page-bg);
  padding: 50px 15px;
}
.app {
    height: auto!important;
    padding: 16px 18px!important;
}
/* テーマ変数（ここだけ変えれば全モックのトーンが変わる） */
:root {
  --mock-page-bg: #f3f4f6;
  --mock-card-bg: #ffffff;
  --mock-border:   #e5e7eb;
  --mock-text:     #111827;
  --mock-muted:    #6b7280;

  --mock-kpi-grad-from: #dbeafe;
  --mock-kpi-grad-to:   #eff6ff;
  --mock-kpi-border:    #bfdbfe;

  --mock-primary:       #3b82f6;
  --mock-primary-soft:  #93c5fd;
  --mock-accent-yellow: #fde68a;
  --mock-accent-green:  #a7f3d0;
  --mock-accent-orange: #fdba74;

  --mock-shadow-soft:   0 10px 25px rgba(15,23,42,0.06);
  --mock-radius-lg:     16px;
  --mock-radius-md:     10px;
}

/* 共通ラッパー */
.mock-wrap {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--mock-card-bg);
  border-radius: var(--mock-radius-lg);
  padding: 14px 16px 16px;
  border: 1px solid var(--mock-border);
  box-shadow: var(--mock-shadow-soft);
}

/* ヘッダ共通 */
.mock-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--mock-text);
  margin-bottom: 12px;
}
.mock-title,
.mock-dash-title {
  font-size: 18px;
  font-weight: 600;
}

.mock-dash-sub {
  font-size: 12px;
  color: var(--mock-muted);
}

.mock-dash-filter {
  font-size: 12px;
  text-align: right;
  color: var(--mock-muted);
}

/* KPI カード共通 */
.mock-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.mock-kpi-card {
  background: radial-gradient(circle at top left, var(--mock-kpi-grad-from), var(--mock-kpi-grad-to));
  border-radius: var(--mock-radius-md);
  padding: 10px 10px 8px;
  border: 1px solid var(--mock-kpi-border);
  color: var(--mock-text);
}

.mock-kpi-label {
  font-size: 11px;
  color: #4b5563;
}

.mock-kpi-value {
  font-size: 18px;
  font-weight: 700;
  margin-top: 2px;
}

.mock-kpi-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* 汎用カード */
.mock-card {
  background: var(--mock-card-bg);
  border-radius: var(--mock-radius-md);
  border: 1px solid var(--mock-border);
  padding: 10px 10px 12px;
  color: var(--mock-text);
}

.mock-card h2 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.mock-card-sub {
  font-size: 11px;
  color: var(--mock-muted);
  margin-bottom: 8px;
}

/* テーブル共通 */
.mock-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.mock-table th,
.mock-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--mock-border);
  text-align: left;
}

.mock-table th {
  color: var(--mock-muted);
  font-weight: 500;
}

.mock-table td {
  color: var(--mock-text);
}

.mock-note {
  font-size: 10px;
  color: var(--mock-muted);
}

/* グラフ系パーツ（棒・凡例） */
.mock-chart-bar {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 130px;
}

.mock-chart-bar .bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    to top,
    rgba(147,197,253,0.15),
    rgba(59,130,246,0.75)
  );
  position: relative;
  overflow: hidden;
}

.mock-chart-bar .bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,0.4);
}

.mock-chart-bar-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 10px;
  color: var(--mock-muted);
}

.mock-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-size: 10px;
  color: #4b5563;
}

.mock-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mock-legend-dot {
  width: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--mock-primary-soft);
}

.mock-legend-dot2 {
  width: 10px;
  height: 4px;
  border-radius: 2px;
  background: var(--mock-accent-yellow);
}

/* 円グラフパーツ */
.mock-chart-pie {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr;
  gap: 6px;
  align-items: center;
}

.mock-pie-visual {
  width: 120px;
  height: 120px;
  border-radius: 999px;
  margin: 0 auto;
  background: conic-gradient(
    var(--mock-primary-soft) 0 130deg,
    var(--mock-accent-green) 130deg 220deg,
    var(--mock-accent-yellow) 220deg 290deg,
    var(--mock-accent-orange) 290deg 360deg
  );
  box-shadow: 0 0 0 8px #ffffff, 0 0 0 9px var(--mock-border);
}

.mock-pie-legend {
  font-size: 11px;
  color: #4b5563;
}

.mock-pie-legend ul {
  margin: 0;
  padding-left: 14px;
}

.mock-pie-legend li {
  margin-bottom: 4px;
}

/* レイアウトの汎用グリッド（必要なら） */
.mock-grid-main {
  display: grid;
  grid-template-columns: 2.1fr 1.2fr;
  gap: 10px;
  margin-bottom: 10px;
}

.mock-grid-bottom {
  display: grid;
  grid-template-columns: 1.4fr 1.6fr;
  gap: 10px;
  margin-top: 4px;
}
.request-table {
    table-layout: fixed;
}
.small-btn-group {
    flex-direction: column;
}
body.page-manufact_qa_scene5_partner_view .grid-main {
grid-template-columns: 2.2fr 0.8fr;
}
body.page-manufact_qa_scene5_partner_view > div > section.grid-main > article:nth-child(1) > table > thead > tr > th:nth-child(4),
body.page-manufact_qa_scene5_partner_view > div > section.grid-main > article:nth-child(1) > table > thead > tr > th:nth-child(5) {
    width: 30%;
}