/* Dataroom external guest portal (vault.flowyer.{tld}) */
:root {
    --dr-accent: #2f6df6;
    --dr-border: #e6e8ec;
    --dr-bg: #f1f4f8;
    --dr-card: #ffffff;
    --dr-text: #1f2937;
    --dr-muted: #6b7280;
}

.dr-portal-body {
    margin: 0;
    background: var(--dr-bg);
    color: var(--dr-text);
    font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 100vh;
}

.dr-portal-shell {
    max-width: 960px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* top bar */
.dr-portal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .25rem 1.25rem;
    flex-wrap: wrap;
}
.dr-portal-brand { display: inline-flex; }
.dr-portal-logo { height: 34px; width: auto; display: block; }
.dr-portal-office { text-align: right; line-height: 1.2; }
.dr-portal-office-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--dr-muted); }
.dr-portal-office-name { font-weight: 600; }

.dr-portal-main { flex: 1 1 auto; }
.dr-portal-footer { text-align: center; color: var(--dr-muted); font-size: .78rem; padding-top: 1.5rem; }

/* card */
.dr-portal-card {
    background: var(--dr-card);
    border: 1px solid var(--dr-border);
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
    overflow: hidden;
}
.dr-portal-narrow { max-width: 480px; margin: 2rem auto 0; }
.dr-portal-card-head { padding: 1.5rem 1.5rem .75rem; }
.dr-portal-card-body { padding: 1rem 1.5rem 1.5rem; }
.dr-portal-title { font-size: 1.25rem; font-weight: 700; margin: 0; }
.dr-portal-head-icon { font-size: 2.2rem; color: var(--dr-accent); display: block; margin-bottom: .5rem; }

