/*
 * PWA Super App — mobile app shell and hub home screen.
 *
 * Loaded on every page by the extension asset injector, so every rule is scoped
 * to either `.pwa-*` (markup only this extension emits) or `body.pwa-shell`, a
 * class pwa.js adds only on panel pages on a phone. The public site and the
 * desktop panel therefore see no change at all from this file.
 *
 * Written with logical properties (inset-inline, padding-inline, margin-inline)
 * so the Persian RTL panel and an LTR one both lay out correctly from the same
 * declarations.
 */

:root {
    --pwa-tint: #2563eb;
    --pwa-radius: 16px;
    --pwa-tabbar-height: 62px;
    --pwa-gap: 12px;
    --pwa-surface: #ffffff;
    --pwa-surface-2: #f4f6fb;
    --pwa-text: #1f2937;
    --pwa-muted: #6b7280;
    --pwa-border: rgba(17, 24, 39, .08);
}

body.dark-theme {
    --pwa-surface: #1b1f2b;
    --pwa-surface-2: #151823;
    --pwa-text: #e5e7eb;
    --pwa-muted: #9ca3af;
    --pwa-border: rgba(255, 255, 255, .08);
}

/* ---------------------------------------------------------------- app shell */

/* Room for the fixed tab bar, plus the home-indicator inset on iOS. */
body.pwa-shell .app-content,
body.pwa-shell .page-main {
    padding-bottom: calc(var(--pwa-tabbar-height) + env(safe-area-inset-bottom) + 12px) !important;
}

body.pwa-shell .pwa-tabbar {
    display: flex;
}

.pwa-tabbar {
    display: none;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1030;
    align-items: stretch;
    justify-content: space-around;
    height: calc(var(--pwa-tabbar-height) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--pwa-surface);
    border-top: 1px solid var(--pwa-border);
    box-shadow: 0 -6px 20px rgba(17, 24, 39, .06);
}

.pwa-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: none;
    padding: 6px 2px;
    color: var(--pwa-muted);
    font-size: 10px;
    line-height: 1.4;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

.pwa-tab i {
    font-size: 17px;
}

.pwa-tab.is-active,
.pwa-tab:hover {
    color: var(--pwa-tint);
    text-decoration: none;
}

/* Centre tab (Home), lifted out of the bar. */
.pwa-tab--centre {
    position: relative;
    color: #fff;
}

.pwa-tab--centre i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-top: -18px;
    border-radius: 50%;
    background: var(--pwa-tint);
    color: #fff;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, .35);
    transition: transform .15s ease;
}

.pwa-tab--centre span {
    color: var(--pwa-muted);
}

.pwa-tab--centre.is-active span {
    color: var(--pwa-tint);
}

.pwa-tab--centre:active i {
    transform: scale(.94);
}

/* ------------------------------------------------------------ bottom sheet */

.pwa-sheet[hidden] {
    display: none;
}

.pwa-sheet {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.pwa-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    animation: pwa-fade .18s ease;
}

.pwa-sheet__panel {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background: var(--pwa-surface);
    border-radius: 20px 20px 0 0;
    padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
    animation: pwa-rise .22s cubic-bezier(.22, .8, .3, 1);
}

.pwa-sheet__grabber {
    width: 40px;
    height: 4px;
    margin: 8px auto 16px;
    border-radius: 2px;
    background: var(--pwa-border);
}

.pwa-sheet__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 8px;
    border-radius: 12px;
    color: var(--pwa-text);
    font-size: 14px;
    text-decoration: none;
}

.pwa-sheet__item:hover {
    background: var(--pwa-surface-2);
    color: var(--pwa-text);
    text-decoration: none;
}

.pwa-sheet__item i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--pwa-tint) 12%, transparent);
    color: var(--pwa-tint);
    font-size: 15px;
}

