/*
 * Portal Files quick-access drawer.
 * Topbar folder icon → slide-in drawer listing the selected project's media & documents
 * (real data via /api/media/project), with an in-drawer detail pane.
 * Ported from documentation/reference_only/Miira_Files_Panel_1.html; every class is
 * prefixed `pfd-` and scoped under #portalFilesDrawer so it never collides with the
 * portal's existing global .file / .list / .detail / .chip rules.
 */
#portalFilesDrawer {
  --pfd-panel:#141a21; --pfd-card:#1a222c; --pfd-card-hi:#1f2935;
  --pfd-line:rgba(255,255,255,.06); --pfd-line-2:rgba(255,255,255,.10);
  --pfd-txt:#e6eaf0; --pfd-txt-2:#c2cad4; --pfd-mute:#8b95a1; --pfd-mute-2:#5b6573;
  --pfd-indigo:var(--accent); --pfd-indigo-hi:var(--accent-text); --pfd-indigo-soft:rgba(var(--accent-rgb), .14);
  --pfd-green:#34d399; --pfd-green-soft:rgba(52,211,153,.14);
  --pfd-amber:#f59e0b; --pfd-amber-soft:rgba(245,158,11,.13);
  --pfd-pdf:#f87171;   --pfd-pdf-bg:rgba(248,113,113,.13);
  --pfd-docx:#60a5fa;  --pfd-docx-bg:rgba(96,165,250,.13);
  --pfd-xlsx:#34d399;  --pfd-xlsx-bg:rgba(52,211,153,.13);
  --pfd-csv:#2dd4bf;   --pfd-csv-bg:rgba(45,212,191,.13);
  --pfd-img:#a78bfa;   --pfd-img-bg:rgba(167,139,250,.13);
  --pfd-video:#fb7185; --pfd-video-bg:rgba(251,113,133,.13);
  --pfd-dwg:#38bdf8;   --pfd-dwg-bg:rgba(56,189,248,.13);
  --pfd-w:396px;
}

/* Miira Light — re-map the files-drawer tokens for the light theme. The dark
   tokens above stay the default, so dark mode is unchanged. */
[data-theme="light"] #portalFilesDrawer {
  --pfd-panel:#fffdf8; --pfd-card:#f3eee2; --pfd-card-hi:#efe8d9;
  --pfd-line:rgba(44,38,32,.08); --pfd-line-2:rgba(44,38,32,.12);
  --pfd-txt:#2c2620; --pfd-txt-2:#5c5446; --pfd-mute:#7c7363; --pfd-mute-2:#a89e8b;
  --pfd-indigo-hi:var(--accent-text);
  --pfd-green:#16a34a; --pfd-green-soft:rgba(22,163,74,.11);
  --pfd-amber:#d97706; --pfd-amber-soft:rgba(217,119,6,.12);
  --pfd-pdf:#dc2626;   --pfd-pdf-bg:rgba(220,38,38,.10);
  --pfd-docx:#2563eb;  --pfd-docx-bg:rgba(37,99,235,.10);
  --pfd-xlsx:#16a34a;  --pfd-xlsx-bg:rgba(22,163,74,.10);
  --pfd-csv:#0d9488;   --pfd-csv-bg:rgba(13,148,136,.10);
  --pfd-img:#7c3aed;   --pfd-img-bg:rgba(124,58,237,.10);
  --pfd-video:#e11d48; --pfd-video-bg:rgba(225,29,72,.10);
  --pfd-dwg:#0284c7;   --pfd-dwg-bg:rgba(2,132,199,.10);
}
/* Scrollbar thumbs used white-alpha (invisible on cream). */
[data-theme="light"] #portalFilesDrawer .pfd-list::-webkit-scrollbar-thumb,
[data-theme="light"] #portalFilesDrawer .pfd-dt-body::-webkit-scrollbar-thumb { background:rgba(44,38,32,.18); }

/* backdrop + drawer shell */
.pfd-backdrop{position:fixed;inset:0;background:rgba(6,9,13,.45);opacity:0;pointer-events:none;transition:opacity var(--mui-drawer-fade-duration,300ms) var(--mui-drawer-fade-ease,ease);z-index:1190}
#portalFilesDrawer.pfd-open .pfd-backdrop{opacity:1;pointer-events:auto}
/* box-shadow:none when closed — the blur would otherwise leak at the viewport edge after translateX(100%) (see styles.css right rails). */
/* Only transform + opacity are transitioned (both composited on the GPU). box-shadow
   is snapped, not animated — its large blur would repaint every frame and cause jank.
   will-change promotes the panel to its own layer so the slide/fade stay smooth. */
