/* ============================================================
   CDF DIALOGS – Lightbox CDF, Next Training, Lore, Dossier
============================================================ */

/* ===== OVERLAY ===== */
.e-dlg-overlay, .e-dialog-overlay { background: rgba(0,0,0,.72) !important; backdrop-filter: blur(2px); }

/* ===== LIGHTBOX CDF ===== */
.e-dialog.cdf-lightbox, .cdf-lightbox .e-dialog { border-radius: 16px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 22px 60px rgba(0,0,0,.70), inset 0 0 0 2px rgba(0,0,0,.35) !important; background: rgba(15, 22, 15, .96) !important; max-height: min(86vh, 900px) !important; }
.e-dialog.cdf-lightbox::before, .cdf-lightbox .e-dialog::before { content: ""; position: absolute; inset: 10px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.10); pointer-events: none; z-index: 1; }
.e-dialog.cdf-lightbox::after, .cdf-lightbox .e-dialog::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18px 18px, rgba(200,200,200,.30) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at calc(100% - 18px) 18px, rgba(200,200,200,.30) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at 18px calc(100% - 18px), rgba(200,200,200,.30) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(200,200,200,.30) 0 6px, rgba(0,0,0,0) 7px); opacity: .85; z-index: 1; }
.e-dialog.cdf-lightbox .e-dlg-header-content, .cdf-lightbox .e-dlg-header-content { position: relative; z-index: 2; padding: 14px 16px !important; background: linear-gradient(180deg, rgba(10,15,10,.70), rgba(10,15,10,.92)), url('/css/camo.jpg') center/cover no-repeat !important; background-blend-mode: overlay; border-bottom: 1px solid rgba(255,255,255,.06) !important; }
.e-dialog.cdf-lightbox .e-dlg-header, .cdf-lightbox .e-dlg-header { width: 100%; text-align: center !important; font-family: 'BlackOpsOne', system-ui, sans-serif; font-size: 18px !important; letter-spacing: 1px; text-transform: uppercase; color: #fff !important; text-shadow: 2px 2px 10px rgba(0,0,0,.85); }
.e-dialog.cdf-lightbox .e-dlg-closeicon-btn, .cdf-lightbox .e-dlg-closeicon-btn { border-radius: 12px !important; background: rgba(0,0,0,.25) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 10px 22px rgba(0,0,0,.40) !important; }
.e-dialog.cdf-lightbox .e-dlg-closeicon-btn:hover, .cdf-lightbox .e-dlg-closeicon-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.e-dialog.cdf-lightbox .e-dlg-content, .cdf-lightbox .e-dlg-content { position: relative; z-index: 2; padding: 16px !important; background: transparent !important; color: rgba(255,255,255,.92); max-height: calc(min(86vh, 900px) - 60px) !important; overflow: auto !important; }
.cdf-lightbox .e-input-group, .cdf-lightbox .e-control-wrapper, .cdf-lightbox input, .cdf-lightbox textarea, .cdf-lightbox select { border-radius: 12px !important; }
.cdf-lightbox .e-input-group, .cdf-lightbox .e-control-wrapper { background: rgba(0,0,0,.16) !important; border: 1px solid rgba(255,255,255,.10) !important; }
.cdf-lightbox textarea.milsim-textarea, .cdf-lightbox textarea { background: rgba(0,0,0,.16) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.92) !important; }
.cdf-lightbox a { color: rgba(212,249,149,.95); text-decoration: none; }
.cdf-lightbox a:hover { text-decoration: underline; }
@media (max-width: 768px) { .e-dialog.cdf-lightbox, .cdf-lightbox .e-dialog { width: 96vw !important; left: 2vw !important; right: 2vw !important; margin: 0 !important; border-radius: 14px !important; } .e-dialog.cdf-lightbox .e-dlg-header-content, .cdf-lightbox .e-dlg-header-content { padding: 12px 12px !important; } .e-dialog.cdf-lightbox .e-dlg-content, .cdf-lightbox .e-dlg-content { padding: 12px !important; } }
@media (max-width: 520px) { .cdf-lightbox .milsim-footerbar { flex-direction: column; align-items: stretch; } .cdf-lightbox .milsim-footerbar .milsim-btn { width: 100%; } }

/* ===== NEXT TRAINING ===== */
.cdf-next-training { position: relative; overflow: hidden; }
.cdf-next-training::before { content: ""; position: absolute; inset: -90px -120px auto auto; width: 260px; height: 260px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(255,255,255,0) 60%); transform: rotate(18deg); pointer-events: none; }
.next-top { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 10px; }
.next-badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.next-name { font-weight: 900; font-size: 1.05rem; line-height: 1.15; margin: 2px 0 10px; }
.next-meta { display: grid; gap: 6px; }
.next-meta .mi { display: flex; gap: 8px; opacity: .95; }
.next-meta .mi span { opacity: .95; }
.next-desc { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.15); opacity: .95; font-size: .95rem; line-height: 1.35; }
.next-cta { display: inline-flex; margin-top: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 800; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 8px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(0,0,0,.25); }
.next-cta:hover { transform: translateY(-1px); }
.cdf-mini-skel { height: 12px; border-radius: 10px; background: rgba(255,255,255,.08); margin: 10px 0; }
.cdf-mini-error { opacity: .95; }
.cdf-mini-empty { opacity: .85; }

