/* ══════════════════════════════════════════════════════════════════
   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 + .agdoc-admin-pane (admin preview)
   ══════════════════════════════════════════════════════════════════ */

#agent-portal {
  --ad-bg:              #0a1228;
  --ad-panel-bg:        #0f1b36;
  --agdoc-tile-bg:         #ffffff;
  --agdoc-tile-bg-alt:     #faf9f7;
  --ad-heading:         #ffffff;
  --ad-body:            rgba(255,255,255,.58);
  --agdoc-cat-heading:     #c9a961;
  --agdoc-cat-heading-bg:  transparent;
  --agdoc-cat-count:       rgba(255,255,255,.35);
  --agdoc-tile-title:      #111a2f;
  --agdoc-tile-meta:       #6b7383;
  --agdoc-tile-desc:       #434a59;
  --ad-border:          rgba(255,255,255,.08);
  --agdoc-tile-border:     #e8e3d8;
  --ad-hover-border:    #c9a961;
  --ad-hover-shadow:    0 18px 40px -18px rgba(0,0,0,.55);
  --agdoc-btn-primary-bg:  #c9a961;
  --agdoc-btn-primary-fg:  #0a1228;
  --agdoc-btn-ghost-bg:    transparent;
  --agdoc-btn-ghost-fg:    #111a2f;
  --agdoc-btn-ghost-bd:    #c9a961;
  --agdoc-icon:            #c9a961;
  --ad-active:          #c9a961;
  --ad-radius:          14px;
  --ad-radius-sm:       8px;
  --ad-gap:             18px;
  --ad-pad:             22px;
  --agdoc-cols:            6;
  --agdoc-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 ─────────────────────────────────────────── */
.agdoc-library { display:flex; flex-direction:column; gap:36px; margin-top:26px; }

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

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

/* ── Tile grid ─────────────────────────────────────────────────── */
.agdoc-tile-grid {
  display:grid;
  /* Tiles are fixed 200×200 squares; use auto-fill to pack as many as fit. */
  grid-template-columns:repeat(auto-fill, 200px);
  gap:var(--ad-gap);
  justify-content:flex-start;
}
/* Cap at --agdoc-cols columns once the row is wide enough */
@media (min-width: 1400px){
  .agdoc-tile-grid{
    grid-template-columns:repeat(auto-fill, 200px);
    justify-content:flex-start;
  }
}