.pfd-drawer{position:fixed;top:0;right:0;height:100%;width:var(--pfd-w);max-width:100vw;background:var(--pfd-panel);border-left:1px solid var(--pfd-line-2);box-shadow:none;display:flex;flex-direction:column;transform:translateX(100%);opacity:0;will-change:transform,opacity;transition:transform var(--mui-drawer-slide-duration,340ms) var(--mui-drawer-slide-ease,cubic-bezier(.22,.61,.36,1)),opacity var(--mui-drawer-fade-duration,300ms) var(--mui-drawer-fade-ease,ease);z-index:1200;color:var(--pfd-txt);font-family:'Inter',-apple-system,system-ui,sans-serif}
#portalFilesDrawer.pfd-open .pfd-drawer{transform:translateX(0);opacity:1;box-shadow:-24px 0 60px rgba(0,0,0,.45)}
.pfd-drawer button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;
	width: auto;
	height: auto;
	max-width: none;}
.pfd-mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* header */
.pfd-dh{padding:18px 18px 14px;border-bottom:1px solid var(--mui-divider, var(--pfd-line))}
.pfd-dh-top{display:flex;align-items:center;gap:12px}
.pfd-folder{width:42px;height:42px;border-radius:11px;flex:none;background:var(--pfd-indigo-soft);color:var(--pfd-indigo-hi);display:flex;align-items:center;justify-content:center}
.pfd-folder[data-pfd-maximise]{cursor:pointer;transition:filter .15s ease,transform .15s ease}
.pfd-folder[data-pfd-maximise]:hover{filter:brightness(1.08)}
.pfd-folder[data-pfd-maximise]:active{transform:scale(.96)}
.pfd-folder[data-pfd-maximise]:focus-visible{outline:2px solid var(--pfd-indigo-hi);outline-offset:2px}
.pfd-dh-title{flex:1;min-width:0}
.pfd-dh-title h2{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:0}
.pfd-dh-title p{font-size:12.5px;color:var(--pfd-mute);margin:2px 0 0}
.pfd-x-btn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--pfd-mute)}
.pfd-x-btn:hover{background:var(--pfd-card);color:var(--pfd-txt)}
.pfd-search{margin-top:14px;display:flex;align-items:center;gap:9px;background:var(--pfd-card);border:1px solid var(--pfd-line);border-radius:10px;padding:9px 12px}
.pfd-search:focus-within{border-color:rgba(var(--accent-rgb), .45)}
.pfd-search svg{color:var(--pfd-mute-2);flex:none}
.pfd-search input{flex:1;background:none;border:none;outline:none;color:var(--pfd-txt);font-size:13.5px}
.pfd-search input::placeholder{color:var(--pfd-mute-2)}

/* chips */
.pfd-chips{display:flex;gap:7px;overflow-x:auto;padding:12px 18px;border-bottom:1px solid var(--mui-divider, var(--pfd-line));scrollbar-width:none}
.pfd-chips::-webkit-scrollbar{display:none}
/* .pfd-chip migrated to the standalone .miira-filter component (theme.css); the class is
   a JS/query hook only. flex:none is kept so chips don't shrink in the .pfd-chips scroller.
   The count badge (.pfd-cnt) has no .miira-filter equivalent, so it is kept and its active
   colour re-pointed to the accent to match the canonical active state. */
.pfd-chip{flex:none}
.pfd-chip .pfd-cnt{font-size:11px;color:var(--pfd-mute-2)}
.pfd-chip.is-active .pfd-cnt{color:var(--accent-text)}

/* list */
.pfd-list{flex:1;overflow-y:auto;padding:6px 10px 8px}
.pfd-list::-webkit-scrollbar{width:9px}
.pfd-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:9px;border:2px solid var(--pfd-panel)}
.pfd-group-label{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--pfd-mute-2);text-transform:uppercase;padding:15px 10px 7px}
.pfd-gl-tag{font-size:10px;letter-spacing:.02em;padding:2px 7px;border-radius:6px;text-transform:none}
.pfd-gl-tag.pfd-on{color:var(--pfd-green);background:var(--pfd-green-soft)}
.pfd-gl-tag.pfd-off{color:var(--pfd-mute);background:var(--pfd-card)}

