/* KRM 1.62.7 — practice detail UX; loaded after styles.css */
#detailPanel.detail-panel {
  box-sizing: border-box;
  width: min(1240px, 96vw);
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .85fr);
  align-content: start;
  align-items: start;
  gap: 0 22px;
  padding: clamp(18px, 2.4vw, 32px);
  scroll-padding-block: 20px;
}
#detailPanel > .detail-top { grid-column: 1 / -1; position: sticky; top: -32px; z-index: 2; padding: 5px 0 12px; background: #f8faf9; }
#detailPanel > .detail-summary,
#detailPanel > .ticket-update,
#detailPanel > .checklist,
#detailPanel > .detail-actions { grid-column: 1; min-width: 0; }
#detailPanel > .detail-accordion { grid-column: 2; min-width: 0; }
#detailPanel > .ticket-update { margin-top: 0; }
#detailPanel .practice-phase-list { display: grid; gap: 9px; }
#detailPanel .phase-help { margin: -4px 0 11px; color: var(--muted); font-size: 12px; line-height: 1.45; }
#detailPanel .practice-phase { background: var(--white); border: 1px solid var(--line); border-radius: 11px; overflow: clip; }
#detailPanel .practice-phase[open] { border-color: #a9c9bd; box-shadow: 0 5px 18px rgba(24, 51, 45, .06); }
#detailPanel .practice-phase > summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) 20px; gap: 10px; align-items: center; list-style: none; cursor: pointer; padding: 12px; }
#detailPanel .practice-phase > summary::-webkit-details-marker,
#detailPanel .detail-accordion > summary::-webkit-details-marker { display: none; }
#detailPanel .phase-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf2f0; color: var(--ink); font-size: 12px; font-weight: 800; }
#detailPanel .practice-phase.is-complete .phase-number { background: #dceee8; color: var(--green); }
#detailPanel .phase-heading { display: grid; gap: 3px; min-width: 0; }
#detailPanel .phase-heading strong { font-size: 13px; }
#detailPanel .phase-heading small { color: var(--muted); font-size: 11px; }
#detailPanel .phase-state { color: var(--green); font-size: 19px; text-align: center; }
#detailPanel .phase-body { padding: 0 12px 13px 50px; }
#detailPanel .phase-body label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
#detailPanel .phase-required { color: var(--red); font-size: 11px; font-weight: 700; }
#detailPanel .phase-required.is-optional { color: var(--muted); }
#detailPanel .phase-policy-settings,
.phase-policy-create { margin: 8px 0 12px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fbfa; }
#detailPanel .phase-policy-settings summary,
.phase-policy-create summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; }
#detailPanel .phase-policy-settings summary::-webkit-details-marker,
.phase-policy-create summary::-webkit-details-marker { display: none; }
#detailPanel .phase-policy-settings summary small,
.phase-policy-create summary small { color: var(--muted); font-size: 11px; }
#detailPanel .phase-policy-settings p,
.phase-policy-create p { margin: 8px 0; color: var(--muted); font-size: 12px; }
.phase-policy-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 12px; margin: 10px 0; }
.phase-policy-options label { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 7px 8px; border-radius: 8px; background: #fff; font-size: 12px; line-height: 1.35; }
.phase-policy-options input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
#detailPanel .phase-policy-settings > button { margin-top: 8px; }
.phase-policy-create { margin: 10px 0; }
.phase-policy-create summary strong { font-size: 13px; }
#createPhaseNotePolicy { width: 100%; }
#detailPanel .phase-body textarea { box-sizing: border-box; width: 100%; min-height: 78px; resize: vertical; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; font: inherit; line-height: 1.45; }
#detailPanel .phase-body textarea[aria-invalid="true"] { border-color: var(--red); background: #fff8f7; }
#detailPanel .phase-error { display: block; margin-top: 5px; color: var(--red); font-size: 12px; font-weight: 600; }
#detailPanel .phase-error[hidden] { display: none; }
#detailPanel .phase-body textarea:focus { outline: 2px solid color-mix(in srgb, var(--green) 35%, transparent); border-color: var(--green); }
#detailPanel .phase-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
#detailPanel .phase-actions button { min-height: 40px; }
#detailPanel .phase-actions button[disabled] { opacity: .65; cursor: wait; }
#detailPanel .detail-accordion { margin: 0 0 12px; padding: 0; overflow: clip; background: var(--white); border: 1px solid var(--line); border-radius: 11px; }
#detailPanel .detail-accordion > summary { position: relative; cursor: pointer; list-style: none; padding: 14px 40px 14px 15px; font-size: 13px; font-weight: 800; }
#detailPanel .detail-accordion > summary::after { content: "+"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 19px; }
#detailPanel .detail-accordion[open] > summary::after { content: "−"; }
#detailPanel .detail-accordion > :not(summary) { margin-inline: 14px; }
#detailPanel .detail-accordion > :last-child { margin-bottom: 14px; }
#detailPanel .detail-accordion.contact-card { background: var(--white); }
#detailPanel .history-content { padding: 0 14px 10px; }
#detailPanel .history-content > .history-item:last-child { padding-bottom: 2px; }
#detailPanel .detail-actions { position: sticky; bottom: -32px; z-index: 1; flex-wrap: wrap; padding: 10px 0; background: #f8faf9; }
#detailPanel .detail-actions button { min-width: 130px; }
@media (max-width: 900px) {
  #detailPanel.detail-panel { grid-template-columns: minmax(0, 1fr); width: min(760px, 96vw); }
  #detailPanel > .detail-top,
  #detailPanel > .detail-summary,
  #detailPanel > .ticket-update,
  #detailPanel > .checklist,
  #detailPanel > .detail-actions,
  #detailPanel > .detail-accordion { grid-column: 1; }
}
@media (max-width: 620px) {
  #detailPanel.detail-panel { width: 100%; max-width: none; height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 14px max(86px, env(safe-area-inset-bottom)); gap: 0; }
  #detailPanel > .detail-top { top: calc(-1 * max(14px, env(safe-area-inset-top))); }
  #detailPanel .detail-actions { bottom: calc(-1 * max(86px, env(safe-area-inset-bottom))); display: grid; grid-template-columns: 1fr 1fr; }
  #detailPanel .detail-actions button { min-width: 0; width: 100%; }
  #detailPanel .phase-body { padding-left: 12px; }
  #detailPanel .phase-actions { display: grid; grid-template-columns: 1fr; }
  #detailPanel .phase-actions button { width: 100%; }
  .phase-policy-options { grid-template-columns: 1fr; }
}

/* K RM 1.62.12 — visual refresh for the ticket detail */
#detailOverlay {
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 34, 29, .48);
  backdrop-filter: blur(6px);
}
#detailPanel.detail-panel {
  width: min(1280px, calc(100vw - 40px));
  max-width: 1280px;
  height: min(92dvh, 1000px);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 22px;
  background: linear-gradient(145deg, #f8fbfa 0%, #f1f6f4 100%);
  box-shadow: 0 28px 90px rgba(9, 30, 24, .28);
  padding: clamp(20px, 2.8vw, 34px);
  gap: 16px 24px;
  scrollbar-gutter: stable;
}
#detailPanel > .detail-top {
  top: calc(-1 * clamp(20px, 2.8vw, 34px));
  padding: 5px 0 18px;
  border-bottom: 1px solid #e2ebe7;
  background: linear-gradient(145deg, #f8fbfa 0%, #f5f9f7 100%);
}
#detailPanel .detail-top h2 {
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -.035em;
  font-weight: 600;
}
#detailPanel .detail-top .subtitle { margin: 6px 0 0; }
#detailPanel .close-btn {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid #dce7e2;
  background: #fff;
  box-shadow: 0 3px 10px rgba(24, 51, 45, .07);
}
#detailPanel .detail-summary {
  margin: 0 0 4px;
  padding: clamp(17px, 2vw, 24px);
  border-color: #e0e9e5;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(24, 51, 45, .045);
}
#detailPanel .detail-progress-head strong:first-child {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #edf3f0;
  color: #31584c;
}
#detailPanel .detail-progress-head strong:last-child { font-size: 13px; }
#detailPanel .detail-summary .progress { height: 10px; border-radius: 999px; }
#detailPanel .detail-grid { gap: 9px; margin-top: 15px; }
#detailPanel .detail-grid div {
  min-height: 62px;
  padding: 12px 13px;
  border: 1px solid #edf1ef;
  border-radius: 12px;
  background: #f8faf9;
}
#detailPanel .detail-grid small { font-size: 9px; letter-spacing: .045em; }
#detailPanel .detail-grid strong { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
#detailPanel .ticket-update,
#detailPanel .checklist,
#detailPanel .assignment-box,
#detailPanel .workflow-data,
#detailPanel .materials-box {
  border-color: #e1eae6;
  border-radius: 16px;
  box-shadow: 0 5px 18px rgba(24, 51, 45, .035);
}
#detailPanel .ticket-update h3,
#detailPanel .checklist h3,
#detailPanel .assignment-box h3,
#detailPanel .workflow-data h3,
#detailPanel .materials-box h3,
#detailPanel .ticket-files h3,
#detailPanel .ticket-chat h3,
#detailPanel .history h3 { font-size: 19px; letter-spacing: -.02em; }
#detailPanel .detail-accordion {
  border-color: #e1eae6;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(24, 51, 45, .025);
}
#detailPanel .detail-accordion > summary { padding-block: 16px; font-size: 14px; }
#detailPanel .detail-accordion[open] > summary { color: #205c4b; }
#detailPanel .practice-phase { border-radius: 13px; }
#detailPanel .practice-phase > summary { padding-block: 14px; }
#detailPanel .phase-number { width: 30px; height: 30px; }
#detailPanel .phase-heading strong { font-size: 14px; }
#detailPanel .phase-body textarea { min-height: 88px; background: #fcfdfd; }
#detailPanel .detail-actions {
  bottom: -34px;
  padding: 14px 0 12px;
  gap: 9px;
  border-top: 1px solid #e2ebe7;
  background: linear-gradient(180deg, rgba(248, 251, 250, .92), #f4f8f6 35%);
  backdrop-filter: blur(10px);
}
#detailPanel .detail-actions button {
  min-height: 44px;
  border-radius: 11px;
  font-weight: 750;
}
#detailPanel :is(button, input, select, textarea, summary, a):focus-visible {
  outline: 3px solid rgba(34, 125, 94, .35);
  outline-offset: 2px;
}
@media (max-width: 900px) {
  #detailOverlay { padding: 12px; }
  #detailPanel.detail-panel {
    width: min(760px, calc(100vw - 24px));
    height: calc(100dvh - 24px);
    border-radius: 20px;
    padding: 22px;
  }
  #detailPanel > .detail-top { top: -22px; }
  #detailPanel .detail-actions { bottom: -22px; }
}
@media (max-width: 620px) {
  #detailOverlay { padding: 0; }
  #detailPanel.detail-panel {
    width: 100%;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    padding: max(18px, env(safe-area-inset-top)) 16px max(92px, env(safe-area-inset-bottom));
    gap: 12px;
  }
  #detailPanel > .detail-top { top: calc(-1 * max(18px, env(safe-area-inset-top))); padding-bottom: 14px; }
  #detailPanel .detail-summary { padding: 16px; border-radius: 15px; }
  #detailPanel .detail-grid div { min-height: 56px; padding: 10px; }
  #detailPanel .detail-actions {
    bottom: calc(-1 * max(92px, env(safe-area-inset-bottom)));
    grid-template-columns: 1fr 1fr;
    padding: 11px 0 max(10px, env(safe-area-inset-bottom));
  }
  #detailPanel .detail-actions button { min-height: 46px; font-size: 12px; }
}
@media (prefers-reduced-motion: no-preference) {
  #detailPanel.detail-panel { animation: krm-detail-enter .18s ease-out both; }
  @keyframes krm-detail-enter { from { opacity: .88; transform: translateY(7px) scale(.995); } to { opacity: 1; transform: none; } }
}