/* ===== LORE TIMELINE ===== */
.lore-panel { display: grid; gap: 12px; }
.lore-head { border-radius: 14px; padding: 14px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(10,15,10,.70), rgba(10,15,10,.88)), url('/css/camo.jpg') center/cover no-repeat; background-blend-mode: overlay; box-shadow: 0 16px 35px rgba(0,0,0,.45), inset 0 0 0 2px rgba(0,0,0,.35); display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.lore-title .kicker { font-family: monospace; letter-spacing: 2px; opacity: .85; font-size: 12px; margin-bottom: 6px; }
.lore-title .title { font-family: 'BlackOpsOne'; font-size: 26px; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 10px #000; margin-bottom: 6px; }
.lore-title .sub { display: flex; flex-wrap: wrap; gap: 8px; opacity: .95; }
.lore-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.lore-search { min-width: 240px; }
.lore-compose { border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); padding: 12px; }
.lore-compose-grid { display: grid; grid-template-columns: 1fr 260px; gap: 12px; align-items: start; }
.lore-compose-grid .full { grid-column: 1 / -1; }
.lore-textarea { resize: vertical; min-height: 120px; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.lore-compose-footer { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.lore-timeline { position: relative; padding-left: 18px; display: grid; gap: 12px; }
.lore-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, rgba(143,191,90,.55), rgba(255,255,255,.06)); opacity: .75; border-radius: 99px; }
.lore-item { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.lore-dot { width: 14px; height: 14px; border-radius: 99px; margin-top: 14px; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%), radial-gradient(circle at 50% 50%, rgba(143,191,90,.55), rgba(143,191,90,0) 70%), rgba(10,15,10,.85); border: 1px solid rgba(212,249,149,.25); box-shadow: 0 0 18px rgba(143,191,90,.22), 0 10px 20px rgba(0,0,0,.45); }
.lore-card { border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.16); overflow: hidden; box-shadow: 0 14px 28px rgba(0,0,0,.35); }
.lore-card-head { padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.06); background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,0)); flex-wrap: wrap; }
.lore-badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag { font-family: monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,15,10,.70); box-shadow: 0 10px 20px rgba(0,0,0,.35); color: rgba(212,249,149,.95); white-space: nowrap; }
.tag-sitrep { border-color: rgba(212,249,149,.28); }
.tag-case { opacity: .9; }
.lore-meta time { font-family: monospace; opacity: .85; white-space: nowrap; }
.lore-card-body { padding: 12px; }
.lore-text { white-space: pre-wrap; line-height: 1.35; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 10px; }
.lore-card-footer { padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.06); display: flex; justify-content: flex-end; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.20)); }
@media (max-width: 992px) { .lore-search { min-width: 180px; flex: 1; } .lore-compose-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .lore-head { padding: 12px; } .lore-title .title { font-size: 22px; } .lore-actions { width: 100%; } .lore-search { width: 100%; min-width: 0; } .lore-item { grid-template-columns: 12px 1fr; } .lore-dot { width: 12px; height: 12px; margin-top: 16px; } .lore-timeline { padding-left: 16px; } }

