/* ==========================================================================
   Dataman — components.css
   Cards, tables, buttons, forms, badges, empty states, flash messages.

   These are the pieces every screen is assembled from. Tables are the primary
   data surface in this application, so they get the most attention.
   ========================================================================== */

/* ==========================================================================
   Panel — the standard white box
   ========================================================================== */

.dm-panel {
    margin-bottom: 1.25rem;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius-lg);
    box-shadow: var(--dm-shadow);
}

.dm-panel__head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--dm-border);
}

.dm-panel__title {
    margin: 0;
    font-size: var(--dm-text-base);
    font-weight: 600;
}

.dm-panel__actions { display: flex; gap: 0.5rem; margin-left: auto; }

.dm-panel__body { padding: 1rem; }

/* Use when the panel contains only a table — the table draws its own edges. */
.dm-panel__body--flush { padding: 0; }

.dm-panel__foot {
    padding: 0.625rem 1rem;
    background: var(--dm-surface-muted);
    border-top: 1px solid var(--dm-border);
    border-radius: 0 0 var(--dm-radius-lg) var(--dm-radius-lg);
}

/* ==========================================================================
   Tables
   Dense, quiet, scannable. Newest-first lists are the norm here.
   ========================================================================== */

/* Any table wide enough to overflow goes inside this. The page body must
   never scroll horizontally — only the table does. */
.dm-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.dm-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--dm-text-sm);
}

.dm-table th,
.dm-table td {
    padding: 0.5625rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--dm-border);
}

.dm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--dm-surface-muted);
    border-bottom: 1px solid var(--dm-border-strong);
}

.dm-table tbody tr:hover { background: var(--dm-navy-tint); }

.dm-table tbody tr:last-child td { border-bottom: 0; }

/* The clickable name in a row — the thing people actually aim at. */
.dm-table__primary {
    color: var(--dm-ink);
    font-weight: 500;
}

.dm-table__primary:hover { color: var(--dm-navy); }

/* Second line under the primary cell: company › folder, or a summary snippet. */
.dm-table__sub {
    display: block;
    margin-top: 0.125rem;
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-xs);
}

.dm-table__num { text-align: right; font-variant-numeric: tabular-nums; }
.dm-table__date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Row actions, right-aligned, revealed on hover but always keyboard-reachable. */
.dm-table__actions { width: 1%; white-space: nowrap; text-align: right; }

.dm-table__actions .dm-icon-btn { opacity: 0.55; }
.dm-table tbody tr:hover .dm-icon-btn,
.dm-table__actions .dm-icon-btn:focus-visible { opacity: 1; }

/* Sortable column headers. */
.dm-table th.is-sortable a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: inherit;
}

.dm-table th.is-sortable a:hover { color: var(--dm-navy); text-decoration: none; }
.dm-table th.is-sorted a { color: var(--dm-navy); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.dm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 32px;
    padding: 0 0.75rem;
    color: var(--dm-ink);
    font-family: inherit;
    font-size: var(--dm-text-sm);
    font-weight: 500;
    white-space: nowrap;
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius);
    cursor: pointer;
}

.dm-btn:hover {
    color: var(--dm-ink);
    background: var(--dm-canvas);
    text-decoration: none;
}

.dm-btn i { font-size: 0.9375rem; }

.dm-btn--primary {
    color: #fff;
    background: var(--dm-navy);
    border-color: var(--dm-navy);
}

.dm-btn--primary:hover {
    color: #fff;
    background: var(--dm-navy-dark);
    border-color: var(--dm-navy-dark);
}

.dm-btn--danger {
    color: var(--dm-danger);
    border-color: var(--dm-border-strong);
}

.dm-btn--danger:hover {
    color: #fff;
    background: var(--dm-danger);
    border-color: var(--dm-danger);
}

.dm-btn--sm { height: 27px; padding: 0 0.5rem; font-size: var(--dm-text-xs); }