.pfd-file{display:flex;align-items:center;gap:12px;padding:11px 10px;border-radius:10px;border:1px solid transparent;position:relative;cursor:pointer}
.pfd-file:hover{background:var(--pfd-card);border-color:var(--pfd-line)}
.pfd-ftype{width:42px;height:42px;border-radius:10px;flex:none;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;font-size:10px;font-weight:600;letter-spacing:.01em;overflow:hidden}
.pfd-ftype::before{content:"";position:absolute;top:8px;left:10px;right:10px;height:11px;border-radius:2px;background:currentColor;opacity:.22}
.pfd-ftype.pfd-has-thumb::before{display:none}
.pfd-ftype img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pfd-ftype.PDF{color:var(--pfd-pdf);background:var(--pfd-pdf-bg)}
.pfd-ftype.DOCX{color:var(--pfd-docx);background:var(--pfd-docx-bg)}
.pfd-ftype.XLSX{color:var(--pfd-xlsx);background:var(--pfd-xlsx-bg)}
.pfd-ftype.CSV{color:var(--pfd-csv);background:var(--pfd-csv-bg)}
.pfd-ftype.IMG{color:var(--pfd-img);background:var(--pfd-img-bg)}
.pfd-ftype.DWG{color:var(--pfd-dwg);background:var(--pfd-dwg-bg)}
.pfd-ftype.VIDEO{color:var(--pfd-video);background:var(--pfd-video-bg);font-size:0}
.pfd-ftype.VIDEO::before{display:none}
.pfd-ftype.VIDEO::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-40%,-50%);border-left:11px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}
.pfd-ftype.pfd-has-thumb.VIDEO::after{border-left-color:#fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.pfd-fmeta{flex:1;min-width:0}
.pfd-fname{font-size:13.5px;font-weight:600;color:var(--pfd-txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfd-fsub{font-size:11.5px;color:var(--pfd-mute);margin-top:3px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.pfd-fsub .pfd-sep{width:3px;height:3px;border-radius:50%;background:var(--pfd-mute-2)}
.pfd-ctrl-pill,.pfd-int-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px}
.pfd-ctrl-pill{color:var(--pfd-green);background:var(--pfd-green-soft)}
.pfd-int-pill{color:var(--pfd-mute);background:var(--pfd-card-hi)}
.pfd-fstar{width:30px;height:30px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--pfd-mute-2);opacity:0;transition:opacity .15s}
.pfd-file:hover .pfd-fstar{opacity:1}
.pfd-fstar:hover{background:var(--pfd-card-hi);color:var(--pfd-txt-2)}
.pfd-fstar.pfd-on{opacity:1;color:var(--pfd-amber)}
.pfd-fchev{color:var(--pfd-mute-2);flex:none}
.pfd-empty{padding:48px 24px;text-align:center;color:var(--pfd-mute)}
.pfd-empty p{font-size:13px;margin:0}

/* footer — Open Media & Documents */
.pfd-dfoot{padding:12px 14px;border-top:1px solid var(--pfd-line)}
/* selector scoped under .pfd-drawer so width:100% beats the `.pfd-drawer button{width:auto}` reset */
.pfd-drawer .pfd-open-media{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:11px;border:1px solid var(--pfd-line-2);background:var(--pfd-card);text-align:left;transition:.15s}
.pfd-open-media:hover{border-color:var(--pfd-indigo);background:var(--pfd-indigo-soft)}
.pfd-open-media-ic{width:36px;height:36px;border-radius:10px;flex:none;background:var(--pfd-indigo-soft);color:var(--pfd-indigo-hi);display:flex;align-items:center;justify-content:center}
.pfd-open-media:hover .pfd-open-media-ic{background:rgba(var(--accent-rgb), .22)}
.pfd-open-media-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.pfd-open-media-txt .t{display:block;font-size:13.5px;font-weight:600;color:var(--pfd-txt)}
.pfd-open-media-txt .s{display:block;font-size:11.5px;color:var(--pfd-mute);margin-top:2px}
.pfd-open-media-arrow{color:var(--pfd-mute-2);flex:none}
.pfd-open-media:hover .pfd-open-media-arrow{color:var(--pfd-indigo-hi)}

/* detail pane */
.pfd-detail{position:absolute;inset:0;background:var(--pfd-panel);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);z-index:5}
.pfd-detail.pfd-open{transform:translateX(0)}
.pfd-dt-bar{display:flex;align-items:center;gap:6px;padding:14px 16px;border-bottom:1px solid var(--pfd-line)}
.pfd-back{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--pfd-mute);padding:6px 8px;border-radius:8px}
.pfd-back:hover{color:var(--pfd-txt);background:var(--pfd-card)}
.pfd-dt-bar .pfd-sp{flex:1}
.pfd-dt-body{flex:1;overflow-y:auto;padding:20px 18px 24px}
.pfd-dt-body::-webkit-scrollbar{width:9px}
.pfd-dt-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:9px;border:2px solid var(--pfd-panel)}
.pfd-dt-head{display:flex;gap:14px;align-items:flex-start}
.pfd-dt-head .pfd-ftype{width:54px;height:54px;border-radius:12px;font-size:11px}
.pfd-dt-head h3{font-size:16.5px;font-weight:700;line-height:1.3;margin:0}
.pfd-dt-head .pfd-fsub{margin-top:6px}

