/* Handwriter — styles.css */
:root {
  --bg: #0b0d10;
  --panel: #12161b;
  --ink: #e7edf3;
  --muted: #94a3b8;
  --accent: #8ec5ff;
  --warn: #ffb86b;
  --danger: #ff7575;
  --ring: #2b8cff66;
  --grid: #1f2630;
  --grid-strong: #2b3441;
  --shadow: 0 10px 24px rgba(0,0,0,.35);
  --radius: 16px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--ink);
  overflow-x: hidden;
}

.app-header, .app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 1px solid #1a202a;
}

.app-footer {
  border-top: 1px solid #1a202a;
  border-bottom: none;
  gap: 12px;
  flex-wrap: wrap;
}

h1 { margin: 0; font-size: 20px; }
h2 { margin: 0 0 10px 0; font-size: 16px; }
.muted { color: var(--muted); font-weight: 500; }

.status { color: var(--muted); font-size: 12px; }

.layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 360px;
  gap: 16px;
  padding: 16px;
  max-width: 100vw;
  overflow-x: hidden;
}

.canvas-panel {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  min-height: 65vh;
  min-width: 0; /* allow grid column to shrink and avoid forcing overflow */
}

.canvas-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

/* Canvas scroll container: allow real paper size (can exceed viewport) */
.canvas-wrap {
  flex: 1;
  background: #d9dee4; /* light grey to show page edges */
  border: 1px solid #1b2230;
  border-radius: 12px;
  position: relative;
  overflow: auto; /* Internal scrolling only */
  padding: 24px; /* breathing room around page */
  overscroll-behavior: contain; /* prevent parent scroll chaining */
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Inner flex to center the canvas while allowing it to grow */
.canvas-center {
  /* allow internal scroll instead of forcing parent wider than viewport */
  min-height: 100%;
  display: flex;
  align-items: flex-start; /* top align first, will visually appear centered with margin */
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

/* Optional: if page smaller than viewport, center vertically too */
@media (min-height: 700px) {
  .canvas-center { align-items: center; }
}

#drawCanvas {
  display: block;
  background: #ffffff;
  touch-action: none;
  cursor: crosshair;
  margin: 0 auto; /* allow centering */
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  image-rendering: pixelated;
}

#zoomLayer {
  transform-origin: top left;
  touch-action: none; /* We'll manage pinch */
  position: relative;
  will-change: transform;
  contain: layout paint;
}

.zoom-controls { display:flex; gap:4px; align-items:center; margin-left:auto; }
.zoom-controls button { font-size:14px; }

/* Calibration resize handles */
#calibrationCard { position: relative; }
.resize-handle { position:absolute; width:18px; height:18px; background:var(--accent); opacity:0.8; border:2px solid #0b0d10; border-radius:4px; touch-action:none; }
.resize-handle.tl { top:-10px; left:-10px; cursor:nwse-resize; }
.resize-handle.tr { top:-10px; right:-10px; cursor:nesw-resize; }
.resize-handle.bl { bottom:-10px; left:-10px; cursor:nesw-resize; }
.resize-handle.br { bottom:-10px; right:-10px; cursor:nwse-resize; }
.resize-handle:active { transform:scale(0.9); }

@media (max-width: 640px){
  .zoom-controls { flex-wrap:wrap; }
}

.hint { color: var(--muted); font-size: 12px; margin-top: 8px; }

.controls-panel {
  display: grid;
  gap: 16px;
}

.card {
  background: var(--panel);
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid #1a202a;
  box-shadow: var(--shadow);
}

.form-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.row-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

label { color: var(--ink); font-size: 13px; }
label.inline { display: inline-flex; align-items: center; gap: 8px; }

input[type="number"], input[type="text"], select {
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #323b4a;
  background: #0f141b;
  color: var(--ink);
  outline: none;
}

input[type="file"] {
  width: 100%;
  color: var(--ink);
}

input[type="range"] { width: 100%; }

.btn {
  appearance: none;
  border: 1px solid #2a3340;
  background: #0f141b;
  color: var(--ink);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .03s ease, box-shadow .2s ease, background .2s;
}

.btn:hover { box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(180deg, #1a7ff6, #1359c7);
  border-color: #0e4aa5;
}

.btn-warn {
  background: linear-gradient(180deg, #f59e0b, #c97400);
  border-color: #a65f00;
}

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 24px; padding: 0 6px;
  border-radius: 8px; background: #0f141b; border: 1px solid #2a3340; color: var(--ink);
}

.subtext { color: var(--muted); font-size: 12px; }

/* Calibration modal */
.modal {
  display: none;
  position: fixed;
  z-index: 1000; /* Higher z-index to ensure it's above everything */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modal-content {
  background-color: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  max-width: 90%;
  width: 500px;
  position: relative;
}

.calibration-canvas-wrap {
  background: #0a0e13;
  border: 1px solid #1b2230;
  border-radius: 12px;
  overflow: hidden;
  height: 300px;
  width: 100%;
  margin: 20px 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calibrationCard {
  width: 85.6mm; /* Standard credit card width */
  height: 53.98mm; /* Standard credit card height */
  background-color: rgba(0, 153, 255, 0.2);
  border: 2px solid var(--accent);
  position: relative;
  resize: both;
  overflow: auto;
  min-width: 10px;
  min-height: 10px;
}

@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; }
}

body.single-column .layout { grid-template-columns: 1fr; }
body.single-column .controls-panel { order: 2; }
body.single-column .canvas-panel { order: 1; }