/* mc.css – Minimal UI for "mc" overlay (double-panel file manager)
   Works with theme variables already present in the terminal:
   --bg-color, --text-color, --glow-color, --secondary-text-color, --error-color
*/

:root {
  --mc-bg: rgba(0, 0, 0, 0.85);
  --mc-surface: rgba(10, 10, 10, 0.9);
  --mc-border: rgba(255, 255, 255, 0.12);
  --mc-accent: var(--glow-color, #33ff33);
  --mc-text: var(--text-color, #e6ffe6);
  --mc-text-dim: color-mix(in srgb, var(--mc-text) 65%, transparent);
  --mc-warning: var(--error-color, #ff5c7a);
}

.mc-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  background: var(--mc-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Fira Mono", monospace;
  color: var(--mc-text);
  backdrop-filter: blur(2px);
}

.mc-window {
  margin: 3vh auto 0;
  width: min(1200px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  background: var(--mc-surface);
  box-shadow: 0 10px 30px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.05) inset;
  overflow: hidden;
}

.mc-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-bottom: 1px solid var(--mc-border);
  text-shadow: 0 0 6px color-mix(in srgb, var(--mc-accent) 55%, transparent);
}
.mc-titlebar .title {
  font-weight: 700;
  letter-spacing: .3px;
}
.mc-titlebar .path {
  opacity: .85;
  font-size: 0.95rem;
}

.mc-panels {
  display: grid;
  grid-template-columns: 1fr 1fr 360px; /* left, right, preview */
  gap: 0;
  min-height: 52vh;
}

.mc-panel {
  display: grid;
  grid-template-rows: auto 1fr;
  border-right: 1px solid var(--mc-border);
  contain: layout;
}
.mc-panel:last-child { border-right: none; }

.mc-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font-size: .9rem;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px dashed var(--mc-border);
}
.mc-panel-header .badge {
  padding: 2px 6px;
  border: 1px solid var(--mc-border);
  border-radius: 999px;
  font-size: .75rem;
  opacity: .85;
}

.mc-panel-body {
  overflow: auto;
  line-height: 1.45;
  padding: 4px 0;
  scrollbar-gutter: stable both-edges;
}
.mc-panel-body::-webkit-scrollbar { width: 10px; height: 10px; }
.mc-panel-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 6px;
}
.mc-panel-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

.mc-item {
  display: grid;
  grid-template-columns: 1.4rem minmax(0,1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 2px 10px;
  white-space: nowrap;
}
.mc-item .icon { opacity: .8; }
.mc-item .name { overflow: hidden; text-overflow: ellipsis; }
.mc-item .meta { opacity: .6; font-size: .85rem; }

.mc-item:hover { background: rgba(255,255,255,0.045); }
.mc-item.selected {
  background: color-mix(in srgb, var(--mc-accent) 18%, transparent);
  outline: 1px solid color-mix(in srgb, var(--mc-accent) 40%, transparent);
}
.mc-item.selected .name { text-shadow: 0 0 8px color-mix(in srgb, var(--mc-accent) 45%, transparent); }

.mc-preview {
  display: grid;
  grid-template-rows: auto 1fr;
  border-left: 1px solid var(--mc-border);
}
.mc-preview .mc-panel-header { border-left: none; }
.mc-preview-body {
  padding: 8px 10px;
  overflow: auto;
  font-size: .92rem;
}
.mc-preview-body pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: .95;
}

.mc-statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border-top: 1px solid var(--mc-border);
  background: rgba(255,255,255,0.03);
  font-size: .92rem;
}
.mc-statusbar .hint { opacity: .85; }
.mc-statusbar .warning { color: var(--mc-warning); }

.mc-keybar {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0;
  border-top: 1px solid var(--mc-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.07));
}
.mc-key {
  padding: 6px 8px;
  border-right: 1px solid var(--mc-border);
  text-align: center;
  font-size: .86rem;
}
.mc-key:last-child { border-right: none; }
.mc-key kbd {
  display: inline-block;
  min-width: 1.8em;
  padding: 1px 5px;
  margin-right: 6px;
  border: 1px solid var(--mc-border);
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(0,0,0,.4) inset;
}

/* Quick search input (/) */
.mc-quicksearch {
  position: absolute;
  top: 10px;
  right: 12px;
  display: none;
}
.mc-quicksearch.active { display: block; }
.mc-quicksearch input {
  background: rgba(0,0,0,.6);
  color: var(--mc-text);
  border: 1px solid var(--mc-border);
  border-radius: 8px;
  padding: 6px 10px;
  font: inherit;
  min-width: 220px;
  outline: none;
  box-shadow: 0 0 0 2px transparent;
}
.mc-quicksearch input:focus {
  border-color: color-mix(in srgb, var(--mc-accent) 60%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc-accent) 25%, transparent);
}

/* Focus ring for a11y */
.mc-panel:focus-within .mc-panel-body {
  outline: 2px dashed color-mix(in srgb, var(--mc-accent) 45%, transparent);
  outline-offset: -2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mc-overlay, .mc-window, .mc-item.selected { transition: none !important; }
}

/* Small screens – turn preview off and stack */
@media (max-width: 980px) {
  .mc-panels { grid-template-columns: 1fr 1fr; }
  .mc-preview { display: none; }
}
#fm-overlay { position:fixed; inset:0; z-index:9999; }
#fm-overlay .fm-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
#fm-overlay .fm-window{position:absolute;inset:5% 7%;display:flex;flex-direction:column;background:rgba(0,0,0,.85);border:1px solid var(--secondary-text-color);box-shadow:0 0 20px rgba(0,0,0,.5)}
.fm-panels{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.fm-pane{border:1px solid var(--secondary-text-color);padding:6px;outline:none}
.fm-path{opacity:.8;margin-bottom:4px}
.fm-list{list-style:none;margin:0;padding:0;max-height:45vh;overflow:auto}
.fm-item{padding:2px 4px;cursor:pointer}
.fm-item.selected{background:rgba(255,255,255,.08)}
.fm-preview{margin-top:6px;max-height:28vh;overflow:auto;border-top:1px dashed var(--secondary-text-color);padding-top:6px}
.fm-status{padding:6px 8px;border-top:1px solid var(--secondary-text-color);opacity:.9}
@media (max-width: 800px){
  .fm-panels{grid-template-columns:1fr}
}