/* -----------------------------------------------------------------------
   Copyright (c) 2025-2026 Akshaya Vault. All rights reserved.
   Author: Kiran Kurapaty <kkurapaty@gmail.com>

   This source file is part of the Akshaya Vault application and is
   confidential and proprietary. Unauthorized copying, modification, use,
   or distribution of this file, via any medium, is strictly prohibited
   without prior written permission from Akshaya Vault.
   ----------------------------------------------------------------------- */
:root {
    /* Radzen default is a flat 0.5rem on every side - tighter top/left/right
       keeps dialog content closer to the header, extra bottom room keeps the
       footer buttons from feeling cramped against the last field. */

    --rz-dialog-content-padding: 0.25rem 1.25rem 1.25rem 1.25rem;
    --degraded: #d29922;
    --degraded-bg: #2d2208;
    --degraded-glow: rgba(210, 153, 34, 0.15);
    --unhealthy: #f85149;
    --unhealthy-bg: #301818;
    --unhealthy-glow: rgba(248, 81, 73, 0.15);
    --accent: #58a6ff;
    --page-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
    --page-font: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
}

/* Header: brand sized to its content, action buttons take the rest and wrap
   into extra rows (not a vertical column) once they run out of width. */
.pims-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 100%;
}

.pims-header-brand {
    flex: 0 0 auto;
}

.pims-header-actions {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

.pims-header-actions > .rz-stack {
    flex-wrap: wrap;
}

.pims-header-actions > .rz-stack > * {
    flex: 0 0 auto;
}

.toolbar-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.5em;
    box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.1);
}

.left-panel {
    display: flex;
    align-items: center;
    gap: 0.25em;
    flex-shrink: 0; /* Never shrink the logo/burger */
}

.right-panel {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25em;
    flex-wrap: wrap;
    margin-left: auto; /* This is the key — pushes right panel to the far right */
}

/* Inside right-panel, target the profile menu wrapper */
.right-panel .rz-profile-menu {
    order: 1; /* Pushes it after all other items */
    margin-left: auto; /* When it wraps, it also right-aligns on its own row */
}

.page-shell {
    min-height: 100vh;
    font-family: var(--page-font);
    background: transparent;
    padding: 0.5rem;
    gap: 0;
}

.rounded-border {
    /*border: var(--rz-border-base-200) !important;*/
    border-radius: calc(var(--rz-border-radius) * 5) !important;
    /*background-color: var(--rz-base-200) !important;*/
    background-color: transparent;
}
/* Page header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--page-font);
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--rz-base-500);
}

.page-header-left {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.page-header-right {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
}

.page-title-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.page-header-icon {
    align-items: center;
    text-shadow: 0 4px 12px rgba(59,130,246,.35);
    color: var(--accent);
    display: flex;
    filter: drop-shadow(0 0 8px rgba(88,166,255,.4));
    font-size: 3.5rem;
    margin: 0;
    margin-right: 0.25rem;
    justify-content: center;
    line-height: 1;
    place-content: center;
    max-width: 50px;
    max-height: 50px;
}

.page-title {
    margin: 0;
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: .05em;
}

.page-subtitle {
    margin-top: -0.25rem;
    color: var(--rz-secondary);
    font-size: .85rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.hc-logo-mark {
    place-content: center;
    font-size: 3rem;
    color: var(--hc-accent);
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(88,166,255,.4));
}

.hc-title {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hc-subtitle {
    margin: 0;
    font-size: .78rem;
    color: var(--rz-secondary);
    letter-spacing: .05em;
    text-transform: uppercase;
}

.doc-icon {
    font-size: 1.75rem;
}

.avatar {
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.profile-photo-container {
    position: relative;
    width: 8rem;
    height: 8rem;
    margin: auto;
}

.profile-photo {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e0e0e0;
}

.profile-photo-small {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e0e0e0;
}

.photo-edit-button {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-color: #1976d2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* 1. Define the rotation movement */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes spin-and-pulse {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }
    /* Slightly grows at halfway */
    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* 2. Apply it to your logo class */
.spinning-logo {
    width: 40px;
    height: 40px;
    display: inline-block; /* Required for transform to work correctly */
    animation-name: spin;
    animation-duration: 10s; /* Adjust speed here (higher = slower) */
    animation-iteration-count: infinite;
    animation-timing-function: linear; /* Keeps the speed constant */
}

    /* Optional: Pause spinning when user hovers over it */
    .spinning-logo:hover {
        animation-play-state: paused;
    }

