/**
 * Checkie Sign-in System - shared menu & modal framework
 *
 * The portable pieces of the design framework documented in
 * MENU_MODAL_STYLE_GUIDE.md: the modal template (ck-set-modal), the
 * neutral-rest button system and the small modal typography. Loaded on
 * every page via partials/all/header.php, after Bootstrap and the
 * design tokens. Surface-specific layout (settings cards, rows, the
 * sticky nav) stays in each dashboard's own stylesheet.
 *
 * @copyright 2026 Checkie Ltd
 */

/* Modal body copy reads at the small text size across all modals.
   Controls (.form-control, .btn) keep their own sizes. */
.modal-body {
  font-size: 0.875rem;
}

/* Utility referenced by markup app-wide; previously undefined. */
.text-small {
  font-size: 0.875em;
}

.ck-set-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px 18px 12px;
}

.ck-set-mhead-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background-color: var(--ck-accent-tint);
  color: var(--ck-accent);
  font-size: 1rem;
}

.modal-content.bg-dark .ck-set-mhead-icon {
  background-color: var(--ck-accent-tint-dark);
  color: var(--ck-accent-ink-dark);
}

.ck-set-modal-danger .ck-set-mhead-icon {
  background-color: var(--ck-danger-tint);
  color: var(--ck-danger);
}

.ck-set-modal-danger .modal-content.bg-dark .ck-set-mhead-icon {
  background-color: var(--ck-danger-tint-dark);
  color: var(--ck-danger-ink-dark);
}

.ck-set-mhead-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ck-set-mhead-text .modal-title {
  line-height: 1.25;
}

.ck-set-msub {
  display: block;
  margin-top: 1px;
  font-size: 0.8rem;
  font-weight: 450;
  color: var(--ck-text-muted);
}

.modal-content.bg-dark .ck-set-msub {
  color: var(--ck-dark-text-muted);
}

