/* orchview2 — small tweaks on top of Bootstrap 5 + rsflow.css */

/* Orchid logo — background is transparent now that the mark is a real image
   with its own colour, not a font-awesome glyph on a blue tile. */
.rs-sidebar-brand .rs-brand-mark {
    width: 34px; height: 34px;
    border-radius: 6px;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rs-sidebar-brand .rs-brand-mark img {
    width: 100%; height: 100%; object-fit: contain;
}

/* Definition list used on show pages */
.rs-def dt { color: var(--rs-text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.rs-def dd { margin-bottom: .5rem; font-size: .82rem; color: var(--rs-text); }

/* Compact type picker (Assets create — pick asset type) */
.type-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .6rem; }
.type-picker a { display: flex; flex-direction: column; padding: .8rem 1rem; background: #fff; border: 1px solid var(--rs-border); border-left: 4px solid #0f172a; border-radius: 8px; text-decoration: none; color: var(--rs-text); }
.type-picker a:hover { border-color: var(--rs-accent); box-shadow: 0 2px 8px rgba(107,143,190,.15); text-decoration: none; }
.type-picker a strong { font-size: .84rem; }
.type-picker a small  { color: var(--rs-text-muted); margin-top: .25rem; }

/* Colour swatch beside type names */
.rs-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .35rem; vertical-align: middle; }

/* Work order tasks + incident feed lists */
.rs-tasks { list-style: none; padding: 0; margin: 0; }
.rs-tasks li { padding: .55rem .75rem; border: 1px solid var(--rs-border); border-radius: 6px; margin-bottom: .35rem; background: #fff; display: flex; align-items: center; gap: .5rem; }
.rs-tasks li.done { background: #f0fdf4; }
.rs-tasks .rs-task-toggle { color: var(--rs-accent); font-size: 1.05rem; text-decoration: none; }

.rs-feed { list-style: none; padding: 0; margin: 0; }
.rs-feed li { padding: .55rem 0; border-bottom: 1px solid var(--rs-border); font-size: .8rem; }

/* Legacy Executive KPI table — pale-blue rows, teal header. */
.kpi-table th { background: #0aa7a3 !important; color: #fff !important; border: none !important; padding: .55rem .5rem !important; font-weight: 600; text-transform: none !important; letter-spacing: 0 !important; font-size: .82rem !important; }
.kpi-table td { background: #e8f1fa; padding: .6rem .5rem; }
.kpi-table tbody tr:nth-child(even) td { background: #dbe9f6; }

/* WO task rows (checklist-style form-builder) */
.wo-tasks       { display: flex; flex-direction: column; gap: .4rem; }
.wo-task        { background: #fff; border: 1px solid var(--rs-border); border-radius: 8px; padding: .6rem .75rem; }
.wo-task.done   { background: #f0fdf4; border-color: #bbf7d0; }
.wo-task-head   { display: flex; justify-content: space-between; gap: .5rem; }

/* Small helper for the top-of-page KPI grid */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1rem; }

/* Vue 3 — hide any node with v-cloak until the app has mounted, so
   raw {{ mustache }} tokens don't flash in the pre-hydration paint. */
[v-cloak] { display: none !important; }

/* Per-stop photo strip on the Rounds run view. Horizontal scroll, small
   thumbnails with caption + timestamp under each. Click opens the full file. */
.rs-photo-strip { display: flex; gap: .5rem; overflow-x: auto; padding: .35rem 0; }
.rs-photo-thumb {
    flex: 0 0 auto; width: 130px; text-decoration: none; color: var(--rs-text);
    border: 1px solid var(--rs-border); border-radius: 6px; overflow: hidden;
    background: #fff; transition: box-shadow .15s;
}
.rs-photo-thumb:hover { box-shadow: 0 2px 8px rgba(107,143,190,.2); text-decoration: none; }
.rs-photo-thumb img { width: 100%; height: 90px; object-fit: cover; display: block; background: #f1f5f9; }
.rs-photo-file { width: 100%; height: 90px; display: flex; align-items: center; justify-content: center; color: var(--rs-text-muted); background: #f1f5f9; }
.rs-photo-meta    { padding: .3rem .4rem; }
.rs-photo-caption { font-size: .72rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-photo-time    { font-size: .65rem; color: var(--rs-text-muted); }