.spinning-logo-pulse {
    width: 40px;
    height: 40px;
    display: inline-block; /* Required for transform to work correctly */
    animation: spin-and-pulse 12s infinite linear;
    animation-duration: 10s; /* Adjust speed here (higher = slower) */
    animation-iteration-count: infinite;
    animation-timing-function: linear; /* Keeps the speed constant */
}

/* Base logo style */
.pims-logo {
    width: 40px;
    height: 40px;
    transition: transform 0.5s ease; /* Smooth transition when it stops */
}

    /* Only spin when the 'is-loading' class is added */
    .pims-logo.is-loading {
        animation: spin 2s infinite linear;
    }


/* Custom class for the hover effect */
.pims-hover-card {
    transition: all 0.3s ease-in-out; /* Smooth transition for all properties */
    cursor: pointer;
    border: 1px solid transparent;
}

    .pims-hover-card:hover {
        transform: translateY(-8px); /* Lift the card up */
        box-shadow: 0 10px 20px rgba(0,0,0,0.15) !important; /* Deeper shadow */
        border-color: var(--rz-primary); /* Optional: highlight border */
    }

    /* Optional: Scale down slightly when clicked */
    .pims-hover-card:active {
        transform: translateY(-2px) scale(0.98);
    }

/* Custom class for buttons with hover effect */
.rotate {
    animation: rotate 3s infinite linear;
}

.pulse {
    animation: pulse 2s infinite;
}

.slidein {
    animation: slidein 3s forwards;
}

.fadein {
    animation: fadein 2s forwards;
}

.bounce {
    animation: bounce 2s infinite;
}


.pims-cards {
    display: flex;
    flex-direction: row;
    gap: 1rem;
}

    .pims-cards .red {
        background-color: #f43f5e;
    }

    .pims-cards .blue {
        background-color: #3b82f6;
    }

    .pims-cards .green {
        background-color: #22c55e;
    }

    .pims-cards .pims-card {
        display: flex;
        height: 100px;
        width: 250px;
        border-radius: 10px;
        border-color: var(--rz-secondary);
        border: 1px;
        color: white;
        cursor: pointer;
        transition: 400ms;
    }

        .pims-cards .pims-card p.header {
            font-size: 1em;
            font-weight: 700;
        }

        .pims-cards .pims-card p.text {
            font-size: .7em;
        }

        .pims-cards .pims-card:hover {
            transform: scale(1.1, 1.1);
        }

    .pims-cards:hover > .pims-card:not(:hover) {
        filter: blur(10px);
        transform: scale(0.9, 0.9);
    }

.pims-card-animate {
    position: relative;
    width: 190px;
    height: 254px;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: end;
    padding: 12px;
    gap: 12px;
    border-radius: 8px;
    cursor: pointer;
    color: white;
}

    .pims-card-animate::before {
        content: '';
        position: absolute;
        inset: 0;
        left: -5px;
        margin: auto;
        width: 200px;
        height: 264px;
        border-radius: 10px;
        background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );
        z-index: -10;
        pointer-events: none;
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .pims-card-animate::after {
        content: "";
        z-index: -1;
        position: absolute;
        inset: 0;
        background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );
        transform: translate3d(0, 0, 0) scale(0.95);
        filter: blur(20px);
    }

.heading {
    font-size: 20px;
    text-transform: capitalize;
    font-weight: 700;
}

.pims-card-animate p:not(.heading) {
    font-size: 14px;
}

.pims-card-animate p:last-child {
    color: #e81cff;
    font-weight: 600;
}

.pims-card-animate:hover::after {
    filter: blur(30px);
}

.pims-card-animate:hover::before {
    transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.5);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.box {
    animation: fadeUp linear;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
}

/* ============================================================
   Report pages – print support
   ============================================================ */
.print-only {
    display: none;
}

