/*
 * Folder Monitor modal — the clinic's view of its scanning PC.
 * Base modal chrome comes from site.css (.modal-window-*); this only adds what is specific to it.
 */

.folder-monitor-modal-container {
    width: min(1200px, calc(100vw - 40px));
    height: min(760px, calc(100dvh - 40px));
}

.folder-monitor-modal {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---------- summary ---------- */

.fmm-summary {
    padding: 12px 16px;
    border-bottom: 1px solid #e3e8e8;
    background: #fafbfb;
}

.fmm-summary-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fmm-details {
    margin-top: 6px;
    font-size: 12px;
    color: #666;
}

/* In the header row it is the content, not a footnote under it — so it takes the space and pushes
   the connection pill and Refresh to the right. */
.fmm-summary-head .fmm-details {
    flex: 1 1 auto;
    margin-top: 0;
}

.fmm-sep {
    margin: 0 8px;
    opacity: .5;
}

.fmm-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.fmm-pill-ok {
    background: #dcfce7;
    color: #166534;
}

/* Offline is a normal state, not a fault — the monitor may simply be a PC that is switched off. */
.fmm-pill-idle {
    background: #eef2f2;
    color: #556;
}

.fmm-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 12px;
}

.fmm-error {
    color: #991b1b;
    font-size: 13px;
}

.fmm-loading {
    color: #666;
    font-size: 13px;
}

.fmm-summary .btn-actions,
.fmm-row-actions .btn-actions {
    font-size: 12px;
    padding: 4px 12px;
}

/* The modal renders outside any page scope that zeroes this, so the button paragraph would
   otherwise keep its default margin and unbalance the button. */
.folder-monitor-modal .btn > p {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* ---------- tabs ---------- */

.fmm-tabs {
    display: flex;
    gap: 2px;
    padding: 0 12px;
    border-bottom: 1px solid #e3e8e8;
    background: #fff;
}

.fmm-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    color: #667;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fmm-tab:hover {
    color: #005f5f;
}

.fmm-tab.active {
    color: #005f5f;
    border-bottom-color: #008080;
}

.fmm-tab-count {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: #eef2f2;
    color: #556;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

/* Unprocessed is the tab with something to act on, so its count is the one thing that shouts. */
.fmm-tab-count.has-items {
    background: #fee2e2;
    color: #991b1b;
}

/* ---------- panels ---------- */

.fmm-panels {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.fmm-panel {
    display: none;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    padding: 14px 16px;
    overflow-y: auto;
}

.fmm-panel.active {
    display: flex;
}

/* SmartTable measures the box it is given, so its panel must not scroll or pad around it. */
.fmm-panel[data-fmm-panel="processed"] {
    padding: 0;
    overflow: hidden;
}

.fmm-table-mount {
    flex: 1 1 auto;
    min-height: 0;
}

.fmm-blurb {
    margin: 0 0 10px;
    font-size: 13px;
    color: #555;
}

.fmm-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 24px;
    color: #667;
    font-size: 13px;
}

.fmm-note {
    margin-top: 8px;
    font-size: 12px;
    color: #556;
    min-height: 16px;
}

.fmm-note-error {
    color: #991b1b;
}

/* ---------- tables ---------- */

.fmm-table-wrap {
    overflow-x: auto;
    border: 1px solid #e3e8e8;
    border-radius: 6px;
}

.fmm-table {
    width: 100%;
    border-collapse: collapse;
}

.fmm-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f5f7f7;
    padding: 8px 12px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #005f5f;
    border-bottom: 2px solid #e3e8e8;
}

.fmm-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #eef2f2;
    font-size: 13px;
    color: #333;
}

.fmm-table tbody tr:hover {
    background: #f8fafa;
}

.fmm-file {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.fmm-when {
    color: #888;
    white-space: nowrap;
}

/* Under the timestamp rather than beside it: the column is already the widest thing in the row. */
.fmm-ago {
    display: block;
    font-size: 11px;
    opacity: .75;
}

.fmm-row-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.fmm-row-actions .btn + .btn {
    margin-left: 4px;
}

/* Struck out the moment the monitor confirms the file is gone. The list itself is a snapshot of the
   last report, so it only truly rebuilds on Refresh. */
.fmm-row-removed {
    opacity: .45;
    text-decoration: line-through;
}

.fmm-status {
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.fmm-status-ok {
    background: #dcfce7;
    color: #166534;
}

.fmm-status-bad {
    background: #fee2e2;
    color: #991b1b;
}