/* ============================================================
   Award Filler: styles layered on top of the root site styles.css
   ============================================================ */

.af-header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 80px 40px 24px 40px;
}

.af-back {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--text-muted);
    font-size: 13px;
}
.af-back:hover { color: var(--accent-green); }

.af-title {
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: bold;
    color: var(--text);
    letter-spacing: -0.5px;
    margin: 0 0 10px 0;
}

.af-subtitle {
    color: var(--text-muted);
    font-size: 15px;
    max-width: 700px;
    margin: 0;
}

.af-content {
    max-width: 1100px;
    margin: 0 auto 64px auto;
    padding: 0 40px;
}

/* ── Award type selector cards (landing page) ── */
.award-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.award-type-card {
    display: block;
    background: linear-gradient(160deg, var(--surface-hover), var(--surface));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow:
        0 18px 40px rgba(10, 14, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    padding: 20px 22px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease,
                box-shadow 0.2s ease, transform 0.2s ease;
}
.award-type-card:hover {
    background: linear-gradient(160deg, var(--surface-active), var(--surface-hover));
    border-color: var(--border-strong);
    box-shadow:
        0 26px 56px rgba(10, 14, 6, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-3px);
    text-decoration: none;
}

.award-type-card h4 {
    margin: 0 0 6px 0;
    color: var(--text);
    font-size: 16px;
}

.award-type-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 13px;
}

.award-type-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.award-type-tag {
    display: inline-block;
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent-green);
}
.award-type-card.disabled .award-type-tag { color: var(--text-subtle); }

/* ── How it works steps (landing page) ── */
.af-steps {
    counter-reset: af-step;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.af-step {
    background: linear-gradient(160deg, var(--surface-hover), var(--surface));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow:
        0 18px 40px rgba(10, 14, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 16px 18px;
}

.af-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--accent);
    color: var(--accent);
    font-size: 12px;
    margin-bottom: 10px;
}

.af-step p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
}

/* ── Editor layout ── */
.af-editor-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .af-editor-grid { grid-template-columns: 1fr; }
}

/* ── Preview panel ── */
.af-preview-wrap {
    position: sticky;
    top: 24px;
    background: linear-gradient(160deg, var(--surface-hover), var(--surface));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow:
        0 18px 40px rgba(10, 14, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 22px;
    padding: 14px;
}

.af-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 10 / 8;
    background-color: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.af-preview img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    user-select: none;
    pointer-events: none;
}

.af-preview-field {
    position: absolute;
    white-space: pre-wrap;
    word-break: break-word;
    pointer-events: none;
}
.af-preview-field.is-empty {
    opacity: 0.4;
    font-style: italic;
}

.af-preview-note {
    margin-top: 10px;
    color: var(--text-subtle);
    font-size: 12px;
}

.af-preview-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

/* ── Fullscreen preview modal ──
   The scrim is a tinted, blurred dimmer (not a flat black stage-light
   overlay) and the certificate sits matted inside a glass frame, same
   "padding + blur, image never touches the frame edge" recipe used for
   the screenshot/logo frames elsewhere — keeps this in the same visual
   language instead of breaking into a generic modal. */
.af-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 14, 6, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 70px 40px 40px 40px;
}
.af-modal-overlay[hidden] { display: none; }

.af-modal-content {
    position: relative;
    width: min(90vw, calc(90vh * 10 / 8));
    max-width: 1400px;
    background: linear-gradient(160deg, var(--surface-hover), var(--surface));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    border-radius: 26px;
    /* Top mat is taller than the other three sides specifically to give
       .af-modal-close its own clear strip of glass to sit in — at the
       old uniform padding the badge straddled the image edge instead of
       resting inside the frame. */
    padding: 44px 18px 18px 18px;
}

.af-modal-content .af-preview {
    border-radius: 14px;
}

/* Sits inside the frame's own taller top mat — same glass material as
   .af-modal-content, so it reads as built into the border rather than a
   separate floating control, without overlapping the certificate. A
   horizontal oval (not a circle) so the top mat only needs to be a
   short strip rather than tall enough for a full-height circle. */
