/* ============================================================
   FILES APP — Document file cabinet. Warm amber explorer.
   Character: Organised librarian. Every file has a home.
   No emojis — SVG icons only. Subtle hover, no scaling.
   ============================================================ */

.window.app-files .window-body {
  overflow: hidden;
  height: 100%;
}

.window.app-files .app-layout {
  height: 100%;
  display: grid;
  grid-template-columns: 220px 1fr 190px;
}

/* Sidebar */
.window.app-files .sidebar {
  background: linear-gradient(180deg, #fff9e2 0%, #f7eecc 100%);
  border-right: 1px solid rgba(180,130,40,0.28);
  padding: 10px 8px;
  overflow: auto;
}

.window.app-files .pane-title {
  color: #8a5c10;
  border-bottom-color: rgba(180,130,40,0.24);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
}

.window.app-files .file-tree { gap: 1px; }

/* File list buttons — SVG icon via background */
.window.app-files .list-button {
  color: #5a3a10;
  font-size: 0.78rem;
  border-radius: 5px;
  padding: 6px 8px 6px 28px;
  position: relative;
  display: block;
}

/* Generic file icon (SVG data URI) */
.window.app-files .list-button::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07030' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.80;
}

/* .md note icon */
.window.app-files .list-button[data-file*=".md"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07030' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3Cpolyline points='10 9 9 9 8 9'/%3E%3C/svg%3E");
}

/* .json data icon */
.window.app-files .list-button[data-file*=".json"]::before,
.window.app-files .list-button[data-file*=".yml"]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07030' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3C/svg%3E");
}

/* Root folder button */
.window.app-files .list-button:first-child::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a07030' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.window.app-files .list-button:hover {
  background: rgba(220,180,60,0.16);
  border-color: rgba(180,130,40,0.26);
  color: #3a1e00;
}

.window.app-files .list-button.active {
  background: linear-gradient(180deg, #ffe280, #ffd040);
  border-color: rgba(170,110,20,0.48);
  color: #2a1200;
}

/* Content pane */
.window.app-files .content-pane {
  background: linear-gradient(180deg, #fffef8 0%, #faf5e4 100%);
  color: #2e1e04;
  padding: 20px 24px;
  overflow: auto;
}

.window.app-files .doc h2 {
  color: #3a2000;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  margin-bottom: 6px;
  border-bottom: 2px solid rgba(180,130,40,0.20);
  padding-bottom: 8px;
}

.window.app-files .doc p { color: #6a4820; line-height: 1.7; }

.window.app-files .manifest {
  background: rgba(240,220,160,0.22);
  border: 1px solid rgba(160,120,40,0.26);
  border-radius: 6px;
  padding: 14px 16px;
  font-size: 0.80rem;
  color: #3a2800;
  line-height: 1.8;
  margin-top: 14px;
}

/* Inspector */
.window.app-files .inspector {
  background: linear-gradient(180deg, #fff8dc 0%, #f5e8b8 100%);
  border-left: 1px solid rgba(180,130,40,0.22);
  padding: 12px;
  overflow: auto;
}

.window.app-files .inspector .pane-title { color: #8a5c10; }
.window.app-files .inspector p { font-size: 0.80rem; color: #5a3a10; line-height: 1.6; }
.window.app-files .inspector strong {
  color: #3a1e00;
  display: block;
  margin-bottom: 2px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
}
.window.app-files .inspector code {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: #7a4810;
  word-break: break-all;
}