/* ==========================================================================
   Shamwari Guide PWA - css/admin.css
   Styles for js/features/admin.js only (dashboard, guides, experiences,
   time slots, reports, activity). Uses design tokens from css/app.css
   (:root variables) - never redefines them. Mobile-first, 360px baseline.
   ========================================================================== */

/* ---------- KPI tiles (dashboard) - fixed 2-up on phones ----------------- */
.admin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sg-s-sm);
}
@media (min-width: 560px) {
  .admin-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
.admin-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sg-s-md);
  border-radius: var(--sg-r-md);
  border: 1px solid var(--sg-card-border);
  background: var(--sg-surface);
  text-align: left;
  min-width: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.admin-kpi:active { background: var(--sg-surface-variant); }
.admin-kpi__label {
  font-size: 12px;
  color: var(--sg-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.admin-kpi__label span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-kpi__value { font-size: 26px; font-weight: 700; line-height: 32px; color: var(--sg-text); }
.admin-kpi__delta { font-size: 12px; font-weight: 600; }
.admin-kpi__delta--up { color: var(--sg-success); }
.admin-kpi__delta--down { color: var(--sg-danger); }
.admin-kpi__delta--flat { color: var(--sg-muted); }

/* ---------- Quick actions (dashboard) ------------------------------------ */
.admin-quickactions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sg-s-sm);
}
.admin-quickaction {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-md);
  border-radius: var(--sg-r-md);
  border: 1px solid var(--sg-card-border);
  background: var(--sg-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--sg-text);
  min-height: 44px;
  cursor: pointer;
  text-align: left;
}
.admin-quickaction:active { background: var(--sg-surface-variant); }
.admin-quickaction span:first-child { color: var(--sg-primary); flex: 0 0 auto; }

/* ---------- Filters row (guides / experiences lists) ---------------------- */
.admin-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-sm);
}
.admin-filters__row {
  display: flex;
  gap: var(--sg-s-sm);
  flex-wrap: wrap;
}
.admin-filters__row > * { flex: 1 1 140px; min-width: 0; }

/* ---------- Chip picker (assigned experiences multi-select) -------------- */
.admin-chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sg-s-sm);
}

/* ---------- Time slots -------------------------------------------------- */
.admin-slot-group {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-xs);
}
.admin-slot-group__date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--sg-muted);
  text-transform: uppercase;
  margin-top: var(--sg-s-sm);
}
.admin-slot-row {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-sm) 0;
  border-bottom: 1px solid var(--sg-border);
  min-width: 0;
}
.admin-slot-row:last-child { border-bottom: 0; }
.admin-slot-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-slot-row__time { font-size: 15px; font-weight: 600; }
.admin-slot-row__meta { font-size: 12px; color: var(--sg-muted); }
.admin-slot-row__actions { flex: 0 0 auto; display: flex; gap: 4px; }

/* ---------- Bar list (reports breakdowns, no chart library) -------------- */
.admin-barlist {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-sm);
}
.admin-barlist__row {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  min-width: 0;
}
.admin-barlist__label {
  flex: 0 0 40%;
  max-width: 40%;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-barlist__track {
  flex: 1 1 auto;
  height: 10px;
  border-radius: var(--sg-r-pill);
  background: var(--sg-surface-variant);
  overflow: hidden;
  min-width: 24px;
}
.admin-barlist__fill {
  height: 100%;
  border-radius: var(--sg-r-pill);
  background: var(--sg-primary);
}
.admin-barlist__value {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  min-width: 24px;
  text-align: right;
}

/* ---------- Reports summary grid ----------------------------------------- */
.admin-report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sg-s-sm);
}
@media (min-width: 560px) {
  .admin-report-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- Guide activity table (reports) -------------------------------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--sg-border);
  overflow-wrap: anywhere;
}
.admin-table th { color: var(--sg-muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
.admin-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(var(--sg-gutter) * -1); padding: 0 var(--sg-gutter); }

/* ---------- Activity log --------------------------------------------------- */
.admin-activity-row { display: flex; gap: var(--sg-s-sm); align-items: flex-start; padding: var(--sg-s-sm) 0; border-bottom: 1px solid var(--sg-border); }
.admin-activity-row:last-child { border-bottom: 0; }
.admin-activity-row__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sg-surface-variant);
  color: var(--sg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.admin-activity-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.admin-activity-row__msg { font-size: 14px; overflow-wrap: anywhere; }
.admin-activity-row__meta { font-size: 12px; color: var(--sg-muted); }

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sg-s-sm);
  padding-top: var(--sg-s-sm);
}
.admin-pagination__info { font-size: 12px; color: var(--sg-muted); flex: 1 1 auto; min-width: 0; }