.af-modal-close {
    position: absolute;
    top: 7px;
    right: 14px;
    width: 60px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--surface-active), var(--surface-hover));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border-strong);
    box-shadow:
        0 12px 28px rgba(10, 14, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: var(--text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.af-modal-close:hover {
    background: linear-gradient(160deg, var(--surface-active), var(--surface-active));
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.06);
}

/* ── Global style panel (font + color, applies to every field) ── */
.af-global-style-panel {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: linear-gradient(160deg, var(--surface-hover), var(--surface));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow:
        0 18px 40px rgba(10, 14, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.af-global-style-panel label {
    display: block;
    font-size: 12px;
    color: var(--text-subtle);
    margin-bottom: 4px;
}

.af-global-style-panel select,
.af-global-style-panel input[type="color"] {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    padding: 6px 8px;
    min-width: 180px;
}
.af-global-style-panel input[type="color"] {
    min-width: 70px;
    height: 34px;
    padding: 2px;
    border-radius: 999px;
    overflow: hidden;
}
/* Chrome/Safari draw the actual swatch as separate internal pseudo-
   elements with their own border-radius:0 default — rounding the input
   itself doesn't clip them without this. */
.af-global-style-panel input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 999px;
    overflow: hidden;
}
.af-global-style-panel input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 999px;
}
.af-global-style-panel input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 999px;
}

.af-global-color-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Flex (not the block/inline default) so the label text and the oval
   swatch center against each other explicitly, instead of relying on
   inline baseline alignment — which visibly misaligned the swatch
   against the preset circles beside it. */
.af-global-color-group label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

/* ── Inline date/Julian helper (e.g. inside the PO number field card) ── */
.date-helper {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.date-helper-box {
    flex: 1;
    min-width: 120px;
}

.date-helper-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-subtle);
    margin-bottom: 4px;
}

.date-helper-value-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    color: var(--text);
}

/* ── Field editing cards ── */
.field-card {
    background: linear-gradient(160deg, var(--surface-hover), var(--surface));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow:
        0 18px 40px rgba(10, 14, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 18px 20px;
    margin-bottom: 16px;
}

.field-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.field-card-header h4 {
    margin: 0;
    font-size: 14px;
    color: var(--text);
}

.af-link-btn {
    background: none;
    border: none;
    color: var(--text-subtle);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.af-link-btn:hover { color: var(--accent-green); }

.field-card label {
    display: block;
    font-size: 12px;
    color: var(--text-subtle);
    margin-bottom: 4px;
    white-space: nowrap;
}

.field-text-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.field-text-header label { margin-bottom: 0; }
.field-text-toggles {
    display: flex;
    align-items: center;
    gap: 14px;
}
/* .field-card label above forces display:block at higher specificity —
   this needs to win back inline-row layout for the checkbox + its text. */
.field-card .af-checkbox-label {
    display: flex;
    white-space: nowrap;
}

.field-card input[type="text"],
.field-card textarea {
    width: 100%;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 14px;
    padding: 8px 10px;
    margin-bottom: 12px;
    resize: vertical;
}

.field-card textarea { min-height: 90px; }

.field-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(134px, 1fr));
    gap: 10px 12px;
}

/* Grid items default to min-width:auto, which lets a <select>'s widest
   option force its whole column wider than the track and overlap its
   neighbors. Force items (and the controls inside them) to actually
   respect the track width instead of their content's intrinsic size. */
.field-style-grid > label,
.field-style-grid > .xy-pair {
    min-width: 0;
}

/* X and Y are grouped into one grid item (instead of two separate ones)
   specifically so the surrounding auto-fill grid can never wrap between
   them -- with them as separate items, how many columns landed before X
   varied by field (different fields have different control counts), so
   X and Y ended up on the same row for some fields and split across two
   rows for others. As a single flex-row item they're always adjacent. */
