/* Global certificate designer — a full shell page (/certificate): a board (live
   preview) on the left, controls on the right. The certificate CARD styling is
   injected from the server (GET /org/certificate -> cardCss); this file styles
   only the page chrome. */

.cert-page, .cert-page *, .cert-page *::before, .cert-page *::after { box-sizing: border-box; }
/* Fill the viewport (like the course view): the window never scrolls; the board
   and controls panel scroll internally, and the shell sidebar stays fixed the
   same as on the index page. Scoped to the cert page's <main> — this file loads
   on every shell page. */
@media (min-width: 861px) {
  .main:has(> .cert-page) { height: 100vh; padding: 0; overflow: hidden; display: flex; }
}
.cert-page {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  border: 0; border-radius: 0; overflow: hidden;
  font-family: 'Golos Text', -apple-system, 'Segoe UI', sans-serif;
  color: var(--text, #1a1a1a);
}
.cert-page-head { padding: 16px 24px; border-bottom: 1px solid var(--hairline, #e8e8e8); }
.cert-page-title { font-family: 'Literata', Georgia, serif; font-weight: 600; font-size: 1.1rem; margin: 0; }
.cert-page-note { color: var(--text-2, #666); font-size: .78rem; margin: .2rem 0 0; }

.cert-page-body { display: flex; min-height: 0; flex: 1; }
@media (max-width: 860px) { .cert-page-body { flex-direction: column; overflow-y: auto; } }

/* Left board: live certificate preview on a soft canvas. */
.cert-ed-board {
  flex: 1 1 60%; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 2rem; overflow: auto;
}
/* The board sets only the .cert-scale container's size; the card inside is a
   fixed 1000×707 canvas scaled to fit (server _CERT_CARD_CSS), so the preview,
   the in-course dialog and the printed A4 match proportionally. Landscape: the
   card is wider than tall — bind the width by board height (…vh) so it still
   fits the board vertically, capped at 100% of the board width. */
.cert-ed-board .cert-scale { width: min(100%, 112vh); aspect-ratio: 297 / 210; margin: 0; }

/* Right sidebar: scrollable controls + a sticky save footer. */
.cert-ed-side-wrap {
  flex: 0 0 360px; max-width: 360px; display: flex; flex-direction: column;
  border-left: 1px solid var(--hairline, #e8e8e8); background: #fff;
}
@media (max-width: 860px) { .cert-ed-side-wrap { flex-basis: auto; max-width: none; border-left: none; border-top: 1px solid var(--hairline, #e8e8e8); } }
.cert-ed-side { overflow-y: auto; padding: .5rem 1.2rem 1.2rem; flex: 1; }

.cert-ed-group-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3, #8a8a8a); margin: 1.3rem 0 .5rem;
}
.cert-ed-group-title:first-child { margin-top: .6rem; }
.cert-ed-sub-title { font-size: .8rem; font-weight: 600; color: var(--text-2, #555); margin: .9rem 0 .3rem; }

/* Background swatches */
.cert-ed-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.cert-ed-swatch {
  position: relative; overflow: hidden;
  aspect-ratio: 1.3 / 1; border: 1.5px solid var(--border, #e0e0e0); border-radius: 9px; cursor: pointer;
  background-color: #fff; padding: 0;
}
/* Pattern lives on ::before so the mask (mask-clip is border-box) never clips
   the swatch's own border — keeps the hover/active border visible. */
.cert-ed-swatch::before {
  content: ''; position: absolute; inset: 0;
  background-color: var(--swatch-color, #1e2bfa);
  -webkit-mask: var(--swatch-mask, none) center / 130% auto no-repeat;
  mask: var(--swatch-mask, none) center / 130% auto no-repeat;
}
.cert-ed-swatch.cert-ed-swatch-plain::before { background: none; -webkit-mask: none; mask: none; }
.cert-ed-swatch:hover { border-color: var(--primary, #127a8c); }
.cert-ed-swatch.active { border-color: var(--primary, #127a8c); box-shadow: 0 0 0 3px rgba(18, 122, 140, .18); }

/* Checkbox row */
.cert-ed-check { display: flex; align-items: center; gap: .55rem; font-size: .92rem; cursor: pointer; margin: .2rem 0; }
.cert-ed-check input { width: 16px; height: 16px; accent-color: var(--primary, #127a8c); }
.cert-ed-branding-box { padding-left: .1rem; }

/* Logo-source radios + the custom-logo upload row. */
.cert-ed-radio { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; margin: .35rem 0; }
.cert-ed-radio input { width: 15px; height: 15px; accent-color: var(--primary, #127a8c); }
.cert-ed-logo-upload { display: flex; gap: .5rem; margin: .3rem 0 .2rem; }

/* Size sliders */
.cert-ed-size { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.cert-ed-size input[type="range"] { flex: 1; cursor: pointer; accent-color: var(--primary, #127a8c); }
.cert-ed-lbl { font-size: .82rem; color: var(--text-2, #555); }
.cert-ed-size .cert-ed-lbl { flex: none; min-width: 5.4em; }
.cert-ed-val { flex: none; min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2, #6b6b6b); font-size: .82rem; }

/* Background line-color picker */
.cert-ed-color { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.cert-ed-color .cert-ed-lbl { flex: 1; }
.cert-ed-color input[type="color"] {
  width: 40px; height: 26px; padding: 0; border: 1px solid var(--border, #e0e0e0);
  border-radius: 7px; background: #fff; cursor: pointer;
}

/* Text fields */
.cert-ed-field { margin-top: .6rem; }
.cert-ed-field .cert-ed-lbl { display: block; margin-bottom: .25rem; }
.cert-ed-field input {
  width: 100%; padding: .5rem .6rem; border: 1px solid var(--border, #e0e0e0); border-radius: 9px;
  font: inherit; font-size: .9rem; color: var(--text, #1a1a1a); background: #fff;
}
.cert-ed-field input:focus { outline: none; border-color: var(--primary, #127a8c); box-shadow: 0 0 0 3px rgba(18, 122, 140, .15); }

/* Buttons */
.cert-ed-sig-row { display: flex; gap: .5rem; }
.cert-ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; cursor: pointer;
  padding: .48rem .8rem; border-radius: 9px; border: 1px solid var(--border, #e0e0e0);
  background: #fff; color: var(--text, #1a1a1a); font: inherit; font-size: .85rem;
}
.cert-ed-btn:hover { border-color: var(--primary, #127a8c); }
.cert-ed-btn-ghost { color: var(--text-2, #777); }

.cert-ed-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .8rem 1.2rem; border-top: 1px solid var(--hairline, #e8e8e8);
}
.cert-ed-status { font-size: .82rem; color: var(--text-2, #6a6a6a); }
.cert-ed-status.is-error { color: #c2413a; }
.cert-ed-actions { display: flex; align-items: center; gap: .5rem; }
.cert-ed-save {
  cursor: pointer; padding: .55rem 1.3rem; border-radius: 999px; border: none;
  background: var(--primary, #127a8c); color: #fff; font: inherit; font-weight: 600; font-size: .9rem;
}
.cert-ed-save:hover { filter: brightness(1.06); }
.cert-ed-save:disabled { opacity: .6; cursor: default; }
.cert-ed-discard {
  cursor: pointer; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1px solid var(--border, #e0e0e0); background: #fff;
  color: var(--text-2, #777); font: inherit; font-weight: 600; font-size: .9rem;
}
.cert-ed-discard:hover { border-color: var(--text-3, #999); color: var(--text, #1a1a1a); }
.cert-ed-discard:disabled { opacity: .5; cursor: default; }
.cert-ed-discard:disabled:hover { border-color: var(--border, #e0e0e0); color: var(--text-2, #777); }

/* Preview QR placeholder (real QR is per-course, baked). Scoped to the board so
   it beats the injected card CSS's `.cert-qr { background:#fff }` reset. */
.cert-ed-board .cert-qr-ph {
  width: 100px; height: 100px; border-radius: 6px;
  background:
    repeating-conic-gradient(#141433 0 25%, #fff 0 50%) 0 0 / 8px 8px,
    #fff;
  opacity: .8;
}