/* public/assets/css/ui-globals.css
 *
 * Global UX defaults applied across the whole dashboard:
 *
 *   1. `cursor: pointer` on every interactive surface (buttons, tab triggers,
 *      anchors styled as buttons, labels paired with form controls).
 *      The browser default for <button> is "default", which feels broken —
 *      everywhere in the app should hint clickability with the hand cursor.
 *
 *   2. `cursor: not-allowed` on disabled controls.
 *
 *   3. `cursor: wait` while a button is in its loading state — set by
 *      ui-busy.js via data-busy="1".
 *
 * Scope: this file lives at /public/assets/css/ui-globals.css and is loaded
 * once from views/layouts/dashboard.php so every dashboard view inherits the
 * rules. It does NOT touch buttons inside :disabled / [aria-disabled="true"]
 * states — those keep the not-allowed cursor.
 */

/* ── Clickable surfaces ──────────────────────────────────────────────────── */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"],
[role="tab"],
.tab-btn,
.tab-button,
.tab-link,
.cp-btn,
a.btn,
button.btn,
label[for]:not(.no-pointer) {
  cursor: pointer;
}

/* Anchors with hrefs that look like buttons (the project uses these heavily). */
a[href] {
  cursor: pointer;
}

/* ── Disabled / busy states ──────────────────────────────────────────────── */
button:disabled,
button[disabled],
input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
[role="button"][aria-disabled="true"],
.tab-btn[disabled],
.tab-button[disabled],
a[aria-disabled="true"] {
  cursor: not-allowed !important;
}

/* While a control is in its loading state (ui-busy.js sets data-busy="1"),
 * show the wait cursor and slightly fade the control so the user can see at a
 * glance that it's mid-action and shouldn't be re-clicked. */
[data-busy="1"] {
  cursor: wait !important;
  opacity: 0.85;
  pointer-events: none;        /* hard-block re-clicks while busy */
}

/* The inline spinner used by ui-busy.js. Tailwind's animate-spin keyframes are
 * available everywhere we use Tailwind, but we replicate them here so the
 * spinner spins even on pages that for some reason load this file before the
 * Tailwind utilities take effect. */
.ui-busy-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: text-bottom;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: ui-busy-spin 0.7s linear infinite;
}
@keyframes ui-busy-spin {
  to { transform: rotate(360deg); }
}

/* ── App tabs (reusable pill-style tab bar) ──────────────────────────────────
 * Lifted from the cashier portal so every tabbed page in the dashboard wears
 * the same shape: a single rounded white card containing icon-over-label
 * tabs; the active tab fills with brand green and white text.
 *
 * Usage:
 *   <div class="app-tabs">
 *     <a  href="?tab=foo" class="app-tab active"><i class="..."></i>Label</a>
 *     <button class="app-tab" data-tab="bar"><i class="..."></i>Label</button>
 *   </div>
 *
 * Works with both <a> tab links (server-side switching via query param) and
 * <button> + JS-driven switching. Keep ONE `active` per tab bar.
 * ─────────────────────────────────────────────────────────────────────────── */
.app-tabs {
  display: flex;
  gap: 4px;
  background: #ffffff;
  border: 1px solid #e7ecea;
  border-radius: 14px;
  padding: 4px;
  margin: 14px 0 16px;
  flex-wrap: wrap;
}