.field-style-grid > .xy-pair {
    grid-column: span 2;
    display: flex;
    gap: 10px;
}
.field-style-grid > .xy-pair > label {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.field-style-grid input,
.field-style-grid select {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    padding: 6px 8px;
}

.field-style-grid input[type="color"] {
    padding: 2px;
    height: 32px;
}

/* ── Custom number steppers (replace native spinner arrows) ── */
.num-field {
    position: relative;
}

.num-field input[type="number"] {
    padding-right: 22px;
    appearance: textfield;
    -moz-appearance: textfield;
}
.num-field input[type="number"]::-webkit-inner-spin-button,
.num-field input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.num-arrows {
    position: absolute;
    right: 3px;
    top: 3px;
    bottom: 3px;
    display: flex;
    flex-direction: column;
    width: 15px;
    gap: 1px;
}

.num-arrow {
    flex: 1;
    background-color: var(--surface-hover);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--accent-green);
    font-size: 7px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.num-arrow:hover { background-color: var(--accent); color: var(--bg); border-color: var(--accent); }
.num-arrow:active { opacity: 0.8; }

/* Horizontal variant (used for X position: left/right arrows instead of up/down) */
.num-field.has-horizontal input[type="number"] {
    padding-right: 42px;
}
.num-arrows.horizontal {
    flex-direction: row;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    height: 15px;
    width: 36px;
}
.num-arrows.horizontal .num-arrow { font-size: 8px; }

.field-card-header-actions {
    display: flex;
    gap: 12px;
}

.af-link-btn.danger:hover { color: #f85149; }

/* ── Per-field alignment toggle (left/center/right) ── */
.align-toggle {
    display: flex;
    gap: 3px;
}

.align-btn {
    flex: 1;
    padding: 6px 0;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-muted);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.align-btn:hover { border-color: var(--accent-green); color: var(--text); }
.align-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background-color: rgba(63, 185, 80, 0.12);
}

.af-add-award-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

/* ── Themed checkbox ── */
.af-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
    cursor: pointer;
}
.af-checkbox-label input[type="checkbox"] {
    accent-color: var(--accent);
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.color-presets {
    display: flex;
    align-items: center;
    gap: 6px;
}

.color-preset-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border);
    cursor: pointer;
    padding: 0;
}

/* ── Slideshow controls ── */
.af-slideshow-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.af-slideshow-label {
    color: var(--text-muted);
    font-size: 13px;
    margin-right: auto;
    padding-bottom: 8px;
}

.af-btn {
    display: inline-block;
    padding: 7px 14px;
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: none;
    color: var(--accent);
    font-size: 13px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-btn:hover { background-color: var(--accent); color: var(--bg); }
.af-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.af-btn:disabled:hover { background: none; color: var(--accent); }

.af-btn.subtle {
    border-color: var(--border);
    color: var(--text-muted);
}
.af-btn.subtle:hover { background-color: var(--surface-hover); color: var(--text); }

.af-btn.danger {
    border-color: #d1242f;
    color: #f85149;
}
.af-btn.danger:hover { background-color: #d1242f; color: #fff; }

/* ── Export panel ── */
.af-export-panel {
    background: linear-gradient(160deg, var(--surface-hover), var(--surface));
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
    border: 1px solid var(--border);
    box-shadow:
        0 18px 40px rgba(10, 14, 6, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 18px 20px;
    margin-top: 18px;
}

.af-segmented {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.af-toggle-btn {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-toggle-btn:hover { border-color: var(--accent-green); color: var(--text); }
.af-toggle-btn.active {
    border-color: var(--accent);
    color: var(--accent);
    background-color: rgba(63, 185, 80, 0.12);
}

.af-settings-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.af-file-btn {
    position: relative;
    overflow: hidden;
}
.af-file-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

/* ── Date widget ── */
.date-widget-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.date-widget-row:last-child { border-bottom: none; }
.date-widget-label { color: var(--text-subtle); }
.date-widget-value { color: var(--accent-green); font-weight: bold; }

.date-widget-value-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.af-copy-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-subtle);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.af-copy-btn:hover { border-color: var(--accent-green); color: var(--accent-green); }
.af-copy-btn:disabled { cursor: default; border-color: var(--accent-green); color: var(--accent-green); }

/* ── Guidance / printing tips lists ── */
.af-tip-list { color: var(--text-muted); font-size: 14px; }
.af-tip-list li { margin-bottom: 8px; }

@media (max-width: 768px) {
    .af-header, .af-content { padding-left: 20px; padding-right: 20px; }
    .af-preview-wrap { position: static; }
}