/*
 * Kitae Studio PhoneLink - phone-only chrome.
 *
 * Tabler and the Catanari control styles arrive in framework.css; this file only adjusts what a
 * handset needs and the framework cannot assume: a full-height dark page, safe-area padding for a
 * notch, and touch targets that survive a thumb.
 */

.phone-body {
    margin: 0;
    min-height: 100dvh;
    background: radial-gradient(120% 80% at 50% 0%, #17182b 0%, #090b16 60%, #05060d 100%);
    color: var(--tblr-body-color);
    /* An installed PWA fills the display, so the notch and the gesture bar are ours to avoid. */
    padding: env(safe-area-inset-top) env(safe-area-inset-right)
             env(safe-area-inset-bottom) env(safe-area-inset-left);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: none;
}

#phone-app {
    min-height: 100dvh;
}

/* The visible failure the shell falls back to. Deliberately styled: an unstyled message on a black
   page reads as a broken site rather than as a diagnosis. */
.phone-fallback {
    margin: 0;
    padding: 2rem 1.5rem;
    color: #f7b0b0;
    font: 500 0.95rem/1.5 system-ui, sans-serif;
    text-align: center;
}

/* A thumb is not a mouse pointer: give every control the platform's minimum target. */
.phone-body .btn,
.phone-body .list-group-item-actions,
.phone-body .nav-link {
    min-height: 44px;
}

/* A dashboard stat tile is half a handset wide, and Tabler sizes its figure for a desktop column.
   Two per row at 390px leaves about 160px inside the padding, which a six-figure count at the full
   h1 walks straight out of - and the icon beside it has first claim on that width. Give the figure
   a size that fits, and let the text block shrink instead of overflowing its flex row. */
.phone-body .card-sm .h1 {
    font-size: 1.5rem;
}
.phone-body .card-sm .card-body > .d-flex > div {
    min-width: 0;
}

/*
 * The three layout hooks PhoneLink's TypeScript attaches by name. Everything else about the app is
 * a framework control method; these three exist because a column that fills the viewport, a scroll
 * region inside it, and a fixed strip that clears the gesture bar are page layout rather than
 * control styling - and env(safe-area-inset-bottom) is not something a control method can say.
 */
.phone-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.phone-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* The pull-to-refresh indicator is absolutely positioned inside this region, so this is what it
       positions against. Without it the indicator anchors to the page and drifts as you scroll. */
    position: relative;
    /* Clear the fixed nav strip, so the last card is reachable rather than sitting under it. */
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

.phone-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem calc(0.25rem + env(safe-area-inset-bottom));
    background: rgba(9, 11, 22, 0.92);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--tblr-border-color);
}

/* Nav buttons stack their icon over their label and share the strip evenly. */
.phone-nav .btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.25rem;
    font-size: 0.7rem;
    line-height: 1;
}

.phone-nav .btn .icon {
    margin: 0;
    font-size: 1.35rem;
}