/* THEME VARIABLES */
:root[data-theme="dark"]{
  --bg: #0b0f1a;
  --panel: #0f172a;
  --ink: #e5e7eb;
  --muted: #94a3b8;
  --accent: #22c55e;
  --danger: #ef4444;
  --focus: #60a5fa;
  --editor-bg: #0a1222;
  --editor-ink: #e5e7eb;
}
:root[data-theme="light"]{
  --bg: #f5f7fb;
  --panel: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --accent: #0ea5e9;
  --danger: #dc2626;
  --focus: #2563eb;
  --editor-bg: #ffffff;
  --editor-ink: #0f172a;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.appbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel);
  border-bottom: 1px solid rgba(148,163,184,.25);
  padding: .5rem 1rem;
}
.brand { font-weight: 700; letter-spacing: .2px; user-select: none; }
.toolbar { display: flex; align-items: center; gap: .5rem; }
.toolbar button {
  background: transparent; color: var(--ink); border: 1px solid rgba(148,163,184,.25);
  padding: .35rem .7rem; border-radius: .6rem; cursor: pointer;
}
.toolbar button:hover { background: rgba(148,163,184,.12); }
.toolbar .spacer { flex: 1; }
.status { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .9rem; }
.status .dot { width: .6rem; height: .6rem; border-radius: 50%; transition: background 0.2s ease; display: inline-block; }
/* Dot colors based on state */
.dot.dirty { background: var(--danger); }      /* red for unsaved changes */
.dot.saving { background: #fbbf24; }           /* amber during autosave */
.dot.saved { background: #22c55e; }            /* green when up to date */

/* FULL-WIDTH LAYOUT */
main { width: 100%; padding: 1rem; }
.meta { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)) auto; gap: .75rem; align-items: end; margin-bottom: .75rem; }
.meta label { display: grid; gap: .25rem; color: var(--muted); font-size: .9rem; }
.meta input { background: var(--panel); border: 1px solid rgba(148,163,184,.25); color: var(--ink); padding: .5rem .6rem; border-radius: .5rem; }
.meta-right { display: flex; gap: 1rem; align-items: center; justify-self: end; color: var(--muted); }

/* EDITOR */
.editor-shell { background: var(--editor-bg); border: 1px solid rgba(148,163,184,.25); border-radius: .8rem; overflow: hidden; width: 100%; }
#editor{
  width: 100%; min-height: calc(100vh - 220px);
  background: var(--editor-bg); color: var(--editor-ink);
  border: none; outline: none; resize: none;
  padding: 1rem 1.25rem; font-size: var(--editor-size, 1.05rem); line-height: 1.65; caret-color: var(--accent);
}
#editor:disabled { opacity: .65; }

/* DIALOG / MODAL */
.modal { border: none; border-radius: .8rem; background: var(--panel); color: var(--ink); padding: 1rem 1.2rem; width: min(560px, 92vw); }
.modal::backdrop { background: rgba(0,0,0,.55); backdrop-filter: blur(1px); }
.modal menu { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; padding: 0; }
.modal button { background: transparent; color: var(--ink); border: 1px solid rgba(148,163,184,.25); padding: .45rem .8rem; border-radius: .6rem; cursor: pointer; }
.modal .primary { border-color: var(--focus); }
.help-content { margin-top: .25rem; }
.shortcut-list { margin: .25rem 0 1rem; padding-left: 1.1rem; }
kbd { background: rgba(148,163,184,.18); border: 1px solid rgba(148,163,184,.35); border-radius: .35rem; padding: .05rem .35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }

/* PRINT-ONLY paginator target */
#printStack { display: none; }

/* PRINT: manual pagination with header date + page number */
@media print{
  @page { margin: 16mm 18mm 18mm 18mm; }
  :root { --print-fudge: 5mm; }

  body { background: #fff; color: #000; }
  .appbar, .meta, #fullscreenBtn, #themeBtn { display: none !important; }
  .editor-shell { border: none; background: transparent; }
  #editor { display: none !important; }

  #printStack { display: block; }

  .p-page {
    position: relative;
    height: calc(297mm - 16mm - 18mm - var(--print-fudge)); /* A4 */
    page-break-after: always;
    break-after: page;
  }

  .p-header { font-size: 11pt; line-height: 1.2; }
  .p-header .ids > div { margin: .6mm 0; }
  .p-header .p-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: .6mm; font-size: 10pt;
  }
  .p-header hr { border: none; border-top: 1px solid #000; margin: 1mm 0 2mm; }

  .p-body {
    white-space: pre-wrap; word-wrap: break-word;
    font: 12pt/1.5 "Courier New", ui-monospace, Menlo, Consolas, monospace;
    margin: 0; padding: 0; overflow: hidden;
  }
}