/* =========================
   STAFF DASHBOARD (SQUARE THEME)
   Adjusted for:
   - No border-radius anywhere
   - Sidebar flush to banner (no top padding)
   - Main content pulled left (no centered max-width)
   ========================= */

a {
    color: #2980b9;
    text-decoration: none;
}

a:hover {
    color: #1f6694;
    text-decoration: none;
}

/* ===== Sidebar: dark like top bar ===== */
.staff-sidebar{
  flex:0 0 260px;     /* hard width column */
  width:260px;
  min-width:260px;

  padding:0;
  position:sticky;
  top:0;
  height:100vh;
  overflow:auto;

  background: rgba(28, 24, 21, 0.95);
  color: rgba(255,255,255,.92);
  border-radius:0;
  border:none;
}
/* inner spacing since we removed sidebar padding */
.staff-logo,
.staff-nav{
  padding-left:16px;
  padding-right:16px;
}

.staff-logo{
  margin:0;
  padding-top:14px;     /* set to 0 if you truly want zero */
  padding-bottom:10px;
  font-weight:800;
  font-size:18px;
  color:#fff;
}

/* Section labels */
.staff-nav .nav-section{
  margin-top:14px;
  margin-bottom:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.55;
  color: rgba(255,255,255,.8);
}

/* ===== Full-width hover ===== */
.staff-nav{
  display:flex;
  flex-direction:column;
  gap:0;                 /* important so hover touches edge cleanly */
  padding-bottom:14px;
}

.staff-nav .nav-item{
  /* full width */
  display:block;
  width:calc(100% + 32px);   /* extend past inner padding */
  margin-left:-16px;         /* pull to left edge */
  margin-right:-16px;        /* pull to right edge */

  padding:12px 16px;         /* re-add nice padding */
  text-decoration:none;
  color: rgba(255,255,255,.88);

  border-radius:0;
}

.staff-nav .nav-item i{
  margin-right:10px;
  opacity:.9;
}

/* Hover fills the entire sidebar width */
.staff-nav .nav-item:hover{
  background: rgba(255,255,255,.10);
  color:#fff;
}

/* Optional: “active” look if you add a class later */
.staff-nav .nav-item.active{
  background: rgba(255,255,255,.14);
  color:#fff;
}

/* --- Layout: keep main content to the right of sidebar --- */
.staff-layout{
  display:flex;
  align-items:flex-start;
  gap:0;              /* sidebar + main should touch; use margin/padding inside */
  padding:0 0 24px 0; /* no top padding so sidebar can hit banner */
}

.staff-main{
  flex:1 1 auto;      /* take remaining space */
  min-width:0;        /* prevent overflow pushing under sidebar */
  padding-left:16px;  /* replaces gap */
}

/* Keep your main content padding */
.staff-page{
  margin:0;
  max-width:none;
  padding:24px 16px;
}
/* Header */
.staff-header {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  margin-bottom:16px;
}

.staff-title { margin:0; font-size: 28px; }
.staff-subtitle { margin:6px 0 0; opacity:.75; }
.staff-header-right { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.staff-header-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

.staff-row-actions { display:inline-flex; gap:8px; align-items:center; }

.staff-form-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:20px; }

.staff-inline-form { display:flex; gap:16px; align-items:flex-end; flex-wrap:wrap; margin-bottom:24px; }
.staff-inline-form .staff-form-group { display:flex; flex-direction:column; gap:4px; }
.staff-inline-form .staff-form-actions { margin-top:0; }

/* Stat cards */
.staff-cards {
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
  margin: 16px 0 20px;
}

.staff-card {
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius:0;          /* square */
}

.staff-card-top { display:flex; justify-content:space-between; align-items:center; }
.staff-card-label { font-size: 13px; opacity: .75; }
.staff-card-value { font-size: 28px; font-weight: 700; }
.staff-card-sub { margin-top: 10px; font-size: 13px; opacity: .85; }
.staff-card-actions { margin-top: 12px; display:flex; gap:8px; flex-wrap:wrap; }

.card-a { border-left: 6px solid rgba(97, 222, 255, .9); }
.card-b { border-left: 6px solid rgba(207, 162, 27, .9); }
.card-c { border-left: 6px solid rgba(90, 180, 120, .9); }
.card-d { border-left: 6px solid rgba(180, 120, 210, .9); }

/* Main grid */
.staff-grid { display:grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }

.staff-panel {
  padding: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius:0;          /* square */
}