@media (max-width: 1100px) { #agent-portal { --agdoc-cols:4; } }
@media (max-width: 700px)  { #agent-portal { --agdoc-cols:3; } }
@media (max-width: 440px)  { #agent-portal { --agdoc-cols:2; } }

/* ── Tile cell (wraps square card + actions row below) ────────── */
.agdoc-tile-cell {
  display:flex; flex-direction:column; gap:10px;
}
.agdoc-tile-cell .agdoc-tile {
  position:relative;
  aspect-ratio: auto;
  width: 220px;
  max-width: 100%;
  min-height: 280px;
  display:flex; flex-direction:column;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--agdoc-tile-border, #e8e3d8);
  border-radius: 8px;
  overflow:hidden;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.agdoc-tile-cell .agdoc-tile:hover {
  filter: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(10,18,40,.10);
  border-color: var(--tile-color, #c9a961);
}
.agdoc-tile-cell .agdoc-tile-thumb-wrap {
  width: 100%;
  height: 200px;
  background: #f5f2ec;
  border-bottom: 1px solid var(--agdoc-tile-border, #e8e3d8);
  overflow: hidden;
  position: relative;
}
.agdoc-tile-cell .agdoc-tile-thumb {
  width: 100%; height: 100%;
  display: block;
  aspect-ratio: auto;
  border: none;
  cursor: zoom-in;
}
.agdoc-tile-cell canvas.agdoc-tile-thumb {
  object-fit: cover;
  object-position: top center;
  background: #ffffff;
}
.agdoc-tile-cell .agdoc-tile-thumb-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: var(--tile-color, #0a1228);
  color: rgba(255,255,255,.85);
}
.agdoc-tile-cell .agdoc-tile-thumb-placeholder .agdoc-thumb-icon {
  font-size: 56px;
  opacity: .9;
}
.agdoc-tile-cell .agdoc-tile-label {
  font-family: var(--ad-ff-b);
  font-size: 13px;
  font-weight: 600;
  color: var(--agdoc-tile-title, #111a2f);
  text-align: center;
  line-height: 1.35;
  text-wrap: balance;
  word-break: break-word;
  text-decoration: none;
  padding: 12px 14px;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
}
/* Actions outside the tile card — transparent row, icon-only buttons */
.agdoc-tile-cell .agdoc-tile-actions {
  padding: 0;
  gap: 8px;
  flex-wrap: nowrap;
  justify-content: center;
}
.agdoc-tile-cell .agdoc-tile-actions .agdoc-btn {
  flex:1 1 0;
  padding: 10px 8px;
  font-size: 11px;
  border-radius: 8px;
}
/* Uniform pill fill for preview + download in the tile row */
.agdoc-tile-cell .agdoc-tile-actions .agdoc-btn-primary,
.agdoc-tile-cell .agdoc-tile-actions .agdoc-btn-ghost {
  background: rgb(237, 232, 234);
  color: var(--ad-ink, #19304a);
  border-color: rgb(237, 232, 234);
}
.agdoc-tile-cell .agdoc-tile-actions .agdoc-btn-primary:hover,
.agdoc-tile-cell .agdoc-tile-actions .agdoc-btn-ghost:hover {
  background: rgb(225, 218, 221);
  border-color: rgb(225, 218, 221);
  color: var(--ad-ink, #19304a);
  filter: none;
  transform: translateY(-1px);
}

/* ── Tile (default card variant) ───────────────────────────────── */
.agdoc-tile {
  position:relative;
  display:flex; flex-direction:column;
  background:var(--agdoc-tile-bg);
  border:1px solid var(--agdoc-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);
}
.agdoc-tile:hover {
  border-color:var(--ad-hover-border);
  transform:translateY(-2px);
  box-shadow:var(--ad-hover-shadow);
}

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

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

.agdoc-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);
}

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

/* ── Actions row ──────────────────────────────────────────────── */
.agdoc-tile-actions {
  display:flex; gap:8px; padding:0 var(--ad-pad) var(--ad-pad);
  flex-wrap:wrap;
}
.agdoc-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;
}
.agdoc-btn svg { width:14px; height:14px; flex-shrink:0; }
.agdoc-btn-primary {
  background:var(--agdoc-btn-primary-bg); color:var(--agdoc-btn-primary-fg);
}
.agdoc-btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.agdoc-btn-ghost {
  background:var(--agdoc-btn-ghost-bg);
  color:var(--agdoc-btn-ghost-fg);
  border-color:var(--agdoc-btn-ghost-bd);
}
.agdoc-btn-ghost:hover { background:var(--agdoc-btn-ghost-bd); color:var(--agdoc-btn-primary-fg); }

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

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

/* ══════ VARIANT: editorial (medium thumb + description below) ═══ */
#agent-portal[data-agdoc-variant="editorial"] .agdoc-tile-thumb {
  aspect-ratio: 4 / 3;
}
#agent-portal[data-agdoc-variant="editorial"] .agdoc-tile-overlay-title { display:none; }
#agent-portal[data-agdoc-variant="editorial"] .agdoc-tile-body {
  padding:18px var(--ad-pad) 14px;
  gap:10px;
}
#agent-portal[data-agdoc-variant="editorial"] .agdoc-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-agdoc-variant="editorial"] .agdoc-tile-desc {
  -webkit-line-clamp:5;
  line-clamp:5;
  font-size:13.5px;
  line-height:1.6;
  color:var(--agdoc-tile-desc);
  margin-top:2px;
}
#agent-portal[data-agdoc-variant="editorial"] .agdoc-tile-meta {
  padding-top:10px;
  border-top:1px solid var(--agdoc-tile-border);
}

/* ══════════ Empty state ══════════════════════════════════════ */
.agdoc-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) ═══════════════════════ */
.agdoc-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;
}
.agdoc-modal-overlay.open { opacity:1; pointer-events:auto; }
.agdoc-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);
}
.agdoc-modal-overlay.open .agdoc-modal-box { transform:scale(1); }
.agdoc-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);
}
.agdoc-modal-hdr .title {
  font-size:13px; font-weight:600; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.agdoc-modal-hdr .meta { font-size:11px; color:rgba(255,255,255,.45); }
.agdoc-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;
}
.agdoc-modal-hdr button:hover { background:rgba(255,255,255,.08); }
.agdoc-modal-hdr a {
  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;
  text-decoration:none;
}
.agdoc-modal-hdr a:hover { background:rgba(255,255,255,.08); }
#agdoc-modal-acrobat { background:#e1251b; border-color:#e1251b; }
#agdoc-modal-acrobat:hover { background:#c41e15; border-color:#c41e15; }
.agdoc-modal-hdr .close {
  width:34px; height:34px; padding:0; justify-content:center;
  font-size:16px;
}
.agdoc-modal-body {
  flex:1; background:#f5f2ec; overflow:auto; position:relative;
}
.agdoc-modal-body iframe, .agdoc-modal-body embed {
  width:100%; height:100%; border:none; display:block;
}
.agdoc-modal-body .agdoc-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
   ══════════════════════════════════════════════════════════════ */
