/* /Components/CrimesLogModal.razor.rz.scp.css */
/* The Backdrop: Covers the entire screen */
.cl-modal-backdrop[b-7yof1kaklc] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dim the background */
    backdrop-filter: blur(4px);           /* Modern touch: blurs the background */
    display: flex;                        /* Flexbox for centering */
    align-items: center;                  /* Vertical center */
    justify-content: center;              /* Horizontal center */
    z-index: 10000;                       /* Higher than Nav, Orbs, or maps */
    padding: 20px;                        /* Prevents modal from touching screen edges */
}

/* The Modal: The actual white box.
   Top padding must clear the absolutely-positioned logo (15px top + 44px tall),
   or the first line of body content renders underneath it. */
.cl-modal-container[b-7yof1kaklc] {
    background: white;
    position: relative;
    padding: 70px 25px 25px 25px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;

    /* Responsive Sizing. The container itself does NOT scroll — the body does
       (see .cl-modal-body) — so the footer (Cancel/Yes) is always visible.
       width:100% + max-width from inline style = naturally constrained by backdrop padding. */
    width: 100%;
    max-width: 400px;
    min-height: 200px;
    max-height: 94vh;
    overflow: hidden;
}

@media (max-width: 480px) {
    .cl-modal-container[b-7yof1kaklc] {
        padding: 70px 14px 16px 14px;
        max-height: 92vh;
    }
}

/* Report mode: wide enough for A4 pages */
.cl-modal-container.report-mode[b-7yof1kaklc] {
    max-width: 900px;
    width: 95vw;
    max-height: 95vh;
    padding: 24px;
}

.cl-modal-container.report-mode .cl-modal-body[b-7yof1kaklc] {
    justify-content: flex-start;
    text-align: left;
    align-items: stretch;
    padding: 0;
}

/* Embed (iframe lightbox): the host page supplies the dim, A4 frame and close
   control, so the modal drops its own backdrop/shadow/padding and fills the
   iframe flush, letting the iframe scroll the report. */
.cl-modal-backdrop.embedded[b-7yof1kaklc] {
    position: static;
    inset: auto;
    background: transparent;
    backdrop-filter: none;
    padding: 0;
    display: block;
    height: auto;
}
.cl-modal-container.embedded[b-7yof1kaklc] {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    max-height: none;
    box-shadow: none;
    border-radius: 0;
    padding: 14px 16px;
    overflow: visible;
}
.cl-modal-container.embedded .cl-modal-body[b-7yof1kaklc] {
    display: block;
    overflow: visible;
}


/* Close X — top-right, mirrors the Cancel/backdrop behaviour */
.cl-modal-x[b-7yof1kaklc] {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 2px 8px;
    z-index: 5;
}

.cl-modal-x:hover[b-7yof1kaklc] {
    color: #333;
}

/* Logo positioning */
.cl-modal-header[b-7yof1kaklc] {
    position: absolute;
    top: 15px;
    left: 15px;
}

.cl-modal-logo[b-7yof1kaklc] {
    height: 44px;
    width: auto;
}

/* The Message Area — the scrolling region. min-height:0 is required for a
   flex child to actually shrink and scroll instead of pushing the footer
   (with its Cancel button) out of the container. */
