/* ============================================================================
 * TRMC Forensics Mockup — tiny mockup-only tweaks.
 * Everything else is the app's real compiled CSS (copied verbatim).
 * ==========================================================================*/

/* The real app keeps the route view inside a scrolling wrapper; in the mockup
   each page is a standalone document, so give the content area a min-height. */
.page-content-wrapper { min-height: calc(100vh - 80px); }

/* Active side-menu highlight: the real single-page app sets .active via the
   router. The mockup is split into separate HTML files, so the shell adds
   .active from data-page — this is the same class the app uses, no extra CSS
   needed. (kept here only as documentation.) */

/* Bootstrap-shim: ensure toggled dropdowns/modals show even if a particular
   stylesheet only defined the BS4 `.show` variant. */
.dropdown.open > .dropdown-menu,
.btn-group.open > .dropdown-menu,
.dropdown.show > .dropdown-menu { display: block; }
.modal.mock-open { display: block; }
.modal-backdrop.mock-open { opacity: .5; }

/* Mock spinner overlay so simulateLoad can cover the view cleanly. */
#section-loading-spinner.mock-hidden { display: none !important; }

/* Make external flag images line up nicely in tables. */
img.mock-flag { width: 16px; height: 12px; vertical-align: -1px; border-radius: 2px; }

