/* ============================================================================
 * TraderAlign — Shared Trade Screenshot badge/grid/modal styling.
 * Loaded by both public/journal.php and public/journal-validation.php
 * alongside assets/js/trade-screenshots.js — one implementation, not two.
 * Deliberately fully self-contained (doesn't reuse journal.php's own
 * pre-existing .rn-modal-* system), since journal-validation.php has no
 * such system of its own to inherit — both pages get byte-identical
 * modal chrome from here instead.
 * ============================================================================ */

.rn-screenshot-badge{display:inline-block;font-family:var(--font-sans);font-size:.68rem;font-weight:600;color:var(--foreground-dim);border:1px solid var(--border);border-radius:var(--radius-md);padding:.25rem .65rem;cursor:pointer;background:transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.rn-screenshot-badge:hover{color:var(--foreground);border-color:var(--foreground-dim)}
.rn-screenshot-badge-empty{border-style:dashed}

.rn-screenshot-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:4vh 1rem;overflow-y:auto}
.rn-screenshot-modal-panel{width:100%;max-width:28rem;max-height:92vh;overflow-y:auto;background:var(--background-elevated,var(--background));border:1px solid var(--border);border-radius:var(--radius-xl,12px);box-shadow:0 24px 64px rgba(0,0,0,.5);padding:1.25rem;font-family:var(--font-sans)}
.rn-screenshot-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.rn-screenshot-modal-head h3{font-size:1rem;font-weight:800;color:var(--foreground);margin:0}
.rn-screenshot-modal-close{background:transparent;border:1px solid var(--border);color:var(--foreground-dim);font-size:.72rem;font-weight:600;padding:.25rem .6rem;border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-sans)}
.rn-screenshot-modal-close:hover{color:var(--foreground);border-color:var(--foreground-dim)}
.rn-screenshot-modal-error{font-size:.78rem;color:var(--negative);background:color-mix(in srgb,var(--negative) 10%,transparent);border:1px solid color-mix(in srgb,var(--negative) 25%,transparent);border-radius:var(--radius-md);padding:.5rem .7rem;margin-bottom:.75rem}
.rn-screenshot-modal-label{display:block;font-size:.72rem;font-weight:700;color:var(--foreground-dim);text-transform:uppercase;letter-spacing:.03em;margin:.75rem 0 .35rem}
.rn-screenshot-modal-file{width:100%;font-size:.8rem;color:var(--foreground);font-family:var(--font-sans)}
.rn-screenshot-modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}
.rn-screenshot-cancel-btn,.rn-screenshot-upload-btn{font-size:.78rem;font-weight:600;padding:.45rem 1rem;border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-sans)}
.rn-screenshot-cancel-btn{background:transparent;border:1px solid var(--border);color:var(--foreground-dim)}
.rn-screenshot-cancel-btn:hover{color:var(--foreground);border-color:var(--foreground-dim)}
.rn-screenshot-upload-btn{background:var(--primary);border:1px solid var(--primary);color:#fff}
.rn-screenshot-upload-btn:hover{opacity:.9}
.rn-screenshot-upload-btn:disabled{opacity:.6;cursor:default}

.rn-screenshot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.6rem}
.rn-screenshot-thumb{position:relative;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1/1;background:var(--background)}
.rn-screenshot-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rn-screenshot-delete{position:absolute;top:.25rem;right:.25rem;width:1.4rem;height:1.4rem;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;font-size:.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.rn-screenshot-delete:hover{background:var(--negative)}
