/* Native Mobile App Styling for Capacitor WebView */

:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Global Native App Reset */
html, body {
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  overscroll-behavior: none !important;   /* no rubber-band, no edge glow, no swipe-to-reload */
  -webkit-overflow-scrolling: touch !important;
}

/* Allow text selection inside inputs, textareas and selectable areas */
input, textarea, select, [contenteditable="true"], .selectable-text {
  user-select: text !important;
  -webkit-user-select: text !important;
}

/* Disable context menus and image saving drag highlights */
img, svg, a, button {
  -webkit-user-drag: none !important;
  -webkit-touch-callout: none !important;
}

/* Body Safe Area Padding for Notch & Home Bar */
body {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
  padding-left: var(--safe-area-left);
  padding-right: var(--safe-area-right);
}

/* Hide scrollbars for native feel while keeping functionality */
::-webkit-scrollbar {
  width: 0px;
  height: 0px;
  background: transparent;
}

/* ==========================================================================
   Nothing should ever scroll sideways
   ========================================================================== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}
/* Wide content - fee reports, rankings, attendance grids - scrolls inside its
   own box. Letting the page scroll sideways instead is the single clearest
   giveaway that an app is a web page in a costume.

   This was originally scoped to .is-native-app, which only exists inside
   Capacitor - so the same table still overflowed for anyone opening the site in
   a phone browser. A 566px table in a 375px viewport was being clipped by the
   body's overflow-x rather than scrolled. It applies to every narrow screen now.
   Columns stay aligned: the cells keep their own widths, only the table box
   becomes a scroll container. */
@media (max-width: 767px) {
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    /* A long unbroken run - an email address, a URL, an admission number -
       otherwise sets the minimum width of whatever card holds it and pushes
       the card past the screen edge. */
    body, p, span, td, th, a, h1, h2, h3, h4 {
        overflow-wrap: break-word;
    }
}

.is-native-app table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}
.is-native-app pre,
.is-native-app .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   Native choice sheet (camera / photos / files)
   ========================================================================== */
.native-sheet { position: fixed; inset: 0; z-index: 10000; }
.native-sheet-backdrop {
    position: absolute; inset: 0; background: rgba(15, 23, 42, .45);
    opacity: 0; transition: opacity .2s ease;
}
.native-sheet.open .native-sheet-backdrop { opacity: 1; }
.native-sheet-panel {
    position: absolute; left: 8px; right: 8px;
    bottom: calc(8px + var(--safe-area-bottom));
    background: #fff; border-radius: 18px; overflow: hidden;
    transform: translateY(110%); transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -8px 40px rgba(15, 23, 42, .25);
}
.native-sheet.open .native-sheet-panel { transform: translateY(0); }
.native-sheet-panel button {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 17px 22px; background: none; border: 0;
    font-size: 15.5px; color: #0f172a; text-align: left; cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}
.native-sheet-panel button i { width: 22px; color: #047857; font-size: 17px; }
.native-sheet-panel button:active { background: #f8fafc; }
.native-sheet-cancel {
    justify-content: center; font-weight: 600; color: #64748b !important;
    border-bottom: 0 !important; margin-top: 6px;
    border-top: 8px solid #f1f5f9 !important;
}

/* ==========================================================================
   Offline
   ========================================================================== */
#native-offline {
    position: fixed; inset: 0; z-index: 10001;
    background: #f8fafc; display: flex; align-items: center; justify-content: center;
    padding: 32px;
}
.native-offline-card { text-align: center; max-width: 300px; }
.native-offline-card i { font-size: 40px; color: #cbd5e1; margin-bottom: 18px; display: block; }
.native-offline-title { font-size: 18px; font-weight: 600; color: #0f172a; margin-bottom: 8px; }
.native-offline-body { font-size: 14px; color: #64748b; line-height: 1.55; margin-bottom: 24px; }
.native-offline-card button {
    background: #047857; color: #fff; border: 0; border-radius: 999px;
    padding: 12px 30px; font-size: 14px; font-weight: 600;
}

/* ==========================================================================
   Toast (press back again to exit, and anything else worth saying briefly)
   ========================================================================== */
#native-toast {
    position: fixed; left: 50%; z-index: 10002;
    bottom: calc(28px + var(--safe-area-bottom));
    transform: translateX(-50%) translateY(12px);
    background: rgba(15, 23, 42, .92); color: #fff;
    padding: 11px 20px; border-radius: 999px; font-size: 13.5px;
    opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
    max-width: 82vw; text-align: center;
}
#native-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* The keyboard pushes the composer up rather than covering it. */
body.keyboard-open { padding-bottom: 0 !important; }