.dm-btn:disabled,
.dm-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Icon-only button, used in table rows. Always pair with .dm-sr-only text. */
.dm-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--dm-ink-soft);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--dm-radius);
    cursor: pointer;
}

.dm-icon-btn:hover {
    color: var(--dm-navy);
    background: var(--dm-surface);
    border-color: var(--dm-border);
    text-decoration: none;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.dm-field { margin-bottom: 1rem; }

.dm-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--dm-ink);
    font-size: var(--dm-text-sm);
    font-weight: 600;
}

.dm-label__optional {
    margin-left: 0.25rem;
    color: var(--dm-ink-muted);
    font-weight: 400;
}

.dm-input,
.dm-select,
.dm-textarea {
    display: block;
    width: 100%;
    padding: 0.375rem 0.625rem;
    color: var(--dm-ink);
    font-family: inherit;
    font-size: var(--dm-text-base);
    background: var(--dm-surface);
    border: 1px solid var(--dm-border-strong);
    border-radius: var(--dm-radius);
}

.dm-input, .dm-select { height: 34px; }
.dm-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.dm-input:focus,
.dm-select:focus,
.dm-textarea:focus {
    border-color: var(--dm-navy);
    outline: none;
    box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}

.dm-input::placeholder,
.dm-textarea::placeholder { color: var(--dm-ink-muted); }

.dm-help {
    margin-top: 0.25rem;
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-xs);
}

/* Validation. The message sits under the field it belongs to, always. */
.dm-input.is-invalid,
.dm-select.is-invalid,
.dm-textarea.is-invalid { border-color: var(--dm-danger); }

.dm-error {
    margin-top: 0.25rem;
    color: var(--dm-danger);
    font-size: var(--dm-text-xs);
}

/* Checkbox row — used by the form builder and all over the access matrix. */
.dm-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.dm-check input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin-top: 0.1875rem;
    accent-color: var(--dm-navy);
    cursor: pointer;
}

.dm-check label {
    font-size: var(--dm-text-sm);
    cursor: pointer;
}

/* ==========================================================================
   Badges and pills
   ========================================================================== */

.dm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.4375rem;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-xs);
    font-weight: 500;
    white-space: nowrap;
    background: var(--dm-canvas);
    border: 1px solid var(--dm-border);
    border-radius: 3px;
}

.dm-badge--success { color: var(--dm-success); background: var(--dm-success-tint); border-color: transparent; }
.dm-badge--warning { color: var(--dm-warning); background: var(--dm-warning-tint); border-color: transparent; }
.dm-badge--danger  { color: var(--dm-danger);  background: var(--dm-danger-tint);  border-color: transparent; }
.dm-badge--info    { color: var(--dm-info);    background: var(--dm-info-tint);    border-color: transparent; }

/* Tag pill for investment categories and research projects. */
.dm-tag {
    display: inline-block;
    padding: 0.0625rem 0.4375rem;
    color: var(--dm-navy);
    font-size: var(--dm-text-xs);
    background: var(--dm-navy-tint);
    border: 1px solid var(--dm-navy-tint-hard);
    border-radius: 10px;
}

a.dm-tag:hover { background: var(--dm-navy-tint-hard); text-decoration: none; }

/* File-type marker in lists. */
.dm-filetype {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--dm-ink-soft);
    font-size: 1.0625rem;
    background: var(--dm-canvas);
    border-radius: var(--dm-radius);
}