.pfd-preview-page{margin-top:18px;border-radius:12px;border:1px solid var(--pfd-line);overflow:hidden;background:var(--pfd-card)}
.pfd-pp-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid var(--pfd-line);background:var(--pfd-card-hi)}
.pfd-pp-bar .pfd-pd{width:8px;height:8px;border-radius:50%;background:var(--pfd-mute-2);opacity:.5}
.pfd-pp-bar span{margin-left:auto;font-size:11px;color:var(--pfd-mute-2)}
.pfd-pp-img{display:block;width:100%;max-height:280px;object-fit:contain;background:#0b0f14}
.pfd-pp-canvas{padding:22px 20px;display:flex;flex-direction:column;gap:11px;min-height:150px}
.pfd-sk{height:9px;border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.04))}
.pfd-sk.pfd-title{height:15px;width:62%;background:rgba(255,255,255,.16)}
.pfd-sk.pfd-w90{width:90%} .pfd-sk.pfd-w80{width:80%} .pfd-sk.pfd-w70{width:70%} .pfd-sk.pfd-w50{width:50%}
.pfd-video-prev{aspect-ratio:16/9;background:linear-gradient(135deg,#26303d,#0f151c);display:flex;align-items:center;justify-content:center;position:relative}
.pfd-video-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.pfd-video-prev .pfd-play{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.pfd-video-prev .pfd-play::after{content:"";border-left:16px solid #10161e;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.pfd-video-prev .pfd-vlabel{position:absolute;bottom:10px;left:12px;font-size:11px;color:rgba(255,255,255,.85);z-index:1}

.pfd-dt-sec-label{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--pfd-mute-2);text-transform:uppercase;margin:22px 2px 10px}
.pfd-ctrl-card{display:flex;flex-direction:column;gap:12px;padding:13px 14px;border-radius:11px;border:1px solid var(--pfd-line);background:var(--pfd-card)}
.pfd-ctrl-status{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600}
.pfd-ctrl-status.pfd-on{color:var(--pfd-green)}
.pfd-ctrl-status.pfd-off{color:var(--pfd-txt-2)}
.pfd-ctrl-status .pfd-gdot{width:8px;height:8px;border-radius:50%;flex:none}
.pfd-ctrl-status.pfd-on .pfd-gdot{background:var(--pfd-green);box-shadow:0 0 0 4px var(--pfd-green-soft)}
.pfd-ctrl-note{font-size:12px;color:var(--pfd-mute);line-height:1.5}
.pfd-kv{display:flex;justify-content:space-between;gap:14px;padding:9px 2px;border-bottom:1px solid var(--pfd-line);font-size:13px}
.pfd-kv:last-child{border-bottom:none}
.pfd-kv .pfd-k{color:var(--pfd-mute)}
.pfd-kv .pfd-v{color:var(--pfd-txt-2);font-weight:500;text-align:right}
.pfd-dt-actions{padding:14px 16px;border-top:1px solid var(--pfd-line);display:flex;gap:9px}
.pfd-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:10px;font-size:13.5px;font-weight:600}
.pfd-btn.pfd-primary{background:var(--pfd-indigo);color:#fff}
.pfd-btn.pfd-primary:hover{background:var(--pfd-indigo-hi)}
.pfd-btn.pfd-ghost{background:var(--pfd-card);color:var(--pfd-txt-2);border:1px solid var(--pfd-line)}
.pfd-btn.pfd-ghost:hover{border-color:var(--pfd-line-2);color:var(--pfd-txt)}
.pfd-btn.pfd-sq{flex:none;width:46px}

/* topbar trigger active state (matches portal-topbar-icon) */
.portal-topbar-icon.pfd-trigger-on{background:var(--pfd-indigo-soft,rgba(var(--accent-rgb), .14));color:var(--pfd-indigo-hi,var(--accent-text))}

/* ---------------------------------------------------------------------------
   Miira Light — the drawer ships a dark token palette; remap the neutrals (and
   the too-light indigo-hi / file-type hues that wash out on cream) for light.
   Soft tint backgrounds stay (low-alpha reads fine on either surface). Dark is
   the default and untouched.
   --------------------------------------------------------------------------- */
[data-theme="light"] #portalFilesDrawer{
  --pfd-panel:#fffdf8; --pfd-card:#f3eee2; --pfd-card-hi:#efe8d9;
  --pfd-line:rgba(44,38,32,.10); --pfd-line-2:rgba(44,38,32,.14);
  --pfd-txt:#2c2620; --pfd-txt-2:#4a4238; --pfd-mute:#7c7363; --pfd-mute-2:#a89e8b;
  --pfd-indigo-hi:var(--accent-text);
  --pfd-green:#16a34a; --pfd-amber:#d97706;
  --pfd-pdf:#dc2626; --pfd-docx:#2563eb; --pfd-xlsx:#16a34a; --pfd-csv:#0d9488;
  --pfd-img:#7c3aed; --pfd-video:#e11d48; --pfd-dwg:#0284c7;
}
/* white-alpha fills that disappear on a light surface */
[data-theme="light"] #portalFilesDrawer .pfd-list::-webkit-scrollbar-thumb,
[data-theme="light"] #portalFilesDrawer .pfd-dt-body::-webkit-scrollbar-thumb{background:rgba(44,38,32,.18)}
[data-theme="light"] #portalFilesDrawer .pfd-sk{background:linear-gradient(90deg,rgba(44,38,32,.10),rgba(44,38,32,.05))}
[data-theme="light"] #portalFilesDrawer .pfd-sk.pfd-title{background:rgba(44,38,32,.16)}


/* ==========================================================================
   Cool Light — component/subsystem overrides (generated: warm twins remapped
   to cool slate; accent flows from the [data-theme="cool-light"] core block).
   ========================================================================== */
[data-theme="cool-light"] #portalFilesDrawer {
  --pfd-panel:#ffffff; --pfd-card:#e7edf4; --pfd-card-hi:#e2e8f1;
  --pfd-line:rgba(30, 41, 59, .08); --pfd-line-2:rgba(30, 41, 59, .12);
  --pfd-txt:#1e293b; --pfd-txt-2:#43505f; --pfd-mute:#5e6a7b; --pfd-mute-2:#94a1b3;
  --pfd-indigo-hi:var(--accent-text);
  --pfd-green:#16a34a; --pfd-green-soft:rgba(22,163,74,.11);
  --pfd-amber:#d97706; --pfd-amber-soft:rgba(217,119,6,.12);
  --pfd-pdf:#dc2626;   --pfd-pdf-bg:rgba(220,38,38,.10);
  --pfd-docx:#2563eb;  --pfd-docx-bg:rgba(37,99,235,.10);
  --pfd-xlsx:#16a34a;  --pfd-xlsx-bg:rgba(22,163,74,.10);
  --pfd-csv:#0d9488;   --pfd-csv-bg:rgba(13,148,136,.10);
  --pfd-img:#7c3aed;   --pfd-img-bg:rgba(124,58,237,.10);
  --pfd-video:#e11d48; --pfd-video-bg:rgba(225,29,72,.10);
  --pfd-dwg:#0284c7;   --pfd-dwg-bg:rgba(2,132,199,.10);
}

[data-theme="cool-light"] #portalFilesDrawer .pfd-list::-webkit-scrollbar-thumb,
[data-theme="cool-light"] #portalFilesDrawer .pfd-dt-body::-webkit-scrollbar-thumb { background:rgba(30, 41, 59, .18); }

[data-theme="cool-light"] #portalFilesDrawer {
  --pfd-panel:#ffffff; --pfd-card:#e7edf4; --pfd-card-hi:#e2e8f1;
  --pfd-line:rgba(30, 41, 59, .10); --pfd-line-2:rgba(30, 41, 59, .14);
  --pfd-txt:#1e293b; --pfd-txt-2:#4a4238; --pfd-mute:#5e6a7b; --pfd-mute-2:#94a1b3;
  --pfd-indigo-hi:var(--accent-text);
  --pfd-green:#16a34a; --pfd-amber:#d97706;
  --pfd-pdf:#dc2626; --pfd-docx:#2563eb; --pfd-xlsx:#16a34a; --pfd-csv:#0d9488;
  --pfd-img:#7c3aed; --pfd-video:#e11d48; --pfd-dwg:#0284c7;
}

