/* File manager styles.
 *
 * SHARED FILE — see docs/FILEMANAGER.md. Keep in sync with CNAVWeb.
 *
 * Every colour here is a var() defined in theme.css, so this file carries no
 * branding of its own and can be copied between projects untouched.
 *
 * Serves both modes. Admin-only chrome (toolbar, drop zone, row actions) is
 * hidden by default and revealed by .fm--admin on the root element, so the
 * viewer cannot show controls it has no endpoints for.
 */

.fm {
    background: var(--fm-surface);
    border-radius: 8px;
    padding: 20px;
}

/* ---- breadcrumb ---- */

.fm-breadcrumb {
    background: var(--fm-breadcrumb-bg);
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    word-break: break-word;
}
.fm-breadcrumb a {
    text-decoration: none;
    color: var(--brand-primary);
    font-weight: 500;
}
.fm-breadcrumb a:hover {
    text-decoration: underline;
}
.fm-breadcrumb .fm-sep {
    color: var(--fm-breadcrumb-sep);
    margin: 0 4px;
}
.fm-breadcrumb .fm-current {
    font-weight: 600;
    color: var(--brand-ink);
}

/* ---- toolbar (admin only) ---- */

.fm-toolbar {
    display: none;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    align-items: center;
}
.fm--admin .fm-toolbar {
    display: flex;
}
.fm-toolbar .btn {
    font-size: 0.85rem;
}

/* ---- drop zone (admin only) ---- */

/* Always on screen in admin mode. A drop target that only appears once you are
   already dragging is one nobody finds. */
.fm-dropzone {
    display: none;
    border: 2px dashed var(--fm-drop-border);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
    color: var(--fm-drop-text);
    transition: all 0.15s;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 0.9rem;
}
.fm--admin .fm-dropzone {
    display: block;
}
.fm-dropzone:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}
.fm-dropzone.is-dragover {
    border-color: var(--brand-primary);
    background: var(--fm-drop-active-bg);
    color: var(--brand-primary);
    padding: 34px;
}
.fm-dropzone-hint {
    font-size: 0.8rem;
    opacity: 0.75;
    margin-top: 4px;
}

/* ---- upload progress ---- */

.fm-uploads {
    border: 1px solid var(--fm-border);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 15px;
    background: var(--fm-breadcrumb-bg);
}
.fm-uploads-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
    font-weight: 500;
}
.fm-uploads-bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--fm-drop-border);
    overflow: hidden;
}
.fm-uploads-bar > div {
    height: 100%;
    width: 0;
    background: var(--brand-primary);
    transition: width 0.2s linear;
}
.fm-upload-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    max-height: 15rem;
    overflow-y: auto;
}
.fm-upload {
    padding: 6px 0;
}
.fm-upload + .fm-upload {
    border-top: 1px solid var(--fm-border);
}
.fm-upload-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 0.85rem;
}
.fm-upload-name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-upload-meta {
    flex: 0 0 auto;
    color: var(--brand-muted);
    font-variant-numeric: tabular-nums;
}
.fm-upload-x {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--brand-muted);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}
.fm-upload-x:hover {
    color: var(--brand-warn);
}
.fm-upload-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--fm-drop-border);
    overflow: hidden;
    margin-top: 4px;
}
.fm-upload-fill {
    height: 100%;
    background: var(--brand-primary);
    transition: width 0.2s linear;
}
.fm-upload.is-done .fm-upload-fill {
    background: #198754;
}
.fm-upload.is-error .fm-upload-fill,
.fm-upload.is-cancelled .fm-upload-fill {
    background: var(--brand-warn);
}
.fm-upload.is-error .fm-upload-meta {
    color: #b02a37;
}

/* ---- table ---- */

.fm-table th {
    user-select: none;
}
.fm-table .fm-clickable {
    cursor: pointer;
}
.fm-table .fm-clickable:hover {
    background: var(--fm-row-hover);
}
.fm-icon {
    margin-right: 8px;
}
.fm-actions {
    white-space: nowrap;
    text-align: right;
}
.fm-actions .btn {
    padding: 4px 12px;
    font-size: 0.9rem;
    margin-left: 4px;
}
.fm-lock {
    color: var(--fm-lock);
    margin-left: 6px;
}
.fm-badge-pw {
    font-size: 0.7rem;
    vertical-align: middle;
    margin-left: 6px;
}

/* Size and Modified are noise on a phone; the name and actions are not. */
@media (max-width: 640px) {
    .fm-table .fm-col-size,
    .fm-table .fm-col-modified {
        display: none;
    }
    .fm-actions .btn {
        padding: 4px 8px;
        font-size: 0.8rem;
        margin-left: 2px;
    }
}

/* ---- in-place viewer ---- */

/* A backdrop holding a panel, not a full-screen takeover. The bar used to span
   the window with the content floating below it, which put the title and the
   Close button a long way from what they belonged to — and left almost no
   backdrop for a click-outside to land on. */

.fm-viewer {
    position: fixed;
    inset: 0;
    z-index: 10500;
    background: rgba(0, 0, 0, 0.85);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.fm-viewer.is-open {
    display: flex;
}
.fm-viewer-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1100px;
    /* dvh so the panel is not pushed under a phone's address bar, which vh
       measures as though it were not there. vh first for anything older. */
    max-height: 92vh;
    max-height: 92dvh;
    background: var(--fm-surface);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.fm-viewer-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--fm-viewer-bg);
    color: var(--fm-viewer-ink);
    flex: 0 0 auto;
}
.fm-viewer-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
}
.fm-viewer-bar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.fm-viewer-loading {
    color: var(--brand-muted);
}
.fm-viewer-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* Media sits on dark, so a transparent PNG or a letterboxed video reads as a
   picture rather than as part of the panel. */