.dm-filetype--pdf   { color: #b42318; }
.dm-filetype--word  { color: #1d4e7c; }
.dm-filetype--excel { color: #1b7f5a; }
.dm-filetype--ppt   { color: #b5560e; }
.dm-filetype--image { color: #6b4fa3; }

/* ==========================================================================
   Flash messages
   ========================================================================== */

.dm-flash {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.625rem 0.875rem;
    margin-bottom: 1rem;
    font-size: var(--dm-text-sm);
    border: 1px solid transparent;
    border-radius: var(--dm-radius);
}

.dm-flash i { font-size: 1rem; line-height: 1.4; }
.dm-flash__close { margin-left: auto; }

.dm-flash--success { color: var(--dm-success); background: var(--dm-success-tint); border-color: #bfe3d3; }
.dm-flash--warning { color: var(--dm-warning); background: var(--dm-warning-tint); border-color: #f0e0b0; }
.dm-flash--danger  { color: var(--dm-danger);  background: var(--dm-danger-tint);  border-color: #f5c9c5; }
.dm-flash--info    { color: var(--dm-info);    background: var(--dm-info-tint);    border-color: var(--dm-navy-tint-hard); }

/* ==========================================================================
   Empty states
   An empty folder should explain itself and offer the next action, not just
   sit there blank.
   ========================================================================== */

.dm-empty {
    padding: 2.5rem 1.5rem;
    color: var(--dm-ink-muted);
    text-align: center;
}

.dm-empty > i {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--dm-border-strong);
    font-size: 2rem;
}

.dm-empty__title {
    margin-bottom: 0.25rem;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-base);
    font-weight: 600;
}

.dm-empty__text { max-width: 420px; margin: 0 auto 0.875rem; font-size: var(--dm-text-sm); }

/* ==========================================================================
   Definition list — the card file metadata display
   ========================================================================== */

.dm-dl { margin: 0; }

.dm-dl__row {
    display: flex;
    gap: 1rem;
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--dm-border);
}

.dm-dl__row:last-child { border-bottom: 0; }

.dm-dl__key {
    flex: 0 0 150px;
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-sm);
}

.dm-dl__val { flex: 1 1 auto; min-width: 0; font-size: var(--dm-text-sm); }

@media (max-width: 575.98px) {
    .dm-dl__row { flex-direction: column; gap: 0.125rem; }
    .dm-dl__key { flex: none; font-size: var(--dm-text-xs); }
}

/* ==========================================================================
   Storage meter — settings page, and the quota warning banner
   ========================================================================== */

.dm-meter {
    height: 8px;
    overflow: hidden;
    background: var(--dm-canvas);
    border: 1px solid var(--dm-border);
    border-radius: 4px;
}

.dm-meter__fill { height: 100%; max-width: 100%; background: var(--dm-navy); }
.dm-meter__fill--warning { background: var(--dm-warning); }
.dm-meter__fill--danger  { background: var(--dm-danger); }

/* ==========================================================================
   Filter panel — over every list of card files
   A search box and the common buttons on one line; the rest folded into a
   native <details>, open whenever a filter is in play so a narrowed list
   never looks like the whole thing.
   ========================================================================== */

.dm-filters__bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.dm-filters__search { flex: 1 1 260px; min-width: 0; }

.dm-filters__search input { height: 32px; }

.dm-filters__export { margin-left: auto; }

.dm-filters__more { margin-top: 0.625rem; }

.dm-filters__more > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-sm);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.dm-filters__more > summary::-webkit-details-marker { display: none; }

.dm-filters__more > summary::before {
    font-family: "bootstrap-icons";
    font-size: 0.75rem;
    content: "\F285"; /* bi-chevron-right */
    transition: transform 0.12s ease-out;
}

.dm-filters__more[open] > summary::before { transform: rotate(90deg); }

.dm-filters__more > summary:hover { color: var(--dm-navy); }

/* ==========================================================================
   Search results — a ranked list rather than a table, because the snippet
   of the summary is what tells you which result is the one.
   ========================================================================== */

.dm-result {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--dm-border);
}

.dm-result:last-child { border-bottom: 0; }

.dm-result__crumbs {
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-xs);
}

.dm-result__title {
    margin: 0.125rem 0 0.25rem;
    font-size: var(--dm-text-md);
    font-weight: 600;
}

.dm-result__title a { color: var(--dm-ink); }
.dm-result__title a:hover { color: var(--dm-navy); }

.dm-result__snippet {
    margin: 0 0 0.375rem;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.dm-result__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.875rem;
    align-items: center;
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-xs);
}

