/* ══════════════════════════════════════════════════════════════════
   AGENT DOCUMENTS — Portal + Admin tile system
   All colours, spacing, typography driven by CSS custom properties
   set via JS from admin controls (persisted to localStorage).
   Scope: #agent-portal + .ad-admin-pane (admin preview)
   ══════════════════════════════════════════════════════════════════ */

#agent-portal {
  --ad-bg:              #0a1228;
  --ad-panel-bg:        #0f1b36;
  --ad-tile-bg:         #ffffff;
  --ad-tile-bg-alt:     #faf9f7;
  --ad-heading:         #ffffff;
  --ad-body:            rgba(255,255,255,.58);
  --ad-cat-heading:     #c9a961;
  --ad-cat-heading-bg:  transparent;
  --ad-cat-count:       rgba(255,255,255,.35);
  --ad-tile-title:      #111a2f;
  --ad-tile-meta:       #6b7383;
  --ad-tile-desc:       #434a59;
  --ad-border:          rgba(255,255,255,.08);
  --ad-tile-border:     #e8e3d8;
  --ad-hover-border:    #c9a961;
  --ad-hover-shadow:    0 18px 40px -18px rgba(0,0,0,.55);
  --ad-btn-primary-bg:  #c9a961;
  --ad-btn-primary-fg:  #0a1228;
  --ad-btn-ghost-bg:    transparent;
  --ad-btn-ghost-fg:    #111a2f;
  --ad-btn-ghost-bd:    #c9a961;
  --ad-icon:            #c9a961;
  --ad-active:          #c9a961;
  --ad-radius:          14px;
  --ad-radius-sm:       8px;
  --ad-gap:             18px;
  --ad-pad:             22px;
  --ad-cols:            3;
  --ad-thumb-ratio:     1.414;   /* A4 portrait */
  --ad-ff-h:            'Playfair Display', Georgia, serif;
  --ad-ff-b:            'Inter', system-ui, sans-serif;
  --ad-fs-h1:           32px;
  --ad-fs-cat:          18px;
  --ad-fs-title:        15px;
  --ad-fs-meta:         11px;
  --ad-fs-desc:         12.5px;
  --ad-fw-h:            500;
  --ad-fw-cat:          600;
  --ad-fw-title:        600;
}

/* ── Library container ─────────────────────────────────────────── */
.ad-library { display:flex; flex-direction:column; gap:36px; margin-top:26px; }

.ad-category-block {
  display:flex; flex-direction:column; gap:var(--ad-gap);
  padding:var(--ad-cat-heading-bg)==transparent?0:14px 18px;
}

.ad-cat-header {
  display:flex; align-items:baseline; gap:12px; padding-bottom:12px;
  border-bottom:1px solid var(--ad-border);
}
.ad-cat-title {
  font-family:var(--ad-ff-h);
  font-weight:var(--ad-fw-cat);
  font-size:var(--ad-fs-cat);
  color:var(--ad-cat-heading);
  margin:0; letter-spacing:.01em;
}
.ad-cat-count {
  font-size:11px; color:var(--ad-cat-count);
  letter-spacing:.15em; text-transform:uppercase; font-weight:500;
}

/* ── Tile grid ─────────────────────────────────────────────────── */
.ad-tile-grid {
  display:grid;
  grid-template-columns:repeat(var(--ad-cols), minmax(0,1fr));
  gap:var(--ad-gap);
}

