/* ============================================================
   PHONE VIEW
   The website on a phone looks the same as the iPhone/Android app: the phone pages
   (Components/Phone) are built from widgets copied from Aaf.Mobile, and these are the
   app's shared styles (Aaf.Mobile/wwwroot/app.css) they rely on.
   Everything is scoped under .phone-view so the desktop pages are untouched.
   ------------------------------------------------------------ */

/* The app runs with Bootstrap's reset; the website doesn't, so the parts the widgets
   depend on are repeated here. */
.phone-view,
.phone-view *,
.phone-view *::before,
.phone-view *::after {
    box-sizing: border-box;
}

.phone-view {
    line-height: 1.5;
    color: var(--AAFRoyalBlue);
}

    .phone-view p,
    .phone-view h1, .phone-view h2, .phone-view h3,
    .phone-view h4, .phone-view h5, .phone-view h6 {
        margin-top: 0;
    }

    .phone-view p {
        margin-bottom: 1rem;
    }

    .phone-view h1, .phone-view h2, .phone-view h3,
    .phone-view h4, .phone-view h5, .phone-view h6 {
        margin-bottom: 0.5rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .phone-view button {
        font-family: inherit;
    }

    /* The contact row is a mailto: link on the web (a button in the app) */
    .phone-view a.contact-row {
        color: inherit;
        text-decoration: none;
    }

/* Reusable two/three-way segmented toggle (e.g. Bids/Offers, Open/Pending) —
   shared here rather than duplicated per-component scoped CSS since Blazor
   scoped styles can't be shared across components. */
.seg-toggle {
    display: flex;
    background: var(--LogoLightGrey);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
    margin: 14px 0 12px;
}

.seg-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: transparent;
    color: var(--DarkGreen);
    font-family: var(--font-family-base);
    font-size: var(--SmallMediumFont);
    font-weight: 600;
    padding: 8px 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .seg-option.active {
        background: #FFFFFF;
        color: var(--LogoGreen);
        box-shadow: var(--card-shadow);
    }

    .seg-option .seg-count {
        font-size: var(--SmallFont);
        font-weight: 700;
        color: var(--LogoGrey);
    }

    .seg-option.active .seg-count {
        color: var(--LogoGold);
    }


.cost-summary {
    margin: 4px 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--LogoLightGrey);
    border-radius: 8px;
}

.cost-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--SmallMediumFont);
    color: var(--AAFRoyalBlue);
}

    .cost-summary-row + .cost-summary-row {
        margin-top: 6px;
    }

.cost-summary-value {
    font-weight: 600;
    color: var(--LogoGreen);
}

.cost-summary-note {
    font-size: var(--SmallFont);
    color: var(--DarkGreen);
    margin: 8px 0 0;
}

.dialog-success-banner {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid var(--LogoGreen);
    border-radius: 8px;
    background-color: rgba(18, 67, 62, 0.06);
}

    .dialog-success-banner p {
        margin: 0;
        font-size: var(--SmallMediumFont);
        color: var(--LogoGreen);
    }

.dialog-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

    .dialog-actions .e-btn {
        padding: 6px 22px;
    }

/* Bottom-sheet dialog chrome (e.g. PlaceOrderDialog) — global rather than
   scoped because SfDialog portals its root popup element out of the
   component's own render tree, so it never carries that component's Blazor
   scope attribute. !important overrides the inline top/left/width Syncfusion
   computes at runtime from DialogPositionData. */
.place-order-sheet.e-dialog {
    max-width: 480px;
    width: calc(100% - 24px) !important;
    /* Centered via left/right + auto margins rather than a translateX transform —
       the SlideBottom animation drives its own inline `transform` on this same
       element, which silently overwrote a transform-based centering offset. */
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* A floating card with a gap on every side, like the bottom-nav pill and
       FAB elsewhere in this app, rather than truly edge-to-edge. Height is
       bound explicitly (SfDialog Height="88vh") so it's the only non-auto
       vertical value besides `bottom` — no over-constraint, so this `bottom`
       offset is actually honored instead of being dropped by the layout. */
    top: auto !important;
    bottom: 16px !important;
    border-radius: 20px !important;
    overflow: hidden;
}

    .place-order-sheet.e-dialog .e-dlg-content {
        height: 100%;
        max-height: 100%;
        box-sizing: border-box;
        padding: 18px 20px;
        overflow-y: auto;
    }


/* Tappable card wrapper (Dashboard): the whole card is the link, with a gentle press-in
   instead of the default grey tap flash. No href (e.g. non-shareholders) = not tappable. */
.card-link,
.card-link:hover,
.card-link:visited {
    display: block;
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

    .card-link[href] > * {
        transition: transform 0.15s ease;
    }

    .card-link[href]:active > * {
        transform: scale(0.98);
    }

/* Home cards ease in as they replace their loading skeletons (the animation runs when
   the element is first inserted, so it plays once per load, not on every re-render). */
@keyframes card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-card,
.quick-actions,
.orders-strip,
.preview-card,
.coming-up-card,
.mini-card,
.price-card,
.news-card {
    animation: card-in 0.35s ease backwards; /* not "both": a held end state would block the :active press transform */
}

@media (prefers-reduced-motion: reduce) {
    .hero-card,
    .quick-actions,
    .orders-strip,
    .preview-card,
    .coming-up-card,
    .mini-card,
    .price-card,
    .news-card {
        animation: none;
    }
}