/* ============================================================
   MOBILE APP POLISH
   ------------------------------------------------------------
   Loaded last on every page (after the theme + fix files) so it
   can correct the layout problems that only appear on phones.

   First-principles fixes contained here:
   1. Admin / portal hero topbars no longer reserve desktop
      flex-basis height when they switch to a stacked layout.
   2. Notification bell + dropdown are actually styled (the
      markup existed, the CSS did not).
   3. Wide data tables collapse into readable "label → value"
      cards instead of being clipped (JS adds .m-stack-table).
   4. Multi-column stat/summary grids collapse cleanly.
   5. Filter/search rows and controls stop overflowing.
   6. Long unbroken strings (emails, codes, URLs) wrap instead
      of being cut off.
   ============================================================ */

/* ------------------------------------------------------------
   1. ADMIN / PORTAL TOPBARS
   ------------------------------------------------------------ */
.atb-bell-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.atb-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.atb-bell:hover,
.atb-bell:focus-visible {
  background: rgba(255, 255, 255, .26);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}

.atb-bell-count {
  position: absolute;
  top: -.35rem;
  right: -.45rem;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 .4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--primary-dark, #0f4c3a);
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
}

/* The dropdown used to render in the page flow (no CSS existed),
   pushing the whole admin hero open. It is now a real dropdown. */
