/* The disk manager page (manager.html). The colours come from style.css (light and dark). */
:root { --folder: #d9a520; --selected: color-mix(in srgb, var(--accent) 24%, transparent); }

.switch { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.message { margin: 16px; }

.manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0 16px 16px;
  height: calc(100vh - 168px);
  min-height: 420px;
}
.manager.dual { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.manager[hidden], .message[hidden], .toolbar[hidden], [hidden].dual-only { display: none; }

.pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: 8px; }
.pane[hidden] { display: none; }
.manager.dual .pane.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.pane-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 0 2px 8px; }
.pane-body { flex: 1; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 12px; min-height: 0; }
.manager.dual .pane-body { grid-template-columns: minmax(0, 1fr); }
.manager.dual .tree { display: none; }

.tree { overflow: auto; padding: 8px 4px; min-width: 0; }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree ul ul { padding-left: 16px; }
.tree .row { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 2px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.tree .row:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tree .row.selected { background: var(--selected); }
.tree .row:focus-visible { outline: 2px solid var(--accent); }
.tree:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tree:focus-visible .row.selected { outline: 1px solid var(--accent); }
.space { height: 6px; margin: 6px 0 2px; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--border) 40%, transparent); }
.space[hidden] { display: none; }
.space > div { height: 100%; background: var(--accent); }
.tree .label { overflow: hidden; text-overflow: ellipsis; }
.tree .toggle { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tree .toggle::before { content: ""; border-left: 6px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.tree [aria-expanded="true"] > .row .toggle::before { transform: rotate(90deg); }
.tree .row.leaf .toggle::before { display: none; }
.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; background: var(--selected); }

.files { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 16px 12px; padding: 8px; }
.toolbar .sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.toolbar [data-write].disabled, .toolbar label.button[data-write].disabled { opacity: 0.45; cursor: default; }

.pathbar { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 4px 2px 8px; font-size: 13px; }
.pathbar button { border: 0; background: none; padding: 2px 6px; color: var(--accent); }
.pathbar button:hover { text-decoration: underline; }
.pathbar .slash { color: var(--muted); }
.pathbar .here { font-weight: 600; padding: 2px 6px; }

.pane-search { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 2px 8px; }
.pane-search input[type="text"] { flex: 1 1 8em; min-width: 6em; max-width: 16em; }
.pane-search [hidden] { display: none; }
.results[hidden], .list[hidden] { display: none; }
.results.stale { opacity: 0.55; }
.results td:nth-child(2) { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.results td:nth-child(5) { font-family: var(--mono); font-size: 12px; max-width: 30em; }
.list { flex: 1; overflow: auto; border: 1px solid var(--border); border-radius: 4px; min-height: 0; }
.list:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.list.drop-target { background: var(--selected); }
.list table { width: 100%; border-collapse: collapse; font-size: 14px; }
.list th { position: sticky; top: 0; background: var(--panel); text-align: left; padding: 6px 10px; font-weight: 600; border-bottom: 1px solid var(--border); cursor: pointer; user-select: none; white-space: nowrap; }
.list th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 10px; color: var(--muted); }
.list th[aria-sort="descending"]::after { content: " \25BC"; font-size: 10px; color: var(--muted); }
.list td { padding: 3px 10px; white-space: nowrap; max-width: 28em; overflow: hidden; text-overflow: ellipsis; }
.list td:nth-child(2), .list td:nth-child(5) { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.list tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.list tbody tr.selected { background: var(--selected); }
.list tbody tr.drop-target { outline: 2px dashed var(--accent); outline-offset: -2px; }
.list .label { vertical-align: middle; }
.name-edit { width: min(28em, 90%); }

.icon { display: inline-block; width: 16px; height: 13px; margin-right: 6px; vertical-align: middle; position: relative; flex: none; }
.icon.dir { background: var(--folder); border-radius: 2px 3px 3px 3px; margin-top: 2px; }
.icon.dir::before { content: ""; position: absolute; left: 0; top: -3px; width: 7px; height: 4px; background: var(--folder); border-radius: 2px 2px 0 0; }
.icon.file { width: 11px; height: 14px; margin: 0 11px 0 5px; background: var(--panel); border: 1px solid var(--muted); border-radius: 1px; }
.icon.file::after { content: ""; position: absolute; right: -1px; top: -1px; border-left: 4px solid var(--muted); border-bottom: 4px solid transparent; }
.icon.disk { width: 16px; height: 9px; margin-top: 4px; background: var(--muted); border-radius: 2px; }

.menu { position: fixed; z-index: 20; min-width: 12em; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 4px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.25); }
.menu[hidden] { display: none; }
.menu button { display: block; width: 100%; text-align: left; border: 0; background: none; border-radius: 4px; padding: 5px 10px; }
.menu button:hover:not(:disabled), .menu button:focus-visible { background: var(--selected); }
.menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 0; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 16px; max-width: min(640px, 94vw); }
dialog::backdrop { background: rgb(0 0 0 / 0.45); }
dialog h2 { margin: 0 0 10px; font-size: 16px; overflow-wrap: anywhere; }
.dialog-buttons { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dialog-bar { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.check { display: flex; gap: 0; align-items: center; cursor: pointer; }
progress { width: 100%; height: 14px; }
#viewer { width: min(1000px, 96vw); max-width: none; }
.viewer-tools { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 6px 0 10px; }
.viewer-content { margin: 0; height: 60vh; overflow: auto; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font: 12.5px/1.35 var(--mono); white-space: pre; tab-size: 8; }
.viewer-content:focus-visible { outline: 2px solid var(--accent); }
.viewer-files { display: flex; gap: 8px; align-items: center; margin: 6px 0 0; }
.viewer-paging { display: contents; }
.viewer-paging[hidden], .viewer-media[hidden], .viewer-files[hidden] { display: none; }
.viewer-media { height: 60vh; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; overflow: auto; }
.viewer-media img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; }
.viewer-media audio { width: min(560px, 100%); }
.viewer-media p { margin: 0; }

.newdisk .fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 10px; align-items: center; }
.newdisk .inline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.newdisk input[type=number] { width: 11em; }
.newdisk .hint { margin: 10px 0 0; }
#nd-error { color: #c5221f; }
#nd-error:empty { display: none; }