@media (max-width: 1100px) { #agent-portal { --ad-cols:2; } }
@media (max-width: 640px)  { #agent-portal { --ad-cols:1; } }

/* ── Tile (default card variant) ───────────────────────────────── */
.ad-tile {
  position:relative;
  display:flex; flex-direction:column;
  background:var(--ad-tile-bg);
  border:1px solid var(--ad-tile-border);
  border-radius:var(--ad-radius);
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  font-family:var(--ad-ff-b);
}
.ad-tile:hover {
  border-color:var(--ad-hover-border);
  transform:translateY(-2px);
  box-shadow:var(--ad-hover-shadow);
}

.ad-tile-thumb {
  position:relative;
  aspect-ratio: 1 / var(--ad-thumb-ratio);
  background:var(--ad-tile-bg-alt);
  border-bottom:1px solid var(--ad-tile-border);
  overflow:hidden;
  cursor:zoom-in;
}
.ad-tile-thumb img,
.ad-tile-thumb canvas {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease;
}
.ad-tile-thumb:hover img,
.ad-tile-thumb:hover canvas { transform:scale(1.04); }

/* Placeholder (no PDF.js, or while loading) */
.ad-tile-thumb.placeholder {
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  color:var(--ad-icon);
}
.ad-tile-thumb.placeholder svg { width:54px; height:54px; opacity:.75; }
.ad-tile-thumb.placeholder .ad-ph-ext {
  font-size:10px; font-weight:700; letter-spacing:.2em;
  color:var(--ad-tile-meta);
}

.ad-tile-cat-pill {
  position:absolute; top:10px; left:10px; z-index:2;
  padding:4px 10px;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  background:rgba(10,18,40,.82); color:#fff;
  border-radius:100px;
  backdrop-filter:blur(4px);
}

.ad-tile-body {
  padding:var(--ad-pad);
  display:flex; flex-direction:column; gap:8px; flex:1;
}
.ad-tile-title {
  font-size:var(--ad-fs-title); font-weight:var(--ad-fw-title);
  color:var(--ad-tile-title); line-height:1.35;
  text-wrap:pretty;
  word-break:break-word;
}
.ad-tile-desc {
  font-size:var(--ad-fs-desc); color:var(--ad-tile-desc);
  line-height:1.55; margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ad-tile-meta {
  font-size:var(--ad-fs-meta); color:var(--ad-tile-meta);
  letter-spacing:.03em; margin-top:auto;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding-top:6px;
}
.ad-tile-meta span { display:inline-flex; align-items:center; gap:4px; }
.ad-tile-meta span + span::before {
  content:""; display:inline-block; width:3px; height:3px; border-radius:50%;
  background:var(--ad-tile-meta); opacity:.6; margin-right:8px;
}

/* ── Actions row ──────────────────────────────────────────────── */
.ad-tile-actions {
  display:flex; gap:8px; padding:0 var(--ad-pad) var(--ad-pad);
  flex-wrap:wrap;
}
.ad-btn {
  flex:1; min-width:0;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px;
  font-family:var(--ad-ff-b); font-size:12px; font-weight:600;
  letter-spacing:.04em;
  border-radius:var(--ad-radius-sm); border:1px solid transparent;
  cursor:pointer; transition:all .2s ease;
  text-decoration:none;
}
.ad-btn svg { width:14px; height:14px; flex-shrink:0; }
.ad-btn-primary {
  background:var(--ad-btn-primary-bg); color:var(--ad-btn-primary-fg);
}
.ad-btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.ad-btn-ghost {
  background:var(--ad-btn-ghost-bg);
  color:var(--ad-btn-ghost-fg);
  border-color:var(--ad-btn-ghost-bd);
}
.ad-btn-ghost:hover { background:var(--ad-btn-ghost-bd); color:var(--ad-btn-primary-fg); }

/* ══════════ VARIANT: list (compact landscape square tile) ════ */
#agent-portal[data-ad-variant="list"] .ad-tile-grid {
  grid-template-columns:repeat(var(--ad-cols), minmax(0,1fr));
  gap:var(--ad-gap);
}
#agent-portal[data-ad-variant="list"] .ad-tile {
  flex-direction:column;
}
#agent-portal[data-ad-variant="list"] .ad-tile-thumb {
  aspect-ratio: 16 / 9;
}
#agent-portal[data-ad-variant="list"] .ad-tile-desc { display:none; }
#agent-portal[data-ad-variant="list"] .ad-tile-body {
  padding:12px 14px 6px;
  gap:4px;
}
#agent-portal[data-ad-variant="list"] .ad-tile-title { font-size:13px; }
#agent-portal[data-ad-variant="list"] .ad-tile-meta  { font-size:10px; padding-top:2px; }
#agent-portal[data-ad-variant="list"] .ad-tile-actions {
  padding:0 14px 12px;
}
#agent-portal[data-ad-variant="list"] .ad-btn { padding:8px 10px; font-size:11px; }