@keyframes pwa-rise {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@keyframes pwa-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------- hub page */

.pwa-hub {
    max-width: 720px;
    margin-inline: auto;
    padding-block: 8px 24px;
}

.pwa-status {
    background: linear-gradient(135deg, var(--pwa-tint), color-mix(in srgb, var(--pwa-tint) 62%, #111827));
    border-radius: 18px;
    padding: 13px 14px;
    color: #fff;
}

.pwa-status__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

/* The two flanks share the leftover space equally, which is what puts the gauge
   in the actual centre of the card — sizing only the greeting made the gauge
   sit wherever the name happened to end. Both may shrink; the gauge may not. */
.pwa-status__who {
    flex: 1 1 0;
    min-width: 0;
}

.pwa-status__hello {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-status__plan {
    margin-top: 1px;
    font-size: 10px;
    opacity: .85;
}

.pwa-status__actions {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.pwa-status__cta {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.pwa-status__cta:hover {
    background: rgba(255, 255, 255, .28);
    color: #fff;
    text-decoration: none;
}

/* Notification bell, with the unread count riding on its corner. */
.pwa-bell {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 12px;
}

.pwa-bell.is-open {
    background: rgba(255, 255, 255, .34);
}

.pwa-bell__count {
    position: absolute;
    top: -3px;
    inset-inline-end: -3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 17px;
}

/* ------------------------------------------------------------ credit gauge */

/* The same half circle the dashboard draws, as static SVG — see the note in
   hub.blade.php for why this is not the dashboard's charting library. */
/* Sized to sit between the greeting and the upgrade button and read as their
   equal rather than as the card's headline. The viewBox is trimmed to 110 in
   hub.blade.php so this box hugs the arc, which is what lets align-items
   centre it level with the text on either side. */
.pwa-gauge {
    position: relative;
    flex: 0 0 auto;
    width: 88px;
    margin: 0;
}

.pwa-gauge__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.pwa-gauge__track,
.pwa-gauge__value {
    fill: none;
    /* In viewBox units, so this thickens as the arc shrinks — at 104px wide it
       renders around 8px, which keeps the ring readable at a glance. */
    stroke-width: 16;
    stroke-linecap: round;
}

.pwa-gauge__track {
    stroke: rgba(255, 255, 255, .18);
}

.pwa-gauge__value {
    stroke: #fff;
}

/* Sits inside the arc rather than under it: the reading and the ring it
   belongs to should be one object, not a chart with a caption. */
.pwa-gauge__inner {
    position: absolute;
    inset-inline: 0;
    bottom: 6%;
    text-align: center;
    line-height: 1.2;
}

.pwa-gauge__value-text {
    display: block;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    /* A long balance must not push the label out of the arc. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pwa-gauge__label {
    display: block;
    font-size: 8px;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .8);
}

.pwa-status__credits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
}

.pwa-credit {
    border: 0;
    border-radius: 10px;
    padding: 7px 6px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    text-align: center;
}

.pwa-credit__value {
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.pwa-credit__label {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    opacity: .8;
}

/* Same cell, but a link rather than a balance — the icon takes the slot the
   number occupies in the other two so all three line up. */
.pwa-credit--action {
    display: block;
    text-decoration: none;
}

.pwa-credit--action:hover {
    background: rgba(255, 255, 255, .24);
    color: #fff;
    text-decoration: none;
}

.pwa-credit--action .pwa-credit__value {
    font-size: 13px;
    line-height: 1.15;
}

.pwa-search {
    position: relative;
    margin-top: 18px;
}

.pwa-search i {
    position: absolute;
    inset-inline-start: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pwa-muted);
    font-size: 13px;
    pointer-events: none;
}

.pwa-search input {
    width: 100%;
    height: 44px;
    padding-inline: 40px 14px;
    border: 1px solid var(--pwa-border);
    border-radius: 14px;
    background: var(--pwa-surface);
    color: var(--pwa-text);
    font-size: 13px;
    outline: none;
}

.pwa-search input:focus {
    border-color: var(--pwa-tint);
}

.pwa-section {
    margin-top: 22px;
}

.pwa-section[hidden] {
    display: none;
}

.pwa-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.pwa-section__head h2 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pwa-text);
}

.pwa-section__link {
    font-size: 11px;
    color: var(--pwa-tint);
    text-decoration: none;
}

/* ----------------------------------------------------------- notifications */

.pwa-notifications {
    margin-top: 18px;
}

.pwa-notifications[hidden] {
    display: none;
}

.pwa-note {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--pwa-border);
    border-radius: 14px;
    background: var(--pwa-surface);
    color: var(--pwa-text);
    text-decoration: none;
}

.pwa-note:hover {
    color: var(--pwa-text);
    text-decoration: none;
    border-color: var(--pwa-tint);
}

.pwa-note__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--pwa-tint) 12%, transparent);
    color: var(--pwa-tint);
    font-size: 13px;
}