/* The search words, wherever they matched. Quiet enough to read through. */
mark {
    padding: 0 0.0625rem;
    color: inherit;
    background: #fdf1c7;
    border-radius: 2px;
}

/* Small file-type marker sitting in a line of text. */
.dm-filetype--inline {
    width: auto;
    height: auto;
    font-size: 0.875rem;
    background: transparent;
}

/* ==========================================================================
   Pagination — partials/pagination.blade.php
   ========================================================================== */

.dm-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.dm-pager__links { display: flex; gap: 0.375rem; }

/* ==========================================================================
   Stat tiles — a row of labelled figures, e.g. the storage panel
   ========================================================================== */

.dm-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 0.625rem;
}

.dm-stat {
    padding: 0.625rem 0.75rem;
    background: var(--dm-surface-muted);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
}

.dm-stat__label {
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dm-stat__value {
    margin: 0.125rem 0;
    font-size: var(--dm-text-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.dm-stat__note { color: var(--dm-ink-muted); font-size: var(--dm-text-xs); }

/* A small heading inside a panel body. */
.dm-subhead {
    margin: 0 0 0.5rem;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-sm);
    font-weight: 600;
}

/* Tick boxes laid out in columns - the accepted file types. */
.dm-checkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 0 0.5rem;
}

fieldset.dm-field { min-width: 0; padding: 0; border: 0; }
fieldset.dm-field legend { float: none; width: auto; }

/* The save row under a long settings form. */
.dm-savebar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0 0;
}

/* ==========================================================================
   Tabs — a row of links that filter a list (Reports: All / Drafts / Submitted)
   Real links, so each view is a URL.
   ========================================================================== */

.dm-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--dm-border);
}

.dm-tabs__item {
    padding: 0.375rem 0.75rem;
    margin-bottom: -1px;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-sm);
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.dm-tabs__item:hover { color: var(--dm-navy); text-decoration: none; }

.dm-tabs__item.is-active {
    color: var(--dm-navy);
    border-bottom-color: var(--dm-navy);
}

/* ==========================================================================
   Reports — the screen view. print.css turns the same markup into paper.
   ========================================================================== */

/* The title block and footer exist for paper only. */
.dm-print-header,
.dm-print-footer { display: none; }

/* The report's print table (see reports/show) is plain blocks on screen. */
.dm-print-page,
.dm-print-page > thead,
.dm-print-page > tbody,
.dm-print-page > * > tr,
.dm-print-page > * > tr > td { display: block; width: 100%; padding: 0; border: 0; }

.dm-report__meta { margin-bottom: 1.25rem; }

.dm-report__answers { max-width: 760px; }

.dm-report-field {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--dm-border);
}

.dm-report-field:last-child { border-bottom: 0; }