.fm-viewer[data-kind="image"] .fm-viewer-body,
.fm-viewer[data-kind="video"] .fm-viewer-body,
.fm-viewer[data-kind="pdf"] .fm-viewer-body {
    background: var(--fm-viewer-bg);
    padding: 0;
}
/* Prose is read from the top, not centred in the panel, and wants a column
   narrower than the panel's own maximum. */
.fm-viewer[data-kind="markdown"] .fm-viewer-body,
.fm-viewer[data-kind="text"] .fm-viewer-body {
    align-items: flex-start;
    padding: 0;
}
.fm-viewer[data-kind="markdown"] .fm-viewer-panel,
.fm-viewer[data-kind="text"] .fm-viewer-panel {
    max-width: 60rem;
}
/* An audio player needs a bar's worth of height, not a screen's. */
.fm-viewer[data-kind="audio"] .fm-viewer-panel {
    max-width: 32rem;
}
/* Everything else has an intrinsic size the panel can grow to. A PDF does not:
   the iframe is 100% of a parent that is sizing itself from its children, so
   the panel settles at bar-height-plus-nothing and the document is a sliver.
   Give this one kind a real height to be 100% of. */
.fm-viewer[data-kind="pdf"] .fm-viewer-panel {
    height: 92vh;
    height: 92dvh;
}
.fm-viewer-body audio {
    width: 100%;
}
.fm-viewer-body img,
.fm-viewer-body video {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    background: #000;
}
.fm-viewer-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}
/* The panel is already a light card, so the prose only has to fill it and set
   its own margins. It used to carry a second background and radius of its own,
   which was a card floating inside a black screen. */
.fm-viewer-body .fm-text,
.fm-viewer-body .fm-markdown {
    width: 100%;
    color: var(--brand-ink);
    padding: 24px 28px;
}
.fm-viewer-body .fm-markdown > :first-child {
    margin-top: 0;
}
.fm-viewer-body .fm-text {
    white-space: pre-wrap;
    word-break: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
}
.fm-viewer-body .fm-markdown img {
    max-width: 100%;
}
.fm-viewer-body .fm-markdown pre {
    background: var(--fm-breadcrumb-bg);
    padding: 12px;
    border-radius: 4px;
    overflow: auto;
}
/* Bootstrap styles neither of these: its table rules need a .table class the
   markdown cannot carry, and it has no blockquote rule at all. Untouched, a
   table renders as ragged columns of bare text and a quotation is
   indistinguishable from the paragraph above it. */
.fm-viewer-body .fm-markdown table {
    border-collapse: collapse;
    margin: 1rem 0;
}
.fm-viewer-body .fm-markdown th,
.fm-viewer-body .fm-markdown td {
    border: 1px solid var(--fm-border);
    padding: 6px 12px;
    text-align: left;
    vertical-align: top;
}
.fm-viewer-body .fm-markdown th {
    background: var(--fm-breadcrumb-bg);
}
.fm-viewer-body .fm-markdown blockquote {
    margin: 1rem 0;
    padding: 0.25rem 0 0.25rem 1rem;
    border-left: 3px solid var(--fm-border);
    color: var(--fm-breadcrumb-sep);
}

/* On a phone the backdrop margin is wasted space, and a two-line header is
   worse than a truncated title — the buttons must stay where the thumb
   expects them. */
@media (max-width: 640px) {
    .fm-viewer {
        padding: 8px;
    }
    .fm-viewer-panel,
    .fm-viewer[data-kind="markdown"] .fm-viewer-panel,
    .fm-viewer[data-kind="text"] .fm-viewer-panel,
    .fm-viewer[data-kind="audio"] .fm-viewer-panel {
        max-width: 100%;
        max-height: 96vh;
        max-height: 96dvh;
    }
    .fm-viewer[data-kind="pdf"] .fm-viewer-panel {
        height: 96vh;
        height: 96dvh;
    }
    .fm-viewer-bar {
        padding: 8px 10px;
        gap: 8px;
    }
    .fm-viewer-title {
        font-size: 0.9rem;
    }
    .fm-viewer-body .fm-text,
    .fm-viewer-body .fm-markdown {
        padding: 16px;
    }
    /* A table wider than the phone must scroll on its own rather than
       stretching the panel and taking the whole page sideways with it. */
    .fm-viewer-body .fm-markdown table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* ---- in-place text editor (admin) ----
   Full-screen because editing page copy in a small box is miserable. Plain
   textarea by design — no syntax highlighting, nothing to load. */

.fm-editor {
    position: fixed;
    inset: 0;
    z-index: 10600;
    background: var(--fm-viewer-bg);
    display: flex;
    flex-direction: column;
}
.fm-editor-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--fm-viewer-ink);
    flex: 0 0 auto;
}
.fm-editor-title {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fm-editor-hint {
    font-size: 0.8rem;
    opacity: 0.65;
    flex: 1 1 auto;
}
.fm-editor-area {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    outline: none;
    resize: none;
    padding: 20px 24px;
    background: var(--fm-surface);
    color: var(--brand-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    tab-size: 4;
}
@media (max-width: 640px) {
    .fm-editor-hint {
        display: none;
    }
}

/* ---- access counters (admin) ----
   The header cell exists in the markup always; .fm--stats reveals it, so a
   deployment without counters shows no empty column. */

.fm-table .fm-col-stats {
    display: none;
    white-space: nowrap;
    color: var(--brand-muted);
    font-variant-numeric: tabular-nums;
}
.fm--stats .fm-table .fm-col-stats {
    display: table-cell;
}
.fm-stat-sep {
    opacity: 0.4;
    margin: 0 2px;
}
@media (max-width: 640px) {
    .fm--stats .fm-table .fm-col-stats {
        display: none;
    }
}