/* --- Check-in workspace (task #6) --- */
.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.checkin-class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.checkin-class-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-soft);
  text-decoration: none;
  color: inherit;
}
.checkin-class-card { position: relative; }
.checkin-class-card:hover { border-color: var(--red); }
.checkin-class-branch {
  justify-self: start;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--red) 9%, var(--card));
  color: var(--red);
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: .02em;
}
.checkin-class-card strong { font-size: 15px; color: var(--navy); }
.checkin-class-time { font-size: var(--text-body); font-weight: 700; color: var(--navy); }
.checkin-class-coach { font-size: var(--text-body-sm); color: var(--muted); }
.checkin-class-count { font-size: var(--text-body-sm); color: var(--muted); }
.checkin-class-open { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--red); font-size: var(--text-caption); font-weight: 800; }
.checkin-summary { color: var(--muted); font-size: var(--text-body); margin-top: 2px; }
.checkin-walkin { display: flex; gap: 8px; margin: 10px 0; }
.checkin-walkin input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.checkin-roster { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; }
.checkin-roster[data-busy] { opacity: 0.6; pointer-events: none; }
.checkin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}
.checkin-row.status-checked_in { border-color: var(--green); background: #f2fbf5; }
.checkin-row.status-no_show { border-color: var(--muted); background: var(--surface-soft); }
.checkin-row.status-late_cancel { border-color: #e8bd6e; background: #fff9ed; }
.checkin-row-main { display: grid; gap: 2px; min-width: 0; }
.checkin-row-identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.checkin-row-identity strong { min-width: 0; color: var(--navy); font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.checkin-affiliations { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 4px; }
.checkin-affiliation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(26, 26, 78, .12);
  border-radius: 999px;
  background: rgba(26, 26, 78, .06);
  color: var(--navy);
}
.checkin-affiliation svg { flex: 0 0 auto; }
.checkin-affiliation.privilee { background: #f1eafe; color: #66419a; border-color: #d9c9ef; }
.checkin-affiliation.viya { background: #e8f7f3; color: #19705d; border-color: #bee5db; }
.checkin-affiliation.emirates_nbd { background: #fff2df; color: #945608; border-color: #efd2a5; }
.checkin-affiliation.emirates_airline { background: #fdebed; color: #a12637; border-color: #efc3ca; }
.checkin-member-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(26, 26, 78, .12);
  border-radius: 999px;
}
.checkin-member-marker svg { flex: 0 0 auto; }
.checkin-member-marker.birthday_week { background: #fceaf4; color: #a12b68; border-color: #ecc0d7; }
.checkin-member-marker.full_member,
.checkin-member-marker[class*="full_member_"] { width: auto; min-width: 34px; padding: 0 6px; gap: 3px; color: var(--navy); }
.checkin-member-marker.full_member,
.checkin-member-marker.full_member_1_month { background: #eef0f7; border-color: #cfd3e2; }
.checkin-member-marker.full_member_3_month { background: #e8f7f3; color: #19705d; border-color: #bee5db; }
.checkin-member-marker.full_member_6_month { background: #e9f1fb; color: #285f99; border-color: #bfd2e8; }
.checkin-member-marker.full_member_annual { background: #fff4cf; color: #805500; border-color: #e8cd7f; }
.checkin-member-marker small { font-size: var(--text-micro); font-weight: 800; line-height: 1; }
.checkin-member-marker.class_pack { background: #e9f1fb; color: #285f99; border-color: #bfd2e8; }
.checkin-member-marker.first_time_joiner { background: #fff4cf; color: #805500; border-color: #e8cd7f; }
.checkin-member-marker.trial_member { background: #e7f6fb; color: #0a6375; border-color: #addae5; }
.checkin-member-marker.unpaid { background: #fdebed; color: #a12637; border-color: #efc3ca; }
.checkin-member-key { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.checkin-member-key span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: var(--text-caption);
  font-weight: 700;
}
.checkin-member-key .legend-heading { color: var(--navy); text-transform: uppercase; letter-spacing: .04em; font-size: var(--text-micro); }
.checkin-member-key .status-heading { margin-left: 4px; }
.checkin-member-key .birthday-week { color: #a12b68; }
.checkin-member-key .privilee { color: #66419a; }
.checkin-member-key .viya { color: #19705d; }
.checkin-member-key .emirates_nbd { color: #945608; }
.checkin-member-key .emirates_airline { color: #a12637; }
.checkin-member-key .full-member { color: var(--navy); }
.checkin-member-key .term-3-month { color: #19705d; }
.checkin-member-key .term-6-month { color: #285f99; }
.checkin-member-key .term-annual { color: #805500; }
.checkin-member-key .class-pack { color: #285f99; }
.checkin-member-key .first-time { color: #805500; }
.checkin-member-key .trial { color: #0a6375; }
.checkin-row-meta { font-size: var(--text-body-sm); color: var(--muted); }
.checkin-row-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
  width: 100%;
  padding-top: 9px;
  border-top: 1px solid var(--border);
}
.checkin-row-actions button,
.checkin-row-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: var(--control-touch);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--card);
  color: var(--navy);
  font-size: var(--text-body-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.checkin-row-actions button:hover:not(:disabled),
.checkin-row-actions a:hover { border-color: var(--navy); }
.checkin-row-actions button:disabled { opacity: 0.45; cursor: default; }
.checkin-row-actions button.danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); }
.checkin-row-actions button.late-cancel:hover:not(:disabled) { border-color: #b77816; color: #8a5b12; }

/* ---- Owner portfolio (multi-branch) -------------------------------------- */
.portfolio { display: grid; gap: 18px; }
.portfolio-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.portfolio-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: var(--text-caption); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.portfolio-head h2 { margin: 6px 0 4px; font-size: 22px; color: var(--ink); }
.portfolio-sub { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: var(--text-body-sm); }

.portfolio-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.portfolio-kpi { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--shadow); }
.portfolio-kpi-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: var(--text-caption); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.portfolio-kpi strong { font: 900 24px/1 var(--font-display); color: var(--navy); letter-spacing: -0.02em; }

.portfolio-chip { display: inline-flex; align-items: center; gap: 3px; width: fit-content; padding: 3px 8px; border-radius: 999px; font-size: var(--text-caption); font-weight: 800; }
.portfolio-chip.up { background: rgba(75, 125, 91, 0.14); color: var(--green); }
.portfolio-chip.down { background: rgba(208, 38, 58, 0.12); color: var(--danger); }
.portfolio-chip.neutral { background: rgba(111, 116, 137, 0.12); color: var(--muted); }

.portfolio-leaders { display: grid; gap: 4px; }
.portfolio-leaders p { margin: 0; color: var(--ink); font-size: var(--text-body); }
.portfolio-leaders strong { color: var(--navy); }

.portfolio-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow); }
.portfolio-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.portfolio-table thead th { position: sticky; top: 0; padding: 12px 14px; text-align: left; font-size: var(--text-micro); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); background: var(--topbar); border-bottom: 1px solid var(--border); }
.portfolio-table th.num, .portfolio-table td.num { text-align: right; }
.portfolio-table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: var(--text-body); color: var(--ink); vertical-align: middle; }
.portfolio-table tbody tr:last-child td { border-bottom: none; }
.portfolio-table tbody tr:hover { background: rgba(26, 26, 78, 0.03); }
.portfolio-rank { color: var(--muted); font-weight: 800; }
.portfolio-branch-name { display: block; font-weight: 700; }
.portfolio-branch-code { display: block; color: var(--muted); font-size: var(--text-caption); }
.portfolio-share { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; min-width: 120px; }
.portfolio-share-bar { display: inline-block; height: 6px; border-radius: 999px; background: var(--navy); min-width: 2px; }
.portfolio-share-text { min-width: 42px; text-align: right; font-variant-numeric: tabular-nums; }
.portfolio-table td.num .portfolio-chip { margin-left: auto; }
.portfolio-empty { margin: 0; padding: 20px; text-align: center; color: var(--muted); font-size: var(--text-body); border: 1px dashed var(--border); border-radius: 14px; }