/* ══════════ VARIANT: minimal (thumb+title only) ══════════════ */
#agent-portal[data-ad-variant="minimal"] .ad-tile-desc,
#agent-portal[data-ad-variant="minimal"] .ad-tile-meta { display:none; }
#agent-portal[data-ad-variant="minimal"] .ad-tile-body { padding:14px 16px 10px; }
#agent-portal[data-ad-variant="minimal"] .ad-tile-actions { padding:0 16px 14px; }

/* ══════ VARIANT: editorial (medium thumb + description below) ═══ */
#agent-portal[data-ad-variant="editorial"] .ad-tile-thumb {
  aspect-ratio: 4 / 3;
}
#agent-portal[data-ad-variant="editorial"] .ad-tile-overlay-title { display:none; }
#agent-portal[data-ad-variant="editorial"] .ad-tile-body {
  padding:18px var(--ad-pad) 14px;
  gap:10px;
}
#agent-portal[data-ad-variant="editorial"] .ad-tile-title {
  font-family:var(--ad-ff-h);
  font-weight:500;
  font-size:17px;
  line-height:1.25;
  letter-spacing:.005em;
  text-wrap:balance;
}
#agent-portal[data-ad-variant="editorial"] .ad-tile-desc {
  -webkit-line-clamp:5;
  line-clamp:5;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ad-tile-desc);
  margin-top:2px;
}
#agent-portal[data-ad-variant="editorial"] .ad-tile-meta {
  padding-top:10px;
  border-top:1px solid var(--ad-tile-border);
}

/* ══════════ Empty state ══════════════════════════════════════ */
.ad-empty {
  text-align:center; padding:40px 20px;
  color:var(--ad-body); font-size:13px;
  border:1px dashed var(--ad-border); border-radius:var(--ad-radius);
}