/* ---------- Cutoff chip row (slot creation) -------------------------------- */
.admin-cutoff-row { display: flex; flex-wrap: wrap; gap: var(--sg-s-xs); }

/* ---------- misc ------------------------------------------------------------ */
.admin-section-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--sg-muted);
}
.admin-inline-btn {
  background: transparent;
  border: 0;
  color: var(--sg-primary);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 0;
}
.admin-user-summary { display: flex; align-items: center; gap: var(--sg-s-md); }

/* ---------- App settings editor (Admin AppSettings, DESIGN §2.8) ---------- */
.settings-row {
  padding: var(--sg-s-md) 0;
  border-bottom: 1px solid var(--sg-border);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row__changed {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  margin-bottom: 4px;
}
.settings-multiselect { display: flex; flex-direction: column; gap: var(--sg-s-xs); }
.settings-multiselect__row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 4px var(--sg-s-sm);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-sm);
  background: var(--sg-surface);
}
.settings-multiselect__label { flex: 1 1 auto; font-size: 14px; }
.settings-multiselect .sg-iconbtn { min-width: 36px; min-height: 36px; }

/* ---------- Reference lists (AdminLists, DESIGN §5.1/§5.2) ---------------- */
.reflist-row {
  display: flex;
  gap: var(--sg-s-sm);
  align-items: flex-start;
  padding: var(--sg-s-sm);
}
.reflist-row__order {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 0 0 auto;
}
.reflist-row__body { flex: 1 1 auto; min-width: 0; }
.reflist-row__label {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------- BO-001 recurring schedules ----------------------------------- */
.admin-series-row {
  display: flex;
  flex-direction: column;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-md);
  border: 1px solid var(--sg-card-border);
  border-radius: var(--sg-r-md);
  background: var(--sg-surface);
  min-width: 0;
}
.admin-series-row__text { min-width: 0; }
.admin-series-row__actions { display: flex; flex-wrap: wrap; gap: var(--sg-s-sm); }

.admin-day-row { display: flex; flex-wrap: wrap; gap: var(--sg-s-xs); }
.admin-day {
  flex: 1 1 0;
  min-width: 36px;
  min-height: 48px;
  padding: 0 var(--sg-s-xs);
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-sm);
  background: var(--sg-surface);
  color: var(--sg-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.admin-day.is-on {
  background: var(--sg-primary);
  color: var(--sg-on-primary);
  border-color: var(--sg-primary);
}

.admin-preview-strip {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  padding: var(--sg-s-md);
  border-radius: var(--sg-r-sm);
  background: var(--sg-surface-variant);
  font-size: 13px;
  line-height: 18px;
  overflow-wrap: anywhere;
}
.admin-preview-strip__error { color: var(--sg-danger); font-weight: 600; }

.admin-booked-panel {
  margin-top: var(--sg-s-md);
  padding: var(--sg-s-md);
  border-radius: var(--sg-r-sm);
  border-left: 4px solid var(--sg-warning);
  background: var(--sg-warning-container);
  color: var(--sg-on-warning-container);
}

/* ==========================================================================
   Settings redesign (SETTINGS-REDESIGN.md §3 / §4.4 / §4.5)
   ========================================================================== */

/* ---------- Me screen ---------------------------------------------------- */
.sg-me__header {
  display: flex;
  align-items: center;
  gap: var(--sg-s-md);
  padding: var(--sg-s-lg) var(--sg-s-lg) var(--sg-s-sm);
  min-width: 0;
}
.sg-me__signout { margin-top: calc(-1 * var(--sg-s-xs)); }

/* ---------- Reserve settings hub + section list -------------------------- */
.settings-summaries { display: flex; flex-direction: column; }
.settings-summary {
  padding: var(--sg-s-md) var(--sg-s-lg);
  border-bottom: 1px solid var(--sg-border);
  min-width: 0;
}
.settings-summary__title { font-size: 15px; font-weight: 600; }
.settings-summary__text {
  font-size: 14px;
  color: var(--sg-muted);
  overflow-wrap: anywhere;
}

.settings-readonly {
  padding: var(--sg-s-sm) var(--sg-s-md);
  border-radius: var(--sg-r-sm);
  background: var(--sg-info-container);
  color: var(--sg-on-info-container);
  font-size: 14px;
}

/* ---------- Section page rows ------------------------------------------- */
.settings-row { position: relative; min-width: 0; }
.settings-row.is-dirty {
  box-shadow: inset 3px 0 0 var(--sg-primary);
  padding-left: var(--sg-s-md);
}
.settings-row.has-error { box-shadow: inset 3px 0 0 var(--sg-danger); padding-left: var(--sg-s-md); }
.settings-row.is-focus { background: var(--sg-info-container); border-radius: var(--sg-r-sm); }
.settings-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--sg-s-md);
  margin-top: 4px;
  font-size: 13px;
  color: var(--sg-muted);
}
.settings-link {
  border: 0;
  padding: 0 2px;
  min-height: 32px;
  background: transparent;
  color: var(--sg-primary);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.settings-link:disabled { opacity: 0.5; cursor: default; }

.settings-num { display: flex; align-items: center; gap: var(--sg-s-sm); min-width: 0; }
.settings-num .sg-input { flex: 1 1 auto; min-width: 0; max-width: 160px; }
.settings-num__unit { flex: 0 1 auto; color: var(--sg-muted); font-size: 15px; overflow-wrap: anywhere; }

.settings-compound { display: flex; align-items: center; gap: var(--sg-s-sm); min-width: 0; }
.settings-compound__num { flex: 0 1 96px; min-width: 64px; }
.settings-compound__unit { flex: 1 1 auto; min-width: 0; max-width: 180px; }

.settings-sentence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-s-sm);
  line-height: 1.4;
  min-width: 0;
}
.settings-sentence__num { width: 76px; flex: 0 0 auto; }
.settings-sentence__time { width: 124px; flex: 0 0 auto; }