.staff-panel-head { margin-bottom: 10px; }
.staff-panel-title { margin:0; font-size: 18px; }
.staff-panel-hint { margin-top: 4px; font-size: 13px; opacity: .75; }

/* Lists */
.staff-list {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.staff-list-item {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 10px;
  background: rgba(0,0,0,.03);
  border-radius:0;          /* square */
}

.staff-list-title { font-weight: 700; }
.staff-list-sub { font-size: 13px; opacity:.75; margin-top:2px; }
.staff-list-right { display:flex; align-items:center; gap:8px; }

.pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 34px;
  height: 26px;
  padding: 0 10px;
  background: rgba(0,0,0,.08);
  font-weight: 700;
  border-radius:0;          /* square */
}

/* Quick actions */
.quick-actions { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }

.qa-tile {
  display:block;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.08);
  text-decoration:none;
  background: rgba(0,0,0,.02);
  border-radius:0;          /* square */
}

.qa-title { font-weight: 800; }
.qa-sub { font-size: 13px; opacity: .75; margin-top: 3px; }

/* Buttons */
.btn.btn-xs {
  padding: 6px 10px;
  font-size: 12px;
  border-radius:0;          /* square */
}

.btn-outline { border: 1px solid rgba(0,0,0,.25); background: transparent; }
.btn-light { border: 1px solid rgba(0,0,0,.12); background: rgba(0,0,0,.03); }
.btn-primary { border: 1px solid rgba(0,0,0,.12); }

/* Optional: if your theme buttons still round elsewhere */
.staff-layout .btn{ border-radius:0 !important; }

/* Responsive */
@media (max-width: 980px) {
  .staff-layout{ flex-direction:column; }
  .staff-sidebar{
    width:auto;
    flex:initial;
    position:relative;
    top:auto;
    height:auto;
  }
  .staff-cards { grid-template-columns: repeat(2, 1fr); }
  .staff-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .staff-cards { grid-template-columns: 1fr; }
}


/* Base badge */
.staff-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px; /* pill shape */
    line-height: 1;
    white-space: nowrap;
}

/* Variants */
.staff-badge-success {
    background-color: #d1f7e0;
    color: #0f7a4f;
}

.staff-badge-danger {
    background: #fdeaea;
    color: #b42318;
}

.staff-badge-warning {
    background-color: #fff4cc;
    color: #8a6d00;
}

.staff-badge-muted {
    background-color: #f1f3f5;
    color: #6c757d;
}

.staff-badge-info {
    background-color: rgba(0, 123, 255, 0.1);
    color: #007bff;
}

/* Optional: icon spacing */
.staff-badge i {
    margin-right: 4px;
}

.pending-members-table {
    width: 100%;
}

.pending-members-table th,
.pending-members-table td {
    padding: 0.6rem 0.8rem;
    vertical-align: middle;
    text-align: left;
}

/* Give email room to breathe */
.pending-members-table th.column-email,
.pending-members-table td.column-email {
    width: 25%;
    word-break: break-word;
}

/* Phone stays compact */
.pending-members-table th.column-phone,
.pending-members-table td.column-phone {
    width: 12%;
    white-space: nowrap;
}

/* Small utility columns */
.pending-members-table th.column-paid,
.pending-members-table td.column-paid,
.pending-members-table th.column-converted,
.pending-members-table td.column-converted {
    width: 1%;
    white-space: nowrap;
}

/* Invite code small-ish */
.pending-members-table th.column-invite_code,
.pending-members-table td.column-invite_code {
    width: 10%;
    white-space: nowrap;
}

/* Actions shouldn't stretch */
.pending-members-table th.column-actions,
.pending-members-table td.column-actions {
    width: 1%;
    white-space: nowrap;
}

/* Staff Detail Page */

.detail-layout {
    display: grid;
    grid-template-columns: 6fr 4fr;
    gap: 1.25rem;
    margin-top: 1.5rem;
    align-items: start;
}

.detail-main,
.detail-aside {
    display: grid;
    gap: 1.25rem;
}

.detail-row {
    background: #fff;
    border: 1px solid #dedede;
    box-shadow: 0 8px 22px rgba(16, 32, 51, 0.06);
}

.detail-title {
    padding: 0.85rem 1rem;
    background: #F7F7F7;
    border-bottom: 1px solid #dedede;
    color: #565656;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.detail-title a {
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.5px;  /* reset spacing */
    font-size: 13px;         /* optional tweak */
}