.agdoc-admin-pane { display:flex; flex-direction:column; gap:18px; font-family:var(--ff-b,'Inter',system-ui); }

.agdoc-adm-tabs {
  display:flex; gap:4px; border-bottom:1px solid var(--sand,#e8e3d8);
  margin-bottom:4px;
}
.agdoc-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;
}
.agdoc-adm-tab.active { color:var(--navy,#0a1228); border-bottom-color:var(--navy,#0a1228); }
.agdoc-adm-tab:hover { color:var(--navy,#0a1228); }

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

/* Category rows */
.agdoc-cat-row, .agdoc-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;
}
.agdoc-cat-row.dragging, .agdoc-doc-row.dragging {
  opacity:.5; cursor:grabbing; border-color:var(--navy,#0a1228);
}
.agdoc-cat-row.drag-over, .agdoc-doc-row.drag-over {
  border-top:2px solid var(--navy,#0a1228);
}
.agdoc-handle { color:#b0aa9a; font-size:16px; cursor:grab; user-select:none; line-height:1; }
.agdoc-cat-row .agdoc-name, .agdoc-doc-row .agdoc-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;
}
.agdoc-cat-row .agdoc-name:focus, .agdoc-doc-row .agdoc-name:focus { border-bottom:1px solid var(--navy,#0a1228); }
.agdoc-doc-row .agdoc-sub {
  font-size:10px; color:var(--muted,#6b7383); margin-top:2px;
}
.agdoc-doc-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.agdoc-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);
}
.agdoc-toggle {
  position:relative; width:34px; height:18px; background:#d0cabb;
  border-radius:10px; cursor:pointer; transition:background .2s; flex-shrink:0;
}
.agdoc-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);
}
.agdoc-toggle.on { background:#27ae60; }
.agdoc-toggle.on::after { left:18px; }
.agdoc-row-actions { display:flex; gap:4px; }
.agdoc-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;
}
.agdoc-row-actions button:hover { background:#fff; color:var(--ink,#111a2f); }
.agdoc-row-actions .del:hover { background:#c0392b; color:#fff; border-color:#c0392b; }

.agdoc-add-cat {
  display:flex; gap:8px; margin-top:8px;
}
.agdoc-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;
}
.agdoc-add-cat input:focus { border-color:var(--navy,#0a1228); }
.agdoc-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 */
.agdoc-style-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
}
.agdoc-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);
}
.agdoc-colour-field input[type="color"] {
  width:30px; height:30px; border:none; cursor:pointer; padding:0; flex-shrink:0; background:none;
}
.agdoc-colour-field label {
  flex:1; font-size:11px; font-weight:600; color:var(--ink,#111a2f);
  text-transform:none; letter-spacing:0;
}
.agdoc-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;
}

.agdoc-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);
}
.agdoc-range-field label {
  font-size:11px; font-weight:600; color:var(--ink,#111a2f);
  display:flex; justify-content:space-between;
}
.agdoc-range-field label span { color:var(--muted,#6b7383); font-weight:500; font-family:monospace; }
.agdoc-range-field input[type="range"] { width:100%; accent-color:var(--navy,#0a1228); }

.agdoc-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);
}
.agdoc-select-field label {
  font-size:11px; font-weight:600; color:var(--ink,#111a2f);
}
.agdoc-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;
}

.agdoc-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);
}

.agdoc-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;
}
.agdoc-upload-zone:hover, .agdoc-upload-zone.drag {
  border-color:var(--navy,#0a1228); background:#f5f2ec; color:var(--ink,#111a2f);
}
.agdoc-upload-zone.ready { border-style:solid; border-color:#27ae60; color:#27ae60; background:#f0fbf4; }

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

.agdoc-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;
}
.agdoc-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;
}
.agdoc-preview-wrap.agdoc-pw-resize {
  resize:horizontal; overflow:auto;
}

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


/* ═══════════════════════════════════════════════════════════════
   FOLDER LIBRARY  (variant = "folders" — default)
   ═══════════════════════════════════════════════════════════════ */
#agent-portal[data-agdoc-variant="folders"] .agdoc-library,
.agdoc-admin-preview[data-agdoc-variant="folders"] .agdoc-library {
  display:flex; flex-direction:column; gap:28px;
}
/* The library lives inside .portal-doc-grid which is a responsive grid;
   the folder view should break out and take the full row so its own
   tile grid has room to flow multiple columns. */
.portal-doc-grid > .agdoc-library {
  grid-column: 1 / -1;
  width: 100%;
}

/* ── Folder grid ───────────────────────────────────────────── */
.agdoc-folder-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, 200px);
  gap:22px;
  justify-content:flex-start;
}
@media (max-width: 760px){
  .agdoc-folder-grid { grid-template-columns: repeat(auto-fill, 170px); gap:16px; }
}
@media (max-width: 420px){
  .agdoc-folder-grid { grid-template-columns: repeat(auto-fill, 140px); gap:12px; }
}