/* K RM 1.62.15 — ticket phase section: compact, balanced and responsive */
#detailPanel .practice-phase-list {
  min-width: 0;
  padding: clamp(14px, 2vw, 22px);
  overflow: visible;
  background: #fff;
}
#detailPanel .phase-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 4px;
}
#detailPanel .phase-section-head h3 { margin: 0; }
#detailPanel .phase-section-head .phase-help { margin: 5px 0 0; }
#detailPanel .phase-mode-switch {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border: 1px solid #dce8e3;
  border-radius: 12px;
  background: #f1f6f4;
}
#detailPanel .phase-mode-switch button {
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 9px;
  font-size: 12px;
}
#detailPanel .phase-batch-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  gap: 12px;
  margin: 14px 0 8px;
  padding: 10px 12px;
  border: 1px solid #cfe3da;
  border-radius: 12px;
  background: rgba(245, 250, 247, .97);
  box-shadow: 0 4px 12px rgba(20, 65, 51, .07);
  backdrop-filter: blur(8px);
}
#detailPanel .phase-batch-toolbar > span { color: #31584c; font-size: 13px; font-weight: 750; }
#detailPanel .phase-batch-toolbar button { min-height: 40px; padding: 8px 14px; }
#detailPanel .phase-batch-note { grid-column: 1 / -1; display: grid; gap: 7px; color: #24483d; font-size: 13px; font-weight: 750; }
#detailPanel .phase-batch-note textarea { width: 100%; min-height: 82px; resize: vertical; border: 1px solid #c8dbd3; border-radius: 10px; padding: 11px 12px; background: #fff; color: #203b33; font: inherit; font-weight: 500; }
#detailPanel .phase-batch-note textarea[aria-invalid="true"] { border-color: #c83f3f; box-shadow: 0 0 0 2px rgba(200, 63, 63, .1); }
#detailPanel .phase-batch-targets { grid-column: 1 / -1; color: #526b62; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
#detailPanel .phase-batch-toolbar > [data-batch-note-error] { grid-column: 1 / -1; color: #b42d2d; font-size: 12px; font-weight: 700; }
#detailPanel .practice-phase.is-batch-selected { border-color: #4a9b7e; box-shadow: 0 0 0 2px rgba(58, 145, 113, .12); }
#detailPanel .phase-multi-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
  color: #49645b;
  font-size: 11px;
  font-weight: 700;
}
#detailPanel .phase-multi-choice input { width: 18px; height: 18px; accent-color: #176b57; }
#detailPanel .practice-phase.is-multiselect > summary { grid-template-columns: auto 30px minmax(0, 1fr) 20px; }
#detailPanel .practice-phase.is-multiselect .phase-multi-choice { margin: 0; }
#detailPanel .phase-batch-hint { color: #62766e; font-size: 12px; }
#detailPanel .practice-phase-list > .phase-policy-settings { margin-top: 14px; }
@media (max-width: 620px) {
  #detailPanel .practice-phase-list { padding: 12px; }
  #detailPanel .phase-section-head { align-items: stretch; flex-direction: column; gap: 10px; }
  #detailPanel .phase-mode-switch { display: grid; grid-template-columns: 1fr 1fr; }
  #detailPanel .phase-mode-switch button { width: 100%; }
  #detailPanel .phase-batch-toolbar { grid-template-columns: 1fr; align-items: stretch; }
  #detailPanel .phase-batch-toolbar > * { grid-column: 1; }
  #detailPanel .phase-batch-toolbar button { width: 100%; }
  #detailPanel .phase-multi-choice span { display: none; }
  #detailPanel .practice-phase > summary { gap: 8px; }
}

/* K RM 1.63.0 — workflow first, supporting panels immediately accessible. */
@media (min-width: 901px) {
  #detailPanel > .detail-summary { grid-row: 2; }
  #detailPanel > .ticket-update { grid-row: 3; }
  #detailPanel > .checklist { grid-row: 4; }
  #detailPanel > .detail-actions { grid-row: 5; }
  #detailPanel > .ticket-files { grid-column: 2; grid-row: 2; }
  #detailPanel > .ticket-chat { grid-column: 2; grid-row: 3; }
  #detailPanel > .history { grid-column: 2; grid-row: 4; }
  #detailPanel > .contact-card { grid-column: 2; grid-row: 5; }
  #detailPanel > .workflow-data { grid-column: 2; grid-row: 6; }
  #detailPanel > .materials-box { grid-column: 2; grid-row: 7; }
}
@media (max-width: 900px) {
  #detailPanel > .ticket-files,
  #detailPanel > .ticket-chat,
  #detailPanel > .history { grid-column: 1; }
}