/* ===== DOSSIER ===== */
.dossier-wrap { width: 100%; }
.dossier-wrap.is-full { width: 100%; margin: 0; }
.dossier-head { padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.08); background: #fff; color: #111; }
.dossier-kicker { font-family: "Special Elite", ui-monospace, "Courier New", monospace; letter-spacing: 2px; font-size: 12px; opacity: .8; text-transform: uppercase; color: black; }
.dossier-title { margin-top: 6px; font-weight: 900; font-size: 18px; color: black; }
.dossier-tools { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.dossier-input, .dossier-select { border-radius: 10px; border: 1px solid rgba(0,0,0,.14); background: #fff; padding: 8px 10px; font-family: "Special Elite", ui-monospace, "Courier New", monospace; }
.dossier-pill { border-radius: 999px; border: 1px solid rgba(0,0,0,.14); padding: 6px 10px; font-family: "Special Elite", ui-monospace, "Courier New", monospace; font-size: 12px; opacity: .85; }
.dossier-stack { display: grid; gap: 14px; padding: 14px 12px; background: #f3f4f6; }
.dossier-page { position: relative; width: 100%; background: #fff; color: #111; background-image: repeating-linear-gradient(to bottom, #ffffff 0px, #ffffff 26px, rgba(0,0,0,.06) 27px); border: 1px solid rgba(0,0,0,.10); border-radius: 12px; box-shadow: 0 16px 45px rgba(0,0,0,.12); overflow: hidden; min-height: 82vh; }
.dossier-marginline { position: absolute; top: 0; bottom: 0; left: 72px; width: 2px; background: rgba(224,82,82,.22); pointer-events: none; }
.dossier-page-top { position: relative; display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid rgba(0,0,0,.10); background: linear-gradient(180deg, rgba(10,15,10,.72), rgba(10,15,10,.92)), url('/css/camo.jpg') center/cover no-repeat; }
.dossier-page-top::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,15,10,.08), rgba(10,15,10,.02)), url('/css/camo.jpg') center/cover no-repeat; opacity: .35; pointer-events: none; }
.dossier-page-top > * { position: relative; z-index: 1; }
.page-top-left { display: flex; flex-direction: column; gap: 2px; text-transform: uppercase; }
.page-unit { font-weight: 900; letter-spacing: 1px; font-size: 11px; opacity: .92; color: white; }
.page-doc { font-size: 11px; opacity: .7; letter-spacing: 1px; color: white; }
.page-top-center { text-align: center; }
.page-title { font-weight: 1000; letter-spacing: 2px; font-size: 14px; text-transform: uppercase; color: white; }
.page-kicker { margin-top: 2px; font-size: 11px; opacity: .7; letter-spacing: 1px; color: white; }
.page-top-right { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; text-transform: uppercase; color: white; }
.page-num { font-size: 11px; letter-spacing: 1px; font-weight: 900; opacity: .85; color: white; }
.page-date { font-size: 11px; opacity: .7; letter-spacing: 1px; color: white; }
.dossier-page-inner { padding: 18px 16px 22px 90px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 14px; line-height: 1.55; }
.dossier-page-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.dossier-entry-date { font-size: 12px; opacity: .7; }
.dossier-entry-sep { height: 1px; background: rgba(0,0,0,.12); }
.dossier-stamp { position: absolute; right: 18px; top: 110px; transform: rotate(-12deg); opacity: .30; pointer-events: none; z-index: 2; }
.stamp-inner { border: 3px solid rgba(150, 0, 0, .85); border-radius: 12px; padding: 10px 14px; text-align: center; text-transform: uppercase; background: rgba(255,255,255,.35); box-shadow: 0 0 0 2px rgba(150,0,0,.25) inset; }
.stamp-top { font-weight: 1000; letter-spacing: 3px; font-size: 12px; }
.stamp-main { font-weight: 1000; letter-spacing: 2px; font-size: 18px; margin-top: 2px; }
.stamp-sub { font-size: 10px; letter-spacing: 2px; opacity: .85; margin-top: 4px; }
.dossier-md :is(h1,h2,h3) { margin: 10px 0 6px; font-weight: 900; letter-spacing: .5px; color: black; }
.dossier-md p { margin: 6px 0; color: black; }
.dossier-md ul, .dossier-md ol { margin: 6px 0 6px 18px; color: black; }
.dossier-md blockquote { margin: 8px 0; padding: 8px 10px; border-left: 3px solid rgba(0,0,0,.18); background: rgba(0,0,0,.04); color: black; }
.dossier-md code { padding: 2px 6px; border-radius: 8px; background: rgba(0,0,0,.06); color: black; }
.dossier-md pre { padding: 10px 12px; border-radius: 12px; background: rgba(0,0,0,.06); overflow: auto; color: black; }
@media (max-width: 700px) { .dossier-stack { padding: 10px 8px; } .dossier-page { min-height: 74vh; border-radius: 10px; } .dossier-marginline { left: 44px; } .dossier-page-inner { padding-left: 58px; padding-right: 12px; } .dossier-page-top { grid-template-columns: 1fr; text-align: left; gap: 6px; } .page-top-right { align-items: flex-start; } .page-top-center { text-align: left; } .dossier-stamp { right: 10px; top: 140px; transform: rotate(-10deg) scale(.92); } .dossier-input, .dossier-select { width: 100%; } }
@media print { .dossier-stack { background: transparent; padding: 0; } .dossier-head { display: none; } .dossier-page { break-after: page; page-break-after: always; box-shadow: none; border: none; border-radius: 0; min-height: auto; } }

/* Spoiler */
.cdf-spoiler { color: transparent; background: rgba(0,0,0,.14); border: 1px solid rgba(0,0,0,.10); border-radius: 8px; padding: 0 .35em; cursor: pointer; transition: color .12s ease, background .12s ease, border-color .12s ease; }
.cdf-spoiler:hover, .cdf-spoiler:focus { color: inherit; background: rgba(143,191,90,.16); border-color: rgba(143,191,90,.28); outline: none; }
@media print { .cdf-spoiler { color: inherit !important; background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.10) !important; } }