.ck-set-mclose {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
  border: 0;
  background: transparent;
  color: var(--ck-text-muted);
  font-size: 1.05rem;
  line-height: 1;
  width: 34px;
  padding: 6px 0;
  text-align: center;
  border-radius: var(--ck-radius-sm);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.ck-set-mclose:hover {
  color: var(--ck-danger);
  background-color: var(--ck-danger-tint);
}

.modal-content.bg-dark .ck-set-mclose {
  color: var(--ck-dark-text-muted);
}

/* Footer: dismiss pinned left, error text in the middle, primary
   action(s) on the right. */
.modal-footer.ck-set-mfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ck-set-mfoot-err {
  flex: 1 1 auto;
  text-align: right;
  min-width: 0;
}

.ck-set-mfoot-primary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Destructive modals: bolded consequence line */
.ck-set-consequence {
  font-weight: 600;
}

/* --- Email verification steps ------------------------------- */

.ck-set-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ck-set-step {
  display: flex;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid var(--ck-border-light);
  border-radius: var(--ck-radius-md);
  background-color: var(--bs-white, #fff);
}

.modal-content.bg-dark .ck-set-step {
  background-color: var(--ck-dark-panel);
  border-color: var(--ck-dark-border-strong);
}

.ck-set-step-connector {
  width: 2px;
  height: 14px;
  margin-left: 28px;
  background-color: var(--ck-border-input);
}

.modal-content.bg-dark .ck-set-step-connector {
  background-color: var(--ck-dark-border-strong);
}

.ck-set-stepnum {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--ck-accent-tint);
  color: var(--ck-accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.modal-content.bg-dark .ck-set-stepnum {
  background-color: var(--ck-accent-tint-dark);
  color: var(--ck-accent-ink-dark);
}

.ck-set-step-body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Gallery header loading spinner. A flex sibling of the close button
   with identical metrics: the app JS swaps their display, so whichever
   is visible occupies exactly the same slot. */
.ck-set-galleryloader {
  flex: 0 0 auto;
  margin-left: auto;
  align-self: flex-start;
  width: 34px;
  padding: 6px 0;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--ck-text-muted);
}

/* When the loader is visible the close button is display:none (the JS
   swaps them), so both carry margin-left:auto and whichever is shown
   occupies the same right-edge slot. */

/* ============================================================
   Button system (site-wide)

   Every button keeps its original semantic Bootstrap class
   (btn-success, btn-info, ...) but renders neutral at rest — clear
   background, hairline border, body text. On hover/active the button's
   semantic colour is applied in outline form: the border and the label
   take the colour; the background stays clear. Disabled buttons stay
   neutral. Login surfaces use .login-button (not .btn) and are
   unaffected; inline-styled preview buttons win over these variables.
   ============================================================ */

.btn {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--bs-body-color, #212529);
  --bs-btn-border-color: var(--ck-border-input);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-bg: transparent;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-color: var(--ck-text-muted);
  --bs-btn-disabled-border-color: var(--ck-border-input);
}

.btn-primary,
.btn-outline-primary {
  --bs-btn-hover-color: var(--ck-staff);
  --bs-btn-hover-border-color: var(--ck-staff);
  --bs-btn-active-color: var(--ck-staff);
  --bs-btn-active-border-color: var(--ck-staff);
}

.btn-secondary,
.btn-outline-secondary {
  --bs-btn-hover-color: var(--ck-text-muted);
  --bs-btn-hover-border-color: var(--ck-text-muted);
  --bs-btn-active-color: var(--ck-text-muted);
  --bs-btn-active-border-color: var(--ck-text-muted);
}

.btn-success,
.btn-outline-success {
  --bs-btn-hover-color: var(--ck-success);
  --bs-btn-hover-border-color: var(--ck-success);
  --bs-btn-active-color: var(--ck-success-hover);
  --bs-btn-active-border-color: var(--ck-success-hover);
}

.btn-danger,
.btn-outline-danger {
  --bs-btn-hover-color: var(--ck-danger);
  --bs-btn-hover-border-color: var(--ck-danger);
  --bs-btn-active-color: var(--ck-danger-hover);
  --bs-btn-active-border-color: var(--ck-danger-hover);
}

/* Warning/info hover inks are darkened for legibility on light surfaces */
.btn-warning,
.btn-outline-warning {
  --bs-btn-hover-color: #a07800;
  --bs-btn-hover-border-color: #a07800;
  --bs-btn-active-color: #8a6700;
  --bs-btn-active-border-color: #8a6700;
}

.btn-info,
.btn-outline-info {
  --bs-btn-hover-color: #0a91ad;
  --bs-btn-hover-border-color: #0a91ad;
  --bs-btn-active-color: #087d95;
  --bs-btn-active-border-color: #087d95;
}

.btn-purple,
.btn-outline-purple {
  --bs-btn-hover-color: var(--ck-accent);
  --bs-btn-hover-border-color: var(--ck-accent);
  --bs-btn-active-color: var(--ck-accent-active);
  --bs-btn-active-border-color: var(--ck-accent-active);
}

/* Dark surfaces: brighter neutral rest and brighter hover inks */
.bg-dark .btn,
#settingsTab.ck-dark .btn {
  --bs-btn-color: #e9ecef;
  --bs-btn-border-color: var(--ck-dark-border-strong);
  --bs-btn-disabled-color: var(--ck-dark-text-muted);
  --bs-btn-disabled-border-color: var(--ck-dark-border-strong);
}

.bg-dark .btn-primary, #settingsTab.ck-dark .btn-primary,
.bg-dark .btn-outline-primary, #settingsTab.ck-dark .btn-outline-primary {
  --bs-btn-hover-color: #7aaef7;
  --bs-btn-hover-border-color: #7aaef7;
  --bs-btn-active-color: #5d9cf5;
  --bs-btn-active-border-color: #5d9cf5;
}

.bg-dark .btn-secondary, #settingsTab.ck-dark .btn-secondary,
.bg-dark .btn-outline-secondary, #settingsTab.ck-dark .btn-outline-secondary {
  --bs-btn-hover-color: #cfd3d7;
  --bs-btn-hover-border-color: #cfd3d7;
  --bs-btn-active-color: #b8bdc2;
  --bs-btn-active-border-color: #b8bdc2;
}