@media print {
    /* Hide interactive chrome */
    .no-print,
    .rz-sidebar,
    .rz-header,
    .rz-footer,
    .rz-pager,
    .rz-paginator,
    .rz-button,
    radzen-button,
    .page-header {
        display: none !important;
    }

    /* Show print-only elements */
    .print-only {
        display: block !important;
    }

    /* Full-width layout */
    .report-page {
        padding: 0 !important;
        margin: 0 !important;
    }

    .rz-col, [class*="col-"], [class*="rz-col"] {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    /* Print header block */
    .print-header {
        margin-bottom: 1rem;
        border-bottom: 2px solid #333;
        padding-bottom: 0.5rem;
    }

        .print-header h2 {
            margin: 0;
            font-size: 1.4rem;
        }

        .print-header p {
            margin: 0;
            font-size: 0.85rem;
            color: #555;
        }

    /* Ensure charts and cards print cleanly */
    .card,
    .box,
    .rz-panel,
    .rz-card {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
        break-inside: avoid;
    }

    /* Page breaks between major sections */
    .rz-my-4 {
        page-break-inside: avoid;
    }

    body {
        font-size: 11pt;
        color: #000;
        background: #fff;
    }

    /* MainLayout's shell scrolls internally (flex:1 + overflow:hidden on the
       sidebar/body row, overflow:auto on .rz-body) so only the on-screen
       viewport was ever rendered to the print surface, truncating anything
       below the fold. Force every ancestor back to natural document flow so
       the browser's print engine paginates the full content instead of one
       clipped screenful. */
    html, body, #app, .rz-body, .page-shell {
        height: auto !important;
        overflow: visible !important;
    }

    div[style*="overflow: hidden"] {
        overflow: visible !important;
        flex: none !important;
    }

    /* .rz-layout is a `height:100vh` CSS grid (header / sidebar+body row / footer)
       from Radzen's own stylesheet — the grid track sizing clips its body row to
       the viewport even once every overflow above is set to visible. Breaking it
       out of grid mode lets the header/sidebar/footer rows (already display:none
       above) collapse and the body flow to its natural, full height. */
    .rz-layout {
        display: block !important;
        height: auto !important;
    }
}

/* Real PDF export (pims-pdf.js / PimsComponentBase.DownloadReportPdfAsync) - html2canvas
   rasterizes the DOM under normal screen media, it does not evaluate @media print at all, so the
   block above never applies to it. This mirrors that exact same ruleset as plain (non-media-query)
   selectors gated on a body class instead, which pims-pdf.js toggles on immediately before capture
   and off immediately after. Keep the two blocks in sync - a rule added to @media print above for
   print-specific layout almost always belongs here too. */
.pdf-export-mode .no-print,
.pdf-export-mode .rz-sidebar,
.pdf-export-mode .rz-header,
.pdf-export-mode .rz-footer,
.pdf-export-mode .rz-pager,
.pdf-export-mode .rz-paginator,
.pdf-export-mode .rz-button,
.pdf-export-mode radzen-button,
.pdf-export-mode .page-header {
    display: none !important;
}

.pdf-export-mode .print-only {
    display: block !important;
}

.pdf-export-mode .report-page {
    padding: 0 !important;
    margin: 0 !important;
}

.pdf-export-mode .rz-col,
.pdf-export-mode [class*="col-"],
.pdf-export-mode [class*="rz-col"] {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.pdf-export-mode .print-header {
    margin-bottom: 1rem;
    border-bottom: 2px solid #333;
    padding-bottom: 0.5rem;
}

.pdf-export-mode .print-header h2 {
    margin: 0;
    font-size: 1.4rem;
}

.pdf-export-mode .print-header p {
    margin: 0;
    font-size: 0.85rem;
    color: #555;
}

.pdf-export-mode .card,
.pdf-export-mode .box,
.pdf-export-mode .rz-panel,
.pdf-export-mode .rz-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
}

/* .pdf-export-mode is added to <body> itself - the bare selector covers the "html, body" part
   of the mirrored @media print rule above. */
.pdf-export-mode,
.pdf-export-mode #app,
.pdf-export-mode .rz-body,
.pdf-export-mode .page-shell {
    height: auto !important;
    overflow: visible !important;
}

.pdf-export-mode div[style*="overflow: hidden"] {
    overflow: visible !important;
    flex: none !important;
}

.pdf-export-mode .rz-layout {
    display: block !important;
    height: auto !important;
}

/* ---------------------------------------------------------------------------
   UK vehicle registration plate (UkNumberPlate.razor)
   Rear plate = BS AU 145e yellow; add .uk-plate-front for a white front plate.
   Global (not scoped CSS) so it renders identically in card views and grids.
--------------------------------------------------------------------------- */
.uk-plate {
    display: inline-flex;
    align-items: stretch;
    background: #FCD116;
    border: 1px solid rgba(0, 0, 0, 0.55);
    border-radius: 5px;
    overflow: hidden;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    vertical-align: middle;
}

.uk-plate-front {
    background: #FFFFFF;
}

