/* ════════════════════════════════
   DISK DEFRAGMENTER
   ════════════════════════════════ */
.defrag-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.defrag-scroll-row {
  display: flex;
  flex: 1;
  overflow: hidden;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-bottom: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  background: #000;
  min-height: 0;
}
.defrag-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #fff;
}
.defrag-controls {
  display: flex;
  flex-wrap: wrap; /* narrow windows: the buttons move under the progress bar */
  align-items: center;
  gap: 8px;
  padding: 8px 4px 4px;
  flex-shrink: 0;
}
.defrag-info {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.defrag-status-txt {
  font-family: "w95fa", 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 13px;
  color: #000;
}
.defrag-bar-track {
  padding: 2px;
  height: 16px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px 0px #ffffff, inset 1px 1px 0px #808080;
  overflow: hidden;
}
.defrag-bar-fill {
  width: 0;
  height: 12px;
  background: repeating-linear-gradient(
    to right,
    #000080 0px, #000080 8px,
    #c0c0c0 8px, #c0c0c0 10px
  );
  transition: none;
}
.defrag-pct {
  font-family: "w95fa", 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 13px;
  color: #000;
}
.defrag-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  flex-shrink: 0;
}
.defrag-btn { width: 90px; }

/* Hide Details: the block map is gone and the window shrinks to the controls */
.defrag-no-details .defrag-scroll-row { display: none; }
.defrag-no-details { height: auto; }

/* Legend message box (js/apps/defrag.js) */
.defrag-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.defrag-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.defrag-legend-block {
  width: 9px;
  height: 12px;
  flex-shrink: 0;
  outline: 1px solid #000;
}
.defrag-viewport { touch-action: none; } /* dragged by finger to scroll */

/* Phones: the buttons wrap under the progress bar when the window is too
   narrow for both, and then fill the width in two columns. On one row the
   status side takes (almost) all the spare room. */
body.is-phone .defrag-info { flex-grow: 999; }
body.is-phone .defrag-btns { flex: 1 1 200px; }
body.is-phone .defrag-btn { width: auto; min-width: 0; padding: 0 4px; }
body.is-phone .defrag-status-txt,
body.is-phone .defrag-pct { font-size: 14px; }