/* Tema za django-prose-editor na stranicama sustava POU Plava (svijetla i tamna tema).
   Editor boje uzima iz --prose-editor-*; bez njih ostaju zadane boje admina (bijela podloga, sivi obrubi).
   Unutar editora vraćamo i izgled sadržaja (liste, naslovi) koji resetiraju stilovi stranice. */

.prose-editor, .prose-editor-dialog {
  --prose-editor-background: var(--surface);
  --prose-editor-foreground: var(--ink);
  --prose-editor-border-color: var(--line-strong);
  --prose-editor-active-color: var(--primary-soft);
  --prose-editor-disabled-color: var(--surface);
  --prose-editor-special-characters: var(--line);
  --pe-bar: color-mix(in srgb, var(--ink) 5%, var(--surface));
}

/* ── Okvir: jedno polje s trakom alata na vrhu ── */
.prose-editor { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.prose-editor:focus-within { border-color: var(--focus); outline: 2px solid var(--focus); outline-offset: 1px; }
.is-invalid .prose-editor { border: 2px solid var(--danger); }

.prose-editor .prose-menubar:not(:empty) { gap: 6px; padding: 6px; border-bottom: 1px solid var(--line); border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--pe-bar); box-shadow: none; }
.prose-editor .prose-menubar__button { height: 34px; min-width: 34px; border-color: var(--line-strong); background: var(--surface); color: var(--ink); }
.prose-editor .prose-menubar__button.material-icons { padding: 0 5px; font-size: 20px; }
.prose-editor .prose-menubar__button:not(.hidden) { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.prose-editor .prose-menubar__button:not(.hidden):not(:has(~ .prose-menubar__button:not(.hidden))) { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.prose-editor .prose-menubar__button:not(.hidden) ~ .prose-menubar__button:not(.hidden) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.prose-editor .prose-menubar__button:hover { background: var(--primary-soft); color: var(--primary); filter: none; }
.prose-editor .prose-menubar__button.active { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.prose-editor .prose-menubar__button.disabled:not(.active) { background: var(--surface); color: var(--ink-muted); opacity: .45; }
.prose-editor .prose-menubar__button:focus-visible { z-index: 1; outline: 2px solid var(--focus); outline-offset: 1px; }
.prose-editor .prose-menubar__picker { border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-md); }

/* ── Područje za pisanje ── */
.prose-editor .ProseMirror { min-height: 140px; padding: 12px 16px; border: 0; border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface); color: var(--ink); font: 400 16px/1.65 var(--font-text); caret-color: var(--primary); }
.prose-editor .ProseMirror > * + * { margin-top: .75em; }
.prose-editor .ProseMirror :is(h1, h2, h3, h4, h5) { margin: 1.1em 0 .4em; font-family: var(--font-display); font-weight: 700; line-height: 1.25; }
.prose-editor .ProseMirror > :first-child { margin-top: 0; }
.prose-editor .ProseMirror h1 { font-size: 30px; }
.prose-editor .ProseMirror h2 { font-size: 25px; }
.prose-editor .ProseMirror h3 { font-size: 21px; }
.prose-editor .ProseMirror :is(h4, h5) { font-size: 18px; }
.prose-editor .ProseMirror :is(ul, ol) { padding-left: 1.5em; }
.prose-editor .ProseMirror ul { list-style: disc; }
.prose-editor .ProseMirror ol { list-style: decimal; }
.prose-editor .ProseMirror li + li { margin-top: .25em; }
.prose-editor .ProseMirror a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
.prose-editor .ProseMirror blockquote { margin-inline: 1.25em; color: var(--ink-muted); font-style: italic; }
.prose-editor .ProseMirror hr { border: 0; border-top: 1px solid var(--line-strong); }
.prose-editor .ProseMirror img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.prose-editor .ProseMirror img.ProseMirror-selectednode { outline: 3px solid var(--primary); }
.prose-editor .ProseMirror figcaption { color: var(--ink-muted); font-size: 14px; }
.prose-editor .ProseMirror table { width: 100%; border-collapse: collapse; }
.prose-editor .ProseMirror :is(td, th) { padding: 6px 8px; border: 1px solid var(--line-strong); vertical-align: top; }
.prose-editor .ProseMirror th { background: var(--pe-bar); font-weight: 700; }
.prose-editor .ProseMirror .selectedCell { background: var(--primary-soft); }
.prose-editor .ProseMirror p.is-editor-empty:first-child::before { color: var(--ink-muted); }

/* ── Prozori (poveznica, slika, HTML) ── */
.prose-editor-dialog { margin: auto; padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); font: 400 15px/1.5 var(--font-text); box-shadow: var(--shadow-md); }
.prose-editor-dialog::backdrop { background: rgba(10, 18, 32, .45); }
.prose-editor-dialog-title { border-color: var(--line); font: 700 20px/1.3 var(--font-display); }
.prose-editor-dialog label { font: 600 14px/20px var(--font-text); }
.prose-editor-dialog :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { min-height: var(--tap); border-color: var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); }
.prose-editor-dialog :is(input, select, textarea):focus { border-color: var(--focus); box-shadow: 0 0 0 2px var(--primary-soft); }
.prose-editor-dialog button { min-height: 40px; padding: 0 16px; align-items: center; border-color: var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font: 600 14px/20px var(--font-text); }
.prose-editor-dialog button:hover { border-color: var(--primary); background: var(--surface); color: var(--primary); filter: none; }
.prose-editor-dialog button[type=submit], .prose-editor-dialog button[value=default] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); }
.prose-editor-dialog button[type=submit]:hover, .prose-editor-dialog button[value=default]:hover { background: var(--primary-strong); color: var(--on-primary); }
.prose-editor-field-with-picker { gap: var(--space-2); align-items: flex-end; }
.prose-editor-field-with-picker button { flex: none; margin: 0; }

/* ── Promjena veličine slike: ručice na kutovima odabrane slike ── */
.prose-editor [data-resize-container] { display: inline-block; max-width: 100%; }
.prose-editor [data-resize-wrapper] { position: relative; display: inline-block; max-width: 100%; }
.prose-editor [data-resize-wrapper] img { display: block; max-width: 100%; }
.prose-editor [data-resize-handle] { z-index: 2; width: 14px; height: 14px; border: 2px solid var(--surface); border-radius: 50%; background: var(--primary); box-shadow: var(--shadow-sm); opacity: 0; transition: opacity .15s; }
.prose-editor [data-resize-handle="top-left"] { margin: -7px 0 0 -7px; cursor: nwse-resize; }
.prose-editor [data-resize-handle="top-right"] { margin: -7px -7px 0 0; cursor: nesw-resize; }
.prose-editor [data-resize-handle="bottom-left"] { margin: 0 0 -7px -7px; cursor: nesw-resize; }
.prose-editor [data-resize-handle="bottom-right"] { margin: 0 -7px -7px 0; cursor: nwse-resize; }
.prose-editor [data-resize-container]:hover [data-resize-handle],
.prose-editor .ProseMirror-selectednode [data-resize-handle],
.prose-editor [data-resize-state="true"] [data-resize-handle] { opacity: 1; }
.prose-editor [data-resize-container]:hover img { outline: 2px solid var(--primary-soft); }