.atb-dropdown {
  position: absolute;
  top: calc(100% + 1rem);
  right: 0;
  z-index: 10050;
  display: none;
  width: min(36rem, calc(100vw - 2.4rem));
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--white, #fff);
  color: var(--text, #111827);
  border: 1px solid var(--border-light, #e5e7eb);
  border-radius: var(--r-lg, 14px);
  box-shadow: 0 20px 55px rgba(0, 0, 0, .24);
  text-align: left;
}

.atb-dropdown.open { display: block; }

.atb-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: var(--gray-50, #f9fafb);
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  font-family: var(--font-heading, inherit);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--text, #111827);
}

.atb-dropdown-head .atb-btn {
  padding: .3rem .6rem !important;
  background: transparent !important;
  color: var(--primary, #0f766e) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 1.1rem !important;
}

.atb-dropdown-item {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid var(--border-light, #e5e7eb);
  cursor: pointer;
  transition: background .15s ease;
}

.atb-dropdown-item:hover { background: var(--primary-mist, #eff6ff); }

.atb-dropdown-item-title {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text, #111827);
  line-height: 1.45;
}

.atb-dropdown-item-title i { color: var(--primary, #0f766e); margin-top: .2rem; }

.atb-dropdown-item-msg {
  margin-top: .25rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--text-secondary, #4b5563);
}

.atb-dropdown-item-time {
  margin-top: .45rem;
  font-size: 1.05rem;
  color: var(--text-muted, #6b7280);
}

.atb-dropdown-empty {
  padding: 2.4rem 1.5rem;
  text-align: center;
  font-size: 1.25rem;
  color: var(--text-muted, #6b7280);
}

.atb-dropdown-empty i { font-size: 2.4rem; opacity: .5; margin-bottom: .6rem; display: inline-block; }

.atb-dropdown-foot {
  padding: 1rem 1.5rem;
  text-align: center;
  background: var(--gray-50, #f9fafb);
  font-size: 1.2rem;
}

.atb-dropdown-foot a { color: var(--primary, #0f766e); font-weight: 700; }

/* ------------------------------------------------------------
   2. MOBILE STACKED HERO LAYOUT
   The desktop rule is  .atb-main { flex: 1 1 30rem; }.
   Once the hero switches to a column, that 30rem basis becomes
   a 300px-tall empty block. Reset the basis in column mode.
   ------------------------------------------------------------ */
@media (max-width: 991px) {
  .atb-inner,
  .ptb-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.6rem;
  }

  .atb-main,
  .ptb-main {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .atb-actions,
  .ptb-actions {
    width: 100%;
    justify-content: flex-start;
    gap: .7rem;
  }

  .atb-title-row,
  .ptb-title-row {
    align-items: center;
    gap: 1rem;
  }

  .atb-title,
  .ptb-title {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Inner-page hero (contact, about, primary school, etc.). */
  .brd-hero-text {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .atb-sub,
  .ptb-sub {
    max-width: 100%;
    font-size: 1.4rem;
  }

  .atb-btn,
  .ptb-btn {
    max-width: 100%;
    white-space: normal;
    text-align: left;
  }

  /* Keep the bell visually aligned with the action buttons. */
  .atb-actions .atb-bell-wrap { margin-right: .2rem; }
}

@media (max-width: 767px) {
  .atb { padding: 2.6rem 0 2.2rem; margin-bottom: 2rem; }
  .atb-title,
  .ptb-title { font-size: clamp(2.05rem, 6.4vw, 2.6rem); line-height: 1.2; }
  .atb-bc,
  .ptb-bc { font-size: 1.15rem; gap: .4rem; }
  .atb-pill { font-size: 1.05rem; padding: .45rem 1rem; }

  /* Centered notification sheet on phones. */
  .atb-dropdown {
    position: fixed;
    top: 50%;
    left: 1.2rem;
    right: 1.2rem;
    width: auto;
    max-height: 72vh;
    transform: translateY(-50%);
    border-radius: var(--r-xl, 18px);
    box-shadow: 0 25px 65px rgba(0, 0, 0, .3), 0 0 0 100vmax rgba(0, 0, 0, .38);
  }
}

/* ------------------------------------------------------------
   3. STAT / SUMMARY GRIDS
   These are all the 3–5 column app grids that overflowed or
   became unreadable on a phone. Homepage template grids are
   intentionally NOT touched.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .stats-grid,
  .fee-stats-bar,
  .att-stats,
  .ag-stats-grid,
  .stu-games-stats-grid,
  .stu-history-stats-grid,
  .stu-view-stats,
  .tch-as-stats-grid,
  .wc-stats,
  .hub-num-grid,
  .summary-grid,
  .p-stats-row,
  .cl-stats,
  .dashboard-container .stats-grid,
  .leaderboard-container .stats-grid,
  .idcard-container .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  .fee-stats-bar .fsb-item,
  .stats-grid .stat-card,
  .p-stats-row .p-stat-card { min-width: 0 !important; }

  .fee-stats-bar .fsb-label,
  .fee-stats-bar .fsb-val,
  .stats-grid .stat-label,
  .stats-grid .stat-number { overflow-wrap: anywhere; }

  /* The desktop stat card is a number + label row. At two columns
     the number itself wraps (“NGN” / “0”), so stack them instead. */
  .stats-grid .stat-card,
  .leaderboard-container .stat-card,
  .dashboard-container .stat-card {
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    text-align: left;
  }

  .stats-grid .stat-num { font-size: 2.2rem; }

  /* An odd number of cards leaves a lonely half-row; let the
     last card use the full width instead. */
  .stats-grid > .stat-card:last-child:nth-child(odd),
  .cl-stats > .cl-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Empty status strip (e.g. Payment Management with no pending
   items) used to render as a blank white card. */
.pm-topbar-msg:empty { display: none !important; }
.pm-topbar:has(.pm-topbar-msg:empty) { display: none !important; }

@media (max-width: 360px) {
  .stats-grid,
  .fee-stats-bar,
  .att-stats,
  .ag-stats-grid,
  .stu-games-stats-grid,
  .stu-history-stats-grid,
  .stu-view-stats,
  .tch-as-stats-grid,
  .wc-stats,
  .hub-num-grid,
  .summary-grid,
  .p-stats-row,
  .cl-stats {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ------------------------------------------------------------
   4. FILTERS, FORMS, BUTTON ROWS
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  .pq-filt {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: .9rem !important;
  }

  .pq-filt > .ac-wrap,
  .pq-filt > .pq-inp,
  .pq-filt > .pq-sel,
  .pq-filt > .pq-mini-155,
  .pq-filt > .pq-mini-110 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .pq-inp,
  .pq-sel,
  .pq-mini-155,
  .pq-mini-110 {
    max-width: 100% !important;
  }

  .pq-filter-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .9rem !important;
  }

  .pq-filter-row .pq-filter-left,
  .pq-filter-row .pq-filter-right {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
  }

  .pq-filter-row .pq-filter-right .pq-sel {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* Same first-principles bug as the hero: a desktop
     flex: 1 1 22rem becomes a 220px-tall block once the row is
     switched to a column, and align-items:flex-end pushes the
     actual field to the right edge. */
  .card .form-row,
  .cert-mgmt .form-row,
  .idcard-container .form-row,
  .ed_teacher_form .form-row,
  .admin-section .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1.1rem !important;
  }

  .card .form-row > .form-group,
  .cert-mgmt .form-row > .form-group,
  .idcard-container .form-row > .form-group,
  .ed_teacher_form .form-row > .form-group,
  .admin-section .form-row > .form-group {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  /* Page headers that turn into a column on mobile have the same
     flex-basis problem (22rem becomes a 220px-tall empty block). */
  .cert-mgmt .page-header,
  .page-header.card-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
  }

  body .cert-mgmt .page-header > div,
  body .cert-mgmt .page-header > .page-header-actions,
  body .idcard-container.cert-mgmt .page-header > div,
  body .idcard-container.cert-mgmt .page-header > .page-header-actions,
  body .page-header.card-header-row > div {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  body .cert-mgmt .page-header-actions,
  body .idcard-container.cert-mgmt .page-header-actions,
  body .page-header-actions {
    width: 100% !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: .7rem !important;
  }

  .cert-mgmt .page-header-actions .btn,
  .page-header-actions .btn {
    width: 100% !important;
    white-space: normal !important;
  }

  /* Alerts are flex rows on desktop; a squeezed link on the right
     becomes a 2-character-wide column on a phone. */
  .alert {
    display: block !important;
  }

  .alert > i,
  .alert > .fa {
    margin-right: .5rem;
  }

  .alert a {
    display: inline-block;
    margin-top: .45rem;
    white-space: normal;
  }

  /* Auth/verification pages were vertically centred in a full
     100vh block *after* the hero, producing a huge empty gap. */
  .auth-page-v2 {
    min-height: 0 !important;
    align-items: flex-start !important;
    padding: 2.4rem 1.6rem 3.2rem !important;
  }

  /* A flex row used around plain text + <strong> locks the text
     into a narrow column. Let the sentence flow normally. */
  .rt-intro-tip {
    display: block !important;
  }

  .rt-intro-tip i {
    margin-right: .45rem;
  }

  /* Certificate quick-download banner inherits a white text colour
     from the dark hero rules; restore readable dark text. */
  .cert-mgmt .qd-banner,
  .cert-mgmt .qd-banner > div {
    color: #334155 !important;
  }

  .cert-mgmt .qd-banner strong {
    color: var(--primary-dark, #0f4c3a) !important;
  }

  /* Header cards with an inline flex row: let the sentence take
     its own line and drop the badge underneath it. */
  .header-card > div[style*="display: flex"],
  .header-card > div[style*="display:flex"] {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: .6rem !important;
  }

  .header-card > div[style*="display: flex"] > div:first-child,
  .header-card > div[style*="display:flex"] > div:first-child {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .header-card > div[style*="display: flex"] > div:last-child,
  .header-card > div[style*="display:flex"] > div:last-child {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }

  /* Portal summary labels: “ATTENDANCE” must not break into
     “ATTENDANC / E” at two columns. */
  .p-stats-row .p-stat-label,
  .p-stat-label {
    font-size: 1.05rem !important;
    letter-spacing: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .pq-form-section {
    padding: 1.4rem !important;
    gap: 1rem !important;
  }

  .pq-form-actions-tight {
    width: 100%;
    justify-content: flex-start !important;
  }

  /* Search forms embedded with inline flex styles */
  form[style*="display:flex"],
  form[style*="display: flex"] { flex-wrap: wrap !important; }

  form[style*="display:flex"] > input[type="text"],
  form[style*="display:flex"] > input[type="search"] {
    flex: 1 1 100% !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
   5. RESPONSIVE DATA TABLES
   JS wraps/annotates tables with .m-stack-table and data-label
   attributes. The rules below turn each row into a clean card.
   Tables that cannot be annotated still scroll horizontally.
   ------------------------------------------------------------ */
.m-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
  .table-responsive,
  .pq-table-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive > table,
  .pq-table-scroll > table {
    min-width: max-content;
  }
}

@media (max-width: 640px) {
  table.m-stack-table,
  body table.m-stack-table,
  body .table-responsive > table.m-stack-table,
  body .pq-table-scroll > table.m-stack-table,
  body .idcard-container .students-table.m-stack-table,
  body .cert-mgmt .students-table.cert-table.m-stack-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: transparent !important;
    white-space: normal !important;
  }

  table.m-stack-table thead { display: none !important; }

  table.m-stack-table tbody,
  table.m-stack-table tfoot {
    display: block !important;
    width: 100% !important;
  }

  table.m-stack-table tr {
    display: block !important;
    width: 100% !important;
    margin: 0 0 1rem !important;
    background: var(--white, #fff) !important;
    border: 1px solid var(--border-light, #e5e7eb) !important;
    border-radius: var(--r-lg, 14px) !important;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, .08)) !important;
    overflow: hidden;
  }

  table.m-stack-table tr:hover td { background: transparent !important; }

  table.m-stack-table td {
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    width: auto !important;
    max-width: none !important;
    padding: .9rem 1.15rem !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-light, #e5e7eb) !important;
    background: transparent !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    vertical-align: top !important;
  }

  table.m-stack-table td:last-child { border-bottom: 0 !important; }

  table.m-stack-table td::before {
    content: attr(data-label);
    flex: 0 0 34%;
    min-width: 7.5rem;
    text-align: left;
    font-family: var(--font-heading, inherit);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--text-muted, #6b7280);
  }

  table.m-stack-table td > .m-cell-value {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    text-align: right;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  table.m-stack-table td.m-stack-full > .m-cell-value,
  table.m-stack-table td.m-stack-actions > .m-cell-value {
    width: 100%;
    text-align: left;
  }

  table.m-stack-table td[data-label=""]::before,
  table.m-stack-table td[data-label]::before:empty { display: none !important; }

  table.m-stack-table td.m-stack-full,
  table.m-stack-table td.m-stack-actions {
    display: block !important;
    text-align: left !important;
  }

  table.m-stack-table td.m-stack-full::before,
  table.m-stack-table td.m-stack-actions::before {
    display: block !important;
    margin-bottom: .5rem;
  }

  table.m-stack-table td.m-stack-actions .btn,
  table.m-stack-table td.m-stack-actions .pq-btn,
  table.m-stack-table td.m-stack-actions .ms-btn,
  table.m-stack-table td.m-stack-actions a,
  table.m-stack-table td.m-stack-actions button {
    margin: .2rem .35rem .2rem 0;
  }

  /* Never reveal columns a page deliberately hides. */
  table.m-stack-table td.d-none,
  table.m-stack-table td.hidden,
  table.m-stack-table td[style*="display:none"],
  table.m-stack-table td[style*="display: none"] {
    display: none !important;
  }

  table.m-stack-table td img {
    max-width: 100%;
    height: auto;
  }
}

/* ------------------------------------------------------------
   6. TEACHER FINGERPRINT ENROLLMENT
   This page shipped with no stylesheet for its .fp-* markup at
   all, so it was an unstyled column of text on every device.
   ------------------------------------------------------------ */
.fp-enroll-wrap {
  display: grid;
  grid-template-columns: minmax(26rem, 34rem) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 2.4rem 5rem;
}

.fp-staff-panel,
.fp-scanner-panel {
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.fp-staff-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--border-light);
}

.fp-staff-header h3 {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
}

.enroll-badge {
  background: var(--primary-mist);
  color: var(--primary-dark);
  border: 1px solid var(--green-200);
  border-radius: var(--r-full);
  padding: .35rem .9rem;
  font-size: 1.1rem;
  font-weight: 700;
  white-space: nowrap;
}

.fp-search {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-light);
}

.fp-search input {
  width: 100%;
  max-width: 100%;
  padding: .9rem 1.1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--text);
  background: var(--white);
  outline: none;
}

.fp-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.fp-staff-list {
  max-height: 62vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fp-staff-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border-light);
  cursor: pointer;
  transition: background .15s ease;
}

.fp-staff-item:hover { background: var(--primary-mist); }
.fp-staff-item:last-child { border-bottom: 0; }

.fp-staff-avatar {
  flex: 0 0 3.8rem;
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 800;
}

.fp-staff-info { flex: 1 1 auto; min-width: 0; }

.fp-staff-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  overflow-wrap: anywhere;
}

.fp-staff-meta {
  font-size: 1.1rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.fp-status-dot {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
}

.fp-status-dot.enrolled { background: #16a34a; }
.fp-status-dot.pending { background: #e5e7eb; border: 1px solid #cbd5e1; }

.fp-scanner-panel {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.fp-scanner-status {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
}

.fp-dot {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: #94a3b8;
}

.fp-dot.ok { background: #16a34a; }
.fp-dot.err { background: #dc2626; }
.fp-dot.warn { background: #f59e0b; }

.fp-notice {
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 1.2rem;
  line-height: 1.6;
}

.fp-notice.info {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.fp-notice.info a {
  color: #1d4ed8;
  font-weight: 700;
  word-break: break-all;
}

.fp-scanner-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.fp-selected-teacher {
  width: 100%;
  padding: 1rem 1.2rem;
  text-align: left;
  background: var(--gray-50);
  border: 1px solid var(--border-light);
  border-radius: var(--r-md);
}

.fp-selected-teacher .label {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fp-selected-teacher .name {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
}

.fp-ring {
  width: 16rem;
  height: 16rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: radial-gradient(circle, var(--primary-mist) 0%, var(--white) 70%);
  transition: box-shadow .25s ease, border-color .25s ease;
}

.fp-ring svg { width: 9rem; height: 9rem; }
.fp-ring.active { box-shadow: 0 0 0 .6rem rgba(59, 130, 246, .12); border-color: #93c5fd; }

.fp-hint {
  max-width: 34rem;
  font-size: 1.25rem;
  color: var(--text-secondary);
}

.fp-hint.ok { color: #15803d; font-weight: 700; }
.fp-hint.err { color: #b91c1c; font-weight: 700; }

.fp-sample-count {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-muted);
}

.fp-btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  width: 100%;
}

.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

.fp-btn:disabled { opacity: .45; cursor: not-allowed; }
.fp-btn:not(:disabled):hover { transform: translateY(-1px); }
.fp-btn-primary { background: var(--primary); color: #fff; }
.fp-btn-ghost { background: var(--gray-100); color: var(--text); border-color: var(--border); }
.fp-btn-danger { background: #dc2626; color: #fff; }

.fp-result {
  display: none;
  width: 100%;
  padding: .9rem 1rem;
  border-radius: var(--r-md);
  font-size: 1.25rem;
  font-weight: 700;
}

.fp-result.show { display: block; }
.fp-result.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.fp-result.bad { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.fp-log {
  width: 100%;
  max-height: 12rem;
  overflow: auto;
  padding: .9rem 1rem;
  text-align: left;
  border-radius: var(--r-md);
  background: #0f172a;
  color: #e2e8f0;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem;
  line-height: 1.6;
}

.fp-log-info { color: #93c5fd; }
.fp-log-ok { color: #86efac; }
.fp-log-warn { color: #fcd34d; }
.fp-log-err { color: #fca5a5; }

@media (max-width: 900px) {
  .fp-enroll-wrap {
    grid-template-columns: minmax(0, 1fr);
    padding: 1.6rem 2.4rem 4rem;
  }
  .fp-staff-list { max-height: 40vh; }
}

@media (max-width: 480px) {
  .fp-enroll-wrap { padding: 1.4rem 1.6rem 3.6rem; }
  .fp-ring { width: 13rem; height: 13rem; }
  .fp-ring svg { width: 7rem; height: 7rem; }
  .fp-btn { flex: 1 1 100%; }
}

/* ------------------------------------------------------------
   7. OVERFLOWING TEXT / EMBEDS
   ------------------------------------------------------------ */
img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
}

code,
pre,
.template-preview {
  max-width: 100%;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.atb-bc li,
.ptb-bc li,
.pq-badge,
.badge {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Long emails / URLs in cards should wrap, not push the card. */
a { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  .idcard-container,
  .cert-mgmt {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Wrap tab strips instead of hiding the last tab off-screen.
     Three or four tabs fit in two rows and stay reachable. */
  .pq-tabs {
    padding-left: .4rem !important;
    padding-right: .4rem !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
  }

  .pq-tab {
    flex: 0 1 auto !important;
    padding: .85rem 1.05rem !important;
    font-size: 1.2rem !important;
    white-space: normal !important;
  }

  /* Attendance filter: two columns leave ~100px selects and a
     stranded date hint. One column is readable. */
  .att-filter-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Attendance page is nested in a Bootstrap row + col + padded
     wrapper, which inset all of its cards ~30px compared with the
     rest of the admin pages. Drop the extra gutters on phones. */
  .attendance-page .row > [class*='col-'] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .attendance-page .attendance-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .att-class-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .8rem !important;
  }

  .att-quick-actions {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  .att-class-banner .att-class-info h4,
  .att-class-banner .att-class-info p {
    color: #fff !important;
  }

  .mkt-hero,
  .mkt-hero-text h3,
  .mkt-hero-text p {
    color: #fff !important;
  }

  /* Clock-log filters: two content-width columns clipped the
     search placeholder. Give every field the full row. */
  .cl-fl .cl-fl-grp {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .pq-card {
    border-radius: var(--r-lg, 14px) !important;
  }

  /* Keep action rows from pushing content off-screen. */
  .pq-actions-cell,
  .ms-actions,
  .atb-actions {
    flex-wrap: wrap;
  }

  /* A month calendar is still a 7-column grid on a phone. Keep it
     compact instead of turning every week into a long list. */
  table.calendar-table {
    display: table !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed;
    border-collapse: separate !important;
    border-spacing: .15rem !important;
  }

  .calendar-table th {
    padding: .3rem .1rem !important;
    font-size: .95rem !important;
    letter-spacing: 0 !important;
  }

  .calendar-table td {
    height: 4.6rem !important;
    padding: .2rem !important;
    font-size: 1rem !important;
  }

  .calendar-table .day-number {
    font-size: 1.05rem !important;
    margin-bottom: .1rem !important;
  }

  .calendar-table .event-dot {
    display: block;
    max-width: 100%;
    padding: 0 .2rem !important;
    font-size: .8rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Report-card preview stays a preview; scroll it sideways. */
  .rt-preview-table,
  .idcard-preview-table,
  .result-preview-table {
    display: table !important;
    min-width: 620px !important;
  }

  .rt-preview-wrap,
  .idcard-preview-wrap,
  .result-preview-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}