.settings-contact.is-disabled { opacity: 0.55; pointer-events: none; }
.settings-checks { display: flex; flex-direction: column; }

.settings-advanced-toggle {
  display: flex;
  align-items: center;
  gap: var(--sg-s-sm);
  width: 100%;
  min-height: 48px;
  padding: var(--sg-s-sm) var(--sg-s-md);
  border: 1px dashed var(--sg-border);
  border-radius: var(--sg-r-md, 12px);
  background: transparent;
  color: var(--sg-text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.settings-advanced-toggle__text { display: flex; flex-direction: column; min-width: 0; }
.settings-advanced-toggle__hint { font-weight: 400; font-size: 13px; color: var(--sg-muted); }

/* ---------- Sticky Save bar (§3.1) ---------------------------------------
   Sticky inside the scrolling .sg-main, so it rides above the bottom of the
   screen while there is more to scroll and sits in normal flow below the
   last row at the end - it can never cover that row. */
.settings-savebar {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sg-s-xs) var(--sg-s-sm);
  margin: 0 calc(-1 * var(--sg-gutter));
  padding: var(--sg-s-sm) var(--sg-gutter) calc(var(--sg-s-sm) + var(--sg-safe-bottom));
  border-top: 1px solid var(--sg-border);
  background: var(--sg-surface);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
}
.settings-savebar__text { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 15px; }
.settings-savebar__text.is-error { color: var(--sg-danger); }
.settings-savebar__actions { display: flex; gap: var(--sg-s-xs); margin-left: auto; flex: 0 0 auto; }
/* The outbox pill floats clear of the bar instead of over it. */
.sg-app:has(.settings-savebar) .sg-outbox-pill {
  bottom: calc(var(--sg-safe-bottom) + 132px);
}

/* ---------- Roles & access (§2.3) -------------------------------------- */
.roles-perm { display: flex; align-items: center; gap: var(--sg-s-sm); min-width: 0; }
.roles-perm .sg-switchrow { flex: 1 1 auto; min-width: 0; }
.roles-chip {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--sg-border);
  border-radius: var(--sg-r-pill);
  background: transparent;
  color: var(--sg-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.roles-chip--added { color: var(--sg-success); border-color: var(--sg-success); }
.roles-chip--removed { color: var(--sg-warning); border-color: var(--sg-warning); cursor: pointer; min-height: 32px; }