/* Shared styles for clinical specialty sub-screens */
/* Loaded by inline import in each desk-3-*.html and desk-6-*.html */

.spec-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gray-200);
  margin-bottom: 16px;
  overflow-x: auto;
}
.spec-tabs a {
  padding: 10px 16px;
  font-size: var(--t-sm);
  color: var(--gray-700);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  font-weight: 500;
}
.spec-tabs a:hover { color: var(--primary-500); background: var(--gray-50); }
.spec-tabs a.active { color: var(--primary-700); border-color: var(--primary-500); font-weight: 600; }
.spec-tabs a .pip {
  display: inline-flex; width: 18px; height: 18px;
  align-items: center; justify-content: center;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  margin-right: 6px;
}
.spec-tabs a .pip.done { background: var(--success); color: #fff; }
.spec-tabs a .pip.current { background: var(--primary-500); color: #fff; }
.spec-tabs a .pip.pending { background: var(--gray-200); color: var(--gray-700); }

.mode-toggle {
  display: inline-flex;
  background: var(--gray-100);
  border-radius: var(--r-md);
  padding: 2px;
  font-size: var(--t-xs);
  font-weight: 600;
}
.mode-toggle a {
  padding: 4px 10px;
  border-radius: var(--r-sm);
  color: var(--gray-700);
  text-decoration: none;
}
.mode-toggle a.active { background: #fff; color: var(--primary-700); box-shadow: var(--sh-card); }

.field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.field-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px 24px; }
.specialty-section { padding: 12px 0; border-top: 1px solid var(--gray-100); }
.specialty-section:first-child { border-top: 0; padding-top: 0; }
.specialty-section h4 { font-size: var(--t-md); font-weight: 600; margin: 0 0 12px; color: var(--primary-700); }

.score-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.score-input-inline { display: inline-flex; gap: 3px; }
.score-input-inline button {
  width: 30px; height: 30px;
  font-weight: 700;
  border: 1px solid var(--gray-300);
  background: #fff;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.score-input-inline button.s1 { color: var(--loai-1); }
.score-input-inline button.s2 { color: var(--loai-2); }
.score-input-inline button.s3 { color: var(--loai-3); }
.score-input-inline button.s4 { color: var(--loai-4); }
.score-input-inline button.s5 { color: var(--loai-5); }
.score-input-inline button.s6 { color: var(--loai-6); }
.score-input-inline button.active {
  background: var(--primary-500);
  color: #fff !important;
  border-color: var(--primary-500);
}

.read-row {
  display: grid; grid-template-columns: 220px 1fr 80px;
  gap: 12px; padding: 8px 0;
  border-bottom: 1px dashed var(--gray-200);
  font-size: var(--t-sm);
}
.read-row .lbl { color: var(--gray-700); font-weight: 500; }
.read-row .val { font-weight: 600; }
.read-row .sc {
  text-align: center; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; color: #fff;
}