/* ---- Hunt query bar (approximates <forensics-hunt-interface>) --------- */
.fm-hunt { margin-bottom: 16px; }
.fm-hunt-input-wrap { position: relative; display: flex; align-items: center; gap: 8px;
    background: var(--fm-bg-secondary, #161b22); border: 1px solid var(--fm-border-color, #30363d);
    border-radius: 10px; padding: 6px 8px 6px 36px; }
.fm-hunt-input-wrap:focus-within { border-color: var(--fm-accent-blue, #367fd3); box-shadow: 0 0 0 3px rgba(54,127,211,.15); }
.fm-hunt-search-icon { position: absolute; left: 12px; color: var(--fm-text-muted, #6e7681); }
.fm-hunt-input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--fm-text-primary, #e6edf3);
    font-size: 14px; font-family: "Roboto Mono", Consolas, monospace; padding: 8px 4px; }
.fm-hunt-btn { background: var(--fm-accent-blue, #367fd3); color: #fff; border: 0; border-radius: 8px;
    padding: 8px 16px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.fm-hunt-btn:hover { filter: brightness(1.08); }
.fm-hunt-suggest { display: none; position: absolute; top: 100%; left: 28px; right: 90px; z-index: 200;
    margin-top: 6px; background: var(--fm-bg-dropdown, #1a2028); border: 1px solid var(--fm-border-color, #30363d);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); max-height: 320px; overflow: auto; padding: 4px; }
.fm-hunt-suggest-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px;
    cursor: pointer; color: var(--fm-text-secondary, #8b949e); font-family: "Roboto Mono", monospace; font-size: 13px; }
.fm-hunt-suggest-item:hover { background: var(--fm-bg-hover, rgba(48,54,61,.6)); color: var(--fm-text-primary, #e6edf3); }
.fm-hunt-suggest-item .fa { color: var(--fm-accent-blue, #367fd3); }
.fm-hunt-suggest-kind { margin-left: auto; font-size: 10px; text-transform: uppercase; color: var(--fm-text-muted, #6e7681); }
.fm-hunt-hints { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.fm-hunt-hints-label { font-size: 12px; color: var(--fm-text-muted, #6e7681); margin-right: 4px; }
.fm-hint-chip { background: var(--fm-bg-tertiary, rgba(48,54,61,.4)); border: 1px solid var(--fm-border-color, #30363d);
    color: var(--fm-text-secondary, #8b949e); border-radius: 14px; padding: 3px 10px; font-size: 12px;
    font-family: "Roboto Mono", monospace; cursor: pointer; }
.fm-hint-chip:hover { border-color: var(--fm-accent-blue, #367fd3); color: var(--fm-accent-blue, #58a6ff); }

/* ---- Process tree modal --------------------------------------------- */
.fm-ptree { font-size: 13px; }
.fm-ptree-node { position: relative; }
.fm-ptree-children { margin-left: 26px; padding-left: 16px; border-left: 1px dashed var(--fm-border-color, #30363d); }
.fm-ptree-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; margin: 4px 0;
    background: var(--fm-bg-secondary, #161b22); border: 1px solid var(--fm-border-color, #30363d); border-radius: 8px; }
.fm-ptree-node.selected > .fm-ptree-row { background: rgba(54,127,211,.15); border-color: var(--fm-accent-blue, #367fd3); }
.fm-ptree-icon { color: var(--fm-accent-blue, #367fd3); }
.fm-ptree-name { color: var(--fm-text-primary, #e6edf3); }
.fm-ptree-pid { font-family: "Roboto Mono", monospace; font-size: 11px; color: var(--fm-text-muted, #6e7681);
    background: var(--fm-bg-tertiary, rgba(48,54,61,.4)); border-radius: 4px; padding: 1px 6px; }
.fm-ptree-user { font-size: 12px; color: var(--fm-text-secondary, #8b949e); }
.fm-ptree-signer { font-size: 11px; padding: 1px 8px; border-radius: 10px; }
.fm-ptree-signer.signed { color: #3fb950; background: rgba(63,185,80,.12); }
.fm-ptree-signer.unsigned { color: #f85149; background: rgba(248,81,73,.12); }
.fm-ptree-cmd { font-family: "Roboto Mono", monospace; font-size: 11px; color: var(--fm-text-secondary, #8b949e);
    margin: 0 0 4px 26px; padding: 4px 8px; background: rgba(0,0,0,.25); border-radius: 6px; word-break: break-all; }

/* monospace helpers used by data tables */
.fm-mono, .fm-hash { font-family: "Roboto Mono", Consolas, monospace; }
.fm-hash { font-size: 11px; color: var(--fm-text-muted, #8b949e); }

/* ---- Attack Story timeline ------------------------------------------ */
.fm-story-timeline { position: relative; padding-left: 12px; }
.fm-story-item { position: relative; display: flex; gap: 16px; padding: 0 0 20px 0; }
.fm-story-item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: -4px; width: 2px; background: var(--fm-border-color, #30363d); }
.fm-story-marker { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 13px; z-index: 1; box-shadow: 0 0 0 4px var(--fm-bg-primary, #11161d); }
.fm-story-card { flex: 1; background: var(--fm-bg-secondary, #161b22); border: 1px solid var(--fm-border-color, #30363d); border-radius: 10px; padding: 14px 16px; }
.fm-story-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.fm-story-time { margin-left: auto; color: var(--fm-text-muted, #6e7681); font-size: 12px; }
.fm-story-desc { color: var(--fm-text-secondary, #8b949e); margin: 6px 0 10px; }
.fm-story-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--fm-text-muted, #8b949e); }
.fm-story-meta .fa { margin-right: 4px; color: var(--fm-accent-blue, #58a6ff); }

/* ---- Toast (mock equivalent of $.notify) ----------------------------- */
.mock-toast { position: fixed; top: 90px; right: 24px; z-index: 100000; background: #1a2028;
    border: 1px solid var(--fm-accent-blue, #367fd3); color: #e6edf3; padding: 12px 18px;
    border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.4); transition: opacity .4s;
    font-size: 14px; max-width: 360px; }

/* ============================ LIVE VIEW =============================== */
/* The bulk of Live View styling comes from the app's real liveview-modern.css
   + rovers-modern.css. These are only the few mock-bridge bits. */

/* Slim dark scrollbars (mock of the app's slimScroll directive). The real CSS
   only styles the registry/file scroll areas; extend the SAME look to the
   process/network/services/terminal/modal scroll areas + the list/script pages. */
.lv-page #procBody::-webkit-scrollbar, .lv-page #netBody::-webkit-scrollbar,
.lv-page #sysBody::-webkit-scrollbar, .lv-page .lv-terminal-output::-webkit-scrollbar,
.lv-page .process-details-body::-webkit-scrollbar, .lv-page .table-responsive::-webkit-scrollbar,
.lv-page .CodeMirror-vscrollbar::-webkit-scrollbar, .lv-page .CodeMirror-hscrollbar::-webkit-scrollbar,
#endpoints-page .table-responsive::-webkit-scrollbar, #endpoints-page .horizontal::-webkit-scrollbar,
#script-page .sidebar-list::-webkit-scrollbar, #script-page .results-body::-webkit-scrollbar,
#script-page .CodeMirror-vscrollbar::-webkit-scrollbar { width: 8px; height: 8px; }

.lv-page #procBody::-webkit-scrollbar-track, .lv-page #netBody::-webkit-scrollbar-track,
.lv-page #sysBody::-webkit-scrollbar-track, .lv-page .lv-terminal-output::-webkit-scrollbar-track,
.lv-page .process-details-body::-webkit-scrollbar-track, .lv-page .table-responsive::-webkit-scrollbar-track,
#endpoints-page .table-responsive::-webkit-scrollbar-track, #endpoints-page .horizontal::-webkit-scrollbar-track,
#script-page .sidebar-list::-webkit-scrollbar-track, #script-page .results-body::-webkit-scrollbar-track {
    background: var(--lv-bg-tertiary, #11161d); }

.lv-page #procBody::-webkit-scrollbar-thumb, .lv-page #netBody::-webkit-scrollbar-thumb,
.lv-page #sysBody::-webkit-scrollbar-thumb, .lv-page .lv-terminal-output::-webkit-scrollbar-thumb,
.lv-page .process-details-body::-webkit-scrollbar-thumb, .lv-page .table-responsive::-webkit-scrollbar-thumb,
.lv-page .CodeMirror-vscrollbar::-webkit-scrollbar-thumb, .lv-page .CodeMirror-hscrollbar::-webkit-scrollbar-thumb,
#endpoints-page .table-responsive::-webkit-scrollbar-thumb, #endpoints-page .horizontal::-webkit-scrollbar-thumb,
#script-page .sidebar-list::-webkit-scrollbar-thumb, #script-page .results-body::-webkit-scrollbar-thumb,
#script-page .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
    background: var(--theme-border-muted, #3e444b); border-radius: 8px; border: 2px solid var(--lv-bg-tertiary, #11161d); }

.lv-page #procBody::-webkit-scrollbar-thumb:hover, .lv-page #netBody::-webkit-scrollbar-thumb:hover,
.lv-page #sysBody::-webkit-scrollbar-thumb:hover, .lv-page .lv-terminal-output::-webkit-scrollbar-thumb:hover {
    background: var(--lv-accent, #36c6d3); }

/* Firefox slim scrollbars on the same containers */
.lv-page #procBody, .lv-page #netBody, .lv-page #sysBody, .lv-page .lv-terminal-output,
.lv-page .process-details-body, #script-page .sidebar-list, #script-page .results-body {
    scrollbar-width: thin; scrollbar-color: var(--theme-border-muted, #3e444b) var(--lv-bg-tertiary, #11161d); }

/* header search cell (stand-in for the <header-search> directive) */
.header-search-mock { display: inline-flex; align-items: center; gap: 6px; background: rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 4px 10px; min-width: 180px; }
.header-search-mock .fa { color: #8b949e; font-size: 12px; }
.header-search-mock input { background: transparent; border: 0; outline: 0; color: #e6edf3; font-size: 13px; width: 100%; }

/* online/offline dot on the endpoint-name cell */
.lv-online-pill { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 8px; vertical-align: middle; }
.lv-online-pill.on { background: #26C281; box-shadow: 0 0 6px rgba(38,194,129,.7); }
.lv-online-pill.off { background: #6e7681; }
.lv-host-link { color: #58a6ff; }
.lv-host-link .undeline { text-decoration: underline; }
.lv-row-btn { padding: 4px 8px; color: #c7ccd1; background: transparent; border: 0; }
.lv-row-btn:hover { color: #fff; }

/* active state on the header filter dropdown items */
.header-dropdown .dropdown-menu li.active > a,
.header-dropdown .dropdown-menu li.active { background: rgba(54,127,211,.25) !important; }

/* vital-sign hover card "Status Breakdown" */
.vs-status-wrapper { position: relative; display: inline-block; }
.vs-status-wrapper .green strong { color: #26C281; }
.vs-status-wrapper .yellow strong { color: #f0ad4e; }
.vs-status-wrapper .red strong { color: #f85149; }
.vs-hover-card { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 6px; z-index: 1001; min-width: 230px; text-align: left; background: #1a2028;
    border: 1px solid #30363d; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); padding: 10px 12px; }
.vs-status-wrapper:hover .vs-hover-card { display: block; }
.vs-hover-card-title { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8b949e; margin-bottom: 8px; }
.vs-hover-card-item { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px; color: #c7ccd1; }
.vs-hover-card-item .fa.green { color: #26C281; }
.vs-hover-card-item .fa.yellow { color: #f0ad4e; }
.vs-hover-card-item .fa.red { color: #f85149; }

/* mock toggle switch (rescan / containment) */
.mock-switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.mock-switch input { display: none; }
.mock-switch span { position: absolute; cursor: pointer; inset: 0; background: #3e444b; border-radius: 20px; transition: .2s; }
.mock-switch span:before { content: ""; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; }
.mock-switch input:checked + span { background: #367fd3; }
.mock-switch input:checked + span:before { transform: translateX(20px); }

/* ---- Console: live terminal cursor + output states ------------------- */
.lv-page .blinking-cursor { animation: lv-blink 1s step-end infinite; color: #d4d4d4; }
@keyframes lv-blink { 50% { opacity: 0; } }
.lv-page .containerTerminal .output.SUSPICIOUS { color: #f85149; }
.lv-page .containerTerminal .commandCMD.SUSPICIOUS { color: #f85149; }
.lv-page table.help-panel { width: 100%; color: #d4d4d4; font-family: Consolas, monospace; font-size: 13px; }
.lv-page table.help-panel td { padding: 2px 14px 2px 0; vertical-align: top; }
.lv-page table.help-panel td:first-child { color: #4ec9b0; white-space: nowrap; cursor: pointer; }

/* terminal autocomplete dropdown */
.lv-cmd-autocomplete { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 4px; z-index: 50;
    background: #1a2028; border: 1px solid #30363d; border-radius: 8px; max-height: 240px; overflow: auto; box-shadow: 0 -6px 20px rgba(0,0,0,.4); }
.lv-cmd-autocomplete .ac-item { display: flex; gap: 12px; padding: 7px 12px; cursor: pointer; font-family: Consolas, monospace; font-size: 13px; }
.lv-cmd-autocomplete .ac-item:hover, .lv-cmd-autocomplete .ac-item.active { background: rgba(54,127,211,.22); }
.lv-cmd-autocomplete .ac-cmd { color: #4ec9b0; min-width: 90px; }
.lv-cmd-autocomplete .ac-desc { color: #8b949e; }

/* ---- Console: process tree ------------------------------------------- */
.lv-ptree { font-size: 13px; padding: 8px 4px; }
.lv-ptree-children { margin-left: 22px; padding-left: 14px; border-left: 1px dashed #30363d; }
.lv-ptree-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; margin: 4px 0;
    background: #161b22; border: 1px solid #30363d; border-radius: 8px; }
.lv-ptree-row .lv-ptree-name { color: #e6edf3; }
.lv-ptree-row .lv-ptree-pid { font-family: Consolas, monospace; font-size: 11px; color: #8b949e; background: rgba(48,54,61,.5); border-radius: 4px; padding: 1px 6px; }
.lv-ptree-row .lv-ptree-user { font-size: 12px; color: #8b949e; }
.lv-ptree-row.suspicious { border-color: rgba(248,81,73,.5); }
.lv-ptree-toggle { cursor: pointer; width: 14px; color: #8b949e; }

/* registry value-type pills */
.value-type { font-size: 11px; padding: 1px 8px; border-radius: 10px; background: rgba(48,54,61,.5); color: #c7ccd1; }
.value-type.reg_sz { color: #9cdcfe; }
.value-type.reg_dword, .value-type.reg_qword { color: #b5cea8; }
.value-type.reg_binary { color: #ce9178; }
.value-type.reg_expand_sz, .value-type.reg_multi_sz { color: #c586c0; }

/* small helper for the resource "tools" view + view toggles */
.lv-subview-toggle { display: inline-flex; gap: 4px; }

/* ---- Create wizard: summary grid + indicators (fallback styles) ------ */
.fm-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; }
.fm-summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; background: var(--fm-bg-secondary, #161b22); border: 1px solid var(--fm-border-color, #30363d); border-radius: 8px; }
.fm-summary-label { color: var(--fm-text-muted, #8b949e); font-size: 13px; }
.fm-summary-value { color: var(--fm-text-primary, #e6edf3); font-weight: 600; text-align: right; word-break: break-word; }
.fm-indicator-group { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fm-indicator-type { font-size: 11px; text-transform: uppercase; color: var(--fm-accent-blue, #58a6ff); font-weight: 700; margin-right: 6px; }