/* public/assets/css/s34-certifications.css
   KHMER HRMS — Staff Certifications (M16) — PATCH: Certificate Templates
   -------------------------------------------------------------------
   Scope of this file, deliberately kept small and self-contained:
     1. `.cert-frame` + its four `.border-*` variants — the actual
        visual "face" of a system-issued certificate, driven entirely
        by CSS custom properties (--cert-primary/--cert-secondary/
        --cert-text) bound inline by whichever context is rendering it:
          - certifications/certificate_print.php (PHP, real output)
          - certifications/templates/form.php (Alpine, live designer preview)
          - certifications/templates/index.php (PHP, small list thumbnails)
          - certifications/issue.php (Alpine, template-picker preview)
        Because the border LOOK lives entirely in these class names
        (not computed piecemeal in PHP/JS), all four contexts stay
        visually identical automatically — no duplicated "compute a
        border string" logic anywhere.
     2. The `.cert-form-side` info-panel styling used by the widened
        (full-screen) Add/Edit/Issue Certification forms — reuses the
        existing `.card-grid` 2-column pattern already used by
        certifications/show.php, just themed for a compact sidebar.
   Loaded globally, both in layouts/main.php (admin screens) and
   partials/print_page_start.php (the actual printed certificate) —
   same "always loaded, namespaced classes, zero risk to anything
   else" convention already used by s31-staff-cards.css /
   s41-document-templates.css.
   No hardcoded colors here except pure structural neutrals (shadows,
   guide lines) — every certificate-specific color comes from the
   three CSS variables set inline by the caller (Rule: CSS variables
   for theming, never hardcoded literals for content colors). */

