/* ============================================================
   Ubuntu 26.04 — shared app chrome + responsive
   ============================================================ */

.app-frame { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--headerbar-bg);
  border-bottom: 1px solid var(--headerbar-border);
  flex: none;
}
.app-toolbar .btn { min-height: 32px; }

/* view switcher (list/grid) */
.view-switch { display: inline-flex; background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius-s); padding: 2px; }
.view-switch button {
  width: 28px; height: 26px; border: none; background: transparent; border-radius: 5px;
  color: var(--fg-dim); display: flex; align-items: center; justify-content: center; cursor: default;
}
.view-switch button:hover { color: var(--window-fg); }
.view-switch button.active { background: var(--window-bg); color: var(--accent); box-shadow: var(--shadow-1); }
.view-switch svg { width: 16px; height: 16px; }

/* breadcrumb path bar */
.pathbar { display: flex; align-items: center; gap: 2px; padding: 0 4px; min-width: 0; overflow: hidden; }
.pathbar .crumb {
  padding: 6px 8px; border-radius: 6px; font-size: var(--fs-s);
  color: var(--window-fg); cursor: default; white-space: nowrap;
}
.pathbar .crumb:hover { background: var(--row-hover); }
.pathbar .crumb:last-child { font-weight: 500; }
.pathbar .crumb-sep { color: var(--fg-faint); font-size: 10px; }

/* table/grid file rows shared by Files */
.file-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  border-radius: var(--radius-s);
  cursor: default;
}
.file-row:hover { background: var(--row-hover); }
.file-row.selected { background: var(--row-selected); }
.file-row .fr-icon { width: 24px; height: 24px; flex: none; position: relative; }
.file-row .fr-icon img { width: 100%; height: 100%; }
.file-row .fr-icon svg { width: 100%; height: 100%; }
.file-row .fr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .fr-meta { color: var(--fg-dim); font-size: var(--fs-xs); width: 90px; text-align: right; flex: none; }
.file-row .fr-date { color: var(--fg-dim); font-size: var(--fs-xs); width: 130px; flex: none; }

.file-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 6px;
  padding: 10px;
}
.file-tile {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 8px;
  border-radius: var(--radius-s);
  cursor: default;
  text-align: center;
}
.file-tile:hover { background: var(--row-hover); }
.file-tile.selected { background: var(--row-selected); }
.file-tile .ft-icon { width: 56px; height: 56px; position: relative; }
.file-tile .ft-icon img, .file-tile .ft-icon svg { width: 100%; height: 100%; }
.file-tile .ft-name { font-size: var(--fs-xs); max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-tile .ft-meta { font-size: var(--fs-xs); color: var(--fg-dim); }

/* thumbnail generation state */
.thumb-loading { opacity: .4; animation: pulse-soft 1.2s ease-in-out infinite; }
@keyframes pulse-soft { 0%,100% { opacity: .4; } 50% { opacity: .8; } }

/* responsive */
@media (max-width: 900px) {
  :root { --dock-icon: 40px; --dock-width: 56px; }
  #panel { font-size: var(--fs-s); }
  .p-pill { padding: 0 6px; }
  #pClock .p-date { display: none; }
  .search-entry { width: 90vw; }
  .notif-banner { width: min(372px, 92vw); right: 4vw; }
  .app-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
}
@media (max-height: 640px) {
  #loginScreen .login-time { font-size: 52px; }
  #lockScreen .lock-time { font-size: 60px; }
}
@media (max-width: 560px) {
  :root { --panel-height: 34px; }
  .qs-popover { width: min(380px, 96vw); }
  .cal-popover { width: min(344px, 96vw); }
  #dock-wrap { display: none; }
}