[data-theme="cool-light"] #portalFilesDrawer .pfd-list::-webkit-scrollbar-thumb,
[data-theme="cool-light"] #portalFilesDrawer .pfd-dt-body::-webkit-scrollbar-thumb {background:rgba(30, 41, 59, .18)}

[data-theme="cool-light"] #portalFilesDrawer .pfd-sk {background:linear-gradient(90deg,rgba(30, 41, 59, .10),rgba(30, 41, 59, .05))}

[data-theme="cool-light"] #portalFilesDrawer .pfd-sk.pfd-title {background:rgba(30, 41, 59, .16)}


/* ==========================================================================
   Monochrome — component/subsystem overrides (generated: warm twins remapped
   to neutral zinc; accent flows from [data-theme="monochrome"]; semantic
   colour is desaturated by the filter:grayscale rule).
   ========================================================================== */
[data-theme="monochrome"] #portalFilesDrawer {
  --pfd-panel:#ffffff; --pfd-card:#ebebec; --pfd-card-hi:#e7e7e9;
  --pfd-line:rgba(24, 24, 27, .08); --pfd-line-2:rgba(24, 24, 27, .12);
  --pfd-txt:#18181b; --pfd-txt-2:#3f3f46; --pfd-mute:#71717a; --pfd-mute-2:#a1a1aa;
  --pfd-indigo-hi:var(--accent-text);
  --pfd-green:#16a34a; --pfd-green-soft:rgba(22,163,74,.11);
  --pfd-amber:#d97706; --pfd-amber-soft:rgba(217,119,6,.12);
  --pfd-pdf:#dc2626;   --pfd-pdf-bg:rgba(220,38,38,.10);
  --pfd-docx:#2563eb;  --pfd-docx-bg:rgba(37,99,235,.10);
  --pfd-xlsx:#16a34a;  --pfd-xlsx-bg:rgba(22,163,74,.10);
  --pfd-csv:#0d9488;   --pfd-csv-bg:rgba(13,148,136,.10);
  --pfd-img:#7c3aed;   --pfd-img-bg:rgba(124,58,237,.10);
  --pfd-video:#e11d48; --pfd-video-bg:rgba(225,29,72,.10);
  --pfd-dwg:#0284c7;   --pfd-dwg-bg:rgba(2,132,199,.10);
}