.detail-content {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem 1.5rem;
    padding: 1.1rem;
}

.detail-content .wide {
    grid-column: span 2;
}

.detail-side-content {
    grid-template-columns: 1fr;
}

.detail-notes {
    display: block;
    color: #565656;
    font-size: 0.92rem;
    line-height: 1.55;
}

.detail-item {
    padding: 10px 0;
}

.detail-label {
    font-size: 14px;
    font-weight: 700;
    color: #565656;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}

.detail-value {
    font-size: 15px;
    font-weight: 500;
    color: #777;
    line-height: 1.45;
}

.detail-content > div strong {
    display: block;
    color: #898989;
    font-size: 0.88rem;
    word-break: break-word;
}

@media (max-width: 1050px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-aside {
        order: -1;
    }
}

@media (max-width: 600px) {
    .detail-content {
        grid-template-columns: 1fr;
    }

    .detail-content .wide {
        grid-column: span 1;
    }
}

.status-badge {
    display: inline-block;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
}

.status-new,
.status-pending {
    background: #eaf4fb;
    color: #2980b9;
}

.status-contacted {
    background: #fff4d6;
    color: #9a6a00;
}

.status-paid,
.status-converted {
    background: #e7f6ec;
    color: #237a3b;
}

.status-cancelled {
    background: #fdecea;
    color: #b42318;
}

.status-archived {
    background: #f1f3f5;
    color: #555;
}

.bool-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    line-height: 1;
}

.bool-badge.is-true {
    background: #e7f6ec;
    color: #237a3b;
}

.bool-badge.is-false {
    background: #fdecea;
    color: #b42318;
}

/* Danger container */
.danger-zone {

}

/* Header bar */
.danger-zone .detail-title {
    background: #fff5f5;
    color: #b42318;
}

/* Content spacing */
.danger-content {
    padding-top: 4px;
}

/* Red label */
.danger-label {
    color: #b42318;
}

/* Description text */
.danger-text {
    font-size: 14px;
    color: #7a1c1c;
    margin: 6px 0 14px;
}