.bg-dark .btn-success, #settingsTab.ck-dark .btn-success,
.bg-dark .btn-outline-success, #settingsTab.ck-dark .btn-outline-success {
  --bs-btn-hover-color: #4cd08d;
  --bs-btn-hover-border-color: #4cd08d;
  --bs-btn-active-color: #37b377;
  --bs-btn-active-border-color: #37b377;
}

.bg-dark .btn-danger, #settingsTab.ck-dark .btn-danger,
.bg-dark .btn-outline-danger, #settingsTab.ck-dark .btn-outline-danger {
  --bs-btn-hover-color: #ef7783;
  --bs-btn-hover-border-color: #ef7783;
  --bs-btn-active-color: #ea5563;
  --bs-btn-active-border-color: #ea5563;
}

.bg-dark .btn-warning, #settingsTab.ck-dark .btn-warning,
.bg-dark .btn-outline-warning, #settingsTab.ck-dark .btn-outline-warning {
  --bs-btn-hover-color: var(--ck-warning);
  --bs-btn-hover-border-color: var(--ck-warning);
  --bs-btn-active-color: var(--ck-warning-hover);
  --bs-btn-active-border-color: var(--ck-warning-hover);
}

.bg-dark .btn-info, #settingsTab.ck-dark .btn-info,
.bg-dark .btn-outline-info, #settingsTab.ck-dark .btn-outline-info {
  --bs-btn-hover-color: var(--ck-info);
  --bs-btn-hover-border-color: var(--ck-info);
  --bs-btn-active-color: #3bd6f5;
  --bs-btn-active-border-color: #3bd6f5;
}

.bg-dark .btn-purple, #settingsTab.ck-dark .btn-purple,
.bg-dark .btn-outline-purple, #settingsTab.ck-dark .btn-outline-purple {
  --bs-btn-hover-color: #c77df0;
  --bs-btn-hover-border-color: #c77df0;
  --bs-btn-active-color: #b45fe8;
  --bs-btn-active-border-color: #b45fe8;
}


/* Bootstrap alerts keep their light backgrounds in dark mode, so buttons
   inside them must keep the light-surface palette even under a .bg-dark
   ancestor (e.g. the dynamic-group notice inside a dark modal). */
.bg-dark .alert .btn {
  --bs-btn-color: var(--bs-body-color, #212529);
  --bs-btn-border-color: var(--ck-border-input);
  --bs-btn-disabled-color: var(--ck-text-muted);
  --bs-btn-disabled-border-color: var(--ck-border-input);
}

.bg-dark .alert .btn-primary, .bg-dark .alert .btn-outline-primary {
  --bs-btn-hover-color: var(--ck-staff);
  --bs-btn-hover-border-color: var(--ck-staff);
  --bs-btn-active-color: var(--ck-staff);
  --bs-btn-active-border-color: var(--ck-staff);
}

.bg-dark .alert .btn-secondary, .bg-dark .alert .btn-outline-secondary {
  --bs-btn-hover-color: var(--ck-text-muted);
  --bs-btn-hover-border-color: var(--ck-text-muted);
  --bs-btn-active-color: var(--ck-text-muted);
  --bs-btn-active-border-color: var(--ck-text-muted);
}


/* ============================================================
   Access-key chip (promoted from the settings tab so every
   dashboard's key displays share the same treatment)
   ============================================================ */

.ck-set-keychip {
  order: 3;
  margin-top: 6px;
}

.ck-set-access-note {
  order: 4;
  max-width: 480px;
}

.ck-set-access-qr {
  order: 5;
  margin: 8px 0 10px;
}

.ck-set-access .ck-set-actions {
  order: 6;
  justify-content: center;
  padding: 0;
}

.ck-set-access-qr .access-key-qr-code {
  display: inline-block;
  width: 220px;
  height: 220px;
  background-color: #fff;
  border-radius: var(--ck-radius-md);
  padding: 6px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.ck-set-access-intro {
  margin-bottom: 12px;
  color: var(--ck-text-muted);
}

#settingsTab.ck-dark .ck-set-access-intro {
  color: var(--ck-dark-text-muted);
}

.ck-set-access-keylabel {
  display: block;
  font-weight: 600;
  margin-bottom: 0;
}

.ck-set-keychip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  margin-bottom: 0;
  border: 1px solid var(--ck-border-input);
  border-radius: var(--ck-radius-md);
  background-color: var(--ck-surface);
}