/* ── One folder tile (square, clickable) ───────────────────── */
.agdoc-folder {
  --folder-color: #c9a961;
  position:relative;
  display:flex; flex-direction:column; align-items:stretch;
  gap:14px;
  padding:0;
  width: 200px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  background: transparent;
  border: none;
  border-radius: 14px;
  cursor:pointer;
  font-family: var(--ad-ff-b, 'Inter', system-ui, sans-serif);
  color:inherit;
  text-align:left;
  outline:none;
  transition: transform .22s ease, filter .22s ease;
}
.agdoc-folder:hover { transform: translateY(-4px); }
.agdoc-folder:active { transform: translateY(-1px) scale(.995); }
.agdoc-folder:focus-visible { outline: 2px solid var(--folder-color); outline-offset: 4px; border-radius:16px; }

/* Folder shape: a realistic hanging file. Tab on top, body below. */
.agdoc-folder-shape {
  position:relative;
  flex:1 1 auto;
  display:block;
  min-height: 0;
}
.agdoc-folder-tab {
  position:absolute;
  top:0; left:12%;
  width:42%;
  height:16%;
  background: var(--folder-color);
  border-radius: 8px 12px 0 0;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.1);
}
.agdoc-folder-tab::after {
  content:"";
  position:absolute;
  right:-14px; top:0;
  width:14px; height:100%;
  background: var(--folder-color);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.agdoc-folder-body {
  position:absolute;
  left:0; right:0; bottom:0;
  height:86%;
  background: var(--folder-color);
  border-radius: 4px 14px 14px 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -18px 0 -8px rgba(0,0,0,.18) inset,
    0 14px 28px -14px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition: box-shadow .22s ease;
}
.agdoc-folder:hover .agdoc-folder-body {
  box-shadow:
    0 1px 0 rgba(255,255,255,.32) inset,
    0 -18px 0 -8px rgba(0,0,0,.18) inset,
    0 22px 40px -18px rgba(0,0,0,.55);
}
/* Subtle "paper peeking" top edge */
.agdoc-folder-body::before{
  content:"";
  position:absolute;
  top:6px; left:10px; right:10px;
  height:6px;
  background: #fff;
  border-radius:3px 3px 0 0;
  opacity:.72;
  box-shadow: 0 -4px 0 -1px rgba(255,255,255,.38);
}
.agdoc-folder-icon {
  font-size: clamp(30px, 5.2vw, 54px);
  line-height:1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.25));
}