/* Red button */
.btn-danger {
    background: #dc3545;
    color: #fff;
    border: none;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.btn-danger:hover {
    background: #b02a37;
}

.list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.view-toggle {
    display: inline-flex;
    border: 1px solid #dedede;
    background: #f7f7f7;
}

.toggle-btn {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    text-decoration: none;
    border-right: 1px solid #dedede;
}

.toggle-btn:last-child {
    border-right: none;
}

/* Active state */
.toggle-btn.active {
    background: #2980b9;
    color: #fff;
}

.empty-table {
    text-align: center;
    font-style: italic;
    color: #888;
    padding: 10px 0;
}

.record-count {
    padding-top: 10px;
    font-size: 14px;
}

.form-container {
    max-width: 900px;   /* adjust to taste */
    width: 100%;
}

.staff-form-control textarea {
    height: 120px;
}


.payment-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-popup {
    width: min(520px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    background: #fff;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    position: relative;
}

.payment-popup-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    border: none;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.staff-waive-box {
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fafafa;
}

.staff-waive-box label {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-weight: 600;
}

.staff-waive-box small {
    display: block;
    margin-top: 0.35rem;
    color: #666;
}

.payment-popup-form-wrapper .required-note {
    border: 2px solid #dc3545 !important;
}

.payment-popup-form-wrapper .required {
    color: #dc3545;
    font-weight: bold;
}

.payment-popup-form-wrapper textarea.required-note,
.payment-popup-form-wrapper input.required-note {
    border: 2px solid #dc3545 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.bulk-payment-member-list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #dedede;
}

.bulk-payment-member-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

.bulk-payment-member-list li:last-child {
    border-bottom: none;
}

.payment-history-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.payment-history-row .btn {
    flex-shrink: 0;
}

/* Scoped to the checkbox column itself, not just "whatever is first" --
   .directory-table is shared by tables that don't have a selection column
   (e.g. PendingMemberTable), where full_name is the first column instead. */
.directory-table th.column-selection,
.directory-table td.column-selection {
  width: 40px;
  text-align: center;
}

.staff-bulk-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 24px;
}

.staff-bulk-actions .btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

table.directory-table input[type="checkbox"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 0;
  padding: 0;
  border: 1px solid #999;
  border-radius: 3px;
  appearance: checkbox;   /* forces native checkbox rendering, overriding any custom input reset */
  -webkit-appearance: checkbox;
  box-sizing: border-box;
  vertical-align: middle;
}

.import-errors {
    background: #fdeaea;
    border: 1px solid #f3c6c6;
    color: #b42318;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

.import-errors ul {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.import-instructions {
    margin-bottom: 1.5rem;
}

.import-columns-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
}

.import-columns-table th,
.import-columns-table td {
    border: 1px solid #dedede;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.9rem;
}

.import-columns-table th {
    background: #f7f7f7;
}

/* Rehearsal schedule row highlights -- same colors as the public
   rehearsal_schedule.html page's .no-rehearsal / .concert row classes */
.pending-members-table tbody tr.staff-row-important {
    background-color: #f3fff3;
    font-weight: bold;
}

.pending-members-table tbody tr.staff-row-important:hover {
    background-color: #e9ffe9;
}

.pending-members-table tbody tr.staff-row-no-rehearsal {
    background-color: #fff3f3;
}

.pending-members-table tbody tr.staff-row-no-rehearsal:hover {
    background-color: #ffe9e9;
}

/* =========================
   STAFF DASHBOARD (v2)
   ========================= */

.dashboard-title {
  font-style: italic;
}

/* --- Row 1: hero cards --- */
.dashboard-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 16px;
  margin: 20px 0;
  align-items: stretch;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  overflow: hidden;
}

.dashboard-card-rehearsal { background: #eaf4fb; }
.dashboard-card-concert { background: #fdf6e0; }
.dashboard-card-action { background: #fff; }

.dashboard-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 0;
}

.dashboard-card-rehearsal .dashboard-card-head,
.dashboard-card-concert .dashboard-card-head {
  justify-content: flex-start;
}

.dashboard-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  font-size: 12px;
}

.dashboard-card-rehearsal .dashboard-card-icon { color: #2980b9; }
.dashboard-card-concert .dashboard-card-icon { color: #b8860b; }

.dashboard-card-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dashboard-card-rehearsal .dashboard-card-label { color: #2980b9; }
.dashboard-card-concert .dashboard-card-label { color: #b8860b; }
.dashboard-card-label-danger { color: #b42318; display: flex; align-items: center; gap: 6px; }

.dashboard-card-title {
  padding: 8px 16px 0;
  font-size: 19px;
  font-weight: 800;
}

.dashboard-card-detail {
  padding: 2px 16px 0;
  font-size: 14px;
  color: #444;
}

.dashboard-card-footer {
  margin-top: auto;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-card-rehearsal .dashboard-card-footer { background: rgba(41, 128, 185, .1); color: #2980b9; }
.dashboard-card-concert .dashboard-card-footer { background: rgba(184, 134, 11, .12); color: #b8860b; }

.dashboard-card-empty {
  padding: 12px 16px 16px;
  font-size: 13px;
  font-style: italic;
  color: #888;
}

.dashboard-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 50%;
  background: #dc3545;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  margin: 12px 16px 0 0;
}

.dashboard-action-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dashboard-action-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  border-radius: 50%;
  background: #fdeaea;
  color: #b42318;
  font-size: 12px;
}

.dashboard-action-text {
  flex: 1 1 auto;
  font-size: 13px;
  color: #333;
}

.dashboard-action-btn {
  border: 1px solid #b42318;
  color: #b42318;
  background: transparent;
  white-space: nowrap;
}

/* --- Row 2: schedule / snapshot / readiness --- */
.dashboard-grid-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.dashboard-panel {
  display: flex;
  flex-direction: column;
}

.dashboard-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.dashboard-panel-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .08);
  margin: 0 0 14px;
}

.dashboard-panel-hint {
  font-size: 12px;
  color: #888;
  margin: -4px 0 10px;
}

.dashboard-panel-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
}

.dashboard-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-schedule-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dashboard-schedule-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 6px;
  background: rgba(41, 128, 185, .08);
  color: #2980b9;
  line-height: 1.1;
}

.dashboard-schedule-month {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.dashboard-schedule-day {
  font-size: 16px;
  font-weight: 800;
}

.dashboard-schedule-title {
  font-size: 13px;
  font-weight: 700;
}

.dashboard-schedule-sub {
  font-size: 12px;
  color: #777;
  margin-top: 2px;
}

.dashboard-snapshot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dashboard-snapshot-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.dashboard-snapshot-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: rgba(90, 180, 120, .15);
  color: #237a3b;
  font-size: 13px;
}

.dashboard-snapshot-value {
  font-size: 16px;
  font-weight: 800;
}

.dashboard-snapshot-label {
  font-size: 13px;
  font-weight: 500;
  color: #555;
}

.dashboard-snapshot-sub {
  font-size: 12px;
  color: #888;
  margin-top: 1px;
}

.dashboard-snapshot-divider {
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.dashboard-readiness-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-readiness-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}

.dashboard-readiness-label {
  font-weight: 700;
}

.dashboard-readiness-status {
  font-weight: 700;
}

.dashboard-readiness-status-ready,
.dashboard-readiness-status-good {
  color: #237a3b;
}

.dashboard-readiness-status-attention {
  color: #b8860b;
}

.dashboard-readiness-bar {
  height: 8px;
  background: #eee;
  overflow: hidden;
}

.dashboard-readiness-bar-fill {
  height: 100%;
}

.dashboard-readiness-bar-fill-ready,
.dashboard-readiness-bar-fill-good {
  background: #5ab478;
}

.dashboard-readiness-bar-fill-attention {
  background: #f0ad4e;
}

.dashboard-checklist-box {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(111, 66, 193, .07);
  border: 1px solid rgba(111, 66, 193, .15);
}

.dashboard-checklist-head {
  font-size: 13px;
  font-weight: 800;
  color: #6f42c1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dashboard-checklist-box ul {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: #555;
}

.dashboard-checklist-box li {
  margin-bottom: 3px;
}

@media (max-width: 980px) {
  .dashboard-hero-row,
  .dashboard-grid-row {
    grid-template-columns: 1fr;
  }
}

.gallery-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.gallery-image-tile {
  border: 1px solid rgba(0, 0, 0, .08);
  background: #fff;
  padding: 8px;
  text-align: center;
}

.gallery-image-tile img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
}

.gallery-image-tile form {
  margin: 0;
}

.song-file-section-title {
  margin: 40px 0 6px;
}

.song-file-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
}

.song-file-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.song-file-table th {
  padding: 6px 10px;
  text-align: left;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #777;
  border: none;
}

.song-file-table td {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-left: none;
  border-right: none;
  transition: background-color .15s ease;
}

.song-file-table td:first-child {
  border-left: 1px solid #e4e4e4;
}

.song-file-table td:last-child {
  border-right: 1px solid #e4e4e4;
}

.song-file-table tbody tr:hover td {
  background: #fafbfc;
}

.song-file-table input[type="text"],
.song-file-table input[type="url"],
.song-file-table select {
  width: 100%;
  min-width: 120px;
}

.song-file-table input[type="file"] {
  width: 100%;
  max-width: 130px;
  overflow: hidden;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
}

.song-file-table .field-locked {
  background-color: #f0f0f0;
  color: #999;
  pointer-events: none;
}

.song-file-upload-box {
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 6px 20px;
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.song-file-name {
  display: block;
  margin-top: 4px;
  font-size: 0.75rem;
  color: #666;
  word-break: break-all;
}

.song-file-delete-label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-weight: normal;
}

.song-file-delete-label input[type="checkbox"] {
  display: inline-block;
  width: 16px;
  height: 16px;
  min-width: 0;
  padding: 0;
  border: 1px solid #999;
  border-radius: 3px;
  appearance: checkbox;
  -webkit-appearance: checkbox;
  box-sizing: border-box;
  vertical-align: middle;
}

.song-file-row-errors {
  color: #b42318;
  font-size: 0.85rem;
  background: #fdeaea;
  border: 1px solid #f3c6c6;
  border-radius: 0;
}

#add-file-row {
  margin: 4px 0 28px;
}

.song-file-remove-row {
  margin: 0;
}

.d-none {
  display: none;
}
/* ===== CMS header (replaces the public site header on staff pages) ===== */
.staff-body{
  background:#faf9f7;
}

.cms-header{
  display:flex;
  align-items:center;
  gap:24px;
  padding:10px 24px;
  background:#fff;
  border-bottom:1px solid #e3e0db;
}

.cms-header-logo img{
  display:block;
  height:64px;
  width:auto;
}

.cms-header-title{
  padding-left:24px;
  border-left:1px solid #d6d2cc;
  font-family:'Lora', serif;
  font-style:italic;
  font-size:28px;
  line-height:1.2;
  color:#222;
  white-space:nowrap;
}

.cms-header-crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  color:#555;
}