/* ══════════ PDF MODAL (tap thumbnail) ═══════════════════════ */
.ad-modal-overlay {
  position:fixed; inset:0; background:rgba(4,8,16,.86);
  z-index:10000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
  padding:20px;
}
.ad-modal-overlay.open { opacity:1; pointer-events:auto; }
.ad-modal-box {
  width:100%; max-width:980px; height:calc(100vh - 40px);
  background:#0a1228; border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  transform:scale(.97); transition:transform .3s ease;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.ad-modal-overlay.open .ad-modal-box { transform:scale(1); }
.ad-modal-hdr {
  display:flex; align-items:center; gap:14px; padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.08); color:#fff;
  font-family:var(--ad-ff-b,'Inter',system-ui,sans-serif);
}
.ad-modal-hdr .title {
  font-size:13px; font-weight:600; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ad-modal-hdr .meta { font-size:11px; color:rgba(255,255,255,.45); }
.ad-modal-hdr button {
  background:transparent; border:1px solid rgba(255,255,255,.18);
  color:#fff; font-size:12px; padding:7px 12px; border-radius:6px;
  cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.ad-modal-hdr button:hover { background:rgba(255,255,255,.08); }
.ad-modal-hdr .close {
  width:34px; height:34px; padding:0; justify-content:center;
  font-size:16px;
}
.ad-modal-body {
  flex:1; background:#f5f2ec; overflow:auto; position:relative;
}
.ad-modal-body iframe, .ad-modal-body embed {
  width:100%; height:100%; border:none; display:block;
}
.ad-modal-body .ad-modal-loading {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:#6b7383; font-size:13px; font-family:var(--ad-ff-b,'Inter',sans-serif);
}

/* ══════════════════════════════════════════════════════════════
   ADMIN PANEL — category + document manager
   ══════════════════════════════════════════════════════════════ */
.ad-admin-pane { display:flex; flex-direction:column; gap:18px; font-family:var(--ff-b,'Inter',system-ui); }

.ad-adm-tabs {
  display:flex; gap:4px; border-bottom:1px solid var(--sand,#e8e3d8);
  margin-bottom:4px;
}
.ad-adm-tab {
  padding:10px 16px; font-size:12px; font-weight:600;
  color:var(--muted,#6b7383); cursor:pointer;
  border-bottom:2px solid transparent; background:none; border-top:none; border-left:none; border-right:none;
  transition:all .2s;
}
.ad-adm-tab.active { color:var(--navy,#0a1228); border-bottom-color:var(--navy,#0a1228); }
.ad-adm-tab:hover { color:var(--navy,#0a1228); }

.ad-adm-panel { display:none; }
.ad-adm-panel.active { display:block; }

/* Category rows */
.ad-cat-row, .ad-doc-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; background:#faf9f7;
  border:1px solid var(--sand,#e8e3d8);
  border-radius:var(--r,8px);
  margin-bottom:6px;
  cursor:grab; transition:all .15s;
}
.ad-cat-row.dragging, .ad-doc-row.dragging {
  opacity:.5; cursor:grabbing; border-color:var(--navy,#0a1228);
}
.ad-cat-row.drag-over, .ad-doc-row.drag-over {
  border-top:2px solid var(--navy,#0a1228);
}
.ad-handle { color:#b0aa9a; font-size:16px; cursor:grab; user-select:none; line-height:1; }
.ad-cat-row .ad-name, .ad-doc-row .ad-name {
  flex:1; font-size:13px; font-weight:600; color:var(--ink,#111a2f);
  background:transparent; border:none; outline:none; padding:4px 0;
  min-width:0;
}
.ad-cat-row .ad-name:focus, .ad-doc-row .ad-name:focus { border-bottom:1px solid var(--navy,#0a1228); }
.ad-doc-row .ad-sub {
  font-size:10px; color:var(--muted,#6b7383); margin-top:2px;
}
.ad-doc-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.ad-pill {
  padding:2px 8px; font-size:10px; font-weight:600; letter-spacing:.04em;
  background:#fff; border:1px solid var(--sand,#e8e3d8);
  border-radius:100px; color:var(--muted,#6b7383);
}
.ad-toggle {
  position:relative; width:34px; height:18px; background:#d0cabb;
  border-radius:10px; cursor:pointer; transition:background .2s; flex-shrink:0;
}
.ad-toggle::after {
  content:""; position:absolute; top:2px; left:2px;
  width:14px; height:14px; background:#fff; border-radius:50%;
  transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.ad-toggle.on { background:#27ae60; }
.ad-toggle.on::after { left:18px; }
.ad-row-actions { display:flex; gap:4px; }
.ad-row-actions button {
  width:28px; height:28px; background:transparent;
  border:1px solid var(--sand,#e8e3d8);
  border-radius:6px; cursor:pointer; font-size:12px;
  color:var(--muted,#6b7383);
  display:inline-flex; align-items:center; justify-content:center;
}
.ad-row-actions button:hover { background:#fff; color:var(--ink,#111a2f); }
.ad-row-actions .del:hover { background:#c0392b; color:#fff; border-color:#c0392b; }

.ad-add-cat {
  display:flex; gap:8px; margin-top:8px;
}
.ad-add-cat input {
  flex:1; padding:9px 12px; font-size:12px;
  border:1px solid var(--sand,#e8e3d8); border-radius:var(--r,8px);
  font-family:inherit; outline:none;
}
.ad-add-cat input:focus { border-color:var(--navy,#0a1228); }
.ad-add-cat button {
  padding:9px 16px; background:var(--navy,#0a1228); color:#fff;
  border:none; border-radius:var(--r,8px); font-size:12px; font-weight:600;
  cursor:pointer;
}

/* Style controls grid */
.ad-style-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.ad-colour-field {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:#faf9f7; border:1px solid var(--sand,#e8e3d8);
  border-radius:var(--r,8px);
}
.ad-colour-field input[type="color"] {
  width:30px; height:30px; border:none; cursor:pointer; padding:0; flex-shrink:0; background:none;
}
.ad-colour-field label {
  flex:1; font-size:11px; font-weight:600; color:var(--ink,#111a2f);
  text-transform:none; letter-spacing:0;
}
.ad-colour-field input[type="text"] {
  width:80px; font-family:monospace; font-size:11px;
  padding:5px 7px; border:1px solid var(--sand,#e8e3d8);
  border-radius:6px; outline:none;
}

.ad-range-field {
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; background:#faf9f7;
  border:1px solid var(--sand,#e8e3d8); border-radius:var(--r,8px);
}
.ad-range-field label {
  font-size:11px; font-weight:600; color:var(--ink,#111a2f);
  display:flex; justify-content:space-between;
}
.ad-range-field label span { color:var(--muted,#6b7383); font-weight:500; font-family:monospace; }
.ad-range-field input[type="range"] { width:100%; accent-color:var(--navy,#0a1228); }

.ad-select-field {
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; background:#faf9f7;
  border:1px solid var(--sand,#e8e3d8); border-radius:var(--r,8px);
}
.ad-select-field label {
  font-size:11px; font-weight:600; color:var(--ink,#111a2f);
}
.ad-select-field select {
  padding:6px 8px; font-size:12px; border:1px solid var(--sand,#e8e3d8);
  border-radius:6px; font-family:inherit; background:#fff; outline:none;
}

.ad-adm-divider {
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted,#6b7383); margin:14px 0 10px;
  padding-bottom:6px; border-bottom:1px solid var(--sand,#e8e3d8);
}

.ad-upload-zone {
  border:2px dashed var(--sand,#e8e3d8); border-radius:var(--r,8px);
  padding:24px; text-align:center; cursor:pointer;
  transition:all .2s; color:var(--muted,#6b7383);
  font-size:12px; background:#faf9f7;
}
.ad-upload-zone:hover, .ad-upload-zone.drag {
  border-color:var(--navy,#0a1228); background:#f5f2ec; color:var(--ink,#111a2f);
}
.ad-upload-zone.ready { border-style:solid; border-color:#27ae60; color:#27ae60; background:#f0fbf4; }

.ad-preview-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:8px 10px; margin-bottom:8px;
  background:#faf9f7; border:1px solid var(--sand,#e8e3d8);
  border-radius:var(--r,8px); font-size:11px; color:var(--muted,#6a6a6a);
}
.ad-preview-toolbar .ad-pt-label {
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  color:var(--ink,#111a2f); font-size:10px;
}
.ad-preview-toolbar .ad-pt-presets { display:flex; gap:4px; }
.ad-preview-toolbar .ad-pt-presets button {
  padding:6px 10px; background:#fff; border:1px solid var(--sand,#e8e3d8);
  border-radius:6px; font-size:11px; color:var(--ink,#111a2f);
  cursor:pointer; font-weight:500;
}
.ad-preview-toolbar .ad-pt-presets button:hover { background:#f5f2ec; }
.ad-preview-toolbar .ad-pt-presets button.active {
  background:var(--navy,#0a1228); color:#fff; border-color:var(--navy,#0a1228);
}
.ad-preview-toolbar .ad-pt-size {
  display:flex; align-items:center; gap:8px; margin-left:auto;
  font-variant-numeric:tabular-nums; color:var(--ink,#111a2f);
}
.ad-preview-toolbar .ad-pt-size input[type=range] {
  width:140px; accent-color:var(--navy,#0a1228);
}
.ad-preview-toolbar .ad-pt-size .ad-pt-dim {
  font-size:11px; font-weight:600; min-width:56px; text-align:right;
}
.ad-preview-toolbar .ad-pt-zoom {
  display:flex; align-items:center; gap:6px;
}
.ad-preview-toolbar .ad-pt-zoom select {
  padding:5px 6px; border:1px solid var(--sand,#e8e3d8);
  border-radius:6px; background:#fff; font-size:11px;
}

.ad-preview-stage {
  border:1px solid var(--sand,#e8e3d8);
  border-radius:var(--r,8px);
  background:
    repeating-conic-gradient(#f3efe8 0% 25%, #faf9f7 0% 50%) 0 0 / 16px 16px;
  padding:18px;
  max-height:640px;
  overflow:auto;
  position:relative;
}
.ad-preview-wrap {
  margin:0 auto;
  border:1px solid var(--sand,#e8e3d8);
  border-radius:var(--r,8px); overflow:hidden;
  background:var(--ad-bg, #0a1228);
  transform-origin: top center;
  transition: width .18s ease;
}
.ad-preview-wrap.ad-pw-resize {
  resize:horizontal; overflow:auto;
}

/* ── Small helpers ─── */
.ad-hidden { display:none !important; }
.ad-inline-flex { display:inline-flex; align-items:center; gap:6px; }