.pwa-note__body {
    min-width: 0;
}

.pwa-note__title {
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.pwa-note__when {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--pwa-muted);
}

/* ----------------------------------------------------------- promo banner */

.pwa-banner {
    display: block;
    position: relative;
    margin-top: 16px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--pwa-surface-2);
    color: var(--pwa-text);
    text-decoration: none;
}

.pwa-banner:hover {
    color: var(--pwa-text);
    text-decoration: none;
}

.pwa-banner__image {
    display: block;
    width: 100%;
    height: auto;
}

/* Over the image when there is one, on the plain surface when there is not —
   so a banner with text only is still a readable card rather than a gap. */
.pwa-banner__text {
    display: block;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.7;
}

.pwa-banner__text strong {
    display: block;
    font-size: 13px;
}

.pwa-banner__image + .pwa-banner__text {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    background: linear-gradient(transparent, rgba(17, 24, 39, .78));
    color: #fff;
}

.pwa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pwa-gap) 4px;
}

.pwa-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 4px 2px;
    color: var(--pwa-text);
    text-decoration: none;
}

.pwa-tile[hidden] {
    display: none;
}

.pwa-tile:hover {
    color: var(--pwa-text);
    text-decoration: none;
}

.pwa-tile__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: var(--pwa-radius);
    background: color-mix(in srgb, var(--pwa-tint) 13%, transparent);
    color: var(--pwa-tint);
    font-size: 19px;
    transition: transform .15s ease;
}

.pwa-tile:active .pwa-tile__icon {
    transform: scale(.94);
}

.pwa-tile__label {
    font-size: 11px;
    line-height: 1.45;
    text-align: center;
    max-width: 78px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Pin buttons appear only while the grid is in edit mode. */
.pwa-tile__pin {
    display: none;
    position: absolute;
    inset-inline-end: 6px;
    top: -2px;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: var(--pwa-surface);
    box-shadow: 0 2px 6px rgba(17, 24, 39, .18);
    color: var(--pwa-muted);
    font-size: 9px;
}

.pwa-hub.is-editing .pwa-tile__pin {
    display: block;
}

.pwa-tile__pin.is-pinned {
    background: var(--pwa-tint);
    color: #fff;
}

.pwa-empty {
    margin-top: 28px;
    text-align: center;
    color: var(--pwa-muted);
    font-size: 12px;
}

.pwa-empty[hidden] {
    display: none;
}

/* ----------------------------------------------------------- install banner */

.pwa-install {
    position: fixed;
    inset-inline: 12px;
    bottom: calc(var(--pwa-tabbar-height) + env(safe-area-inset-bottom) + 12px);
    z-index: 1035;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--pwa-surface);
    border: 1px solid var(--pwa-border);
    box-shadow: 0 10px 30px rgba(17, 24, 39, .18);
    animation: pwa-rise .25s cubic-bezier(.22, .8, .3, 1);
}

.pwa-install__text {
    flex: 1 1 auto;
    font-size: 12px;
    line-height: 1.6;
    color: var(--pwa-text);
}

.pwa-install__accept {
    flex: 0 0 auto;
    border: 0;
    border-radius: 10px;
    padding: 8px 16px;
    background: var(--pwa-tint);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.pwa-install__close {
    flex: 0 0 auto;
    border: 0;
    background: none;
    color: var(--pwa-muted);
    font-size: 14px;
    padding: 4px;
}

/* --------------------------------------------------------------- desktop */

/* The tab bar is a phone affordance; on a wide screen the sidebar already does
   this job, so only the hub page's own styling survives. */
@media (min-width: 1024px) {
    .pwa-tabbar,
    .pwa-install {
        display: none !important;
    }

    body.pwa-shell .app-content,
    body.pwa-shell .page-main {
        padding-bottom: 4rem !important;
    }

    .pwa-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pwa-sheet__panel,
    .pwa-sheet__backdrop,
    .pwa-install {
        animation: none;
    }

    .pwa-tile__icon,
    .pwa-tab--centre i {
        transition: none;
    }
}