/* ============================================================
   TotumTeams Portal — Design C ("Focus Mode")
   Loaded globally via App.razor; portal-specific classes only.
   MudBlazor is kept for dialogs, snackbars, pickers — this CSS
   overrides chrome and layout, not the component library.
   ============================================================ */

/* ── TOKENS ──────────────────────────────────────────────────── */
:root {
  --blue:   #001158;  /* Nassau Blue */
  --orange: #E1501E;  /* Dutch Orange */
  --white:  #FFFFFF;
  --grey:   #E6E6E6;
  --bg:     #F7F7F5;
  --text:   #1a1a2e;
  --muted:  #5a5a72;

  --status-confirmed: #43a047;
  --status-tentative: #E1501E;
  --status-proposed:  #90a4ae;
  --status-cancelled: #e53935;
  --status-completed: #1976d2;

  --font:   'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 10px;
}

/* ── PORTAL SHELL ────────────────────────────────────────────── */
/* Wraps the entire portal layout — sets background and base font */
.portal-shell {
  min-height: 100vh;
  background: var(--bg);
  font-family: var(--font);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
}

/* ── TOP BAR ─────────────────────────────────────────────────── */
.topbar {
  background: var(--blue);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.topbar-logo a { text-decoration: none; }
.topbar-logo .logo-totum {
  color: #fff;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.topbar-logo .logo-teams {
  color: var(--orange);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* ── TOPBAR NAV LINKS ─────────────────────────────────────────── */
.topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 28px;
  flex: 1;
}

.topbar-nav-link {
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.topbar-nav-link:hover  { background: rgba(255,255,255,0.10); color: #fff; }
.topbar-nav-link.active { background: rgba(255,255,255,0.18); color: #fff; font-weight: 600; }

/* ── TOPBAR RIGHT ─────────────────────────────────────────────── */
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Org switcher — dropdown button */
.topbar-org-btn {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.85);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.90rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
}
.topbar-org-btn:hover { background: rgba(255,255,255,0.18); }
.topbar-org-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 120px;
}

/* Org label — single org, non-interactive link to org settings */
.topbar-org-label {
  color: rgba(255,255,255,0.75);
  font-size: 0.90rem;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.topbar-org-label:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* Language button */
.topbar-lang-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.20);
  color: rgba(255,255,255,0.75);
  border-radius: 6px;
  padding: 5px 11px;
  font-size: 0.90rem;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.15s, color 0.15s;
}
.topbar-lang-btn:hover { background: rgba(255,255,255,0.10); color: #fff; }

/* Username + avatar */
.topbar-username {
  color: rgba(255,255,255,0.85);
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.80rem;
  font-weight: 700;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}

/* ── GROUP HEADER ─────────────────────────────────────────────── */
/* Shown on all group-scoped pages (/portal/groups/{id}/...) */
/* Two-row: top row = breadcrumb/name, bottom row = underline tabs */
.group-header {
  background: var(--white);
  border-bottom: 2px solid var(--grey);
  position: sticky;
  top: 60px;
  z-index: 99;
  padding: 0 28px;
}

.group-header-row1 {
  display: flex;
  align-items: center;
  height: 44px;
  gap: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.back-groups {
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: color 0.15s;
}
.back-groups:hover { color: var(--blue); }

.group-name {
  font-size: 1.0rem;
  font-weight: 800;
  color: var(--blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Underline-style tab strip */
.group-tabs {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.group-tabs::-webkit-scrollbar { display: none; }

.group-tab {
  padding: 12px 18px;
  border: none;
  background: transparent;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.12s, border-color 0.12s;
}
.group-tab:hover  { color: var(--text); border-bottom-color: var(--grey); }
.group-tab.active { color: var(--blue); border-bottom-color: var(--orange); font-weight: 700; }

/* ── CONTENT AREA ─────────────────────────────────────────────── */
.content-area {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 28px;
}

/* Wider variant for pages that genuinely need more space (e.g. layout editor) */
.content-area--wide {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 28px;
}

/* ── PAGE HEADER ROW ──────────────────────────────────────────── */
/* Title + primary action button in a row above content */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 16px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text);
}

/* ── VIEW SWITCHER ────────────────────────────────────────────── */
.view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.view-switcher {
  display: flex;
  border: 1.5px solid var(--grey);
  border-radius: 8px;
  overflow: hidden;
  background: var(--white);
}
.vsw-btn {
  padding: 8px 20px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--muted);
  font-family: var(--font);
  transition: background 0.12s, color 0.12s;
}
.vsw-btn.active { background: var(--blue); color: #fff; }

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--orange);
  color: #fff;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: #c94317; transform: translateY(-1px); color: #fff; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--white);
  color: var(--text);
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.88rem;
  border: 1.5px solid var(--grey);
  cursor: pointer;
  font-family: var(--font);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.btn-secondary:hover { border-color: var(--muted); color: var(--muted); }

.action-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid var(--grey);
  background: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--muted);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  text-decoration: none;
}
.action-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.action-btn.layout { color: var(--orange); border-color: rgba(225,80,30,0.25); }
.action-btn.layout:hover { background: var(--orange); color: #fff; border-color: var(--orange); }

/* ── FILTER ROW ───────────────────────────────────────────────── */
.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-pill {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--grey);
  background: var(--white);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.filter-pill:hover { border-color: var(--blue); color: var(--blue); }
.filter-pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1.5px solid var(--grey);
  border-radius: 8px;
  padding: 6px 12px;
  transition: border-color 0.15s;
}
.search-box:focus-within { border-color: var(--blue); }
.search-box input {
  border: none;
  outline: none;
  font-size: 0.83rem;
  font-family: var(--font);
  color: var(--text);
  background: transparent;
  width: 180px;
}
.search-box input::placeholder { color: var(--muted); }
.search-icon { color: var(--muted); font-size: 0.85rem; }

/* ── EVENT CARDS (row-card list) ──────────────────────────────── */
.event-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-card {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid #eaeae8;
  border-left: 4px solid #ccc;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  gap: 16px;
  transition: box-shadow 0.15s, transform 0.1s;
}
.event-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.event-card.confirmed { border-left-color: var(--status-confirmed); }
.event-card.tentative { border-left-color: var(--status-tentative); }
.event-card.proposed  { border-left-color: var(--status-proposed); }
.event-card.cancelled { border-left-color: var(--status-cancelled); }
.event-card.completed { border-left-color: var(--status-completed); }
/* postponed maps to tentative visually */
.event-card.postponed { border-left-color: var(--status-tentative); }

.event-card-main {
  flex: 1;
  min-width: 0;
}
.event-title-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.event-title {
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recur-badge {
  color: var(--muted);
  font-size: 0.8rem;
  flex-shrink: 0;
}
.event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.type-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(0,17,88,0.06);
  color: var(--blue);
}
.location-text {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.event-card-status {
  width: 110px;
  flex-shrink: 0;
  text-align: center;
}
.event-card-dates {
  text-align: right;
  width: 150px;
  flex-shrink: 0;
}
.date-main { font-size: 0.83rem; font-weight: 700; color: var(--text); }
.date-sub  { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }

.event-card-attendance {
  width: 120px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.event-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── STATUS BADGES ────────────────────────────────────────────── */
/* Dot-prefix pill badges. Replace MudChip for status display. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 0.71rem;
  font-weight: 700;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.badge-confirmed { background: #e8f5e9; color: #2e7d32; }
.badge-confirmed::before { background: var(--status-confirmed); }
.badge-tentative { background: #fff3e0; color: #bf360c; }
.badge-tentative::before { background: #e65100; }
.badge-proposed  { background: #f5f5f5; color: #546e7a; }
.badge-proposed::before  { background: #78909c; }
.badge-cancelled { background: #fde8e8; color: #b71c1c; }
.badge-cancelled::before { background: var(--status-cancelled); }
.badge-completed { background: #e3f2fd; color: #0d47a1; }
.badge-completed::before { background: var(--status-completed); }
/* postponed shares tentative colours */
.badge-postponed { background: #fff3e0; color: #bf360c; }
.badge-postponed::before { background: #e65100; }

/* Attendance status badges */
.badge-attending     { background: #e8f5e9; color: #2e7d32; }
.badge-attending::before { background: var(--status-confirmed); }
.badge-not-attending { background: #fde8e8; color: #b71c1c; }
.badge-not-attending::before { background: var(--status-cancelled); }
.badge-invited       { background: #e3f2fd; color: #0d47a1; }
.badge-invited::before { background: var(--status-completed); }
.badge-reinvited     { background: #f5f5f5; color: #546e7a; }
.badge-reinvited::before { background: #78909c; }

/* Invitation status badges */
.badge-accepted      { background: #e8f5e9; color: #2e7d32; }
.badge-accepted::before { background: var(--status-confirmed); }
.badge-declined      { background: #fde8e8; color: #b71c1c; }
.badge-declined::before { background: var(--status-cancelled); }
.badge-pending       { background: #fff3e0; color: #bf360c; }
.badge-pending::before { background: #e65100; }

/* Role badge */
.badge-role          { background: rgba(0,17,88,0.08); color: var(--blue); }
.badge-role::before  { background: var(--blue); }

/* Dismiss button inside a badge (replaces MudChip OnClose) */
.badge-dismiss {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.6;
  line-height: 1;
}
.badge-dismiss:hover { opacity: 1; }

/* ── TWO-COLUMN FORM ──────────────────────────────────────────── */
.form-wrap {
  background: var(--white);
  border-radius: 12px;
  border-top: 8px solid var(--orange);
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  max-width: 960px;
  overflow: clip;
}
.form-header {
  padding: 22px 28px;
  border-bottom: 1px solid var(--grey);
  display: flex;
  align-items: center;
  gap: 12px;
}
.form-header-back {
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  transition: color 0.15s;
  padding: 0;
}
.form-header-back:hover { color: var(--blue); }
.form-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}

.form-columns {
  display: flex;
}
.form-col-left {
  flex: 1;
  padding: 24px 28px;
  border-right: 1px solid var(--grey);
}
.form-col-right {
  width: 320px;
  flex-shrink: 0;
  background: #fafafa;
  padding: 24px 22px;
}

.col-eyebrow {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(225,80,30,0.15);
}
.right-section-title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.right-section-divider {
  height: 1px;
  background: var(--grey);
  margin: 18px 0 14px;
}

.form-footer {
  padding: 16px 28px;
  border-top: 1px solid var(--grey);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  bottom: 0;
  background: var(--white);
  z-index: 1;
}
.form-footer-back {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: none;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s;
}
.form-footer-back:hover { color: var(--blue); }

.form-body {
  padding: 24px 28px;
}

.invite-detail-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--grey);
}
.invite-detail-row:last-child { border-bottom: none; }
.invite-detail-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  min-width: 120px;
  flex-shrink: 0;
}
.invite-detail-value {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}

/* ── FORM FIELDS (scoped to .form-wrap) ───────────────────────── */
/* Scoped to avoid clashing with MudBlazor input styles elsewhere.
   :not() exclusions prevent these rules applying to MudBlazor's
   internal <label> and <input> elements (which it positions itself). */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 15px;
}
.form-wrap label:not(.mud-input-label):not(.mud-checkbox-label):not(.mud-switch-label):not(.mud-radio-label) {
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--text);
}
.form-wrap label .req { color: var(--orange); margin-left: 2px; }
.form-wrap input[type="text"]:not(.mud-input-slot),
.form-wrap input[type="date"]:not(.mud-input-slot),
.form-wrap input[type="time"]:not(.mud-input-slot),
.form-wrap input[type="number"]:not(.mud-input-slot),
.form-wrap input[type="email"]:not(.mud-input-slot),
.form-wrap select:not(.mud-select),
.form-wrap textarea:not(.mud-input-slot) {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid #d4d4d4;
  border-radius: 8px;
  font-size: 0.86rem;
  font-family: var(--font);
  color: var(--text);
  background: var(--white);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  box-sizing: border-box;
}
.form-wrap input:not(.mud-input-slot):focus,
.form-wrap select:not(.mud-select):focus,
.form-wrap textarea:not(.mud-input-slot):focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,17,88,0.07);
}
.form-wrap textarea:not(.mud-input-slot) { resize: vertical; min-height: 72px; }
.form-row-2 { display: flex; gap: 12px; }
.form-row-2 .form-group { flex: 1; }

/* ── TOGGLE SWITCH ────────────────────────────────────────────── */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 10px 12px;
  background: var(--white);
  border-radius: 8px;
  border: 1px solid #e8e8e6;
}
.form-col-left .toggle-row { background: var(--bg); }
.toggle-info .toggle-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.toggle-info .toggle-sub   { font-size: 0.73rem; color: var(--muted); margin-top: 1px; }
.toggle {
  position: relative;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle input:checked + .toggle-slider { background: var(--blue); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

/* ── DAY-OF-WEEK CHIPS (recurrence) ──────────────────────────── */
.day-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.day-chip {
  padding: 4px 10px;
  border-radius: 16px;
  border: 1.5px solid var(--grey);
  background: var(--white);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  user-select: none;
}
.day-chip:hover           { border-color: var(--blue); color: var(--blue); }
.day-chip.selected        { background: var(--blue); color: #fff; border-color: var(--blue); }
.day-chip.absent          { border-color: var(--mud-palette-error); color: var(--mud-palette-error); }
.day-chip.absent:hover    { border-color: var(--mud-palette-error-darken); color: var(--mud-palette-error-darken); }
.day-chip.absent.selected { background: var(--mud-palette-error); color: #fff; border-color: var(--mud-palette-error); }

/* ── DASHBOARD ────────────────────────────────────────────────── */
.dashboard-section-title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.dashboard-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dashboard-card {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid #eaeae8;
  display: flex;
  align-items: center;
  padding: 14px 18px;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s, transform 0.1s;
}
.dashboard-card:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.dashboard-card-org {
  border-left: 4px solid var(--blue);
}

.dashboard-card-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}

.dashboard-card-body {
  flex: 1;
  min-width: 0;
}
.dashboard-card-name {
  font-weight: 700;
  font-size: 0.93rem;
  color: var(--text);
}
.dashboard-card-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}

.dashboard-card-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* ── ACCOUNT MANAGE LAYOUT ────────────────────────────────────── */
/* Two-column layout: narrow nav sidebar + main body */
.manage-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.manage-nav {
  width: 200px;
  flex-shrink: 0;
  background: var(--white);
  border-radius: var(--radius);
  border: 1.5px solid var(--grey);
  padding: 10px 8px;
}

/* Style the Bootstrap nav-link elements inside the manage nav */
.manage-nav .nav-link {
  color: var(--muted);
  font-size: 0.87rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 6px;
  display: block;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  font-family: var(--font);
}
.manage-nav .nav-link:hover  { background: rgba(0,17,88,0.06); color: var(--blue); }
.manage-nav .nav-link.active { background: rgba(0,17,88,0.10); color: var(--blue); font-weight: 700; }

.manage-body {
  flex: 1;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius);
  border-top: 8px solid var(--orange);
  box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
  padding: 28px;
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 700px) {
  .manage-layout { flex-direction: column; }
  .manage-nav { width: 100%; }
  .topbar { padding: 0 16px; }
  .topbar-username { display: none; }
  .topbar-org-name { max-width: 80px; }
  .topbar-org-label { max-width: 100px; }
  .topbar-nav-link { padding: 5px 8px; font-size: 0.80rem; }
  .group-header { padding: 0 16px; }
  .group-header-row1 { height: 40px; }
  .group-name { font-size: 0.95rem; }
  .content-area { padding: 20px 16px; }
  .form-columns { flex-direction: column; }
  .form-col-right { width: 100%; border-left: none; border-top: 1px solid var(--grey); }
  .event-card { flex-wrap: wrap; }
  .event-card-attendance { width: 100%; }
  .event-card-status { width: auto; text-align: left; }
  .event-card-dates  { width: auto; text-align: left; }
  .event-card-actions { margin-left: auto; }
}

@media (max-width: 480px) {
  .topbar-nav { display: none; }
  .group-header { padding: 0 16px; }
  .group-header-row1 { height: auto; min-height: 40px; flex-wrap: wrap; padding: 8px 0; gap: 6px; }
  .group-tabs { padding: 0; }
  .group-tab { padding: 10px 14px; }
  .filter-row { flex-direction: column; align-items: flex-start; }
  .search-box { width: 100%; }
  .search-box input { width: 100%; }
}

/* ── CALENDAR CHIPS ───────────────────────────────────────────── */
.cal-chip {
  border-radius: 3px;
  padding: 2px 5px;
  margin-bottom: 1px;
  overflow: hidden;
  cursor: pointer;
  font-size: 0.75rem;
}

.cal-chip--admin {
  background: rgba(0, 17, 88, 0.06);
  border-left: 3px solid var(--blue);
}

.cal-chip-header {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}

.cal-chip-title {
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-chip-time {
  opacity: 0.75;
  flex-shrink: 0;
  font-size: 0.7rem;
}

.cal-chip-gear {
  flex-shrink: 0;
  font-size: 0.7rem;
  opacity: 0.6;
}

/* Attendance progress bar inside chip */
.cal-progress {
  display: flex;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  margin-top: 3px;
  border: 1px solid #ddd;
}

.cal-progress-seg {
  min-width: 1px;
}

/* Personal status pill */
.cal-status-pill {
  display: inline-block;
  margin-top: 3px;
  padding: 0 5px;
  border-radius: 8px;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}

.cal-status-pill--attending    { background: #e8f5e9; color: #2e7d32; }
.cal-status-pill--not-attending { background: #ffebee; color: #c62828; }
.cal-status-pill--tentative    { background: #fff3e0; color: #e65100; }
.cal-status-pill--invited      { background: #e3f2fd; color: #1565c0; }
.cal-status-pill--reinvited    { background: #f3e5f5; color: #6a1b9a; }

/* ── ADMIN LAYOUT ─────────────────────────────────────────────── */
.admin-layout {
  display: flex;
  min-height: calc(100vh - 60px); /* 60px = topbar height */
}

.admin-sidebar {
  width: 240px;
  min-width: 240px;
  background: #fff;
  border-right: 1px solid var(--grey);
  padding: 8px 0;
  overflow-y: auto;
}

.admin-main {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  overflow-x: hidden;
}

/* "Admin" badge label in the topbar nav area */
.topbar-admin-label {
  color: var(--orange);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--orange);
  border-radius: 4px;
}

@media (max-width: 700px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid var(--grey); }
}