/* CNC Brain — aplikačná vrstva nad offline kitom Oxide Design System.
   kit.css aj fonts.css sú nedotknutý upstream (MPL-2.0 je súborový copyleft),
   všetko naše je tu. Kanvas si farby neberie odtiaľto ako premenné — tokeny
   Oxide sú reťaze var(), ktoré getComputedStyle nevyhodnotí; app.js si ich
   preto rozsvieti cez pomocný prvok. */

[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; }
body {
  display: flex; min-width: 320px; flex-direction: column;
  overflow: hidden; background: var(--surface-default);
}

/* ── hlavička ─────────────────────────────────────────────────────────── */
/* .oxx-nav je v kite plávajúci panel so zaobleným rámom — hlavička appky
   je pás cez celú šírku, preto rám aj oblenie ruším. */
.app-header {
  flex: 0 0 auto; gap: 8px; padding: 8px 12px 8px 25px;
  border: 0; border-bottom: 1px solid var(--stroke-secondary);
  border-radius: 0;
}
.app-brand {
  color: var(--content-default); font-family: var(--font-mono); font-weight: 600;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.app-logo {
  position: relative; width: 18px; height: 18px; flex: 0 0 18px;
  border: 2px solid var(--content-accent); border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--surface-default);
  background: var(--surface-accent);
}
.app-logo::after {
  position: absolute; inset: 5px; border-radius: 50%;
  background: var(--content-accent); content: "";
}
.app-spacer { flex: 1 1 auto; min-width: 0; }
.theme-dot[aria-pressed="true"] {
  border-color: var(--stroke-accent);
  background: var(--surface-accent);
  color: var(--content-accent);
}

/* ── plocha ───────────────────────────────────────────────────────────── */
.app-shell {
  display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column;
  gap: 8px; padding: 8px;
}
/* Karta je položkou flexu a tabuľka/kanvas vnútri má vlastné minimum —
   bez min-width: 0 by roztiahla panel von z okna (NOTES.md). */
.control-panel, .preview-panel { min-width: 0; }
.control-panel { flex: 0 0 auto; }
.control-panel > .oxx-card-body { display: flex; flex-direction: column; gap: 10px; }

.source-row, .source-export, .preview-toolbar,
.zoom-controls, .art-size {
  display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px;
}
.source-export { flex: 0 0 auto; align-items: flex-end; }
.upload-button { flex: 0 0 auto; }
.upload-button.drag {
  border-color: var(--stroke-accent); background: var(--surface-accent);
}

.recent-grid { display: flex; min-width: 0; gap: 6px; }
.recent-grid:empty { display: none; }
.recent-thumb {
  width: 32px; height: 32px; flex: 0 0 32px; overflow: hidden;
  border: 1px solid var(--stroke-secondary); border-radius: 3px;
  background: #fff; cursor: pointer;
}
.recent-thumb:hover { border-color: var(--stroke-accent); }
.recent-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Popisky polí sú v Oxide veľké písmená — na hodnoty by sa nehodili,
   na popis áno. Pole je tu užšie než v konzole, appka ich má pätnásť. */
