/* ============================================================
 * DMS — Document Management System styles
 * Two-pane Drive-style browser, folder tree, list, modals.
 * Reuses dashboard.css design tokens (paper, navy, red, gold, line).
 * ============================================================ */

:root {
    --dms-tree-w: 240px;
    --dms-row-h: 48px;
    --dms-radius: 10px;
    --dms-radius-sm: 6px;
    --dms-stroke: rgba(22,19,15,0.16);
    --dms-stroke-soft: rgba(22,19,15,0.08);
    --dms-hover: rgba(0,32,91,0.06);
    --dms-selected: rgba(184,138,44,0.16);
    --dms-paper: #f6f2ea;
    --dms-navy: #00205b;
    --dms-red: #ba0c2f;
    --dms-gold: #b88a2c;
    --dms-shadow-soft: 0 1px 0 var(--dms-stroke);
    --dms-shadow-modal: 0 12px 48px rgba(0,0,0,0.18);
}

/* ─── Drive-style two-pane shell (lives inside .dash-main__body) ─── */
.dms-shell {
    display: grid;
    grid-template-columns: var(--dms-tree-w) minmax(0, 1fr);
    gap: 16px;
    min-height: 60vh;
}
.dms-shell--single { grid-template-columns: 1fr; }

/* ─── Tree sidebar ─── */
.dms-tree {
    background: #fff;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius);
    padding: 8px 6px;
    height: fit-content;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
}
.dms-tree__section {
    padding: 8px 8px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(22,19,15,0.55);
    font-weight: 600;
}
.dms-tree__list { list-style: none; margin: 0; padding: 0; }
.dms-tree__node {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: var(--dms-radius-sm);
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: #1a1c2c;
    line-height: 1.2;
}
.dms-tree__node:hover { background: var(--dms-hover); }
.dms-tree__node.is-active {
    background: var(--dms-selected);
    color: var(--dms-navy);
    font-weight: 600;
}
.dms-tree__node.is-drop-target {
    background: rgba(0,32,91,0.10);
    outline: 2px dashed var(--dms-navy);
    outline-offset: -2px;
}
.dms-tree__caret {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
    opacity: 0.6;
}
.dms-tree__caret.is-open { transform: rotate(90deg); }
.dms-tree__caret--empty { visibility: hidden; }
.dms-tree__icon { width: 16px; flex: 0 0 16px; }
.dms-tree__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dms-stroke);
    flex: 0 0 8px;
}
.dms-tree__label {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dms-tree__count {
    font-size: 11px;
    color: rgba(22,19,15,0.55);
    background: var(--dms-stroke-soft);
    padding: 1px 6px;
    border-radius: 999px;
}
.dms-tree__node.is-active .dms-tree__count {
    background: rgba(255,255,255,0.6);
    color: var(--dms-navy);
}
.dms-tree__children {
    list-style: none;
    margin: 0;
    padding-left: 18px;
}
.dms-tree__btn {
    width: 100%;
    background: none;
    border: 0;
    padding: 6px 8px;
    text-align: left;
    color: var(--dms-navy);
    cursor: pointer;
    border-radius: var(--dms-radius-sm);
    font-weight: 600;
    font-size: 13px;
    margin-top: 4px;
}
.dms-tree__btn:hover { background: var(--dms-hover); }

/* ─── Main pane ─── */
.dms-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.dms-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius);
    padding: 10px 12px;
}
.dms-toolbar__crumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #1a1c2c;
    min-width: 0;
}
.dms-toolbar__crumbs a {
    color: inherit;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
}
.dms-toolbar__crumbs a:hover { background: var(--dms-hover); }
.dms-toolbar__crumb-sep { opacity: 0.4; font-size: 12px; }
.dms-toolbar__crumb--current { font-weight: 600; color: var(--dms-navy); }
.dms-toolbar__actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.dms-filters {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #fdfaf3;
    border: 1px solid var(--dms-stroke-soft);
    border-radius: var(--dms-radius);
}
.dms-filters input[type=search],
.dms-filters select {
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius-sm);
    padding: 6px 10px;
    background: #fff;
    font-size: 13px;
    min-width: 0;
}
.dms-filters input[type=search] { flex: 1 1 240px; }