.cms-header-crumbs a{ color:#666; }
.cms-header-crumbs a:hover{ color:#222; }
.cms-header-crumb-sep{ color:#aaa; }
.cms-header-crumb-current{ color:#222; font-weight:700; }

.cms-header-actions{
  display:flex;
  align-items:center;
  gap:20px;
  margin-left:auto;
  padding-left:24px;
  border-left:1px solid #d6d2cc;
}

.cms-header-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border:1px solid #555;
  color:#222;
  font-size:14px;
  white-space:nowrap;
}

.cms-header-btn:hover{
  background:#222;
  color:#fff;
}

.cms-header-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#222;
  font-size:14px;
  white-space:nowrap;
}

.cms-header-link:hover{ color:#2980b9; }

.cms-messages{
  position:fixed;
  top:16px;
  right:16px;
  z-index:1000;
  width:min(380px, calc(100vw - 32px));
}

@media (max-width: 1200px){
  .cms-header{ flex-wrap:wrap; gap:12px 20px; }
  .cms-header-crumbs{ order:3; flex-basis:100%; }
}

@media (max-width: 640px){
  .cms-header{ padding:10px 16px; }
  .cms-header-logo img{ height:48px; }
  .cms-header-title{ font-size:20px; padding-left:16px; }
  .cms-header-actions{ margin-left:0; padding-left:0; border-left:none; flex-wrap:wrap; }
}

/* ===== Workspace tabs (Operations / Website Content) ===== */
.staff-workspace-tabs{
  display:flex;
  gap:4px;
  margin:0 0 20px;
  border-bottom:1px solid #ccc;
}

.staff-workspace-tabs a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:-1px;
  padding:12px 32px;
  border:1px solid #ddd;
  border-bottom:none;
  background:#f1efec;
  color:#555;
  font-size:15px;
}

.staff-workspace-tabs a:hover{ color:#222; }

.staff-workspace-tabs a.active{
  background:#fff;
  color:#1c1815;
  font-weight:700;
  border-color:#ccc;
  box-shadow:inset 0 -3px 0 #1f5f8b;
}

.dashboard-greeting{ margin:0 0 16px; }

/* ===== Quick Edit Website Pages ===== */
.quick-edit-bar{
  display:flex;
  align-items:center;
  gap:24px;
  margin:24px 0;
  padding:16px 20px;
  background:#fbf6ea;
  border:1px solid #eadfc4;
}

.quick-edit-intro{
  display:flex;
  gap:12px;
  flex:0 0 280px;
}

.quick-edit-icon{
  font-size:22px;
  color:#c88a12;
}

/* Scoped under the bar to beat the theme's h2:not(:last-child) margin. */
.quick-edit-bar .quick-edit-title{
  margin:0;
  line-height:1.3;
  font-family:'Lora', serif;
  font-style:italic;
  font-size:21px;
  font-weight:400;
}

.quick-edit-bar .quick-edit-sub{
  margin:4px 0 0;
  line-height:1.4;
  font-size:14px;
  color:#666;
}

.quick-edit-grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
}

.quick-edit-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:72px;
  padding:12px 8px;
  background:#fff;
  border:1px solid #d6d2cc;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  color:#1f3b57;
  font-weight:700;
  font-size:14px;
  text-align:center;
}

.quick-edit-card i{
  font-size:20px;
  color:#1f3b57;
}

a.quick-edit-card:hover{
  border-color:#1f5f8b;
  color:#1f5f8b;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}

.quick-edit-card.is-disabled{
  color:#999;
  cursor:default;
  box-shadow:none;
}

.quick-edit-card.is-disabled i{ color:#bbb; }

.quick-edit-card small{
  font-size:11px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
}

@media (max-width: 980px){
  .quick-edit-bar{ flex-direction:column; align-items:stretch; }
  .quick-edit-intro{ flex-basis:auto; }
}

/* ===== Website Content dashboard ===== */
.website-page-list{
  list-style:none;
  margin:0;
  padding:0;
}

.website-page-list li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #eee;
}

.website-page-list li:last-child{ border-bottom:none; }
.website-page-label{ flex:1 1 auto; font-weight:700; }
.website-page-soon{ font-size:13px; color:#999; }

/* ===== Sidebar: disabled items + workspace footer ===== */
.staff-nav .nav-item.is-disabled{
  color:rgba(255,255,255,.4);
  cursor:default;
}

.staff-nav .nav-item.is-disabled:hover{ background:none; color:rgba(255,255,255,.4); }

.nav-item-soon{
  margin-left:6px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.staff-sidebar-footer{
  margin:8px 16px 16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.2);
}

.staff-sidebar-switch,
.staff-sidebar-public{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  color:rgba(255,255,255,.88);
}

.staff-sidebar-switch{
  margin-bottom:6px;
  border:1px solid #c9a227;
}

.staff-sidebar-switch:hover,
.staff-sidebar-public:hover{
  background:rgba(255,255,255,.10);
  color:#fff;
}

.staff-sidebar-switch-arrow{
  margin-left:auto;
  font-size:12px;
  opacity:.7;
}

/* ===== Website workspace: Support Us page ===== */
.staff-section-count{
  margin-left:6px;
  font-size:13px;
  font-weight:400;
  color:#777;
}

.staff-sponsor-logo{
  max-height:40px;
  max-width:120px;
  width:auto;
  height:auto;
}

.staff-support-section{
  margin-bottom:40px;
}

.staff-inline-link{
  margin-left:8px;
  font-size:13px;
}

.staff-checkbox-help{
  display:block;
  margin:-6px 0 16px;
  color:#777;
}

/* ===== Website workspace: Supporters ===== */
.supporter-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.supporter-filter-count{
  margin-left:4px;
  font-size:12px;
  opacity:.7;
}

.supporter-filter-form{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:14px;
}

/* Scoped under .supporter-filters to beat the theme's full-width form controls. */
.supporter-filters .supporter-filter-form label{
  display:inline;
  width:auto;
  margin:0;
  font-size:14px;
  color:#555;
}

.supporter-filters .supporter-filter-form select,
.supporter-filters .supporter-filter-form input[type="search"]{
  display:inline-block;
  width:auto;
  min-width:0;
  height:34px;
  margin:0;
  padding:4px 8px;
  border:1px solid #ccc;
  background:#fff;
  font-size:14px;
}

.supporter-filters .supporter-filter-form input[type="search"]{ width:200px; }

.supporter-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:32px;
}

.supporter-facts{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:10px 16px;
  margin:0;
}

.supporter-facts dt{ font-weight:700; color:#555; }
.supporter-facts dd{ margin:0; }

.supporter-season-list{
  list-style:none;
  margin:0;
  padding:0;
}

.supporter-season-list li{
  display:grid;
  grid-template-columns:1fr auto 140px;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #eee;
}

.supporter-season-list li:last-child{ border-bottom:none; }
.supporter-season-name{ font-weight:700; }
.supporter-season-total{ font-variant-numeric:tabular-nums; }
.supporter-season-level{ text-align:right; }

.supporter-first-gift{
  margin:24px 0 16px;
  padding:16px 20px 4px;
  border:1px solid #e3e0db;
  background:#fbfaf8;
}

.supporter-first-gift legend{
  width:auto;
  padding:0 8px;
  font-size:16px;
  font-weight:700;
}

.supporter-first-gift-hint{
  margin:0 0 12px;
  font-size:14px;
  color:#666;
}

@media (max-width: 980px){
  .supporter-detail-grid{ grid-template-columns:1fr; }
}

/* ===== Staff list tables =====
   Neutral greys from the public site (#fff panels, #f7f7f7 striping) with the
   site's link blue (#2980b9) for sortable headers and the hover tint.
   Lift tables off the page background as white panels. Scoped to the staff
   base template's body class so the public member directory is untouched.
   Row shading uses :where() to stay low-specificity, so highlight rows
   (.staff-row-important / .staff-row-no-rehearsal) keep their colors. */
.staff-body .directory-table{
  background:#fff;
  border:1px solid #e0e0e0;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}

.staff-body .directory-table thead th{
  background:#ebebeb;
  border-bottom:2px solid #d9d9d9;
  color:#333;
  font-size:13px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.staff-body .directory-table thead th a{
  color:#2980b9;
}

.staff-body .directory-table td{
  border-bottom:1px solid #ebebeb;
}

.staff-body .directory-table tbody tr:last-child td{
  border-bottom:none;
}

:where(.staff-body .directory-table) tbody tr:nth-child(even){
  background:#f7f7f7;
}

:where(.staff-body .directory-table) tbody tr:hover{
  background:#eaf3fa;
}

/* ===== Afterglow ===== */
.afterglow-help { display:block; margin:-4px 0 16px; opacity:.75; }

.afterglow-option-table input[type="number"] { width:100%; min-width:80px; }

.afterglow-count-list li { grid-template-columns:1fr auto 60px; }

.afterglow-count-list .afterglow-count-value {
  min-width:48px;
  text-align:right;
  font-size:22px;
  font-weight:700;
}

.afterglow-qr { display:flex; gap:16px; align-items:flex-start; }
.afterglow-qr img { flex-shrink:0; border:1px solid #e0e0e0; background:#fff; }
.afterglow-qr > div { min-width:0; flex:1; }
.afterglow-qr .afterglow-qr-link { width:100%; font-size:13px; margin-top:8px; }

.afterglow-staff-dinners {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:0 16px;
}

.afterglow-order-note { color:#777; white-space:pre-line; }

@media (max-width: 991px) {
  .afterglow-cards { grid-template-columns:repeat(2, 1fr); }
}

@media (max-width: 575px) {
  .afterglow-qr { flex-direction:column; }
}

.staff-body .directory-table td.staff-nowrap { white-space:nowrap; }

.afterglow-option-table { table-layout:fixed; }
.afterglow-option-table th:nth-child(1) { width:24%; }
.afterglow-option-table th:nth-child(2) { width:34%; }
.afterglow-option-table th:nth-child(3) { width:12%; }
.afterglow-option-table th:nth-child(4) { width:9%; }
.afterglow-option-table td input[type="text"],
.afterglow-option-table td input[type="number"] { width:100%; min-width:0; max-width:none; }
.afterglow-option-table td:nth-of-type(n+5) { white-space:nowrap; }

/* These tables use a fixed layout, which doesn't widen a cell for inline-flex
   content, so Edit/Delete used to spill past the table edge. */
.staff-body .directory-table td .staff-row-actions { display:flex; }

/* ===== Website Content: Page Banners ===== */
.banner-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:14px;
  margin:18px 0 24px;
}

.banner-card{
  display:flex;
  flex-direction:column;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  color:inherit;
  text-decoration:none;
  transition:box-shadow .15s ease, transform .15s ease;
}

.banner-card:hover{
  color:inherit;
  text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transform:translateY(-1px);
}

.banner-card.is-empty{ border-style:dashed; border-color:#c9c9c9; }

.banner-preview{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  height:120px;
  background-color:#2f3a40;
  background-size:cover;
  background-position:center;
  color:#fff;
  text-align:center;
}

/* Darken the photo the way the public banner does, so the text stays readable. */
.banner-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
}

.banner-preview-text{
  position:relative;
  font-family:'Lora', Georgia, serif;
  font-size:18px;
  line-height:1.25;
}

.banner-preview-text span{ letter-spacing:.05em; }

.banner-preview-empty{
  background:repeating-linear-gradient(45deg, #f4f4f4, #f4f4f4 10px, #ececec 10px, #ececec 20px);
  color:#888;
  font-size:14px;
  gap:8px;
}

.banner-preview-empty::before{ display:none; }

.banner-card-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:12px 14px 4px;
  flex:1 1 auto;
}

.banner-card-label{ font-weight:700; }
.banner-card-pages{ font-size:13px; color:#777; }

.banner-card-action{
  padding:8px 14px 12px;
  font-size:13px;
  font-weight:700;
  color:#00B0F0;
}

.banner-preview-large{
  height:200px;
  margin:16px 0 20px;
}

.banner-preview-large .banner-preview-text{ font-size:30px; }

.banner-remove-form{ margin-top:18px; }

.banner-unused-thumb{
  width:72px;
  height:40px;
  object-fit:cover;
}

.staff-form-error{
  margin-bottom:14px;
  padding:10px 14px;
  border-left:4px solid #d9534f;
  background:#fdf0f0;
  color:#a94442;
}

.staff-form-error ul{ margin:0; padding-left:18px; }

.banner-unused .staff-panel-title{ margin:0 0 4px !important; }
.banner-unused .staff-panel-hint{ margin:0 0 6px; }

/* A spot with no photo of its own: shows the site default (or the plain band the public page uses). */
.banner-preview-fallback{
  background-color:transparent;
  background-image:linear-gradient(120deg, #1d2a33 0%, #2b4a5c 55%, #00B0F0 140%);
}

.banner-preview-badge{
  position:absolute;
  top:8px;
  right:8px;
  padding:2px 8px;
  background:rgba(0,0,0,.6);
  font-family:'Lato', sans-serif;
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
}