/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/

/* Mobile audit fix: neither html nor body had an overflow-x guard, so any
   descendant that even briefly breaks out of its own scroll container (a
   wide table, a flex/grid item without min-width:0, etc.) could drag the
   whole page into a horizontal scroll state -- and since #page-topbar is
   position:fixed and .footer is position:absolute, both are positioned
   relative to the viewport rather than any scrolling ancestor, so they
   visibly slide out of view along with that scroll instead of staying
   put. This caps horizontal scroll at the document level while leaving
   each table's own intentional overflow-x:auto scrolling untouched. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Mobile audit fix: iOS Safari/Chrome (both WebKit-based) automatically
   zoom the whole page in when focusing any form field whose font-size is
   under 16px -- .form-control/.form-select are 14px by default, which is
   what triggered the zoom-on-tap reported on the date-range picker (and
   would affect every other text/select input the same way). Bumping to
   16px on phone widths only stops the auto-zoom; desktop keeps the
   existing 14px look. */
@media (max-width: 575.98px) {
    .form-control,
    .form-select {
        font-size: 16px;
    }
}

.custom-map-control-button {
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    cursor: pointer;
    margin: 10px;
    padding: 6px;
    text-align: center;
    font-size: 15px;
}



@font-face {
    font-family: 'Claudian';
    src: url('../fonts/Claudion.ttf') format('truetype');
}

.claudian-text {
    font-family: 'Claudian', sans-serif;
}

/* Global Background Override */
body,
.page-content {
    background-color: #fff !important;
}

/* Global Loader Container */
#global-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    /* More transparent to show blur */
    backdrop-filter: blur(4px);
    /* Blur effect */
    -webkit-backdrop-filter: blur(4px);
    /* Safari support */
    z-index: 999;
    display: none;
    justify-content: center;
    align-items: flex-start;
    padding-top: 100px;
    border-radius: 6px;
}

/* From Uiverse.io by Erasmus001 */
#wifi-loader {
    --background: #62abff;
    --front-color: #000;
    --back-color: #c3c8de;
    --text-color: #414856;
    width: 64px;
    height: 64px;
    border-radius: 50px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wifi-loader svg {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

#wifi-loader svg circle {
    position: absolute;
    fill: none;
    stroke-width: 6px;
    stroke-linecap: round;
    stroke-linejoin: round;
    transform: rotate(-100deg);
    transform-origin: center;
}

#wifi-loader svg circle.back {
    stroke: var(--back-color);
}

#wifi-loader svg circle.front {
    stroke: var(--front-color);
}

#wifi-loader svg.circle-outer {
    height: 86px;
    width: 86px;
}

#wifi-loader svg.circle-outer circle {
    stroke-dasharray: 62.75 188.25;
}

#wifi-loader svg.circle-outer circle.back {
    animation: circle-outer135 1.8s ease infinite 0.3s;
}

#wifi-loader svg.circle-outer circle.front {
    animation: circle-outer135 1.8s ease infinite 0.15s;
}

#wifi-loader svg.circle-middle {
    height: 60px;
    width: 60px;
}

#wifi-loader svg.circle-middle circle {
    stroke-dasharray: 42.5 127.5;
}

#wifi-loader svg.circle-middle circle.back {
    animation: circle-middle6123 1.8s ease infinite 0.25s;
}

#wifi-loader svg.circle-middle circle.front {
    animation: circle-middle6123 1.8s ease infinite 0.1s;
}

#wifi-loader svg.circle-inner {
    height: 34px;
    width: 34px;
}

#wifi-loader svg.circle-inner circle {
    stroke-dasharray: 22 66;
}

#wifi-loader svg.circle-inner circle.back {
    animation: circle-inner162 1.8s ease infinite 0.2s;
}

#wifi-loader svg.circle-inner circle.front {
    animation: circle-inner162 1.8s ease infinite 0.05s;
}

#wifi-loader .text {
    position: absolute;
    bottom: -40px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: lowercase;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.2px;
}

#wifi-loader .text::before,
#wifi-loader .text::after {
    content: attr(data-text);
}

#wifi-loader .text::before {
    color: var(--text-color);
}

#wifi-loader .text::after {
    color: var(--front-color);
    animation: text-animation76 3.6s ease infinite;
    position: absolute;
    left: 0;
}

