/* tools/svg-optimizer/css/style.css */

/* Action bar */
#action-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: #1e1e2e; border-bottom: 2px solid #45475a;
  flex-wrap: wrap; gap: 8px;
}
#action-buttons { display: flex; gap: 6px; }
#action-buttons button {
  background: #313244; color: #cdd6f4; border: 1px solid #45475a;
  border-radius: 4px; padding: 6px 14px; font-size: 13px; cursor: pointer;
}
#action-buttons button:hover { background: #45475a; }
#btn-optimize { background: #89b4fa; color: #1e1e2e; border-color: #89b4fa; font-weight: 600; }
#btn-optimize:hover { background: #74c7ec; }

/* Options checkboxes */
#action-options { display: flex; gap: 14px; align-items: center; }
.opt-checkbox {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: #a6adc8; cursor: pointer; user-select: none;
}
.opt-checkbox input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 14px; height: 14px; border: 1px solid #45475a;
  border-radius: 3px; background: #313244; cursor: pointer;
  position: relative; flex-shrink: 0;
}
.opt-checkbox input[type="checkbox"]:checked {
  background: #89b4fa; border-color: #89b4fa;
}
.opt-checkbox input[type="checkbox"]:checked::after {
  content: ''; position: absolute;
  left: 3px; top: 0px; width: 5px; height: 9px;
  border: 2px solid #1e1e2e; border-top: none; border-left: none;
  transform: rotate(45deg);
}
.opt-checkbox:hover { color: #cdd6f4; }

/* Stats bar */
#stats-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px; background: #181825; border-bottom: 1px solid #313244;
  font-size: 13px; min-height: 32px;
}
.stats-orig { color: #6c7086; }
.stats-arrow { color: #45475a; }
.stats-opt { color: #cdd6f4; font-weight: 600; }
.stats-sep { color: #45475a; }
.stats-reduction { color: #a6e3a1; font-weight: 600; }
.stats-neutral { color: #6c7086; }
.stats-hint { color: #6c7086; font-style: italic; }
.stats-error { color: #f38ba8; }

/* Main area */
#main { display: flex; flex: 1; min-height: 0; }

/* Input pane */
#input-pane { flex: 1; display: flex; flex-direction: column; border-right: 2px solid #45475a; min-width: 0; }
.pane-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; background: #181825; font-size: 12px; color: #6c7086;
  border-bottom: 1px solid #313244;
}
#svg-input {
  flex: 1; background: #1e1e2e; color: #cdd6f4; border: none; outline: none;
  padding: 12px; font-family: 'Fira Code', monospace; font-size: 13px;
  line-height: 1.6; resize: none; white-space: pre; overflow: auto;
}

/* Output pane */
#output-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#output-tabs { display: flex; gap: 4px; }
.output-tab {
  background: #313244; color: #6c7086; border: 1px solid #45475a;
  border-radius: 4px; padding: 2px 10px; font-size: 11px; cursor: pointer;
}
.output-tab:hover { background: #45475a; }
.output-tab.active { background: #89b4fa; color: #1e1e2e; border-color: #89b4fa; font-weight: 600; }

#output-content { flex: 1; overflow: auto; background: #1e1e2e; display: flex; flex-direction: column; }

/* Code output */
#code-output {
  flex: 1; margin: 0; padding: 12px; font-family: 'Fira Code', monospace; font-size: 13px;
  line-height: 1.6; color: #cdd6f4; white-space: pre-wrap; overflow: auto;
  word-break: break-all;
}

/* SVG syntax coloring */
.svg-tag { color: #89b4fa; }
.svg-attr { color: #a6e3a1; }
.svg-value { color: #f9e2af; }
.svg-punct { color: #cdd6f4; }
.svg-comment { color: #6c7086; font-style: italic; }
.svg-error { color: #f38ba8; font-family: sans-serif; white-space: pre-wrap; }
.svg-hint { color: #6c7086; font-family: sans-serif; font-style: italic; }

/* Preview output — checkerboard background for transparency */
#preview-output {
  flex: 1;
  background-image: linear-gradient(45deg, #313244 25%, transparent 25%),
    linear-gradient(-45deg, #313244 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #313244 75%),
    linear-gradient(-45deg, transparent 75%, #313244 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  background-color: #1e1e2e;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 20px;
}

.preview-svg-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
}

.preview-svg-wrapper svg {
  max-width: 100%;
  max-height: 60vh;
  height: auto;
}