/* Label sitting inside the folder body (replaces icon) */
.agdoc-folder-inner {
  position:relative;
  z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px;
  padding: 18px 14px 14px;
  text-align:center;
  width:100%;
}
.agdoc-folder-name-in {
  font-family: 'DM Sans', var(--ad-ff-h);
  font-weight: 600;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.2;
  color: #ffffff;
  text-wrap: balance;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.agdoc-folder-count-in {
  font-family: 'DM Sans', var(--ad-ff-b);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #ffffff;
  opacity: .82;
}

/* Legal / Contract folders → dark navy text (stronger contrast on gold) */
.agdoc-folder[data-cat-legal="1"] .agdoc-folder-name-in,
.agdoc-folder[data-cat-legal="1"] .agdoc-folder-count-in {
  color: rgb(8, 15, 36);
  text-shadow: none;
  opacity: 1;
}
.agdoc-folder[data-cat-legal="1"] .agdoc-folder-count-in {
  opacity: .75;
}

.agdoc-folder-meta {
  display:flex; flex-direction:column; gap:3px;
  padding: 0 2px;
}
.agdoc-folder-name {
  font-family: var(--ad-ff-h);
  font-weight: 600;
  font-size: 15px;
  line-height:1.25;
  color: var(--agdoc-tile-title, #fff);
  text-wrap: balance;
}
.agdoc-folder-count {
  font-size: 11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--agdoc-tile-meta, rgba(255,255,255,.55));
  font-weight: 500;
}

/* When folder library sits on dark page background, set readable text */
#agent-portal .agdoc-folder-name { color: var(--agdoc-tile-title); }
#agent-portal .agdoc-folder-count { color: var(--agdoc-tile-meta); }

/* ═══════════════════════════════════════════════════════════════
   FOLDER DETAIL VIEW (opened folder)
   ═══════════════════════════════════════════════════════════════ */
.agdoc-folder-detail { --folder-color: #c9a961; }
.agdoc-detail-hdr {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  padding: 6px 2px 18px;
  border-bottom: 1px solid var(--ad-border, rgba(255,255,255,.1));
  margin-bottom: 6px;
}
.agdoc-back {
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 14px 9px 10px;
  background: transparent;
  border: 1px solid var(--ad-border, rgba(255,255,255,.18));
  border-radius: 999px;
  color: var(--agdoc-tile-title);
  font-family: var(--ad-ff-b);
  font-weight: 600;
  font-size: 12px;
  letter-spacing:.04em;
  cursor:pointer;
  transition: border-color .18s ease, background .18s ease;
}
.agdoc-back svg { width:14px; height:14px; }
.agdoc-back:hover { border-color: var(--folder-color); background: rgba(201,169,97,.08); }

.agdoc-detail-title-wrap {
  display:flex; align-items:center; gap:12px;
  flex:1 1 auto; min-width:0;
  justify-content:flex-start;
}
.agdoc-detail-icon {
  font-size: 26px;
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px;
  border-radius: 10px;
  background: var(--folder-color);
  box-shadow: 0 8px 18px -10px rgba(0,0,0,.5);
}
.agdoc-detail-title {
  font-family: 'DM Sans', var(--ad-ff-h);
  font-weight: 600;
  font-size: 17px;
  color: var(--agdoc-tile-title);
  margin:0;
  line-height:1.2;
}
.agdoc-detail-count {
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: var(--agdoc-tile-meta);
  font-weight:500;
}

/* Public portal — keep the folder-detail header copy + back button
   (arrow, "All folders", title, item count) all in white. */
#agent-portal-docs .agdoc-back,
#agent-portal-docs .agdoc-back:hover,
#agent-portal-docs .agdoc-back svg,
#agent-portal-docs .agdoc-detail-title,
#agent-portal-docs .agdoc-detail-count {
  color: #ffffff;
}
#agent-portal-docs .agdoc-back svg { stroke: #ffffff; }
#agent-portal-docs .agdoc-back {
  background-color: rgb(17, 37, 95);
  border: 1px solid rgb(17, 37, 95);
  width: 115px;
  justify-content: center;
}
#agent-portal-docs .agdoc-back:hover {
  background-color: rgb(27, 51, 124);
  border-color: rgb(27, 51, 124);
}
@media (max-width: 620px){
  .agdoc-detail-hdr { flex-direction:column; align-items:flex-start; }
  .agdoc-detail-title-wrap { justify-content:flex-start; }
  .agdoc-detail-title { font-size: 18px; }
  .agdoc-detail-icon { width:40px; height:40px; font-size: 22px; }
}

/* disabled / unavailable state on tile buttons */
.agdoc-btn.disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.agdoc-tile-thumb.no-preview { cursor:default; }


/* Admin: per-doc preview/download mini toggles */
.agdoc-mini-tog{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:26px; cursor:pointer; user-select:none;
  border:1px solid var(--sand); border-radius:var(--r);
  background:#faf9f7; position:relative;
}
.agdoc-mini-tog input{ position:absolute; inset:0; opacity:0; cursor:pointer; margin:0; }
.agdoc-mini-tog span{ font-size:14px; opacity:.35; transition:opacity .15s, transform .15s; }
.agdoc-mini-tog:has(input:checked){ border-color:#27ae60; background:#eefaf1; }
.agdoc-mini-tog:has(input:checked) span{ opacity:1; }
.agdoc-mini-tog:hover{ border-color:var(--navy,#0a1228); }

/* Admin: category row — ensure the inline color/icon inputs align cleanly */
.agdoc-cat-row .agdoc-cat-icon-inp{ flex-shrink:0; }
.agdoc-cat-row input[type="color"]{ flex-shrink:0; }