/* not-found / state */
.dr-portal-state { text-align: center; padding: 2.5rem 1.5rem; }
.dr-portal-state-icon { font-size: 3rem; color: #cfd4dc; display: block; margin-bottom: 1rem; }

/* 2FA form */
.dr-step { max-width: 340px; margin: 0 auto; }
.dr-masked-email { font-weight: 600; }
.dr-code-input { text-align: center; letter-spacing: .6rem; font-size: 1.6rem; font-weight: 700; font-family: Consolas, Menlo, monospace; }
.dr-form-msg { font-size: .85rem; min-height: 1.1rem; }
.dr-form-msg-error { color: #c0392b; }
.dr-form-msg-info { color: var(--dr-muted); }

/* room grid */
.dr-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.dr-room-card {
    display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem;
    border: 1px solid var(--dr-border); border-radius: 12px; background: #fff;
    text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s, transform .15s;
}
.dr-room-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .08); border-color: #cfd4dc; transform: translateY(-1px); }
.dr-room-icon { font-size: 1.7rem; color: var(--dr-accent); line-height: 1; }
.dr-room-name { font-weight: 600; }
.dr-room-meta { font-size: .8rem; margin-top: .15rem; }
.dr-role-badge { background: #eef2f7; color: #4a5568; font-weight: 500; text-transform: capitalize; }
.dr-badge-ver { background: #eef2f7; color: #4a5568; font-weight: 500; }

/* nda */
.dr-nda-body { max-height: 55vh; overflow-y: auto; border: 1px solid var(--dr-border); border-radius: 10px; padding: 1rem 1.25rem; background: #fafbfc; }

/* file list */
.dr-readonly-banner { font-size: .9rem; }
.dr-breadcrumb { font-size: .9rem; }
.dr-progress:empty { display: none; }
.dr-progress-line { font-size: .85rem; padding: .15rem 0; }
/* No overflow:hidden here - it would clip the row three-dots menu. Rounded
   corners are kept by rounding the table's corner cells instead. */
.dr-filelist { border: 1px solid var(--dr-border); border-radius: 12px; }
.dr-filelist table { border-collapse: separate; border-spacing: 0; }
.dr-filelist thead th:first-child { border-top-left-radius: 12px; }
.dr-filelist thead th:last-child { border-top-right-radius: 12px; }
.dr-filelist tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.dr-filelist tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.dr-filelist thead th { background: #f7f8fa; border-bottom: 1px solid var(--dr-border); font-size: .8rem; text-transform: uppercase; letter-spacing: .02em; color: var(--dr-muted); }
.dr-filelist td { vertical-align: middle; }
.dr-col-size { width: 120px; }
.dr-col-date { width: 160px; }
.dr-col-actions { width: 90px; }
.dr-folder { cursor: pointer; font-weight: 500; }
.dr-folder:hover { color: var(--dr-accent); }

/* Box-style list: selection, sortable headers, kebab, grid, toolbar */
.dr-col-check { width: 40px; }
.dr-col-updated { width: 200px; white-space: nowrap; }
.dr-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.dr-caret { font-size: .7rem; opacity: .35; margin-left: 2px; }
.dr-sort-active .dr-caret { opacity: .9; }
.dr-upd-by { opacity: .75; }
.dr-row-sel > td { background: #eef4ff; }
.dr-kebab { opacity: 0; transition: opacity .12s; padding: .1rem .4rem; }
.dr-filelist tbody tr:hover .dr-kebab, .dr-row-sel .dr-kebab { opacity: 1; }
.dr-listbar { min-height: 34px; }
.dr-bulk-bar { display: flex; align-items: center; }
.dr-view-btn.active { background: #dbe3ee; color: #2f5b9c; border-color: #b9cbe3; box-shadow: none; }
html[data-layout-mode=dark] .dr-view-btn.active { background: #33415a; color: #9db8e0; border-color: #4a5b7a; }

/* Drag & drop upload zone (wraps list + grid). Generous min-height keeps the root
   droppable even with few/no files; folder rows highlight as into-folder targets. */
#drDroparea { border: 2px dashed transparent; border-radius: 12px; transition: border-color .15s ease, background .15s ease; min-height: 240px; }
#drDroparea.dr-drop-active { border-color: #b9cbe3; background: rgba(90, 129, 179, .04); }
#drListWrap, #drGrid { min-height: 220px; }
tr.dr-drop-hover > td, .dr-grid-card.dr-drop-hover { background: #dbe6f2 !important; }
.dr-grid-card.dr-drop-hover { border-color: #9db8d8 !important; }
html[data-layout-mode=dark] #drDroparea.dr-drop-active { border-color: #4a5b7a; background: rgba(120, 150, 200, .06); }
html[data-layout-mode=dark] tr.dr-drop-hover > td,
html[data-layout-mode=dark] .dr-grid-card.dr-drop-hover { background: #2e3b52 !important; }

/* hand-rolled kebab menu (the guest portal loads no Bootstrap JS) */
.dr-menu { position: relative; display: inline-block; }
.dr-menu-list { display: none; position: absolute; right: 0; top: 100%; z-index: 20; min-width: 160px; background: var(--dr-card); border: 1px solid var(--dr-border); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .12); padding: .25rem 0; }
.dr-menu-list.show { display: block; }
.dr-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .4rem .8rem; font-size: .9rem; color: var(--dr-text); cursor: pointer; }
.dr-menu-item:hover { background: #f2f5f9; }

/* grid view */
.dr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dr-grid-card { position: relative; border: 1px solid var(--dr-border); border-radius: 12px; padding: 18px 12px 12px; text-align: center; background: var(--dr-card); }
.dr-grid-card:hover { border-color: #cdd3db; }
.dr-grid-card.dr-row-sel { background: #eef4ff; border-color: #b9cdfb; }
.dr-grid-check { position: absolute; top: 8px; left: 8px; opacity: 0; transition: opacity .12s; }
.dr-grid-card:hover .dr-grid-check, .dr-grid-card.dr-row-sel .dr-grid-check { opacity: 1; }
.dr-grid-kebab { position: absolute; top: 6px; right: 6px; }
.dr-grid-kebab .dr-kebab { opacity: 1; }
.dr-grid-icon { font-size: 2.2rem; line-height: 1; margin-bottom: 8px; }
.dr-grid-name { font-weight: 500; word-break: break-word; }
.dr-grid-name[role=button] { cursor: pointer; }

/* dark mode (viewer OS/app toggle) */
html[data-layout-mode=dark] .dr-portal-body { background: #0f172a; color: #e5e7eb; }
html[data-layout-mode=dark] .dr-portal-card,
html[data-layout-mode=dark] .dr-room-card,
html[data-layout-mode=dark] .dr-filelist { background: #1f2937; border-color: #374151; }
html[data-layout-mode=dark] .dr-filelist thead th { background: #111827; border-color: #374151; color: #9ca3af; }
html[data-layout-mode=dark] .dr-nda-body { background: #111827; border-color: #374151; }
html[data-layout-mode=dark] .dr-grid-card,
html[data-layout-mode=dark] .dr-menu-list { background: #1f2937; border-color: #374151; }
html[data-layout-mode=dark] .dr-row-sel > td,
html[data-layout-mode=dark] .dr-grid-card.dr-row-sel { background: #243244; border-color: #3b5170; }
html[data-layout-mode=dark] .dr-menu-item { color: #e5e7eb; }
html[data-layout-mode=dark] .dr-menu-item:hover { background: #374151; }

/* Q&A */
.dr-qa-answer { padding: .5rem .7rem; border-radius: 8px; background: #f7f8fa; margin: .4rem 0; }
.dr-qa-answer.dr-qa-staff { background: #eef5ff; }
html[data-layout-mode=dark] .dr-qa-answer { background: #111827; }
html[data-layout-mode=dark] .dr-qa-answer.dr-qa-staff { background: #1e293b; }

/* Watermarked preview modal (Swal-hosted) */
.dr-preview-host { display: flex; flex-direction: column; align-items: stretch; }
.dr-preview-embed { width: 100%; height: 78vh; border: 1px solid #e5e7eb; border-radius: 8px; background: #f7f8fa; }
.dr-preview-note { margin-top: .6rem; font-size: .85rem; color: #6b7280; text-align: center; }
.dr-preview-msg { padding: 3rem 1rem; text-align: center; color: #6b7280; }
html[data-layout-mode=dark] .dr-preview-embed { border-color: #374151; background: #111827; }
html[data-layout-mode=dark] .dr-preview-note,
html[data-layout-mode=dark] .dr-preview-msg { color: #9ca3af; }

/* Client-side preview stage: holds the rendered content + the watermark overlay.
   position:relative so the absolutely-positioned watermark tiles over it. PDF uses
   the self-sized embed; image/docx use a fixed-height viewport with an inner
   scroller so the watermark (a sibling of the scroller) stays put while scrolling. */
.dr-preview-stage { position: relative; width: 100%; }
.dr-preview-imgstage,
.dr-preview-docxstage {
    height: 78vh; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px;
    background: #f7f8fa;
}
.dr-preview-scroll { height: 100%; overflow: auto; text-align: center; }
.dr-preview-img { max-width: 100%; height: auto; display: inline-block; }
.dr-docx-container { padding: .5rem; text-align: left; }
.dr-docx-container .docx-wrapper { background: transparent; padding: 0; }
/* Tiled diagonal watermark over the rendered content; never intercepts clicks. */
.dr-watermark {
    position: absolute; inset: 0; pointer-events: none; z-index: 5;
    background-repeat: repeat; background-position: center;
}
html[data-layout-mode=dark] .dr-preview-imgstage,
html[data-layout-mode=dark] .dr-preview-docxstage { border-color: #374151; background: #111827; }
html[data-layout-mode=dark] .dr-docx-container .docx-wrapper > section.docx { background: #fff; }

/* Recents strip (room-wide horizontal card row above the file list) */
.dr-recents { margin-bottom: 1rem; }
.dr-recents-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.dr-recents-title { font-weight: 500; font-size: .95rem; color: #374151; }
.dr-recents-mode { width: auto; min-width: 11rem; }
.dr-recents-strip { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: 4px; }
.dr-recent-card {
    flex: 0 0 auto; width: 132px; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 12px 10px; cursor: pointer; background: #fff; transition: box-shadow .15s, border-color .15s;
}
.dr-recent-card:hover { border-color: #c7ccd4; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.dr-recent-icon { font-size: 1.9rem; line-height: 1; text-align: center; margin-bottom: 8px; }
.dr-recent-name { font-size: .82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-recent-sub { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-recents-empty { padding: .4rem 0; }
html[data-layout-mode=dark] .dr-recents-title { color: #d1d5db; }
html[data-layout-mode=dark] .dr-recent-card { background: #1f2937; border-color: #374151; }
html[data-layout-mode=dark] .dr-recent-card:hover { border-color: #4b5563; }

/* File-type icon tints - deliberately muted (not loud bootstrap colours) so the
   list stays calm; only the glyph + a soft tint distinguish the type. */
.dr-ic-pdf { color: #c1665e; }
.dr-ic-word { color: #5f81b3; }
.dr-ic-excel { color: #5c9c78; }
.dr-ic-ppt { color: #c58a55; }
.dr-ic-image { color: #6fa0a0; }
.dr-ic-zip { color: #9c8a5f; }
html[data-layout-mode=dark] .dr-ic-pdf { color: #d18a83; }
html[data-layout-mode=dark] .dr-ic-word { color: #89a6ce; }
html[data-layout-mode=dark] .dr-ic-excel { color: #84bb9c; }
html[data-layout-mode=dark] .dr-ic-ppt { color: #d6ab82; }
html[data-layout-mode=dark] .dr-ic-image { color: #94bcbc; }
html[data-layout-mode=dark] .dr-ic-zip { color: #bfae86; }

/* Notification preferences panel (guest portal) */
.dr-notif-panel .card { border: 1px solid #e6e8ec; border-radius: 12px; }
.dr-notif-grid { display: flex; flex-direction: column; gap: .35rem; }
.dr-notif-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .4rem .6rem; border: 1px solid #e6e8ec; border-radius: 8px; }
.dr-notif-ev { font-weight: 500; }
.dr-notif-opts { display: flex; gap: .9rem; flex-wrap: wrap; }
.dr-notif-opt { font-size: .85rem; color: #4a5568; margin: 0; cursor: pointer; white-space: nowrap; }
.dr-notif-opt input { margin-right: .2rem; }
html[data-layout-mode=dark] .dr-notif-panel .card,
html[data-layout-mode=dark] .dr-notif-row { border-color: #374151; }
html[data-layout-mode=dark] .dr-notif-opt { color: #cbd5e1; }

/* ---- In-room search (Phase 1: file names) -------------------------------- */
.dr-search-input-wrap { position: relative; max-width: 520px; }
.dr-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: #9aa0a6; pointer-events: none; }
.dr-search-input { padding-left: 2.25rem; padding-right: 2.25rem; border-radius: 10px; }
.dr-search-clear { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #9aa0a6; line-height: 1; padding: .25rem .4rem; border-radius: 6px; cursor: pointer; }
.dr-search-clear:hover { background: #eef0f3; color: #495057; }
.dr-search-results { min-height: 120px; }
.dr-search-list { border: 1px solid #e6e8ec; border-radius: 12px; overflow: hidden; }
.dr-search-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border-bottom: 1px solid #eef0f3; cursor: pointer; }
.dr-search-row:last-child { border-bottom: 0; }
.dr-search-row:hover { background: #f7f8fa; }
.dr-search-ic { font-size: 1.25rem; flex: 0 0 auto; }
.dr-search-main { flex: 1 1 auto; min-width: 0; }
.dr-search-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-search-loc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-search-meta { flex: 0 0 auto; white-space: nowrap; }
.dr-search-msg { padding: 1.5rem .5rem; text-align: center; }
.dr-search-hl { background: #fff3b0; color: inherit; padding: 0 .05em; border-radius: 2px; }
.dr-search-snippet { margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-search-snippet mark { background: #fff3b0; color: inherit; padding: 0 .05em; border-radius: 2px; }
.dr-search-e2e-note { padding: .5rem .25rem; }