.app-field { width: 96px; flex: 0 0 96px; gap: 3px; }
.app-field .oxx-field-label { margin-bottom: 0; }
.app-field .oxx-input, .app-field .oxx-select { width: 100%; height: 32px; }
.app-field input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.app-field input[type="number"]::-webkit-inner-spin-button,
.app-field input[type="number"]::-webkit-outer-spin-button {
  margin: 0; appearance: none; -webkit-appearance: none;
}
.app-field .oxx-select-arrows { top: 2px; height: 28px; }
.compact-control { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.compact-field { width: 56px; flex-basis: 56px; }
.compact-field--grid { width: 70px; flex-basis: 70px; }
.control-icon {
  position: relative; display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px;
  align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--stroke-default); background: #fff; color: #000;
}
.control-icon svg { width: 16px; height: 16px; fill: currentColor; }
.control-icon::after {
  position: absolute; top: calc(100% + 5px); left: 50%; z-index: 20;
  padding: 4px 7px; border: 1px solid var(--stroke-default); border-radius: 3px;
  transform: translateX(-50%); background: #000; color: #fff;
  content: attr(data-tooltip); font-family: var(--font-sans); font-size: 11px;
  font-weight: 500; line-height: 16px; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.control-icon:hover::after { opacity: 1; }
.frame-check {
  height: 32px; flex: 0 0 auto; align-items: center; white-space: nowrap;
}

.art-size { flex: 0 0 auto; gap: 6px; }
.art-size__axis, .art-size__x, .art-size__unit { flex: 0 0 auto; }
.art-size__axis {
  color: var(--content-secondary); font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
}
.art-size__field { width: 76px; flex: 0 0 76px; }
.art-size__x, .art-size__unit { color: var(--content-tertiary); font-size: 12px; }

.size-notice__actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.warning-list { display: flex; flex-direction: column; gap: 6px; }
.warning-list:empty { display: none; }
.warning-list > div {
  padding: 7px 10px; border-radius: 3px;
  border-left: 2px solid var(--stroke-notice);
  background: var(--surface-notice);
  color: var(--content-notice); font-size: 12px; line-height: 1.45;
}

/* ── náhľad ───────────────────────────────────────────────────────────── */
.preview-panel {
  display: flex; min-height: 0; flex: 1 1 auto;
  flex-direction: column; overflow: hidden;
}
.preview-head {
  flex: 0 0 auto; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  justify-content: flex-start;
}
.preview-toolbar { justify-content: flex-start; gap: 8px 16px; }
/* Zoznam tabov je v konzole nad panelom — tu stojí v lište, odsadenie
   aj deliaca linka pod ním by len tlačili kanvas nadol. */
.preview-toolbar .ox-tabs-list { margin-bottom: 0; }
.preview-toolbar .ox-tabs-list:after { display: none; }
.zoom-controls { flex: 0 0 auto; gap: 6px; }
#zoom-label { min-width: 56px; justify-content: center; }

.canvas-wrap {
  display: flex; min-width: 0; min-height: 0; flex: 1 1 auto;
  align-items: center; justify-content: center; overflow: hidden;
  padding: 8px; background: var(--surface-secondary);
}
#table-canvas { display: block; max-width: 100%; max-height: 100%; cursor: grab; }
#table-canvas:active { cursor: grabbing; }
.preview-footer {
  display: flex; flex: 0 0 auto; align-items: center;
  justify-content: space-between; gap: 16px;
  color: var(--content-tertiary); font-size: 11px;
}
.preview-panel > .warning-list:not(:empty) {
  padding: 8px 12px; border-top: 1px solid var(--stroke-secondary);
}

/* ── prekrytie počas spracovania ──────────────────────────────────────── */
/* NOTES.md: v aplikácii sa obal .oxx-modal-host vynecháva a scrim ostáva
   fixed — inak by prekryl len kartu, nie stránku. */
.busy-scrim { position: fixed; inset: 0; z-index: 90; }
.busy-dialog {
  position: fixed; top: 50%; left: 50%; z-index: 91;
  width: min(360px, calc(100% - 32px)); transform: translate(-50%, -50%);
}
.busy-body { display: flex; align-items: center; gap: 12px; }

/* ── responzivita ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app-shell { height: auto; }
  .source-spacer { display: none; }
  .source-export { flex: 1 1 100%; justify-content: flex-end; }
  .preview-panel { min-height: 60vh; }
  .preview-toolbar { width: 100%; justify-content: flex-start; }
}

@media (max-width: 560px) {
  /* Kit prepína .oxx-nav pod 520 px na stĺpec so stretch — v hlavičke by sa
     z tlačidiel tém stali dva pásy cez celú šírku. */
  .app-header { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .app-header > * { flex: 0 0 auto; }
  .app-field { flex: 1 1 56px; }
  .source-export { justify-content: flex-start; }
  .art-size { width: 100%; }
  .art-size__field { flex: 1 1 76px; }
  .preview-footer { flex-direction: column; align-items: flex-start; gap: 4px; }
}