/* ── The certificate face itself ───────────────────────────────── */
.cert-frame {
    --cert-primary: #1E3A5F;
    --cert-secondary: #D4AF37;
    --cert-text: #1A1A2E;

    position: relative;
    /* FIX ("frame uploaded and saved but never shows on the printed
       certificate" report): .cert-frame-image below is deliberately
       given z-index:-1 so it paints BEHIND this element's own normal-
       flow content — see that rule's own comment. That only works if
       THIS element (.cert-frame) is itself the stacking context those
       negative z-index children resolve against. Per the CSS stacking
       spec, `position:relative` alone does NOT establish a stacking
       context unless `z-index` is also set to something other than
       `auto` — with z-index left auto (as this rule always was), the
       browser instead resolves .cert-frame-image's negative z-index
       against the nearest ANCESTOR that IS a stacking context, which
       print_page_start's own print.css gives it a few levels up
       (`.print-body{position:relative;z-index:2}`). Escaping that far
       up puts the frame image behind .cert-frame's own opaque white
       `background:#FFFFFF` below (which paints in that ancestor
       context's normal stack-level-0 bucket, ABOVE anything escaped to
       a negative level) — so the frame was always being rendered, just
       permanently hidden under this box's own background. Declaring
       z-index:0 here costs nothing visually (0 is the paint order this
       box already had) but makes it a REAL stacking context, so
       .cert-frame-image's z-index:-1 now resolves locally and paints
       above this element's own background exactly as originally
       intended — fixing every context that reuses this one class
       (print output, Designer live preview, template list thumbnails,
       Issue Certificate's template picker) with a single change. */
    z-index: 0;
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 210 / 297; /* A4 portrait, matches certificate_print.php's page */
    background: #FFFFFF;
    color: var(--cert-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 8% 7%;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

/* Border style variants — the ONLY place "what does CLASSIC/MODERN/
   MINIMAL/DOUBLE look like" is decided. */
.cert-frame.border-classic {
    border: 3px solid var(--cert-primary);
    box-shadow: inset 0 0 0 8px #FFFFFF, inset 0 0 0 9px var(--cert-secondary);
}
.cert-frame.border-modern {
    border-top: 10px solid var(--cert-primary);
    border-bottom: 10px solid var(--cert-primary);
    border-left: none;
    border-right: none;
}
.cert-frame.border-minimal {
    border: 1px solid var(--cert-secondary);
}
.cert-frame.border-double {
    border: 10px double var(--cert-primary);
}
/* FIX (S34 — migration 153, "the border won't go away" report): the
   only 5th option missing from this list. show_primary_color /
   show_secondary_color (further down, .cert-frame.border-classic
   uses var(--cert-primary)/var(--cert-secondary) which those toggles
   feed) only ever changed the border's COLOR, never removed its
   shape — there was no way to reach a truly borderless frame before
   this rule existed, regardless of what an admin unchecked. */
.cert-frame.border-none {
    border: none;
    box-shadow: none;
}

/* Orientation — PATCH: Certificate Template Frame Upload + Orientation.
   Default .cert-frame is A4 portrait (see the aspect-ratio above);
   this swaps it to A4 landscape (the reciprocal ratio) when the
   template's `orientation` column is LANDSCAPE. Only meaningful for
   the standalone preview contexts (Designer live preview, list
   thumbnails, template picker) — same reasoning
   certificate_print.php's own header comment gives for overriding
   aspect-ratio to auto there, since the real printed page's physical
   size is governed by print.css's @page rule instead. */
.cert-frame.orientation-landscape {
    aspect-ratio: 297 / 210;
    padding: 5% 8% 22%;
}

/* A landscape frame is exactly HALF as tall as portrait at the same
   width (297:210 vs 210:297 -> the ratio of the two is exactly 0.5),
   but .cert-frame's padding/margins are percentages, which the CSS
   box model always resolves against WIDTH — so unmodified portrait
   spacing consumes twice the share of a landscape frame's much
   shorter height and pushes later content (seal / signature /
   footer) past the frame's own overflow:hidden edge, clipping it.
   Three changes fix this without touching any of the four view files
   that share this markup (Designer preview, print, thumbnail, issue
   picker):
     1. The flowed title/name/body block gets a smaller font-size and
        tighter margins so IT fits the shorter height on its own.
     2. Seal, signature block, and footer note are taken OUT of the
        vertical flow entirely (position:absolute, anchored to the
        frame's own corners) — a wide landscape canvas has plenty of
        spare width in the margins even when it's short on height,
        and corner-anchored seal/signature is a normal certificate
        layout in its own right, not just a workaround.
     3. The frame's own bottom padding is enlarged (22%) to reserve
        the vertical band the corner-anchored sig-block/footer live
        in, and the flowed text column is capped to 66% width so a
        long credential name (English strings routinely wrap wider
        than the Khmer equivalent) can't extend far enough right to
        run under the signature corner the way a short Khmer line
        happens not to — the earlier version only sized text per
        language length by accident. */
.cert-frame.orientation-landscape .cert-title-en,
.cert-frame.orientation-landscape .cert-title-kh,
.cert-frame.orientation-landscape .cert-body-text,
.cert-frame.orientation-landscape .cert-name-en,
.cert-frame.orientation-landscape .cert-name-kh {
    max-width: 66%;
    margin-left: auto;
    margin-right: auto;
}
.cert-frame.orientation-landscape .cert-title-en { margin-top: 0; font-size: 1.15em; }
.cert-frame.orientation-landscape .cert-title-kh { font-size: 1em; }
.cert-frame.orientation-landscape .cert-body-text { margin-top: 2%; font-size: .62em; line-height: 1.35; }
.cert-frame.orientation-landscape .cert-name-en { margin-top: 1.5%; font-size: 1em; }
.cert-frame.orientation-landscape .cert-name-kh { margin-top: 1px; font-size: 1.1em; }

.cert-frame.orientation-landscape .cert-seal {
    position: absolute;
    top: 7%;
    left: 6%;
    width: 9%;
    max-width: 56px;
    margin: 0;
}
.cert-frame.orientation-landscape .cert-sig-block {
    position: absolute;
    bottom: 8%;
    right: 8%;
    width: 32%;
    margin-top: 0;
    padding-top: 0;
}
.cert-frame.orientation-landscape .cert-footer-note {
    position: absolute;
    bottom: 4%;
    left: 8%;
    right: 8%;
    margin-top: 0;
    text-align: center;
}

/* Full-bleed Frame (background) image — PATCH: Certificate Template
   Frame Upload + Orientation. Painted behind the certificate's normal-
   flow content (title/name/body/signature/footer) via a negative
   z-index within .cert-frame's own stacking context (.cert-frame has
   position:relative), so it never needs the markup reordered and a
   transparent PNG still lets --cert-primary/secondary/text-driven
   content read clearly on top of it. */
/* PATCH — Free-Form Designer certificates: the meta info (issuing
   body / issue date / expiry / score) and certificate number are
   documented (certificate_print.php) as "fixed, non-draggable output"
   precisely so this record data can never be lost under a freely-
   edited layout — but per the CSS2.1 painting order, a plain in-flow
   sibling paints BEHIND an absolutely-positioned one (.tpl-el-layer)
   regardless of which comes later in the markup, so without this the
   Designer's own background/image/text elements could silently hide
   the exact data this was meant to protect. Pinning this block near
   the frame's own bottom edge and lifting it above .tpl-el-layer with
   an explicit z-index keeps it reliably visible and legible over
   whatever the Designer painted underneath it. Scoped to .cert-frame
   only — the equivalent staff-card fix uses a different mechanism
   (visibility:hidden swap, see template-designer.css) since a card's
   base fields are meant to disappear entirely in Designer mode, while
   a certificate's meta table must always stay on top instead. */
.cert-frame .tpl-el-layer { z-index: 1; }
/* FIX (S34 — round 2: "still overlaps and now spills onto a 2nd
   printed page" + "the box is covering the certificate's own
   signature line" reports). Two separate problems, two separate
   fixes, both now handled in certificate_print.php + here:
     1. This box used to ALWAYS print all five fields (issuing body /
        issue date / expiry / score / certificate number) as a tall,
        bordered table, no matter what the Designer's own layout
        already showed. Several seeded templates (migration 152's
        professional set) already place their OWN {{issue_date}} text
        and a "sign here" line in this exact bottom band by design —
        so the old table both duplicated that date AND planted its
        opaque background right over the spot meant for a real
        signature. certificate_print.php now skips any field the
        Designer's own text already covers and joins whatever's left
        into ONE short line — on most templates just the certificate
        number, sometimes with an issuing body — instead of a table.
     2. That single short line no longer needs a tall card floating
        mid-frame; pinning it tight to the very bottom edge means it
        sits in the thin strip every seeded template already leaves
        empty below its own signature/date row (that gap exists on
        every migration-152 template by construction), rather than
        needing extra vertical room of its own. The card/shadow/
        border-top look from the previous fix is dropped along with
        the vertical padding that came with it — that added height
        was exactly what tipped some certificates onto a second
        printed page; a slim one-line strip needs almost none. */
/* FIX (S34 — round 3): bottom offset raised from 1% to 3%. Percentages
   on an absolutely-positioned child resolve against the PARENT's
   PADDING box (CSS containing-block rule) — for .cert-frame that box
   sits at the INNER edge of its own decorative border, so bottom:1%
   left only ~2-3mm of real clearance on a typical A4 frame, letting
   this strip visually crowd the border itself (reported: text sitting
   on top of/overlapping the frame). 3% gives clean breathing room
   from the border while staying well below every seeded template's
   own signature/date row (see the round-2 note above for why that
   band is otherwise avoided). See certificate_print.php's own FIX
   comment near $certMaxFrameMarginMm for the separate "frame doesn't
   fill the sheet" fix from the same round — different symptom
   (blank margin around the whole frame vs. this strip's own bottom
   offset), same report. */
.cert-frame .cert-fixed-meta {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 3%;
    z-index: 2;
    background: #FFFFFF;
    color: var(--cert-text);
    opacity: .75;
    font-size: 7.5pt;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 4px;
}

.cert-frame-image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Standalone preview contexts (Designer live preview, list thumbnails,
   template picker) also want a soft ambient shadow — the real printed
   page (inside certificate_print.php's own .print-page wrapper)
   already gets that from print.css, so it's added here only via this
   extra class to avoid a double-shadow on the real print output. */
.cert-frame.cert-frame-shadow {
    box-shadow: 0 2px 14px rgba(0, 0, 0, .14);
}
.cert-frame.border-classic.cert-frame-shadow {
    box-shadow: inset 0 0 0 8px #FFFFFF, inset 0 0 0 9px var(--cert-secondary), 0 2px 14px rgba(0, 0, 0, .14);
}

.cert-frame.engraved .cert-title-kh,
.cert-frame.engraved .cert-name-kh {
    font-family: 'Moul', serif;
}

.cert-title-en {
    font-size: 1.3em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cert-primary);
    font-weight: 700;
    margin-top: 6%;
}
.cert-title-kh {
    font-size: 1.15em;
    color: var(--cert-primary);
    margin-top: 2px;
}
.cert-name-en {
    font-size: 1.15em;
    font-weight: 700;
    margin-top: 6%;
}
.cert-name-kh {
    font-size: 1.3em;
    margin-top: 2px;
}
.cert-body-text {
    font-size: .68em;
    color: var(--cert-text);
    opacity: .85;
    margin-top: 4%;
    line-height: 1.6;
}
.cert-seal {
    width: 15%;
    max-width: 70px;
    height: auto;
    object-fit: contain;
    margin: 5% auto 2%;
}
.cert-sig-block {
    margin-top: auto;
    padding-top: 6%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cert-sig-line {
    width: 45%;
    border-top: 1px solid var(--cert-text);
    opacity: .6;
    margin-bottom: 4px;
}
.cert-sig-label {
    font-size: .55em;
    opacity: .75;
}
.cert-footer-note {
    font-size: .5em;
    opacity: .6;
    margin-top: 3%;
}

/* ── Small list thumbnail (certifications/templates/index.php) ──── */
.cert-frame-thumb {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    pointer-events: none;
}
.cert-frame-thumb .cert-title-en { font-size: .68em; }
.cert-frame-thumb .cert-title-kh { font-size: .6em; }
.cert-frame-thumb .cert-name-en,
.cert-frame-thumb .cert-name-kh { font-size: .58em; }
.cert-frame-thumb .cert-body-text,
.cert-frame-thumb .cert-footer-note { display: none; }
.cert-frame-thumb .cert-seal { width: 12%; }

/* ── Full-width Add/Edit/Issue Certification side info panel ────── */
.cert-form-side {
    position: sticky;
    top: 88px;
}
.cert-form-side .employee-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius, 10px);
    background: var(--surface-alt, rgba(0, 0, 0, .03));
}
.cert-form-side .employee-preview .avatar-photo {
    flex-shrink: 0;
}
.cert-form-side .employee-preview-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

@media (max-width: 991px) {
    .cert-form-side { position: static; }
}

/* ── PATCH — Mobile Responsiveness Audit ───────────────────────────
   Root cause of the sidebar (Employee preview / "Good to Know" tips)
   rendering squeezed into an unreadable, character-per-line vertical
   strip on phones: create.php/edit.php/issue.php/show.php previously
   set `grid-template-columns` as an INLINE style directly on the
   `.card-grid` div (e.g. `style="grid-template-columns: 1fr 320px"`).
   An inline style always wins over an external stylesheet rule at any
   viewport width (inline beats any non-!important selector, no matter
   how specific) — so `.card-grid`'s own responsive rules, wherever
   they lived, could never take effect here, and the 320/380px sidebar
   column was forced at EVERY screen size, crushing the "1fr" main
   column to near-zero on a 375px phone. Fix: these views now use one
   of the three named classes below instead of an inline style, so the
   normal CSS cascade (and this file's own mobile override) actually
   applies. */
.cert-grid-sidebar { grid-template-columns: 1fr 320px; }
.cert-grid-sidebar-380 { grid-template-columns: 1fr 380px; }
.cert-grid-2to1 { grid-template-columns: 2fr 1fr; }

@media (max-width: 900px) {
    .cert-grid-sidebar,
    .cert-grid-sidebar-380,
    .cert-grid-2to1 {
        grid-template-columns: 1fr;
    }
}

/* ── Template picker (certifications/issue.php) ──────────────────── */
.cert-template-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-bottom: 8px;
}
.cert-template-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border, #E2E8F0);
    border-radius: var(--radius, 10px);
    cursor: pointer;
    font-size: 13px;
    transition: border-color .15s, background .15s;
}
.cert-template-option:has(input:checked) {
    border-color: var(--primary, #2563EB);
    background: var(--surface-alt, rgba(37, 99, 235, .06));
}
.cert-template-option input[type="radio"] {
    flex-shrink: 0;
}
.cert-template-option .badge {
    margin-left: auto;
}

/* ── Colors section: per-color Show/Hide toggle ──────────────────
   PATCH: Certificate Templates — show_primary_color/show_secondary_color
   (migration 145). Label + inline checkbox share a row above each
   color's input pair; the swatch/hex inputs are simply disabled (not
   hidden) when unchecked so the last-picked value stays visible and
   is never lost, matching CertificateTemplateService::validateAndNormalize()
   always persisting the hex value regardless of the toggle. */
.color-field-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.color-field-label-row label { margin-bottom: 0; }
.color-show-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
}
.color-input-pair input:disabled {
    opacity: .45;
    cursor: not-allowed;
}