/* AD Report # 8: Quest RMAD in the style of the Recovery Manager console (an MMC snap-in on Windows).
 * Hand-written; one light look like the console itself, so there is no dark mode. */
:root {
  --win: #ffffff; --chrome: #f0f0f0; --line: #d9d9d9; --line-2: #a0a0a0; --text: #000000; --dim: #6d6d6d;
  --sel: #cce8ff; --sel-line: #99d1ff; --hover: #e5f3ff; --link: #0b5aa5; --head: #003399;
  --ok: #107c10; --warn: #9d5d00; --err: #c42b1c; --off: #8a8a8a;
  --ui: "Segoe UI", "Segoe UI Variable", Tahoma, "Noto Sans", system-ui, sans-serif;
  color-scheme: light;
}
html, body { height: 100%; margin: 0; }
body { background: var(--chrome); color: var(--text); font: 12px/1.35 var(--ui); overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--win); }

/* title bar */
.titlebar { display: flex; align-items: center; gap: 8px; height: 30px; padding-left: 8px; background: var(--win); border-bottom: 1px solid #e6e6e6; flex: none; }
.titlebar .ti { width: 16px; height: 16px; flex: none; }
.titlebar h1 { font: 12px var(--ui); margin: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.titlebar h1 small { color: var(--dim); font-size: 12px; }
.wbtn { width: 46px; height: 30px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; text-decoration: none; color: inherit; }
.wbtn:hover { background: #e5e5e5; } .wbtn.x:hover { background: #e81123; color: #fff; }
.wbtn svg { width: 10px; height: 10px; }

/* menu bar */
.menubar { display: flex; gap: 0; padding: 0 2px; height: 22px; align-items: stretch; background: var(--win); flex: none; position: relative; z-index: 20; }
.menubar .mi { position: relative; }
.menubar .mb { border: 1px solid transparent; background: none; padding: 1px 7px; height: 100%; cursor: default; }
.menubar .mb:hover, .menubar .mi.open .mb { background: var(--hover); border-color: var(--sel-line); }
.menubar .mb .mi-ic { width: 16px; height: 16px; vertical-align: -4px; }
.menu { position: absolute; left: 0; top: 100%; min-width: 220px; background: #f2f2f2; border: 1px solid #ccc; box-shadow: 2px 3px 6px rgba(0,0,0,.25); padding: 2px; z-index: 30; }
.menu button, .menu a { display: flex; justify-content: space-between; gap: 24px; width: 100%; box-sizing: border-box; padding: 4px 24px 4px 28px; border: 1px solid transparent; background: none; text-align: left; text-decoration: none; color: inherit; cursor: default; }
.menu button:hover:not(:disabled), .menu a:hover { background: var(--sel); border-color: var(--sel-line); }
.menu button:disabled { color: var(--off); }
.menu .k { color: var(--dim); }
.menu hr { border: 0; border-top: 1px solid #ccc; margin: 3px 2px 3px 28px; }

/* toolbar */
.toolbar { display: flex; align-items: center; gap: 1px; padding: 2px 4px; background: var(--win); border-bottom: 1px solid var(--line); flex: none; }
.tb { width: 24px; height: 22px; border: 1px solid transparent; background: none; display: grid; place-items: center; padding: 0; cursor: default; }
.tb:hover:not(:disabled) { background: var(--hover); border-color: var(--sel-line); }
.tb[aria-pressed="true"] { background: var(--sel); border-color: var(--sel-line); }
.tb:disabled svg { filter: grayscale(1); opacity: .4; }
.tb svg { width: 16px; height: 16px; }
.tsep { width: 1px; height: 18px; background: var(--line); margin: 0 4px; }
.tb-right { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--dim); white-space: nowrap; overflow: hidden; }
.tb-right a { color: var(--link); text-decoration: none; }
.tb-right a:hover { text-decoration: underline; }

/* panes */
.panes { flex: 1; display: grid; grid-template-columns: var(--tree-w, 366px) 4px minmax(0, 1fr); min-height: 0; background: var(--chrome); }
.panes.notree { grid-template-columns: 0 0 minmax(0, 1fr); }
.panes.notree .tree, .panes.notree .split { display: none; }
.tree { background: var(--win); overflow: auto; border-right: 1px solid var(--line); padding: 2px 0 8px; min-width: 0; }
.split { cursor: col-resize; background: var(--chrome); }
.right { background: var(--win); overflow: auto; min-width: 0; position: relative; border-left: 1px solid var(--line); }

/* tree */
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree li > .tn { display: flex; align-items: center; gap: 4px; height: 18px; padding-right: 8px; white-space: nowrap; cursor: default; }
.tree .tw { width: 16px; height: 16px; display: grid; place-items: center; flex: none; color: #555; }
.tree .tw svg { width: 9px; height: 9px; }
.tree .ic { width: 16px; height: 16px; flex: none; }
.tree .lb { padding: 0 3px; border: 1px solid transparent; line-height: 15px; }
.tree .tn:hover .lb { background: var(--hover); }
.tree .tn.sel .lb { background: var(--sel); border-color: var(--sel-line); }
.tree .tn:focus { outline: none; }
.tree .tn:focus-visible .lb { outline: 1px dotted #000; }
.tree .tn.nc .lb { color: var(--off); }

/* list view */
.lv { width: 100%; border-collapse: collapse; table-layout: auto; }
.lv thead th { position: sticky; top: 0; z-index: 1; background: var(--win); font-weight: 400; text-align: left; padding: 4px 6px 5px; border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; white-space: nowrap; cursor: default; color: #4c607a; }
.lv thead th:hover { background: var(--hover); }
.lv thead th .sa { color: var(--dim); font-size: 9px; margin-left: 6px; }
.lv tbody td { padding: 1px 6px; white-space: nowrap; height: 18px; border: 1px solid transparent; max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.lv tbody tr { cursor: default; }
.lv tbody tr:hover td { background: var(--hover); }
.lv tbody tr.sel td { background: var(--sel); border-top-color: var(--sel-line); border-bottom-color: var(--sel-line); }
.lv tbody tr:focus { outline: none; }
.lv td .ic { width: 16px; height: 16px; vertical-align: -4px; margin-right: 4px; }
.lv td.n, .lv th.n { text-align: right; }
.lv .lk { color: var(--link); }
.st-ok { color: var(--ok); } .st-warn { color: var(--warn); } .st-error { color: var(--err); } .st-off { color: var(--off); }
.empty { padding: 14px 18px; color: var(--dim); }
.empty b { color: var(--text); font-weight: 600; }

/* home (the snap-in's start page) */
.home { padding: 10px 14px 20px; display: grid; gap: 9px; }
.card { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; border: 1px solid #c8c8c8; padding: 6px 10px 8px 6px; background: #fff; text-align: left; cursor: pointer; width: 100%; box-sizing: border-box; }
.card:hover { border-color: var(--sel-line); background: #fafdff; }
.card .big { width: 48px; height: 48px; }
.card h2 { margin: 2px 0 3px; font: 600 13px var(--ui); color: var(--head); }
.card:hover h2 { text-decoration: underline; }
.card p { margin: 0; font-size: 12px; color: #222; }
.card .kv { display: flex; flex-wrap: wrap; gap: 2px 18px; margin-top: 3px; color: #222; }
.card .kv b { font-weight: 600; }
.card ul { margin: 3px 0 0; padding-left: 16px; }

/* status bar */
.status { display: flex; align-items: center; height: 22px; border-top: 1px solid var(--line); background: var(--chrome); flex: none; font-size: 12px; }
.status span { padding: 0 8px; border-right: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status span:first-child { flex: 1; }

/* dialogs */
.veil { position: fixed; inset: 0; background: rgba(0,0,0,.08); z-index: 50; display: grid; place-items: center; }
.dlg { background: var(--chrome); border: 1px solid #7a7a7a; box-shadow: 0 8px 30px rgba(0,0,0,.35); width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.dlg.wide { width: min(860px, calc(100vw - 24px)); }
.dlg-t { display: flex; align-items: center; height: 30px; padding-left: 10px; background: #fff; }
.dlg-t h3 { flex: 1; margin: 0; font: 12px var(--ui); }
.dlg-t .q { width: 30px; height: 30px; border: 0; background: none; color: #333; }
.dlg-body { padding: 8px 10px 0; overflow: auto; flex: 1; min-height: 0; }
.tabs { display: flex; flex-direction: column; }
.tabrow { display: flex; flex-wrap: wrap; margin-bottom: -1px; }
.tabrow button { border: 1px solid #adadad; border-bottom: 0; background: #f0f0f0; padding: 2px 8px; margin-right: -1px; cursor: default; }
.tabrow button[aria-selected="true"] { background: #fff; position: relative; z-index: 2; padding-bottom: 3px; }
.tabrow button:disabled { color: var(--off); }
.tabpanel { background: #fff; border: 1px solid #adadad; padding: 12px 12px 14px; min-height: 340px; position: relative; z-index: 1; }
.grp { border-top: 1px solid #dcdcdc; margin: 14px 0 6px; position: relative; }
.grp > span { position: absolute; top: -9px; left: 0; background: #fff; padding-right: 8px; }
.fld { display: grid; grid-template-columns: 170px 1fr; gap: 6px 10px; align-items: center; margin: 4px 0; }
.fld label { color: #222; }
.fld .v, .ro { border: 1px solid #c4c4c4; background: #f7f7f7; padding: 2px 5px; min-height: 16px; overflow-wrap: anywhere; }
.chk { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.chk input { margin: 0; }
.note { color: var(--dim); margin: 10px 0 0; }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 10px; }
.dlg-f button { min-width: 74px; padding: 3px 10px; border: 1px solid #adadad; background: #e1e1e1; }
.dlg-f button.def { border: 2px solid #0078d7; padding: 2px 9px; }
.dlg-f button:hover:not(:disabled) { background: #e5f1fb; border-color: #0078d7; }
.dlg-f button:disabled { color: var(--off); }
.dlg .lv { border: 1px solid #c4c4c4; }
.dlg .lvw { max-height: 300px; overflow: auto; border: 1px solid #c4c4c4; }
.dlg .lvw .lv { border: 0; }
.strip { display: grid; grid-template-columns: repeat(var(--n, 30), 1fr); gap: 2px; margin: 6px 0; }
.strip i { height: 16px; border: 1px solid rgba(0,0,0,.15); }
.strip i.ok { background: #6cc070; } .strip i.warn { background: #f0b232; } .strip i.error { background: #e05345; } .strip i.none { background: #e2e2e2; }
.strip i.syn { opacity: .55; }
.bar { display: grid; grid-template-columns: 90px 1fr 70px; gap: 8px; align-items: center; margin: 4px 0; }
.bar i { height: 12px; border: 1px solid #b5b5b5; background: #fff; }
.bar i b { display: block; height: 100%; background: linear-gradient(#5fbf5f, #2f9a2f); }
.bar span:last-child { text-align: right; }

/* context menu and pop-ups */
.ctx { position: fixed; z-index: 60; min-width: 180px; background: #f2f2f2; border: 1px solid #ccc; box-shadow: 2px 3px 6px rgba(0,0,0,.25); padding: 2px; }
.tip { position: fixed; z-index: 70; max-width: 320px; padding: 4px 7px; background: #fff; border: 1px solid #767676; box-shadow: 1px 2px 4px rgba(0,0,0,.2); pointer-events: none; font-size: 12px; }

/* narrow screens: the tree becomes a drawer the toolbar's Show/Hide Console Tree button opens */
@media (max-width: 760px) {
  .titlebar h1 small, .tb-right { display: none; }
  .panes, .panes.notree { grid-template-columns: minmax(0, 1fr); position: relative; }
  .panes .right { grid-column: 1; grid-row: 1; }
  .panes .split { display: none; }
  .panes .tree { position: absolute; inset: 0 auto 0 0; width: min(86vw, 340px); z-index: 10; box-shadow: 4px 0 12px rgba(0,0,0,.25); }
  .panes.notree .tree { display: none; }
  .status span:not(:first-child):not(:nth-child(2)) { display: none; }
  .fld { grid-template-columns: 1fr; gap: 2px; }
}