/*
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%);
    }
}

/* Table Header Styling to match Sales Analysis & standard tables */
.table thead tr th,
#table-main thead tr th,
#territory-table thead tr th,
#tag-table thead tr th,
#tagtype-table thead tr th,
#rule-table 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/Commission tabs: balance stat + Credit/Debit share one
   card-header row; the date range + Search/Today + Download filter bar is a second,
   dedicated row below it (.ewallet-search-group / .profit-search-group).

   That filter row is flex-nowrap on purpose - it must never wrap, on any screen
   size. The date input is the one flexible element (flex:1 1 auto, min-width:0)
   so it's the thing that shrinks; Search/Today/Download stay flex-shrink:0 fixed-size
   so their labels never get squeezed letter by letter. On phones, Search and
   Download fall back to icon-only (their text is in a d-none d-sm-inline span) and
   Today is hidden outright (d-none d-md-inline-block) - between the two, there's
   normally enough room left for the date input to stay legible instead of
   collapsing to a sliver. max-width caps the input from growing past a sensible
   size on a wide desktop card. */
.ewallet-search-group,
.profit-search-group {
    column-gap: 0.5rem;
}
.ewallet-search-group .form-control,
.profit-search-group .form-control {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(30ch + 2rem);
}
.ewallet-search-group .btn-group,
.ewallet-search-group #btnDownload,
.profit-search-group .btn-group,
.profit-search-group #btnProfitDownload {
    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;
    }
}

/* Retailer Details step-arrow-nav: six tabs (General/Map/Documents/Devices/EWallet/
   Commission) need to stay on one line at every width, including a narrow phone.
   .nav is flex-wrap:wrap by default (Bootstrap), which is exactly what let this row
   fold onto two lines - nowrap forces it to stay one row, and since nav-justified
   already gives each .nav-item flex-basis:0/flex-grow:1 (equal share of the row),
   nowrap just means each tab genuinely shrinks to its share instead of wrapping
   once its share gets small. Each tab's label is icon+text on desktop and icon-only
   below sm (see the d-none d-sm-inline span in the markup), so the six items still
   read fine even shrunk down to a narrow phone width. */
.retailer-tab-nav {
    flex-wrap: nowrap !important;
}
.retailer-tab-nav .nav-item {
    min-width: 0;
}
.retailer-tab-nav .nav-link {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .retailer-tab-nav .nav-link {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
        font-size: 1rem;
    }
}