/* assets/css/style.css
   Notebook-themed UI: soft beige paper background, ruled-paper cues,
   clear square buttons, no animations.
*/

/* Palette */
:root{
  --bg: #f7f2ea;           /* page background - light beige */
  --panel: #fffdf9;        /* panels - slightly off-white */
  --muted: #7b6f63;        /* muted text */
  --accent: #d33a3a;       /* notebook red margin accent */
  --line: #e3d9cc;         /* faint ruled lines / separators */
  --ink: #222222;          /* default ink color for UI text */
  --control-bg: #f0ece5;   /* control input background */
  --button-bg: #ffffff;    /* button background */
  --button-border: #d7cfc1;/* button border */
  --shadow: rgba(0,0,0,0.04);
  --radius: 6px;
  --gap: 12px;
  --max-width: 1200px;
}

/* Base layout */
html,body{
  height:100%;
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
  color: var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}

.container {
  max-width: var(--max-width);
  margin: 28px auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  padding: 18px;
  box-sizing: border-box;
}

/* Left panel (controls) styled like notebook margin area */
.left-panel {
  background: linear-gradient(180deg, var(--panel), var(--panel));
  border: 1px solid var(--line);
  border-left: 8px solid var(--accent); /* red vertical margin accent */
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 10px var(--shadow);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Section titles inside left panel */
.left-panel h2 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Inputs / selects / textarea */
.left-panel select,
.left-panel input[type="number"],
.left-panel textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--control-bg);
  border: 1px solid var(--line);
  padding: 10px 12px;
  font-size: 14px;
  color: var(--ink);
  border-radius: 4px;
  outline: none;
}

.left-panel textarea {
  min-height: 220px;
  resize: vertical;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial;
  line-height: 1.5;
}

/* Buttons: clear, squared, no animations */
.left-panel .controls {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

button {
  background: var(--button-bg);
  border: 1px solid var(--button-border);
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 2px 4px var(--shadow);
  transition: none; /* no animations as requested */
}

/* A slightly stronger primary button look */
button.primary {
  background: linear-gradient(180deg,#fff 0%, #faf8f5 100%);
  border-color: #cdbfae;
}

/* Disabled state */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Right panel (preview) */
.right-panel {
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Preview header */
.right-panel h3 {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  font-weight: 600;
}

/* Main canvas preview wrapper */
.preview-wrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 10px var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Visible canvas */
#paperCanvas {
  width: 100%;
  height: auto;
  display:block;
  border: 1px solid #e7dfd1;
  background: white;
  max-width: 100%;
}

/* Pages container (thumbnails) */
.pages-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 48vh;
  padding-right: 6px;
}

/* canvas previews inside container */
.pages-container canvas {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: white;
}

/* small helper row for inputs that share space */
.row {
  display:flex;
  gap:8px;
  align-items:center;
}

/* labels */
.label {
  font-size: 13px;
  color: var(--muted);
}

/* small footer / notes area */
.note {
  font-size: 12px;
  color: #6b6257;
}

/* Responsive: collapse to single column on small screens */
@media (max-width: 880px) {
  .container {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .left-panel {
    order: 2;
  }

  .right-panel {
    order: 1;
  }

  .pages-container {
    max-height: 36vh;
  }
}

/* Print-friendly (if user prints) */
@media print {
  body {
    background: white;
  }
  .container { max-width: none; margin:0; padding:0; }
  .left-panel { display:none; }
  .right-panel { box-shadow:none; border:none; }
  canvas { page-break-after: always; }
}


/* --- Mobile enhancements (append to assets/css/style.css) --- */
@media (max-width: 600px) {
  /* Make controls full-width and more tappable */
  .left-panel {
    padding: 12px;
    border-left-width: 6px;
    border-radius: 8px;
  }

  .left-panel select,
  .left-panel input[type="number"],
  .left-panel textarea,
  button {
    font-size: 16px;
    padding: 14px 12px;
    border-radius: 8px;
  }

  /* Stack controls vertically and make buttons full-width */
  .left-panel .controls {
    flex-direction: column;
  }

  .left-panel button,
  .left-panel .controls button {
    width: 100%;
    display: block;
  }

  /* Bigger, taller textarea on phones */
  .left-panel textarea {
    min-height: 300px;
    font-size: 15px;
  }

  /* Make the main canvas scale to viewport width and be scroll-friendly */
  #paperCanvas {
    width: 100%;
    height: auto;
    max-width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
  }

  /* Pages container: make thumbnails horizontal scroll row */
  .pages-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 160px;
    padding: 8px 2px;
    -webkit-overflow-scrolling: touch;
  }

  .pages-container canvas {
    width: 220px; /* fixed thumbnail size for quick horizontal swipe */
    flex: 0 0 auto;
    height: auto;
    border-radius: 6px;
  }

  /* Make preview card full width and remove extra padding */
  .preview-wrap {
    padding: 8px;
  }

  /* Slightly larger header text for legibility */
  .right-panel h3,
  .left-panel h2 {
    font-size: 15px;
  }

  /* Adjust container spacing */
  .container {
    margin: 14px;
    gap: 12px;
    grid-template-columns: 1fr;
  }

  /* Ensure buttons are easy to tap */
  button {
    min-height: 44px;
  }
}

/* Extra narrow screens (very small phones) */
@media (max-width: 360px) {
  .pages-container canvas {
    width: 180px;
  }

  .left-panel textarea {
    min-height: 250px;
  }
}