/* Fluid root font-size for phones. The mobile UI was visually tuned against an iPhone 16
   Pro Max (430px CSS width) using fixed rem values throughout. On narrower phones (iPhone
   16/16 Pro = 393px, common Androids = 360-412px) those same rem values render proportionally
   too large, causing truncation (e.g. hero KPI currency values) and cramped banners.
   Scaling the root font-size keeps every existing rem-based rule's relative footprint
   instead of requiring a rem-by-rem rewrite. 3.721vw × 430px ≈ 16px, so nothing changes on
   the Pro Max the UI was designed for; it scales down smoothly below that (393px ≈ 14.6px,
   360px ≈ 13.4px), and the 13px floor keeps text from getting too small to read. Only
   applies below the desktop/tablet breakpoint — larger screens are untouched. */
@media (max-width: 430.98px) {
    html {
        font-size: clamp(13px, 3.721vw, 16px);
    }
}

/* AKILI loading screen */
.custom-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: linear-gradient(160deg, #0d1b3e 0%, #0f2a5a 50%, #0b3d3d 100%);
}
.loader-logo {
    width: 220px;
    height: 220px;
    object-fit: contain;
    animation: akiliReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes akiliReveal {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.loader-percentage {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    /*position: absolute;*/
    /*text-align: center;*/
    /*font-weight: bold;*/
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* ── Mobile responsiveness ─────────────────────────────────────────────────── */

/* Prevent horizontal scroll on all screens */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Ensure Radzen body content doesn't overflow on small screens */
.rz-body {
    min-width: 0 !important;
    overflow-x: hidden;
}

/* Data grids: horizontal scroll instead of layout breakage */
.rz-data-grid-container,
.rz-datalist-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* My Website admin page (MyWebsitePage.razor): RadzenTabs renders its active
   panel with its own `overflow:auto` (Radzen's standard-base.css
   .rz-tabview-panels rule). That makes the tab panel a second, nested scroll
   region sitting inside the page's real scroller (.rz-body) — even when the
   panel's own content fits and needs no scrollbar, a touch/swipe gesture that
   starts over it can get captured by this inner region instead of bubbling up
   to .rz-body, making the rest of the page (including the Save button below
   the tabs) unreachable on mobile/WKWebView. This page wants ONE scroll
   region — the whole page, Save button included — so the tab panel must not
   compete for the gesture. RadzenTabs doesn't forward Blazor's CSS-isolation
   scope attribute to its root element, so this can't be a scoped .razor.css
   rule — it has to live here. */
.my-website-tabs .rz-tabview-panels {
    overflow: visible;
}

/* Same page, horizontal axis. Two consequences of the rule above had to be
   contained, because `overflow: visible` also stopped the panel clipping
   sideways — anything too wide now escapes and drags the whole page with it,
   which rendered the form clipped off the left edge on a phone:
   1. The four-tab strip (Content / Sections / Custom blocks / Contact) is wider
      than a phone viewport and Radzen's nav does not wrap, so let it scroll
      inside itself rather than push the page.
   2. Panel content stays bounded by the page width.
   Scrollbar is hidden because this strip is swiped, not dragged, on mobile. */
.my-website-tabs .rz-tabview-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.my-website-tabs .rz-tabview-nav::-webkit-scrollbar {
    display: none;
}

.my-website-tabs .rz-tabview-panels {
    max-width: 100%;
    min-width: 0;
}

/* Cards and content containers */
.rz-card, .rz-panel, .rz-fieldset {
    min-width: 0;
}

/* Touch-friendly minimum tap targets */
@media (max-width: 768px) {
    /* Larger tap targets for buttons/links */
    .rz-button {
        min-height: 42px;
    }
    
    /* Full-width inputs on mobile */
    .rz-textbox,
    .rz-dropdown,
    .rz-numeric {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* FAB stays usable on mobile */
@media (max-width: 640px) {
    .assistant-fab {
        right: 1rem !important;
        bottom: 1rem !important;
    }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}