/* Manage module of the 2D CAD page (cadm-): layer states, layer walk, layer
   translator, view manager, purge, drawing properties, system variables,
   aliases and the quick calculator. Colours come from the core tokens. */

.cadm-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.cadm-btn {
  min-width: 76px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--cad-border-soft);
  border-radius: 2px;
  background: var(--cad-bg-input);
  color: var(--cad-text);
  font: inherit;
  white-space: nowrap;
  cursor: default;
}
.cadm-btn:hover:not(:disabled) { border-color: var(--cad-accent); background: var(--cad-bg-hover); }
.cadm-btn:active:not(:disabled) { background: var(--cad-bg-pressed); }
.cadm-btn:disabled { color: var(--cad-text-disabled); }
.cadm-btn-wide { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.cadm-toggle[aria-pressed="true"] { border-color: var(--cad-accent); background: var(--cad-bg-toggle-on); }

.cadm-input {
  box-sizing: border-box;
  height: 22px;
  min-width: 0;
  padding: 0 4px;
  border: 1px solid var(--cad-border-soft);
  border-radius: 2px;
  outline: none;
  background: var(--cad-bg-input);
  color: var(--cad-text);
  font: inherit;
}
.cadm-input:focus { border-color: var(--cad-accent); }
.cadm-input:disabled { color: var(--cad-text-disabled); }
.cadm-textarea { height: auto; padding: 3px 4px; resize: vertical; }

.cadm-check { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.cadm-check.cadm-disabled { color: var(--cad-text-disabled); }
.cadm-field { display: grid; grid-template-columns: minmax(96px, 40%) minmax(0, 1fr); align-items: center; gap: 8px; min-height: 24px; }
.cadm-field-top { align-items: start; }
.cadm-field > .cadm-grow { display: flex; }
.cadm-field > .cadm-grow > .cadm-input { flex: 1 1 auto; }
.cadm-form { display: flex; flex-direction: column; gap: 6px; }
.cadm-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin: 6px 0 0; padding: 6px 8px 8px; border: 1px solid var(--cad-border-soft); }
.cadm-group > legend { padding: 0 4px; color: var(--cad-text-muted); }
.cadm-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cadm-row-end { justify-content: flex-end; }
.cadm-col { display: flex; flex-direction: column; gap: 6px; }
.cadm-grow { flex: 1 1 auto; min-width: 0; }
.cadm-caption { margin: 2px 0; color: var(--cad-text-muted); }
.cadm-muted { color: var(--cad-text-muted); }
.cadm-bold { font-weight: 600; }
.cadm-mono { font-family: var(--cad-font-mono); }
.cadm-error { margin: 2px 0 0; color: var(--cad-danger); }
.cadm-error[hidden] { display: none; }
.cadm-msg p { margin: 0 0 4px; white-space: pre-wrap; }
.cadm-swatch { display: inline-block; flex: none; width: 12px; height: 12px; border: 1px solid color-mix(in srgb, var(--cad-text) 45%, transparent); }

/* lists */
.cadm-list { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--cad-border-soft); background: var(--cad-bg-input); }
.cadm-list-head { display: flex; flex: none; background: var(--cad-bg-panel-title); }
.cadm-list-head > span { flex: 1 1 0; min-width: 0; padding: 2px 6px; overflow: hidden; border-right: 1px solid var(--cad-border-soft); text-overflow: ellipsis; white-space: nowrap; }
.cadm-list-body { flex: 1 1 auto; min-height: 60px; max-height: 240px; overflow: auto; outline: none; }
.cadm-list-body:focus { box-shadow: inset 0 0 0 1px var(--cad-accent); }
.cadm-list-row { display: flex; align-items: center; min-height: 22px; cursor: default; }
.cadm-list-row:hover { background: var(--cad-bg-hover); }
.cadm-list-row[aria-selected="true"] { background: var(--cad-bg-toggle-on); }
.cadm-list-cell { flex: 1 1 0; min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadm-list-empty { padding: 8px; color: var(--cad-text-muted); }

/* tabs and property tables */
.cadm-tabs { display: flex; border-bottom: 1px solid var(--cad-border-soft); }
.cadm-tab { margin-bottom: -1px; padding: 4px 14px; border: 1px solid transparent; border-bottom: 0; background: transparent; color: var(--cad-text-muted); font: inherit; cursor: default; }
.cadm-tab[aria-selected="true"] { border-color: var(--cad-border-soft); background: var(--cad-bg-panel); color: var(--cad-text); }
.cadm-tabpanes { min-height: 230px; padding: 10px 2px 2px; }
.cadm-tabpane[hidden] { display: none; }
.cadm-props { display: flex; flex-direction: column; border: 1px solid var(--cad-border-soft); background: var(--cad-bg-input); }
.cadm-prop { display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); min-height: 22px; border-bottom: 1px solid var(--cad-border-soft); }
.cadm-prop:last-child { border-bottom: 0; }
.cadm-prop > span { padding: 2px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadm-prop > span:first-child { background: var(--cad-bg-panel-title); color: var(--cad-text-muted); }

/* view manager */
.cadm-view-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 10px; }
.cadm-view-actions { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; }
.cadm-view-list .cadm-list-body { height: 220px; max-height: 220px; }