.uk-plate .uk-plate-band {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #003399; /* UK identifier band blue */
    color: #FFFFFF;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.3em 0.35em;
}

.uk-plate .uk-plate-text {
    padding: 0.28em 0.5em;
    color: #000000;
    /* Charles Wright is the statutory plate face; the fallbacks approximate it */
    font-family: "Charles Wright", "Arial Black", Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.uk-plate-sm .uk-plate-text {
    font-size: 0.8rem;
    padding: 0.25em 0.4em;
}

.uk-plate-sm .uk-plate-band {
    font-size: 0.45rem;
}

/* ==========================================================================
   Mobile tweaks — kept in this file because App.razor loads it
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Burger menu sits snug against the logo/product name (the theme adds
          margin-inline-end + a divider border to the toggle) */
    .rz-sidebar-toggle {
        margin-inline-end: 0 !important;
        border-inline-end: none !important;
        padding: 0.5rem !important;
    }

    /* 2. Page-header action buttons (Add/Refresh/Export...) — icon-only with
          the glyph centred. Header buttons always carry an Icon. */
    .page-header .rz-button-text {
        display: none;
    }

    .page-header .rz-button {
        justify-content: center;
        padding-inline: 0.75rem;
        flex-shrink: 0; /* squeezed buttons pin the icon off-centre */
    }

    /* let the search box absorb the squeeze instead of the buttons */
    .page-header .rz-textbox {
        flex-shrink: 1;
        min-width: 60px;
    }

    /* overflow safety valve: once the search box hits its min-width and the
       un-shrinkable buttons still don't fit (very narrow phones), wrap the
       row instead of overflowing off-screen. !important beats RadzenStack's
       inline flex-wrap:nowrap. */
    .page-header .rz-stack {
        flex-wrap: wrap !important;
    }

    .page-header .rz-button .rz-button-box {
        justify-content: center;
    }

    .page-header .rz-button-icon-left {
        margin: 0;
    }
}

/* Single-field 2FA/TOTP code entry (NumericCodeInput) - large, spaced-out digits so it
   reads clearly at a glance, same visual weight a per-digit box widget would have had. */
.pims-numeric-code-input {
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
    padding: 0.75rem;
    font-size: 1.75rem;
    letter-spacing: 0.5rem;
    text-align: center;
    border: 1px solid var(--rz-base-300, #ccc);
    border-radius: 4px;
    box-sizing: border-box;
}

.pims-numeric-code-input:focus {
    outline: none;
    border-color: var(--rz-primary, #3b82f6);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-primary, #3b82f6) 25%, transparent);
}

/* Onboarding nav-tour spotlight (10-user-onboarding-system.md, pims.js: window.pimsTour).
   Elements are created/positioned directly in JS (outside the Blazor render tree, since the
   target is the real sidebar behind the wizard card) so this has to be global CSS, not a
   scoped .razor.css. The dim-everything-except-a-hole effect is a single absolutely-positioned
   box matching the target's rect, whose oversized box-shadow covers the rest of the viewport -
   no backdrop element covering the screen, no z-index fighting with Radzen's own overlays. */
.pims-tour-backdrop {
    position: fixed;
    z-index: 10001;
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.pims-tour-tooltip {
    position: fixed;
    z-index: 10002;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: var(--rz-base-100, #fff);
    color: var(--rz-text-color, #1a1a1a);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    padding: 1rem;
    font-family: inherit;
}

.pims-tour-tooltip h4 {
    margin: 0.25rem 0 0.5rem;
    font-size: 1rem;
}

.pims-tour-tooltip p {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    opacity: 0.85;
}

.pims-tour-step {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
}

.pims-tour-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pims-tour-actions .pims-tour-spacer {
    flex: 1;
}

.pims-tour-actions button {
    border: none;
    border-radius: 4px;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.pims-tour-actions .pims-tour-skip {
    background: transparent;
    color: var(--rz-text-secondary-color, #666);
}

.pims-tour-actions .pims-tour-back {
    background: var(--rz-base-200, #eee);
}

.pims-tour-actions .pims-tour-next {
    background: var(--rz-primary, #0f3460);
    color: #fff;
}

.pims-tour-actions button:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Bottom-sheet transform on mobile viewports (spec: "must auto-reposition or transform into
   full-width bottom sheets"), instead of the anchored popover positioning pims.js computes for
   desktop. */
.pims-tour-tooltip-sheet {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 12px 12px 0 0;
}