/* FMS shared styles — same conventions as the SMS stylesheet */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: #f9fafb; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

:root {
    --primary: #1e40af;
    --primary-dark: #1e3a8a;
    --secondary: #f59e0b;
    --success: #10b981;
    --danger: #ef4444;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.3s ease-out; }

.glass {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Sidebar nav items */
.nav-item { transition: all 0.15s ease; }
.nav-item.active {
    background: rgba(255, 255, 255, 0.15);
    border-left: 3px solid #fbbf24;
}
.nav-item:not(.active):hover { background: rgba(255, 255, 255, 0.08); }

/* Explorer grid tiles */
/* ── Explorer items ─────────────────────────────────────────────
   .fs-tile is applied to BOTH the grid tiles (div) and the list rows
   (tr). The lift-on-hover effect only makes sense for tiles: transforms
   on a <tr> break the table's layout box in several browsers, so the
   table variant is given a flat background hover instead. */
.fs-tile { transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease; cursor: pointer; user-select: none; }
.fs-tile:hover { box-shadow: 0 8px 20px rgba(30, 64, 175, 0.12); transform: translateY(-2px); }
.fs-tile.selected { outline: 2px solid #2563eb; outline-offset: 1px; background: #eff6ff; }
.fs-tile:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

tr.fs-tile { transition: background-color 0.12s ease; }
tr.fs-tile:hover { box-shadow: none; transform: none; background: #f8fafc; }
tr.fs-tile.selected { outline: none; background: #eff6ff; box-shadow: inset 3px 0 0 #2563eb; }
tr.fs-tile:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

/* The ⋮ button stays out of the way until the item is hovered or the
   button itself is focused — but on touch devices, where there is no
   hover state at all, it must always be visible or the menu becomes
   unreachable. */
.fs-menu-btn { opacity: 0; transition: opacity 0.12s ease; }
.fs-tile:hover .fs-menu-btn,
.fs-tile.selected .fs-menu-btn,
.fs-menu-btn:focus-visible { opacity: 1; }

@media (hover: none) {
    .fs-menu-btn { opacity: 1; }
    .fs-tile:hover { box-shadow: none; transform: none; }
}

/* Screen-reader-only text for icon-only table headers. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Drag & drop upload zone */
.dropzone-active {
    outline: 3px dashed #2563eb;
    outline-offset: -8px;
    background: #eff6ff !important;
}

.fs-drop-target {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
    background: #dbeafe !important;
}

/* ── Drag-to-move ───────────────────────────────────────────────
   Valid destinations are outlined while a drag is in progress, the
   hovered destination is filled, and an illegal one turns red. The
   dragged items themselves are dimmed so it stays obvious what is
   travelling. */
.fs-drag-ghost {
    position: fixed; top: -1000px; left: -1000px;
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px;
    background: #2563eb; color: #fff;
    font-size: 13px; font-weight: 600; white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.fs-drag-source { opacity: 0.45; }

body.fms-dragging .fs-tile:hover { box-shadow: none; transform: none; }
body.fms-dragging .fs-tile[data-type="folder"]:not(.fs-drag-source) {
    outline: 2px dashed #93c5fd; outline-offset: 1px;
}
body.fms-dragging #breadcrumb .bc {
    outline: 2px dashed #93c5fd; outline-offset: 3px; border-radius: 6px;
}

.fs-drop-invalid {
    outline: 2px solid #ef4444 !important; outline-offset: -2px;
    background: #fee2e2 !important; cursor: not-allowed;
}

.fs-busy {
    position: absolute; inset: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 1rem;
}


/* Context menu */
.context-menu {
    position: fixed;
    z-index: 90;
    min-width: 200px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
.context-menu button {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    padding: 8px 14px; font-size: 0.875rem; color: #374151;
}
.context-menu button:hover { background: #f3f4f6; }
.context-menu button.danger { color: #dc2626; }
.context-menu button.danger:hover { background: #fef2f2; }

/* Modal transitions */
.modal-backdrop { animation: fadeIn 0.15s ease-out; }

/* File-type icon colors */
.ft-pdf { color: #dc2626; }
.ft-doc { color: #2563eb; }
.ft-xls { color: #16a34a; }
.ft-ppt { color: #ea580c; }
.ft-img { color: #9333ea; }
.ft-zip { color: #a16207; }
.ft-vid { color: #db2777; }
.ft-aud { color: #0891b2; }
.ft-txt { color: #6b7280; }
.ft-any { color: #64748b; }

/* Tooltip bubble */
#ui-tip {
    position: fixed;
    z-index: 9999;
    padding: 4px 9px;
    border-radius: 6px;
    background: #1f2937;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25);
}
#ui-tip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Print output */
#print-root { display: none; }

@page {
    size: auto;
    margin: 14mm 12mm 16mm 12mm;

    @bottom-right {
        content: "Page " counter(page) " of " counter(pages);
        font-family: Arial, Helvetica, sans-serif;
        font-size: 7.5pt;
        color: #6b7280;
    }
}

@media print {
    body.is-printing > *:not(#print-root) { display: none !important; }
    body.is-printing { background: #fff; overflow: visible; height: auto; }
    #print-root { display: block !important; }
    #ui-tip { display: none !important; }

    .no-print { display: none !important; }

    html, body {
        background: #fff !important;
        margin: 0;
        padding: 0;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .print-doc {
        width: 100%;
        color: #111827;
        font-family: "Segoe UI", Arial, Helvetica, sans-serif;
        font-size: 10pt;
        line-height: 1.45;
    }

    .print-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid #1e3a8a;
    }
    .print-logo { width: 44px; height: 44px; object-fit: contain; }
    .print-org-name {
        margin: 0;
        font-size: 14pt;
        font-weight: 700;
        letter-spacing: 0.02em;
        color: #1e3a8a;
    }
    .print-org-sub {
        margin: 1px 0 0;
        font-size: 8.5pt;
        color: #6b7280;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .print-titleblock { margin-top: 14px; }
    .print-titleblock h1 {
        margin: 0;
        font-size: 13pt;
        font-weight: 700;
        color: #111827;
    }
    .print-subtitle {
        margin: 2px 0 0;
        font-size: 9.5pt;
        color: #4b5563;
    }

    .print-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 26px;
        margin: 10px 0 0;
        padding: 8px 10px;
        background: #f3f4f6;
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        font-size: 8.5pt;
    }
    .print-meta > div { display: flex; gap: 5px; }
    .print-meta dt {
        margin: 0;
        font-weight: 700;
        color: #4b5563;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .print-meta dd { margin: 0; color: #111827; }

    .print-count {
        margin: 10px 0 4px;
        font-size: 8.5pt;
        font-weight: 700;
        color: #4b5563;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .print-body { margin-top: 6px; }

    .print-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: auto;
        font-size: 9pt;
    }
    .print-table th {
        padding: 6px 8px;
        text-align: left;
        vertical-align: bottom;
        background: #1e3a8a;
        color: #fff;
        font-weight: 700;
        font-size: 8.5pt;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border: 1px solid #1e3a8a;
    }
    .print-table td {
        padding: 5px 8px;
        vertical-align: top;
        border: 1px solid #d1d5db;
        word-break: break-word;
    }
    .print-table tbody tr:nth-child(even) { background: #f9fafb; }
    .print-table .ta-right { text-align: right; }
    .print-table .ta-center { text-align: center; }

    .print-table thead { display: table-header-group; }
    .print-table tfoot { display: table-footer-group; }
    .print-table tr, .print-stat-grid { break-inside: avoid; page-break-inside: avoid; }
    .print-head, .print-titleblock, .print-meta { break-inside: avoid; page-break-inside: avoid; }
    h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

    .print-stat-grid {
        display: flex;
        gap: 8px;
        margin: 12px 0 4px;
    }
    .print-stat {
        flex: 1;
        padding: 7px 10px;
        border: 1px solid #d1d5db;
        border-radius: 4px;
        text-align: center;
        background: #f9fafb;
    }
    .print-stat-value {
        display: block;
        font-size: 14pt;
        font-weight: 700;
        color: #1e3a8a;
    }
    .print-stat-label {
        display: block;
        margin-top: 1px;
        font-size: 8pt;
        color: #6b7280;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .print-empty {
        padding: 22px;
        text-align: center;
        color: #6b7280;
        font-style: italic;
        border: 1px dashed #d1d5db;
        border-radius: 4px;
    }

    .print-foot {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 16px;
        padding-top: 6px;
        border-top: 1px solid #d1d5db;
        font-size: 7.5pt;
        color: #6b7280;
    }
}

.fv-text {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    tab-size: 4;
}

.fv-csv {
    border-collapse: collapse;
    width: 100%;
}

.fv-csv th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    color: #334155;
    font-weight: 600;
    text-transform: none;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
    z-index: 1;
}

.fv-csv td {
    padding: 6px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    white-space: nowrap;
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fv-csv tbody tr:hover td {
    background: #f8fafc;
}

.fv-doc {
    color: #1f2937;
    font-size: 15px;
    line-height: 1.7;
    overflow-x: auto;
}

.fv-doc h1 { font-size: 1.7em; font-weight: 700; margin: 0.9em 0 0.45em; }
.fv-doc h2 { font-size: 1.4em; font-weight: 700; margin: 0.9em 0 0.45em; }
.fv-doc h3 { font-size: 1.2em; font-weight: 600; margin: 0.85em 0 0.4em; }
.fv-doc h4 { font-size: 1.05em; font-weight: 600; margin: 0.8em 0 0.4em; }
.fv-doc h5,
.fv-doc h6 { font-size: 1em; font-weight: 600; margin: 0.75em 0 0.35em; }
.fv-doc p { margin: 0 0 0.85em; }
.fv-doc ul { list-style: disc; padding-left: 1.6em; margin: 0 0 0.85em; }
.fv-doc ol { list-style: decimal; padding-left: 1.6em; margin: 0 0 0.85em; }
.fv-doc li { margin: 0.25em 0; }
.fv-doc a { color: #2563eb; text-decoration: underline; }
.fv-doc strong { font-weight: 700; }
.fv-doc em { font-style: italic; }
.fv-doc img { max-width: 100%; height: auto; margin: 0.6em 0; }
.fv-doc table { border-collapse: collapse; width: max-content; min-width: 100%; max-width: none; margin: 0.85em 0; font-size: 0.95em; }
.fv-doc th,
.fv-doc td { border: 1px solid #d1d5db; padding: 6px 10px; text-align: left; vertical-align: top; }
.fv-doc th { background: #f9fafb; font-weight: 600; }
.fv-doc blockquote { border-left: 3px solid #d1d5db; padding-left: 1em; color: #4b5563; margin: 0 0 0.85em; }
.fv-doc pre { background: #f3f4f6; border-radius: 8px; padding: 12px 14px; overflow-x: auto; font-size: 0.9em; margin: 0 0 0.85em; }

.fv-docx .docx-wrapper {
    background: transparent;
    padding: 0;
    display: flex;
    flex-flow: column;
    align-items: center;
}

.fv-docx .docx-wrapper > section.docx {
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    margin-bottom: 24px;
}

.fv-docx .docx-wrapper > section.docx:last-child {
    margin-bottom: 0;
}

.fv-stage:fullscreen {
    background: #111827;
}