/* layer states */
.cadm-states-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.cadm-states-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cadm-states-actions { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; }
.cadm-state-list .cadm-list-body { height: 180px; max-height: 180px; }
.cadm-mask { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.cadm-grid { border: 1px solid var(--cad-border-soft); background: var(--cad-bg-input); }
.cadm-grid-head, .cadm-grid-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 44px 44px 44px minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) 44px; align-items: center; min-height: 24px; }
.cadm-grid-head { background: var(--cad-bg-panel-title); }
.cadm-grid-head > span, .cadm-grid-row > span { min-width: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cadm-grid-body { max-height: 260px; overflow: auto; }
.cadm-grid-row[aria-selected="true"] { background: var(--cad-bg-toggle-on); }
.cadm-cell-btn { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 4px; overflow: hidden; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; text-overflow: ellipsis; white-space: nowrap; cursor: default; }
.cadm-cell-btn:hover { border-color: var(--cad-accent); }
.cadm-state-edit { display: flex; flex-direction: column; gap: 8px; }
/* WP-14: 투명도 column of 도면층 상태 편집 */
.cadm-state-edit .cadm-grid-head, .cadm-state-edit .cadm-grid-row { grid-template-columns: minmax(0, 1.6fr) 44px 44px 44px minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1fr) 56px 44px; }
.cadm-cell-num { width: 44px; height: 20px; padding: 0 3px; text-align: right; }
.cadm-input.cadm-invalid { border-color: var(--cad-danger); }
.cadm-layer-pick .cadm-list-body { height: 220px; max-height: 220px; }

/* layer walk and translator */
.cadm-walk { display: flex; flex-direction: column; gap: 6px; }
.cadm-walk-list .cadm-list-body { height: 260px; max-height: 260px; }
.cadm-trans { display: flex; flex-direction: column; gap: 4px; }
.cadm-trans-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.cadm-trans-mid { display: flex; flex-direction: column; gap: 6px; }
.cadm-trans-list .cadm-list-body { height: 150px; max-height: 150px; }
.cadm-trans-map .cadm-list-body { height: 110px; max-height: 110px; }
.cadm-layout-list .cadm-list-body { height: 130px; max-height: 130px; }

/* purge */
.cadm-purge { display: flex; flex-direction: column; gap: 6px; }
.cadm-purge-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; }
.cadm-tree { height: 240px; overflow: auto; border: 1px solid var(--cad-border-soft); outline: none; background: var(--cad-bg-input); }
.cadm-tree-row { display: flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 6px; white-space: nowrap; cursor: default; }
.cadm-tree-kind { padding-left: 22px; }
.cadm-tree-item { padding-left: 42px; }
.cadm-tree-item:hover { background: var(--cad-bg-hover); }
.cadm-tree-item[aria-selected="true"] { background: var(--cad-bg-toggle-on); }
.cadm-purge-detail { height: 228px; padding: 6px 8px; overflow: auto; border: 1px solid var(--cad-border-soft); background: var(--cad-bg-input); }
.cadm-purge-detail p { margin: 4px 0; white-space: normal; }

/* drawing properties, system variables, aliases */
.cadm-custom-main, .cadm-alias-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.cadm-custom-list .cadm-list-body { height: 170px; max-height: 170px; }
.cadm-alias-list .cadm-list-body { height: 280px; max-height: 280px; }
.cadm-sysvar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; }
.cadm-sysvar-left, .cadm-sysvar-right { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cadm-sysvar-list .cadm-list-body { height: 290px; max-height: 290px; font-family: var(--cad-font-mono); }
.cadm-sysvar-text { min-height: 72px; margin: 0; padding: 6px 8px; border: 1px solid var(--cad-border-soft); background: var(--cad-bg-input); white-space: normal; }

/* quick calculator */
.cadm-calc { display: flex; flex-direction: column; gap: 6px; min-width: 240px; padding: 6px; overflow: auto; }
.cadm-calc > * { flex: none; }
.cadm-calc-tools { display: flex; gap: 2px; }
.cadm-calc-tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--cad-text); font: inherit; cursor: default; }
.cadm-calc-tool:hover { border-color: var(--cad-accent); background: var(--cad-bg-hover); }
.cadm-calc-history { display: flex; flex-direction: column; height: 96px; overflow: auto; border: 1px solid var(--cad-border-soft); background: var(--cad-bg-input); }
.cadm-calc-entry { display: flex; flex: none; justify-content: space-between; gap: 8px; padding: 1px 6px; border: 0; background: transparent; color: var(--cad-text); font: inherit; font-family: var(--cad-font-mono); text-align: left; cursor: default; }
.cadm-calc-entry:hover { background: var(--cad-bg-hover); }
.cadm-calc-result { color: var(--cad-keyword); }
.cadm-calc-input { height: 26px; font-family: var(--cad-font-mono); }
.cadm-calc-status { min-height: 16px; color: var(--cad-text-muted); }
.cadm-calc-status.cadm-error { color: var(--cad-danger); }
.cadm-calc-section { border-top: 1px solid var(--cad-border-soft); }
.cadm-calc-section > summary { padding: 4px 0; cursor: default; user-select: none; }
.cadm-calc-pad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; padding-bottom: 6px; }
.cadm-calc-key { height: 24px; padding: 0; border: 1px solid var(--cad-border-soft); border-radius: 2px; background: var(--cad-bg-input); color: var(--cad-text); font: inherit; cursor: default; }
.cadm-calc-key:hover { border-color: var(--cad-accent); background: var(--cad-bg-hover); }
.cadm-calc-equal { grid-column: span 1; border-color: var(--cad-accent); }
.cadm-calc-vars .cadm-list-body { height: 110px; max-height: 110px; }
.cadm-calc .cadm-field { grid-template-columns: 84px minmax(0, 1fr); }