@keyframes circle-outer135 {
    0% {
        stroke-dashoffset: 25;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 301;
    }

    80% {
        stroke-dashoffset: 276;
    }

    100% {
        stroke-dashoffset: 276;
    }
}

@keyframes circle-middle6123 {
    0% {
        stroke-dashoffset: 17;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 204;
    }

    80% {
        stroke-dashoffset: 187;
    }

    100% {
        stroke-dashoffset: 187;
    }
}

@keyframes circle-inner162 {
    0% {
        stroke-dashoffset: 9;
    }

    25% {
        stroke-dashoffset: 0;
    }

    65% {
        stroke-dashoffset: 106;
    }

    80% {
        stroke-dashoffset: 97;
    }

    100% {
        stroke-dashoffset: 97;
    }
}

@keyframes text-animation76 {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    50% {
        clip-path: inset(0);
    }

    100% {
        clip-path: inset(0 0 0 100%);
    }
}

/* Report Table Header Styling to match Sales Analysis */
#table-main thead tr th {
    background-color: #eff2f7 !important;
    color: #495057 !important;
    text-transform: uppercase;
    font-weight: 600;
}

/* Mobile audit fix: .table-responsive already scrolls horizontally on narrow
   screens, but gave no visual hint that a table extends past the viewport.
   This is a pure-CSS "scroll shadow" -- the right-edge fade only appears while
   there's still unscrolled content, and disappears once you've scrolled all
   the way, with no JS required. */
.table-responsive {
    background-image:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)),
        linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%),
        linear-gradient(to right, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0)),
        linear-gradient(to left, rgba(0, 0, 0, .12), rgba(0, 0, 0, 0));
    background-position: left, right, left, right;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* Mobile audit fix: Retailer List's filter/search/download row and its
   pagination nav each need to fit on one line even on a narrow phone
   viewport. The search box no longer has a hardcoded 320px min-width (it
   flexes to fill whatever room is left), and Search/Download collapse to
   icon-only buttons below the sm breakpoint -- same treatment as
   Previous/Next in the pagination nav below. */
.retailer-list-search-group {
    max-width: 420px;
}
.retailer-list-search-group .form-control {
    min-width: 0;
}
@media (max-width: 575.98px) {
    .retailer-list-search-group {
        max-width: none;
    }
    .retailer-list-search-group #btnSearch,
    .retailer-list-search-group #btnDownload {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }
}

.pagination .page-link i + span,
.pagination .page-link span + i {
    margin-left: 0.35rem;
}

/* Retailer Details EWallet tab: date range + Search/Today share one line,
   Download sits apart on the same row via ms-auto.

   The date box is sized to its content, not stretched: .form-control is
   width:100% by default, which made the input span the whole row and push
   Search/Today onto a second line. flex:0 0 auto stops it growing, and the
   width is set in ch (the width of a "0" in the applied font) because what
   has to fit is a fixed character count, not a fixed pixel count -
   "12 Aug, 2026 to 27 Aug, 2026" is 28 characters, so 30ch plus the input's
   own left+right padding shows the whole range with a little slack.
   max-width keeps it inside the card on a narrow screen.

   flex-shrink:0 on the buttons keeps them from being squeezed to the point
   their label wraps letter by letter. */
.ewallet-search-group .form-control {
    flex: 0 0 auto;
    width: calc(30ch + 2rem);
    max-width: 100%;
}
.ewallet-search-group .btn-group,
.ewallet-search-group #btnDownload {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Money columns. tabular-nums makes every digit the same width, so decimal points
   line up down the column and two amounts of the same magnitude are the same length
   on screen - without it, proportional digits make 1,111.00 visibly narrower than
   8,888.00 and the column reads as ragged even when right-aligned. */
.money-cell {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Mobile audit fix: on a phone-width screen, .main-content's own side
   padding, .container-fluid's side padding, and every .card-body's side
   padding all stack on top of each other -- three separate layers of
   "empty space" between the viewport edge and the actual content, none
   of which know about each other. Together they were eating ~88px of a
   390px-wide screen (main-content 16px + container-fluid 12px +
   card-body 16px, each side), leaving under 80% of the screen for
   content. Desktop is untouched; only these three layers are reduced,
   not eliminated, so cards still read as distinct from the viewport
   edge. */
@media (max-width: 575.98px) {
    .main-content {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .container-fluid {
        padding-left: 8px;
        padding-right: 8px;
    }
    .card-body {
        padding-left: 12px;
        padding-right: 12px;
    }
}