/* ══════════════════════════════════════════════════════════════════
   SHEETS APP — new Sheets panel (list, desktop iframe modal, mobile view)
   Reuses --accent/--surface/--border/etc. tokens from variables.css.
   ══════════════════════════════════════════════════════════════════ */

.sa-list-wrap { padding: var(--sp-3); }
.sa-list-hd { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); flex-wrap: wrap; }

.sa-card {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-3); margin-bottom: var(--sp-2); cursor: pointer; box-shadow: var(--sh);
  transition: box-shadow .15s ease;
}
.sa-card:hover { box-shadow: var(--sh-md); }
.sa-card-title { font-weight: 600; font-size: 14px; color: var(--text); }
.sa-card-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.sa-card-actions { display: flex; gap: var(--sp-1); }
.sa-card-orphaned { border-color: var(--red); background: var(--rlt); }
.sa-icon-btn {
  background: var(--s2); border: 1px solid var(--border); border-radius: var(--r-sm);
  width: 32px; height: 32px; font-size: 14px; cursor: pointer;
}
.sa-empty { padding: 32px 16px; text-align: center; color: var(--muted); font-size: 13px; }

/* Desktop iframe modal */
.sa-modal {
  position: fixed; inset: 0; z-index: 999; background: var(--bg);
  display: flex; flex-direction: column;
}
.sa-modal-hd {
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3);
  background: var(--grad-header); color: #fff; flex-wrap: wrap;
}
.sa-modal-title { font-weight: 600; font-size: 14px; flex: 1; }
.sa-modal-status { font-size: 11px; opacity: .85; }
.sa-iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* Mobile cached view */
.sa-mob-wrap { display: flex; flex-direction: column; height: 100%; }
.sa-mob-hd {
  display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3);
  background: var(--grad-header); color: #fff; flex-wrap: wrap;
}
.sa-mob-tabs { display: flex; gap: var(--sp-1); padding: var(--sp-2); overflow-x: auto; background: var(--s2); }
.sa-tab-pill {
  padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid var(--border);
  background: var(--surface); font-size: 12px; white-space: nowrap; cursor: pointer;
}
.sa-tab-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sa-table-scroll { overflow: auto; max-height: 60vh; border: 1px solid var(--border); border-radius: var(--r-sm); margin: var(--sp-2); }
.sa-table { border-collapse: collapse; font-size: 12px; width: 100%; }
.sa-table td { border: 1px solid var(--border); padding: 4px 8px; white-space: nowrap; }
.sa-mob-stamp { text-align: center; font-size: 11px; color: var(--muted); padding: var(--sp-2); }