/* ==========================================================================
   Audio Patch List — page styles
   Builds on css/styles.css, css/led-tool.css and css/dmx-tool.css; adds only
   the patch tool's own components (prefixed .ap-).
   ========================================================================== */

.ap-layout [hidden] { display: none !important; }
.ap-layout textarea {
  width: 100%; min-height: 76px; resize: vertical;
  padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface);
  font: inherit; font-size: 0.9rem; color: var(--color-text);
}
.ap-layout textarea:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.ap-layout .led-field input[type="time"] {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.92rem; color-scheme: dark;
}
.ap-console { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 10px; }
.ap-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; align-items: end; }
.ap-sub { font-size: 0.95rem; margin: 22px 0 10px; color: var(--color-heading); }
.ap-sub:first-of-type { margin-top: 4px; }

/* ---------- Editable tables ---------- */
.ap-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.84rem; }
.ap-table th {
  position: sticky; top: 0; z-index: 1; background: var(--color-surface-2); text-align: left; white-space: nowrap;
  font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted);
  padding: 9px 6px; border-bottom: 1px solid var(--color-border);
}
.ap-table td { padding: 4px 3px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.ap-table tr:last-child td { border-bottom: 0; }
.ap-table input[type="text"], .ap-table input[type="number"], .ap-table input[type="time"], .ap-table select {
  width: 100%; min-width: 0; padding: 6px 7px; font-size: 0.83rem; border-radius: 4px;
  border: 1px solid var(--color-border); background: var(--color-bg-alt); color: var(--color-text); color-scheme: dark;
}
.ap-table input:focus, .ap-table select:focus { outline: 2px solid var(--color-accent); outline-offset: 0; }
.ap-table input[type="number"] { -moz-appearance: textfield; }
.ap-table input[type="number"]::-webkit-inner-spin-button { opacity: 0.4; }
.ap-table input[type="color"] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--color-border); border-radius: 4px; background: transparent; cursor: pointer; }
.ap-table .is-bad { border-color: #e84855 !important; background: rgba(232, 72, 85, 0.12) !important; }
.ap-table .is-auto { color: var(--color-text-muted); }
.ap-table td.ap-w-xs > * { min-width: 64px; } .ap-table td.ap-w-sm > * { min-width: 78px; } .ap-table td.ap-w-md > * { min-width: 120px; }
.ap-table td.ap-w-lg > * { min-width: 150px; } .ap-table td.ap-w-xl > * { min-width: 200px; }
.ap-chk { text-align: center; }
.ap-chk input { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }
.ap-acts { white-space: nowrap; text-align: right; }
.ap-ic {
  border: 0; background: transparent; color: var(--color-text-muted); padding: 5px 6px; border-radius: 4px;
  font-size: 0.8rem; line-height: 1; cursor: pointer;
}
.ap-ic:hover:not(:disabled) { color: var(--white); background: var(--color-surface-4); }
.ap-ic:disabled { opacity: 0.25; cursor: default; }
.ap-ic.del:hover { color: #ff7a85; background: rgba(232, 72, 85, 0.14); }
.ap-ic svg { width: 14px; height: 14px; display: block; }

/* swatches */
.ap-dot { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--c); vertical-align: -1px; border: 1px solid rgba(255,255,255,0.25); }
.ap-boxsel { border-left: 6px solid var(--c, var(--color-border)) !important; }

/* ---------- Band tabs ---------- */
.ap-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ap-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text);
  font-size: 0.86rem; font-weight: 600; cursor: pointer; transition: background var(--transition), border-color var(--transition);
}
.ap-tab i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.ap-tab small { color: var(--color-text-muted); font-weight: 400; }
.ap-tab:hover { background: var(--color-surface-3); }
.ap-tab[aria-selected="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, var(--color-surface-2)); color: var(--white); }
.ap-tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ap-tab.add { border-style: dashed; color: var(--color-link); }

/* ---------- Band panel ---------- */
.ap-band { border: 1px solid var(--color-border); border-top: 4px solid var(--c); border-radius: var(--radius-md); background: var(--color-surface-2); padding: 16px; }
.ap-band-head { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 2fr) 54px repeat(3, minmax(0, 1fr)); align-items: end; }
.ap-band-head .led-field { margin-bottom: 12px; }
.ap-band-head .led-field input, .ap-band-head .led-field select { padding: 8px 10px; font-size: 0.88rem; }
.ap-band-head input[type="color"] { width: 100%; height: 37px; padding: 0; border: 1px solid var(--color-border); border-radius: 4px; background: transparent; cursor: pointer; }
.ap-band-row2 { display: grid; gap: 0 12px; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.4fr) 84px; align-items: end; }
.ap-band-row2 .led-field { margin-bottom: 12px; }
.ap-band-row2 .led-field input { padding: 8px 10px; font-size: 0.88rem; }
.ap-band textarea { min-height: 58px; }
.ap-band-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.ap-band h3 { font-size: 0.98rem; margin: 22px 0 8px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ap-band h3 small { font-family: var(--font-body); font-weight: 400; color: var(--color-text-muted); font-size: 0.8rem; }
.ap-band .led-table-wrap { background: var(--color-bg-alt); border-radius: var(--radius-sm); max-height: 70vh; overflow: auto; }
.ap-in-row td:first-child { border-left: 4px solid var(--g); }
.ap-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 12px; }
.ap-tools .led-field { margin: 0; }
.ap-tools .led-field select, .ap-tools .led-field input { padding: 8px 10px; font-size: 0.86rem; }
.ap-tools .ap-qty { width: 80px; }
.ap-tools .ap-tpl { min-width: 220px; }
.ap-tools .ap-spacer { flex: 1 1 auto; }

/* ---------- Totals ---------- */
.ap-totals { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.ap-totals > * { min-width: 0; }
@media (min-width: 1360px) { .ap-totals { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .ap-totals > :first-child { grid-row: span 2; } }
.ap-totals h3 { font-size: 0.92rem; margin-bottom: 8px; color: var(--color-heading); }
.ap-totals .led-table td.num, .ap-totals .led-table th.num { width: 90px; }
.ap-kind { color: var(--color-text-muted); font-size: 0.78rem; }

.btn.is-confirm { border-color: #e84855 !important; color: #ff7a85 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 899px) {
  .ap-band-head { grid-template-columns: minmax(0, 1fr) 54px; }
  .ap-band-head > :nth-child(n+3) { grid-column: span 1; }
  .ap-band-row2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 519px) {
  .ap-band { padding: 12px; }
  .ap-band-row2 { grid-template-columns: 1fr; }
  .ap-tools .ap-tpl { min-width: 0; width: 100%; }
}