/* =====================================================================
   Hand-expanded plain-CSS equivalents of TailAdmin's Tailwind v4
   `@utility` classes (menu-item, menu-dropdown-item, etc). The Tailwind
   Play CDN used for the admin panel only compiles utility classes, not
   custom @utility/@apply blocks, so these are defined here instead.
   Loaded alongside (not replacing) admin.css - the sidebar/topbar/
   dashboard use these Tailwind-style classes, everything else in the
   admin panel keeps using admin.css untouched.
   ===================================================================== */

/* The login page loads this file WITHOUT the Tailwind CDN, so it gets no
   preflight - state the box model here so widths/heights match either way. */
*, *::before, *::after { box-sizing: border-box; }

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    font-family: inherit;
    position: relative;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}
.menu-item-active { background-color: #ECF3FF; color: #465FFF; }
.menu-item-inactive { color: #344054; }
.menu-item-inactive:hover { background-color: #F2F4F7; color: #344054; }
.menu-item-icon-active { fill: #465FFF; color: #465FFF; }
.menu-item-icon-inactive { fill: #667085; color: #667085; }
.menu-item-arrow { position: absolute; top: 50%; right: 0.625rem; transform: translateY(-50%); transition: transform .2s ease; }
.menu-item-arrow-active { stroke: #465FFF; transform: translateY(-50%) rotate(180deg); }
.menu-item-arrow-inactive { stroke: #667085; }

.menu-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
}
.menu-dropdown-item-active { background-color: #ECF3FF; color: #465FFF; }
.menu-dropdown-item-inactive { color: #344054; }
.menu-dropdown-item-inactive:hover { background-color: #F2F4F7; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.tw-sidebar button, .tw-header button { cursor: pointer; }

body { font-family: 'Outfit', sans-serif; }

/* Every element in the admin views carries its own utility classes. This is
   just the fallback for plain inline links inside page content (external
   links in Settings, a resume download in Careers, ...) so they read as links
   without each one repeating the same two utilities. */
.tw-main a:not([class]) { color: #465FFF; font-weight: 500; }
.tw-main a:not([class]):hover { color: #3641F5; }

/* TailAdmin's selects are `appearance-none`, which drops the native arrow; the
   theme redraws it as a background chevron. Same SVG, same gray-500 stroke. */
.tw-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23667085' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* ---------------------------------------------------------------------
   App shell — makes the admin and portal behave like an installed app
   rather than a web page on a phone.

   Two separate problems are being solved here:

   1. `100vh` on mobile is the viewport with the browser chrome HIDDEN, so a
      100vh shell is genuinely taller than what you can see. The overflow is
      what lets the page be dragged, which is what triggers pull-to-refresh
      and the "screen goes up" feeling. `100dvh` is the *current* viewport
      and is the actual fix; the plain `vh` line above it is the fallback for
      browsers without dvh.

   2. Even with a correct height, scrolling past the top of an inner pane
      chains the scroll up to the document, which is the other way to reach
      pull-to-refresh. `overscroll-behavior` stops that chaining.

   Scoped to `.app-body` on purpose: the login and onboarding pages share this
   stylesheet and are ordinary documents that must still scroll normally.
   --------------------------------------------------------------------- */
html {
    height: 100%;
    overscroll-behavior: none;
}

body.app-body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

.app-shell {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* The one element in the page that scrolls. `min-height: 0` is required —
   without it a flex child refuses to shrink below its content and the
   scrollbar lands on the document instead. */
.app-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

/* Pages that fill the frame exactly (chat): nothing scrolls at page level,
   only the panes inside them. */
.app-scroll.is-fixed {
    overflow: hidden;
}

/* Keep content clear of the fixed bottom navigation and the home indicator. */
@media (max-width: 1023px) {
    /* 72px, not 64: the nav measures 66px (icon + label + padding) and the
       reserved strip has to be at least as tall or the last row of content
       sits underneath it. */
    .app-scroll {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* The `hidden` attribute loses to Tailwind's `.flex` / `.grid` utilities —
   both are specificity (0,1,0) and the utilities are emitted later — so an
   element marked hidden while also carrying a display utility stays visible.
   That leaked the standalone-only back arrow into ordinary browser tabs. */
[hidden] { display: none !important; }

/* Installed as an app: the sticky header sits directly under the status bar /
   notch, so it has to carry that inset itself — otherwise the first row of
   controls ends up underneath the clock. Only applies in standalone; in a
   browser tab the chrome already accounts for it. */
[data-standalone='true'] .tw-header,
[data-standalone='true'] header.sticky {
    padding-top: env(safe-area-inset-top);
}

[data-standalone='true'] .app-shell {
    /* Belt and braces: some Android launchers report a viewport that includes
       the gesture bar. */
    height: 100dvh;
}

/* Text selection on long-press feels like a web page, not an app. Keep it for
   the places people genuinely copy from — messages, codes, tables. */
[data-standalone='true'] body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

[data-standalone='true'] input,
[data-standalone='true'] textarea,
[data-standalone='true'] p,
[data-standalone='true'] td,
[data-standalone='true'] .font-mono,
[data-standalone='true'] [data-selectable] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Inner scrollers — the message thread, the conversation list, modal bodies.
   Reaching the end of one of these must not hand the gesture to the page:
   that is the second route to pull-to-refresh, and the one you hit by
   flicking upward inside a chat. */
.custom-scrollbar,
[data-scroll-pane] {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   No zoom on mobile.

   Three separate behaviours cause the "page zooms while I'm scrolling"
   problem, and the viewport meta only covers one of them:

   1. pinch / double-tap zoom  -> viewport meta + touch-action below
   2. focusing an input        -> iOS auto-zooms whenever a form control's
                                  font-size is under 16px, and the theme uses
                                  14px (text-sm). This is the one people
                                  actually hit: tap a field, page jumps.
   3. text auto-inflation      -> WebKit resizes text on rotate
   --------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body { touch-action: manipulation; }

/* [class] is there for specificity: every field carries `text-sm`, and a bare
   `input` selector would lose to it. */
@media (max-width: 767px) {
    input, select, textarea,
    input[class], select[class], textarea[class] { font-size: 16px; }
}

/* Safari/WebKit size date inputs from their own intrinsic content and add
   padding inside the native editor, so a `h-11 w-full` date field ends up
   taller than its neighbours and wide enough to blow out its grid column
   (grid items default to min-width:auto). Reset the native chrome so date
   fields match every other input. */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
    min-width: 0;
    max-width: 100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="month"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
    min-height: 0;
}
input[type="date"]::-webkit-datetime-edit,
input[type="datetime-local"]::-webkit-datetime-edit,
input[type="month"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit { padding: 0; }
input[type="date"]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type="date"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button { display: none; }
input[type="date"]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0.5;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 0.8; }

/* Same root cause: any form control in a grid/flex cell needs min-width:0 or
   its intrinsic width wins and the row overflows. */
.tw-main input,
.tw-main select,
.tw-main textarea { min-width: 0; }

/* Bill attachment lightbox (app-specific sizing the utility set has no token for). */
.bill-lightbox-body { min-height: 300px; }
.bill-lightbox-body .bill-lightbox-img { max-width: 100%; max-height: 75vh; }
.bill-lightbox-body .bill-lightbox-frame { width: 100%; height: 75vh; border: 0; }

/* The sidebar drawer is the last place a raw 100vh was left; on a phone that
   is taller than the visible area, so the drawer's own scroll ran off-screen. */
.app-drawer {
    height: 100vh;
    height: 100dvh;
    overscroll-behavior: contain;
}

/* The volunteer portal hides its bottom nav at md (768px), not lg like the
   admin panel, so the space reserved for that nav has to end at the same
   breakpoint — otherwise tablets show a dead strip under the content. */
@media (min-width: 768px) {
    .app-scroll--nav-md { padding-bottom: 0; }
}