[data-theme="monochrome"] #portalFilesDrawer .pfd-list::-webkit-scrollbar-thumb,
[data-theme="monochrome"] #portalFilesDrawer .pfd-dt-body::-webkit-scrollbar-thumb { background:rgba(24, 24, 27, .18); }

[data-theme="monochrome"] #portalFilesDrawer {
  --pfd-panel:#ffffff; --pfd-card:#ebebec; --pfd-card-hi:#e7e7e9;
  --pfd-line:rgba(24, 24, 27, .10); --pfd-line-2:rgba(24, 24, 27, .14);
  --pfd-txt:#18181b; --pfd-txt-2:#4a4238; --pfd-mute:#71717a; --pfd-mute-2:#a1a1aa;
  --pfd-indigo-hi:var(--accent-text);
  --pfd-green:#16a34a; --pfd-amber:#d97706;
  --pfd-pdf:#dc2626; --pfd-docx:#2563eb; --pfd-xlsx:#16a34a; --pfd-csv:#0d9488;
  --pfd-img:#7c3aed; --pfd-video:#e11d48; --pfd-dwg:#0284c7;
}

[data-theme="monochrome"] #portalFilesDrawer .pfd-list::-webkit-scrollbar-thumb,
[data-theme="monochrome"] #portalFilesDrawer .pfd-dt-body::-webkit-scrollbar-thumb {background:rgba(24, 24, 27, .18)}

[data-theme="monochrome"] #portalFilesDrawer .pfd-sk {background:linear-gradient(90deg,rgba(24, 24, 27, .10),rgba(24, 24, 27, .05))}

[data-theme="monochrome"] #portalFilesDrawer .pfd-sk.pfd-title {background:rgba(24, 24, 27, .16)}

/* Respect reduced-motion: instant show/hide, no slide/fade. */
@media (prefers-reduced-motion: reduce) {
  .pfd-backdrop, .pfd-drawer { transition: none; }
}