.cl-modal-body[b-7yof1kaklc] {
    flex-grow: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;  /* prevents wide tables/inputs from bleeding outside the modal */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 'safe center' = centre short content, but top-align when it overflows —
       plain 'center' clips the top of overflowing content above the scroll
       area (content slides under the logo). First line is the fallback for
       browsers without 'safe'. */
    justify-content: center;
    justify-content: safe center;
    text-align: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Close/Action Button */
.cl-modal-footer[b-7yof1kaklc] {
    margin-top: 5px;
    padding: 12px 16px 16px 16px;
    display: flex;
    justify-content: center;
}

.cl-btn-close[b-7yof1kaklc] {
    background: #333;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.cl-btn-close:hover[b-7yof1kaklc] {
    background: #555;
}
/* ... Keep the Backdrop and Container styles from before ... */

.cl-modal-footer[b-7yof1kaklc] {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 15px; /* Spaces the buttons out evenly */
    flex-wrap: wrap; /* Wraps buttons on small screens */
}

.cl-btn[b-7yof1kaklc] {
    padding: 5px 25px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: transform 0.1s, opacity 0.2s;
    min-width: 100px;
}

.cl-btn:active[b-7yof1kaklc] {
    transform: scale(0.95);
}

.cl-btn-yes[b-7yof1kaklc] {
    background-color: #28a745;
    color: white;
}

.cl-btn-no[b-7yof1kaklc] {
    background-color: #dc3545;
    color: white;
}

.cl-btn-cancel[b-7yof1kaklc] {
    background-color: #6c757d;
    color: white;
}
/* /Layout/MainLayout.razor.rz.scp.css */
/* /Layout/NavMenu.razor.rz.scp.css */

article[b-wmdqmh44m6] {
    padding: 0 !important;
    margin: 0 !important;
}

.a4-container[b-wmdqmh44m6] {
    width: 794px;
    min-height: 1123px;
    margin: 0 auto;
    background: white;
    padding: 30px 40px;
    box-sizing: border-box;
    border-radius: 4px;
    overflow-y: auto;
}


.center-row-1[b-wmdqmh44m6] {
    grid-column: 2; /* Keeps it inside the vertical lines */
    grid-row: 2;    /* Now definitively Row 2 (the large 35% block) */
}

.footer-left[b-wmdqmh44m6] {
    text-align: left;
}

.footer-right[b-wmdqmh44m6] {
    text-align: right;
}

input:checked + .slider-mini[b-wmdqmh44m6] {
    background-color: #2196F3;
}

input:checked + .slider-mini[b-wmdqmh44m6]:before {
    transform: translateX(10px);
}

@keyframes pulse-red-b-wmdqmh44m6 {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

main[b-wmdqmh44m6] {
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    position: relative; /* THIS IS CRITICAL */
    overflow: hidden;   /* Keeps the orb from creating scrollbars if it gets dragged off screen */
}

.map-container[b-wmdqmh44m6] {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
}

.map-image[b-wmdqmh44m6] {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 4px solid #1a73e8;
}

.menu-orb[b-wmdqmh44m6] {
    margin: 0;
    border-radius: 50%;
    z-index: 9999;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    cursor: grab;
    display: grid;
    grid-template-columns: 10% 80% 10%;
    /* NEW PROPORTIONS: Nav is larger (35%) than Messages (25%). Bottom row is exactly 10% to match side columns. */
    grid-template-rows: 29% 34% 28% 9%;
    align-items: stretch;
    justify-items: stretch;
    box-sizing: border-box; 
}
/* Danger: Red for errors, cancellations, or invalid inputs */
.msg-danger[b-wmdqmh44m6] {
    color: #d93025;
}

/* Info: Standard blue for neutral updates */
.msg-info[b-wmdqmh44m6] {
    color: #1a73e8; 
}

/* Success: Green for successful redirects or payments */
.msg-success[b-wmdqmh44m6] {
    color: #28a745;
}

/* Base style for the message container */
.message-text[b-wmdqmh44m6] {
    transition: color 0.3s ease; /* Smooth color transition */
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0 10px;
    font-weight: 500;
}

/* Legal source/licence blurb in the orb — condensed so more words fit, red per spec.
   Defined AFTER .message-text so its font-size wins. */
.msg-legal[b-wmdqmh44m6] {
    font-family: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', sans-serif;
    color: #e0202d;
    font-size: 0.68rem;
    line-height: 1.18;
    letter-spacing: -0.2px;
    font-weight: 400;
    /* Narrow + centre so the blurb breaks into more, shorter lines and the lower
       (short) lines centre up like an indent. Widen/narrow the % to add/remove
       words per line; it reflows automatically for every location's blurb. */
    text-align: center;
    padding: 0 15%;
}

.orb-center-row[b-wmdqmh44m6] {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 0.8rem;
   
}

.orb-col-left[b-wmdqmh44m6] {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    border-right: 1px solid #808080;
    padding-left: 1px;
    padding-top: 8px;
}

.orb-col-right[b-wmdqmh44m6] {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    border-left: 1px solid #808080;
    padding-right: 8px;
    padding-top: 8px;
}

.orb-logo[b-wmdqmh44m6] {
    width: 100%;
    display: flex;
    justify-content: center;
}

.orb-logo img[b-wmdqmh44m6] {
    max-width: 85%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

.orb-row-logo[b-wmdqmh44m6] {
    grid-column: 1 / span 3;
    grid-row: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    border-bottom: 1px solid #808080; /* Horizontal grey separation line */
}

/* Moves the message block to the center column and lets it span rows 3 & 4 */
.orb-row-messages[b-wmdqmh44m6] {
    grid-column: 1 / -1;
    grid-row: 3;    
    display: flex;
    align-items: flex-start; 
    color: #ba03f2;
    font-weight: normal; 
    line-height: 1.3;
    font-size: 0.65rem; 
    font-family: 'Arial', Arial, monospace; 
    overflow-y: auto;
    padding: 4px 7px; 
    width: 100%;
    box-sizing: border-box;
    border-bottom: none; 
    border-top: 1px solid #808080;
}

body.light .orb-row-messages[b-wmdqmh44m6] {
    color: #333;
}

body.dark .orb-row-messages[b-wmdqmh44m6] {
    color: #f2f2f2;
}

.orb-row-zoom[b-wmdqmh44m6] {
    grid-column: 2; /* Stays in the safe center column */
    grid-row: 4;    /* Now definitively Row 4 (the slim 10% bottom block) */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 15px; /* NEW: Lifts the zoom badge up and away from the bottom curve */
    padding-bottom: 0.5px; /* NEW: Lifts the zoom badge up and away from the bottom curve */
    border-top: 1px solid #808080; /* NEW: Creates the horizontal line explicitly above the zoom tracker */
}

.page[b-wmdqmh44m6] {
    display: block;
}

.report-footer[b-wmdqmh44m6] {
    position: absolute;
    bottom: 20px;
    left: 40px;
    right: 40px;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #666;
}
.report-header[b-wmdqmh44m6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.report-logo[b-wmdqmh44m6] {
    height: 48px;
}

.report-title-block[b-wmdqmh44m6] {
    text-align: right;
}

.report-title[b-wmdqmh44m6] {
    margin: 0;
    font-size: 1.6rem;
    color: #1a73e8;
}

.report-generated[b-wmdqmh44m6] {
    font-size: 0.85rem;
    color: #666;
}

.score-block p[b-wmdqmh44m6] {
    margin: 4px 0;
    font-size: 0.95rem;
}

.slider-mini.round[b-wmdqmh44m6] {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

/* Knob sized to sit EXACTLY inside the 12px track (8 + 2 top + 2 bottom) —
   the old 12px-high knob overflowed the track, which is what made the
   .toggle-border-mini boundary look loosely wrapped. */
.slider-mini.round[b-wmdqmh44m6]:before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.sun-icon-mini[b-wmdqmh44m6] {
    width: 20px;
    height: 20px;
}



/* One compact size at EVERY breakpoint (the media queries below no longer
   override it) — checked knob travel is translateX(10px): 2 + 10 + 8 = 20,
   leaving the same 2px inset on the right as on the left. */
.switch-mini[b-wmdqmh44m6] {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 12px;
}

.switch-mini input[b-wmdqmh44m6] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

/* Target marker visible in BOTH modal and PDF */
.target-marker-square[b-wmdqmh44m6] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;  /* center horizontally */
    margin-top: -9px;   /* center vertically */

    background: #1a73e8;        /* square fill */
    border-radius: 3px;         /* slightly rounded corners */

    box-shadow:
        0 0 0 4px rgba(26,115,232,0.25),   /* halo ring */
        0 0 6px rgba(0,0,0,0.3);           /* subtle shadow */

    z-index: 10;
}


.theme-split-icon-mini[b-wmdqmh44m6] {
    width: 10px;
    height: 10px;
    box-sizing: border-box; /* This forces the border INSIDE the 15px limit */
    border-radius: 50%;
    border: 1px solid #999;
    background: linear-gradient(90deg, #ffffff 50%, #333333 50%);
}

/* Boundary sits FLUSH on the switch — zero inner gap, radius matching the
   12px-high pill so the border traces the track outline exactly. */
.toggle-border-mini[b-wmdqmh44m6] {
    display: inline-flex;
    padding: 0;
    border: 0.5px solid rgba(0,0,0,0.8);
    border-radius: 7px;
    background: transparent;
    margin-top: -8px;
}

.btn-label[b-wmdqmh44m6] {
    display: inline;
}

.msg-hint[b-wmdqmh44m6] {
    color: #555;
    font-style: italic;
    font-size: 0.60rem;
}

/* Two-line button labels (e.g. ESTATE AGENT / SIGNUP) */
.btn-label-stack[b-wmdqmh44m6] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.2;
}

/* Signup + agent-login pair: fixed equal footprint so the two buttons
   match in width and depth regardless of label length */
.user-btn.btn-two-line[b-wmdqmh44m6] {
    min-width: 116px;
    min-height: 30px;
}

@media (max-width: 480px) {
    /* The orb renders 300-400px+ on phones (its size tracks the viewport),
       so there's real room for small text alongside the icons. Shrink
       rather than hide. The info ("i") button has no caption at all,
       by design, at every screen size - nothing to touch there. */
    .btn-label[b-wmdqmh44m6],
    .btn-label-stack[b-wmdqmh44m6] {
        font-size: 0.42rem;
    }
    .user-btn[b-wmdqmh44m6],
    .user-btn.btn-two-line[b-wmdqmh44m6] {
        padding: 2px 5px;
        min-width: 28px;
        min-height: 22px;
        gap: 2px;
        justify-content: center;
    }
}

.user-btn[b-wmdqmh44m6] {
    border-radius:7px;
    min-height: 22px;
    font-weight: 700;
    padding: 2px 10px;
    gap: 4px;
    font-size: 0.6rem;
    text-shadow: -0.5px 0px 0px #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    color: #1a1a1a;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
     transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease,
        border-color 0.15s ease;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.12),
        inset 0 1px 0 rgba(255,255,255,0.8);
}

/* Monochrome inline-SVG button icons — replaces emojis, which rendered
   platform-coloured (clashing with the basemap) and tiny at 0.6rem. */
.btn-ico[b-wmdqmh44m6] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
}

.user-btn:active[b-wmdqmh44m6] {
    transform: scale(0.90) !important; /* Noticeable shrink */
    filter: brightness(0.8);           /* Dims the whole button, including the badge */
}

.vertical-slider-mini[b-wmdqmh44m6] {
    appearance: none;
    -webkit-appearance: none;
    width: 60px; 
    height: 4px; 
    background: rgba(255, 255, 255, 0.5);
    border-radius: 5px;
    border: 0.5px solid rgba(0, 0, 0, 0.8);
    outline: none;
    transform: rotate(-90deg); 
    transform-origin: center;
    margin: 10px 3px 5px 3px;
} 



.vertical-slider-mini[b-wmdqmh44m6]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.vertical-slider-mini[b-wmdqmh44m6]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.zoom-tracker[b-wmdqmh44m6] {
    /* Your EXACT original look and feel restored */
    font-size: 0.65rem;
    font-family: monospace;
    color: #4a5568;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 0.5px 2px;
    border-radius: 4px;
    pointer-events: none; /* Prevents it from catching the mouse during drag */
    display: inline-block; /* Forces it to be a compact block, matching the real estate of your other controls */
    /*box-shadow: 0 1px 3px rgba(0,0,0,0.1); Optional: tiny shadow to match the floating 'control' vibe*/
}

@media (max-width: 480px) {

    .menu-orb[b-wmdqmh44m6] {
        width: 52px;
        height: 52px;
    }

    .sun-icon-mini[b-wmdqmh44m6],
    .theme-split-icon-mini[b-wmdqmh44m6] {
        width: 16px;
        height: 16px;
    }

    /* switch-mini/knob: no override — compact base size applies everywhere */

    .vertical-slider-mini[b-wmdqmh44m6] {
        width: 50px;
    }

    .orb-col-left[b-wmdqmh44m6],
    .orb-col-right[b-wmdqmh44m6] {
        padding-top: 20px;
        gap: 10px;
    }

    .orb-row-messages[b-wmdqmh44m6] {
        font-size: 0.5rem;
    }

    /* .message-text/.msg-legal/.msg-hint each set their OWN font-size (0.75/0.68/0.60rem),
       so the font-size above on the outer .orb-row-messages container never reaches the
       actual text - it has to be overridden on these directly for mobile to shrink it. */
    .message-text[b-wmdqmh44m6] {
        font-size: 0.62rem;
    }

    .msg-legal[b-wmdqmh44m6] {
        font-size: 0.56rem;
    }

    .msg-hint[b-wmdqmh44m6] {
        font-size: 0.5rem;
    }

    .vertical-slider-mini[b-wmdqmh44m6] {
        margin: 8px 3px 3px 3px;
    }

    .sun-icon-mini[b-wmdqmh44m6] {
        margin-top: 0;
    }
}

@media (min-width: 480px) and (max-width: 768px) {

    .menu-orb[b-wmdqmh44m6] {
        width: 60px;
        height: 60px;
    }

    .sun-icon-mini[b-wmdqmh44m6],
    .theme-split-icon-mini[b-wmdqmh44m6] {
        width: 18px;
        height: 18px;
    }

    /* switch-mini: no override — compact base size applies everywhere */

    .vertical-slider-mini[b-wmdqmh44m6] {
        width: 55px;
    }

    .orb-col-left[b-wmdqmh44m6],
    .orb-col-right[b-wmdqmh44m6] {
        padding-top: 30px;
        gap: 12px;
    }

    .orb-row-messages[b-wmdqmh44m6] {
        font-size: 0.65rem;
    }
}


@media (min-width: 768px) {

    /* Keep orb same size — you chose not to scale it */
    .menu-orb[b-wmdqmh44m6] {
        width: 60px;
        height: 60px;
    }

    /* But scale the controls DOWN so they fit */
    .sun-icon-mini[b-wmdqmh44m6],
    .theme-split-icon-mini[b-wmdqmh44m6] {
        width: 18px;
        height: 18px;
    }

    /* switch-mini/knob: no override — compact base size applies everywhere */

    .vertical-slider-mini[b-wmdqmh44m6] {
        width: 55px;
    }

    .orb-col-left[b-wmdqmh44m6],
    .orb-col-right[b-wmdqmh44m6] {
        padding-top: 30px;
        gap: 12px;
    }
}