.dm-report-field__label {
    margin-bottom: 0.25rem;
    color: var(--dm-ink-soft);
    font-size: var(--dm-text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.dm-report-field__value {
    font-size: var(--dm-text-base);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* An unanswered field says so, rather than leaving a gap that looks like a bug. */
.dm-report-field__value:empty::after {
    color: var(--dm-ink-muted);
    content: "Not answered";
}

.dm-report-check { font-size: var(--dm-text-base); }

/* Screen only: print.css draws a plain ✓ / ✗ in the body font instead. */
@media screen {
    .dm-report-check::before {
        display: inline-block;
        width: 1.25rem;
        font-family: "bootstrap-icons";
        vertical-align: -0.125em;
    }

    .dm-report-check--yes::before { color: var(--dm-success); content: "\F633"; } /* bi-check-lg */
    .dm-report-check--no::before  { color: var(--dm-ink-muted); content: "\F659"; } /* bi-x-lg */
}

/* An overdue date. Colour plus weight, so it survives a greyscale print. */
.dm-text-danger { color: var(--dm-danger); font-weight: 600; }

/* A tab's count, e.g. overdue reports. */
.dm-tabs__count {
    margin-left: 0.25rem;
    padding: 0 0.375rem;
    color: var(--dm-danger);
    font-size: var(--dm-text-xs);
    font-weight: 600;
    background: var(--dm-danger-tint);
    border-radius: 10px;
}

/* Multi-select lists (supporting documents): tall enough to scan. */
.dm-select--multi { height: auto; min-height: 140px; }

/* The form builder: dense rows, the order box narrow. */
.dm-builder td { vertical-align: top; }
.dm-builder__position { width: 64px; }
.dm-builder__position--auto { width: 0; padding: 0; border: 0; opacity: 0; }
.dm-builder__help { height: 30px; font-size: var(--dm-text-sm); }
.dm-builder__check { width: 15px; height: 15px; margin-top: 0.5rem; accent-color: var(--dm-navy); }
.dm-builder__row.is-blank .dm-input::placeholder { color: var(--dm-navy); opacity: 0.6; }

/* ==========================================================================
   Activity feed — the dashboard's recent history
   ========================================================================== */

.dm-feed__item {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--dm-border);
}

.dm-feed__item:first-child { padding-top: 0; }
.dm-feed__item:last-child { padding-bottom: 0; border-bottom: 0; }

/* ==========================================================================
   Destroy — a <details> that opens a typed confirmation, so a permanent act
   is never one careless click. Works without JavaScript.
   ========================================================================== */

.dm-destroy { position: relative; }

.dm-destroy > summary { list-style: none; }
.dm-destroy > summary::-webkit-details-marker { display: none; }

.dm-destroy__form {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 5;
    width: 300px;
    padding: 0.75rem;
    white-space: normal;
    text-align: left;
    background: var(--dm-surface);
    border: 1px solid var(--dm-danger);
    border-radius: var(--dm-radius);
    box-shadow: var(--dm-shadow-pop);
}

/* ==========================================================================
   Audit log — changed values folded under each entry
   ========================================================================== */

.dm-audit-details { margin-top: 0.25rem; }

.dm-audit-details summary {
    color: var(--dm-ink-muted);
    font-size: var(--dm-text-xs);
    cursor: pointer;
}

.dm-audit-details pre {
    max-height: 280px;
    margin: 0.25rem 0 0;
    padding: 0.5rem;
    overflow: auto;
    font-family: var(--dm-font-mono);
    font-size: var(--dm-text-xs);
    white-space: pre-wrap;
    background: var(--dm-surface-muted);
    border: 1px solid var(--dm-border);
    border-radius: var(--dm-radius);
}

/* ==========================================================================
   Access matrix
   Eight narrow capability columns beside one wide scope label. Lives here
   rather than inline in the Blade view, like every other component.
   ========================================================================== */

.dm-matrix__col {
    width: 58px;
    text-align: center;
    font-size: var(--dm-text-xs);
}

.dm-matrix td.dm-matrix__cell { text-align: center; }

.dm-matrix input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--dm-navy);
    cursor: pointer;
}

/* A capability the person editing cannot hand out. Disabled rather than
   hidden, so the limit is visible instead of mysterious. */
.dm-matrix input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

/* The company row governs every folder beneath it, so it reads as a heading. */
.dm-matrix tr.is-company-row { background: var(--dm-navy-tint); }
.dm-matrix tr.is-company-row td { font-weight: 600; }
.dm-matrix tr.is-company-row:hover { background: var(--dm-navy-tint-hard); }

/* Marks a folder cell already covered by the company grant above it, so nobody
   wonders why unticking it changed nothing. */
.dm-matrix td.is-inherited { position: relative; }

.dm-matrix .dm-inherited-mark {
    color: var(--dm-navy);
    font-size: 0.75rem;
    opacity: 0.45;
}