/* Chips */
.dms-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dms-stroke-soft);
    font-size: 12px;
    color: #1a1c2c;
}
.dms-chip--cat   { background: rgba(0,32,91,0.10);  color: var(--dms-navy); }
.dms-chip--tag   { background: rgba(184,138,44,0.16); color: #6c5212; }
.dms-chip--folder{ background: rgba(255,255,255,0.6); color: var(--dms-navy); border: 1px solid var(--dms-stroke-soft); }
.dms-chip__x {
    cursor: pointer;
    opacity: 0.6;
    margin-left: 2px;
}
.dms-chip__x:hover { opacity: 1; }

/* ─── Doc list (table style) ─── */
.dms-list {
    background: #fff;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius);
    overflow: hidden;
}
.dms-list__head,
.dms-list__row {
    display: grid;
    grid-template-columns: 36px minmax(0,3.5fr) 1.2fr 1.2fr 110px 90px 36px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
}
.dms-list__head {
    background: #fdfaf3;
    border-bottom: 1px solid var(--dms-stroke);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(22,19,15,0.65);
    font-weight: 600;
}
.dms-list__head button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
}
.dms-list__head button.is-sorted { color: var(--dms-navy); }
.dms-list__row {
    border-bottom: 1px solid var(--dms-stroke-soft);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.1s;
}
.dms-list__row:hover { background: var(--dms-hover); }
.dms-list__row.is-selected { background: var(--dms-selected); }
.dms-list__row.is-dragging { opacity: 0.4; }
.dms-list__row[data-status="pending"]    { color: #6c5212; }
.dms-list__row[data-status="processing"] { color: #6c5212; }
.dms-list__row[data-status="error"]      { color: var(--dms-red); }
.dms-list__title {
    font-weight: 600;
    color: var(--dms-navy);
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.dms-list__title-icon {
    width: 18px;
    flex: 0 0 18px;
    opacity: 0.7;
}
.dms-list__cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dms-list__cell--muted { color: rgba(22,19,15,0.55); font-size: 13px; }
.dms-list__more {
    background: none;
    border: 0;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0.5;
}
.dms-list__more:hover { opacity: 1; background: var(--dms-hover); }
.dms-list__empty {
    padding: 60px 24px;
    text-align: center;
    color: rgba(22,19,15,0.55);
}
.dms-list__empty strong {
    display: block;
    color: var(--dms-navy);
    font-size: 16px;
    margin-bottom: 6px;
}

/* ─── Bulk-action bar (sticky bottom of list when selection > 0) ─── */
.dms-bulk-bar {
    position: sticky;
    bottom: 12px;
    margin-top: 8px;
    background: var(--dms-navy);
    color: #fff;
    padding: 8px 12px;
    border-radius: var(--dms-radius);
    box-shadow: 0 6px 24px rgba(0,32,91,0.30);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    z-index: 10;
}
.dms-bulk-bar__count {
    font-weight: 600;
    margin-right: 4px;
}
.dms-bulk-bar__btn {
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: #fff;
    padding: 4px 10px;
    border-radius: var(--dms-radius-sm);
    cursor: pointer;
    font-size: 13px;
}
.dms-bulk-bar__btn:hover { background: rgba(255,255,255,0.20); }
.dms-bulk-bar__btn--danger { background: var(--dms-red); border-color: var(--dms-red); }
.dms-bulk-bar__btn--danger:hover { background: #8c0822; }
.dms-bulk-bar__cancel {
    margin-left: auto;
    background: none;
    border: 0;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 13px;
}

/* ─── Context menu (right-click) ─── */
.dms-ctx-menu {
    position: fixed;
    z-index: 50;
    background: #fff;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius-sm);
    box-shadow: var(--dms-shadow-modal);
    padding: 4px;
    min-width: 180px;
    font-size: 13px;
}
.dms-ctx-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #1a1c2c;
}
.dms-ctx-menu__item:hover { background: var(--dms-hover); }
.dms-ctx-menu__item--danger { color: var(--dms-red); }
.dms-ctx-menu__sep {
    height: 1px;
    background: var(--dms-stroke-soft);
    margin: 4px 0;
}

/* ─── Modal ─── */
.dms-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10,15,30,0.40);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.dms-modal {
    background: #fff;
    border-radius: var(--dms-radius);
    box-shadow: var(--dms-shadow-modal);
    max-width: 520px;
    width: 100%;
    overflow: hidden;
}
.dms-modal--wide { max-width: 760px; }
.dms-modal__head {
    padding: 16px 20px;
    border-bottom: 1px solid var(--dms-stroke-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dms-modal__title {
    font-size: 17px;
    font-weight: 600;
    color: var(--dms-navy);
    margin: 0;
}
.dms-modal__body {
    padding: 16px 20px;
    max-height: 70vh;
    overflow-y: auto;
}
.dms-modal__foot {
    padding: 12px 20px;
    border-top: 1px solid var(--dms-stroke-soft);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.dms-modal__close {
    margin-left: auto;
    background: none;
    border: 0;
    font-size: 22px;
    line-height: 1;
    color: rgba(22,19,15,0.55);
    cursor: pointer;
    padding: 0 6px;
}

/* ─── Form bits ─── */
.dms-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.dms-field label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(22,19,15,0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dms-field input,
.dms-field select,
.dms-field textarea {
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius-sm);
    padding: 8px 10px;
    font-size: 14px;
    background: #fff;
    font-family: inherit;
}
.dms-field textarea { min-height: 80px; resize: vertical; }
.dms-field--inline {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

/* ─── Tabs (document.php) ─── */
.dms-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--dms-stroke);
    margin-bottom: 16px;
}
.dms-tab {
    padding: 10px 16px;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: rgba(22,19,15,0.65);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-weight: 500;
}
.dms-tab.is-active {
    color: var(--dms-navy);
    border-bottom-color: var(--dms-navy);
    font-weight: 600;
}
.dms-tab__pill {
    display: inline-block;
    background: var(--dms-stroke-soft);
    color: rgba(22,19,15,0.7);
    border-radius: 999px;
    font-size: 11px;
    padding: 1px 7px;
    margin-left: 4px;
}
.dms-tab-panel { display: none; }
.dms-tab-panel.is-active { display: block; }

/* ─── Version timeline ─── */
.dms-version {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 12px;
    border: 1px solid var(--dms-stroke-soft);
    border-radius: var(--dms-radius);
    margin-bottom: 8px;
}
.dms-version__num {
    background: var(--dms-navy);
    color: #fff;
    border-radius: var(--dms-radius-sm);
    padding: 4px 8px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
}
.dms-version__meta {
    font-size: 13px;
    color: rgba(22,19,15,0.7);
}
.dms-version__title {
    color: var(--dms-navy);
    font-weight: 600;
    font-size: 14px;
}
.dms-version__actions { display: flex; gap: 6px; }
.dms-version--current {
    border-left: 3px solid var(--dms-gold);
    background: #fdfaf3;
}

/* ─── Permissions panel ─── */
.dms-perm-row {
    display: grid;
    grid-template-columns: 1fr 70px 70px 70px 32px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--dms-stroke-soft);
    font-size: 13px;
}
.dms-perm-row__head {
    background: #fdfaf3;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(22,19,15,0.65);
    font-weight: 600;
}

/* ─── Preview frames ─── */
.dms-preview-frame {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius);
    background: #f9f7f1;
}
.dms-preview-audio {
    width: 100%;
    margin: 20px 0;
}

/* ─── Drop overlay for upload drag-anywhere ─── */
.dms-drop-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,32,91,0.85);
    color: #fff;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    font-size: 24px;
    font-weight: 600;
}
.dms-drop-overlay.is-visible { opacity: 1; }