#settingsTab.ck-dark .ck-set-keychip,
.bg-dark .ck-set-keychip {
  background-color: var(--ck-dark-input);
  border-color: var(--ck-dark-border-strong);
}

.ck-set-keychip .access-key-display,
.ck-set-keychip .auto-access-key-text,
.ck-set-keychip > .access-key-shimmer,
.ck-set-keychip > strong,
.ck-set-keychip > p {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: 5px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.ck-set-copybtn {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  color: var(--ck-text-muted);
  font-size: 1rem;
  cursor: pointer;
  border-radius: var(--ck-radius-sm);
  transition: color 0.15s ease;
}

.ck-set-copybtn:hover {
  color: var(--ck-accent);
}

#settingsTab.ck-dark .ck-set-copybtn,
.bg-dark .ck-set-copybtn {
  color: var(--ck-dark-text-muted);
}

#settingsTab.ck-dark .ck-set-copybtn:hover {
  color: var(--ck-accent-ink-dark);
}

.ck-set-access-note {
  display: block;
  margin: 8px auto 4px;
  font-size: 0.8rem;
  color: var(--ck-text-muted);
}

#settingsTab.ck-dark .ck-set-access-note,
.bg-dark .ck-set-access-note {
  color: var(--ck-dark-text-muted);
}

@media only screen and (max-width: 674px) {
  .ck-set-keychip .access-key-display,
  .ck-set-keychip .auto-access-key-text,
  .ck-set-keychip > .access-key-shimmer,
  .ck-set-keychip > strong,
  .ck-set-keychip > p {
    font-size: 1.15rem;
    letter-spacing: 4px;
  }
}

/* ============================================================
   Table polish (site-wide)

   Hairline separators between rows. The quiet column-header
   treatment (muted label on the table surface with a single 1px
   rule) lives in each dashboard's sheet where the legacy header
   rules are; the semantic row tints (on-site green, purple hover)
   are untouched. Selectors carry an extra type (table.table) so
   they outrank the per-sheet border reset regardless of load order.
   ============================================================ */

table.table > tbody > tr > td,
table.table > tbody > tr > th {
  border-bottom: 1px solid var(--ck-border-light);
}

table.table.table-dark > tbody > tr > td,
table.table.table-dark > tbody > tr > th {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

/* No stray hairlines under the final row, spacer cells or empty states */
table.table > tbody > tr:last-child > td,
table.table > tbody > tr:last-child > th,
table.table > tbody > tr > td.noColumnHover,
table.table > tbody > tr > td.empty-state-cell {
  border-bottom-color: transparent;
}

/* ============================================================
   Fire report tabs: semantic colour at rest, as outline + label
   (shared by the admin header tabs and the fire report dashboard)
   ============================================================ */

.fire-report-tab {
  color: #a07800 !important;
  box-shadow: inset 0 0 0 1px #a07800;
}

.fire-report-tab.nav-link-dark {
  color: var(--ck-warning) !important;
  box-shadow: inset 0 0 0 1px var(--ck-warning);
}

.students-fire-report-tab {
  color: var(--ck-danger) !important;
  box-shadow: inset 0 0 0 1px var(--ck-danger);
}

.students-fire-report-tab.nav-link-dark {
  color: #ef7783 !important;
  box-shadow: inset 0 0 0 1px #ef7783;
}

.groups-report-tab {
  color: var(--ck-accent) !important;
  box-shadow: inset 0 0 0 1px var(--ck-accent);
}

.groups-report-tab.nav-link-dark {
  color: #c77df0 !important;
  box-shadow: inset 0 0 0 1px #c77df0;
}