.app-tab {
  flex: 1 1 auto;
  min-width: 84px;
  appearance: none;
  border: none;
  background: transparent;
  padding: 9px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #5b6b66;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  border-radius: 10px;
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-tab:hover { background: #f4f6f8; color: #1a2b27; }

.app-tab i,
.app-tab svg {
  font-size: 18px;
  width: 18px;
  height: 18px;
  display: inline-block;
}

.app-tab.active {
  color: #E1F5EE;
  background: #0F6E56;
}
.app-tab.active:hover { background: #0F6E56; color: #E1F5EE; }

/* When a tab carries a small counter chip (e.g. "Pending (3)"), keep it inline
 * with the label rather than stacking on its own line. */
.app-tab .app-tab-count {
  display: inline-block;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 11px;
  margin-left: 4px;
}
.app-tab:not(.active) .app-tab-count {
  background: #e7ecea;
  color: #1a2b27;
}

/* ── Page-level back / return navigation button ─────────────────────────────
 * Applied to the anchor in page-heading rows (title on the left, button on
 * the right). NOT for form cancel buttons — those live inside cards/forms.
 *
 * Usage:
 *   <a href="..." class="btn-back"><i class="fas fa-arrow-left"></i> Back to X</a>
 * ─────────────────────────────────────────────────────────────────────────── */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #5b6b66;
  background: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-back:hover {
  background: #f4f6f8;
  color: #1a2b27;
}
.btn-back i {
  font-size: 12px;
}


/* breakpoints
 * Tablet-and-below (<=1024px) per an explicit ask that tab sizing/behavior
 * kick in "starting from tablets", not just phones — same breakpoint as the
 * filter drawer and the button-padding reduction in responsive-polish.css. */
@media (max-width: 1024px) {
  /* Default: a tab bar with MORE than 4 tabs still stacks to a full-width
     column (manage/index.php has 9, reversals/index.php has 8 — that many
     short labels genuinely can't fit in one phone-width row even shrunk). */
  .app-tabs {
    flex-direction: column;
  }
  .app-tab {
    flex: 1 1 100%;
    min-width: auto;
  }

  /* Tab bars with 4 or fewer tabs stay in a single horizontal row instead
     of stacking. Quantity-query trick: an .app-tab that is simultaneously
     "within the first 4 children" AND "the last child" can only be true
     when the tab bar has <=4 tabs total — no JS needed to count them.
     Widened from an original <=3 threshold: with font/icon size reduced
     enough (below), 4 short labels — e.g. Basic Info/Guardian/Finances/
     History on the student view page — fit in one row too. Higher
     specificity than the plain `.app-tabs`/`.app-tab` rules above, so this
     correctly wins for the <=4 case, including its own tighter sizing
     (a 4-tab row needs to be smaller than a 2-3 tab row to fit the same
     width, so it's set here rather than shared with the general rule
     below). */
  .app-tabs:has(> .app-tab:nth-child(-n+4):last-child) {
    flex-direction: row;
  }
  .app-tabs:has(> .app-tab:nth-child(-n+4):last-child) > .app-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 6px 2px;
    font-size: 9.5px;
    gap: 1px;
  }
  .app-tabs:has(> .app-tab:nth-child(-n+4):last-child) > .app-tab i,
  .app-tabs:has(> .app-tab:nth-child(-n+4):last-child) > .app-tab svg {
    font-size: 13px;
    width: 13px;
    height: 13px;
  }

  /* Size reduction applies to every tab either way — "the same [reduction
   * done on buttons] must be done on tabs" — only the row-vs-column layout
   * choice above depends on the tab count. This is the fallback for the
   * stacked (5+ tab) case; the <=4-in-a-row case overrides it above with
   * its own tighter sizing. */
  .app-tab {
    padding: 7px 5px;
    font-size: 11px;
    gap: 2px;
  }
  .app-tab i,
  .app-tab svg {
    font-size: 16px;
    width: 16px;
    height: 16px;
  }

  .btn-back {
    width: 100%;
    justify-content: center;
  }

  /* Breadcrumb strip (views/layouts/dashboard.php's #breadcrumb-nav): full
   * desktop padding/gap reads oversized on a phone, especially once a page
   * is a few levels deep (Home > Dashboard > Students > View). Shrink the
   * padding, text, and icon sizes; the chevron separators themselves are
   * fixed at the markup level (text-[10px]) so no override needed here. */
  #breadcrumb-nav {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  #breadcrumb-nav ol {
    gap: 4px;
    font-size: 11px;
  }
  #breadcrumb-nav i {
    font-size: 9px;
  }
}

/* ── Mobile horizontal-overflow safety net ───────────────────────────────────
 * The app's page headers, filter bars and button groups are almost all built
 * with a plain Tailwind `flex` row (title/label on one side, one or more
 * buttons on the other, via `justify-between` or `gap-*`). Tailwind's default
 * flex-wrap is `nowrap`, so on a phone-width viewport a row whose children
 * don't fit just pushes the page wider than the screen instead of stacking —
 * that's what produces the "buttons cut off, grey background bleeding
 * through on the right" look reported on an iPhone XR-width viewport.
 *
 * Rather than hand-editing the ~110 view files that use this pattern, letting
 * every plain `.flex` row wrap below the breakpoint fixes all of them at
 * once. This is deliberately scoped to the block-level `.flex` utility only:
 *   - `.inline-flex` (used everywhere for icon+label buttons/badges/pills)
 *     is untouched, so small inline components keep their single-line shape.
 *   - `.flex.overflow-x-auto` (the 2 intentional horizontal-scroll strips —
 *     the fee-template step indicator and the root settings tab bar) is
 *     excluded, so they keep scrolling sideways instead of wrapping.
 * Worst case for anything this newly affects: a row that used to be forced
 * off-screen now stacks onto a second line — a strict improvement, never a
 * regression, since nothing was reliably visible/reachable in the old
 * overflowing state on a real phone anyway. */
@media (max-width: 767px) {
  .flex:not(.overflow-x-auto) {
    flex-wrap: wrap;
  }

  /* Belt-and-suspenders: if something still ends up wider than the
     viewport (a stray fixed-width element, a long unbreakable string),
     clip the overflow instead of letting the whole page scroll sideways. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* ── Mobile grid reflow (stat cards / KPI rows) ──────────────────────────────
 * 54 view files lay out summary/KPI cards with an *unprefixed* Tailwind
 * `grid-cols-2` through `grid-cols-6` (e.g. third-party-payments/index.php's
 * 3-card "Total Collected / Total Remitted / Outstanding" row) — a fixed
 * column count that never adapts down on a phone. Each column gets squeezed
 * to a sliver, so the fixed-size icon box eats most of it and the label/
 * value text gets truncated ("Tota Colle", "Outs...") — the "icon dominating
 * the card" look reported on a real device.
 *
 * Selectors use `~=` (exact class-token match) rather than a substring match
 * on purpose: a card that's already correctly mobile-first —
 * `grid-cols-1 md:grid-cols-3` — must NOT be touched here, since at mobile
 * width its real column count is already 1. `~=` only fires on the literal
 * unprefixed token, so `md:grid-cols-3` (a different token) is left alone.
 *
 * `repeat(auto-fit, minmax(min(150px,100%),1fr))` reflows each grid to
 * however many ~150px+ columns actually fit the phone's width (usually 1–2)
 * instead of forcing the original fixed count — the `min(150px,100%)` guards
 * even a ~320px-wide phone from overflowing on a single column. */
@media (max-width: 767px) {
  [class~="grid-cols-2"],
  [class~="grid-cols-3"],
  [class~="grid-cols-4"],
  [class~="grid-cols-5"],
  [class~="grid-cols-6"] {
    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)) !important;
  }
}