/* ─── KPI tiles ─── */
.dms-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.dms-kpi {
    background: #fff;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius);
    padding: 14px 16px;
}
.dms-kpi__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(22,19,15,0.6);
    font-weight: 600;
    margin: 0 0 6px;
}
.dms-kpi__value {
    font-size: 28px;
    line-height: 1;
    color: var(--dms-navy);
    font-weight: 700;
    margin: 0;
}
.dms-kpi__hint {
    font-size: 12px;
    color: rgba(22,19,15,0.55);
    margin: 6px 0 0;
}

/* ─── Activity feed ─── */
.dms-activity {
    background: #fff;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius);
    padding: 8px 0;
}
.dms-activity__row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 16px;
    font-size: 13px;
    border-bottom: 1px solid var(--dms-stroke-soft);
}
.dms-activity__row:last-child { border-bottom: 0; }
.dms-activity__icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--dms-stroke-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dms-navy);
    font-size: 12px;
}
.dms-activity__time {
    font-size: 11px;
    color: rgba(22,19,15,0.5);
}

/* ─── Settings diagnostics ─── */
.dms-diag {
    background: #fff;
    border: 1px solid var(--dms-stroke);
    border-radius: var(--dms-radius);
    overflow: hidden;
}
.dms-diag__row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--dms-stroke-soft);
    font-size: 13px;
    align-items: center;
}
.dms-diag__row:last-child { border-bottom: 0; }
.dms-diag__label { font-weight: 600; color: var(--dms-navy); }
.dms-diag__value { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 12px; }
.dms-diag__status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}
.dms-diag__status--ok    { background: rgba(4,120,87,0.12); color: #047857; }
.dms-diag__status--warn  { background: rgba(180,138,44,0.16); color: #6c5212; }
.dms-diag__status--err   { background: rgba(186,12,47,0.12); color: var(--dms-red); }

/* ─── Loading / empty states ─── */
.dms-loading {
    padding: 40px 16px;
    text-align: center;
    color: rgba(22,19,15,0.5);
    font-size: 14px;
}
.dms-loading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--dms-stroke);
    border-top-color: var(--dms-navy);
    border-radius: 50%;
    animation: dms-spin 0.8s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}
@keyframes dms-spin { to { transform: rotate(360deg); } }

/* ─── Responsive ─── */
@media (max-width: 880px) {
    .dms-shell {
        grid-template-columns: 1fr;
    }
    .dms-tree {
        position: relative;
        max-height: 280px;
    }
    .dms-list__head,
    .dms-list__row {
        grid-template-columns: 36px 1fr 90px 36px;
    }
    .dms-list__head > :nth-child(n+4):nth-child(-n+6),
    .dms-list__row  > :nth-child(n+4):nth-child(-n+6) {
        display: none;
    }
}