@media (max-width: 760px) {
  .manager, .manager.dual { grid-template-columns: 1fr; height: auto; }
  .pane-body { grid-template-columns: 1fr; grid-template-rows: 150px minmax(0, 1fr); }
  .manager.dual .pane-body { grid-template-rows: minmax(0, 1fr); }
  .list { max-height: 60vh; }
}

/* State of a disk, kinds of file, and a summary of the selection. */
.badge { margin-left: auto; padding: 1px 8px; border: 1px solid var(--border); border-radius: 10px; font-size: 12px; color: var(--muted); }
.badge.open { color: #b3261e; border-color: currentColor; }
.pane.is-editable .files { border-color: color-mix(in srgb, #b3261e 45%, var(--border)); }
.selection { min-height: 1.3em; color: var(--text); }
.list tbody tr:nth-child(even):not(.selected):not(:hover) { background: color-mix(in srgb, var(--muted) 5%, transparent); }
.icon.file.kind-program { border-color: #2e7d32; background: color-mix(in srgb, #2e7d32 25%, var(--panel)); }
.icon.file.kind-program::after { border-left-color: #2e7d32; }
.icon.file.kind-text { border-color: #1a73e8; }
.icon.file.kind-text::after { border-left-color: #1a73e8; }
.icon.file.kind-archive { border-color: #8e24aa; background: color-mix(in srgb, #8e24aa 22%, var(--panel)); }
.icon.file.kind-archive::after { border-left-color: #8e24aa; }
.icon.file.kind-picture { border-color: #d9a520; background: color-mix(in srgb, #d9a520 25%, var(--panel)); }
.icon.file.kind-picture::after { border-left-color: #d9a520; }
.status:not(:empty) { padding: 4px 10px; margin: 6px 16px 0; border-left: 3px solid var(--accent); border-radius: 3px; }
.status.error:not(:empty) { border-left-color: #c5221f; }

.list td.empty { text-align: center; color: var(--muted); padding: 24px 10px; }
.menu button:focus-visible { outline: none; }
body[aria-busy="true"], body[aria-busy="true"] .list { cursor: progress; }

@media (max-width: 760px) {
  .list:not(.results) :is(th, td):is(:nth-child(2), :nth-child(5)) { display: none; }         /* the DOS name and the attributes: the name and the size matter on a narrow screen */
  .toolbar { margin: 0 8px 8px; }
  .manager { padding: 0 8px 8px; }
}

.list table.hide-short :is(th, td):nth-child(2), .list table.hide-modified :is(th, td):nth-child(4), .list table.hide-attr :is(th, td):nth-child(5) { display: none; }

/* The Properties dialog. */
.props-info { display: grid; grid-template-columns: max-content 1fr; gap: 2px 14px; margin: 8px 0 12px; }
.props-info dt { color: var(--muted); }
.props-info dd { margin: 0; overflow-wrap: anywhere; }
.props-attributes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; }
.props-attributes legend { padding: 0 6px; color: var(--muted); }
.props-date { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

/* the Keys dialog */
table.keys { border-collapse: collapse; margin: 8px 0 14px; }
table.keys th { text-align: left; font-weight: 600; white-space: nowrap; padding: 3px 16px 3px 0; vertical-align: top; }
table.keys td { padding: 3px 0; }
#notice { cursor: default; }

/* The page takes the window: header, status, toolbar, then the panels in what is left (a toolbar of two lines does not make the page scroll). */
@media (min-width: 761px) {
  body.manager-page { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
  body.manager-page > * { flex: none; }
  body.manager-page > .manager { flex: 1 1 0; height: auto; min-height: 0; }
}
.toolbar { margin-bottom: 0; }
.busy-bar { height: 3px; margin: 4px 16px 5px; border-radius: 2px; overflow: hidden; }
body[aria-busy="true"] .busy-bar { background: color-mix(in srgb, var(--accent) 18%, transparent); }
body[aria-busy="true"] .busy-bar::before { content: ""; display: block; width: 30%; height: 100%; background: var(--accent); border-radius: 2px; animation: busy-slide 1.1s ease-in-out infinite alternate; }
@keyframes busy-slide { from { margin-left: 0; } to { margin-left: 70%; } }
@media (prefers-reduced-motion: reduce) { body[aria-busy="true"] .busy-bar::before { animation: none; width: 100%; opacity: 0.6; } }

.tool-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toolbar button { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1180px) {
  .toolbar .tool-label { display: none; }                         /* the picture and the tooltip say it; the name stays for a screen reader */
  .toolbar button { padding-left: 9px; padding-right: 9px; }
}
.overview { margin: 0; flex-basis: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manager.dual .pane:not(.active) { opacity: 0.94; }
.path-row { display: flex; gap: 8px; align-items: flex-start; }
.path-row .pathbar { flex: 1; min-width: 0; }
.path-row .filter { flex: 0 1 12em; min-width: 6em; margin-bottom: 6px; }

/* the Boot record dialog */
.mbr-list { list-style: none; margin: 0 0 10px; padding: 0; }
.mbr-list li { padding: 1px 0; }
.mbr-list li.bad { color: #c5221f; }
.mbr-form { display: grid; gap: 6px; margin: 0 0 8px; }
.mbr-form[hidden] { display: none; }