/* ==============================================================================================
   ETopUp - shared component styles, extracted from internal <style> blocks in the layouts.

   WHY

   These rules were written INSIDE <style> blocks in _Layout.cshtml, _AdminLayoutPage.cshtml and
   _KycLayout.cshtml. _Layout and _KycLayout carried byte-identical 36-line blocks, so the same CSS
   was maintained in more than one place and re-downloaded with every single page render instead of
   being cached once.

   Moving them here means one definition, one cache entry, and no custom CSS inside the markup.

   SCOPE WAS PRESERVED DELIBERATELY

   _AdminLayoutPage's block was a strict SUBSET: it had .txt-wrap-hide-note and its :hover, but NOT
   the tr / table.table-bordered rules. Merging everything into a single file and loading it in all
   three layouts would therefore have given the admin pages table styling they never had - a purely
   cosmetic change that nobody asked for. The table rules live in etopup-tables.css instead, which
   is loaded only by the two layouts that actually had them.
   ============================================================================================== */

/* The dismissible note bar above the page content. Collapsed to a single ellipsised line, and
   expanded on hover so a long message can still be read in full. */
.txt-wrap-hide-note {
    width: 100%;
    border-radius: 10px;
    white-space: nowrap;
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    box-shadow: 0 1px 9px #b6a208;
    background-color: #fff;
    min-height: 30px;
    height: fit-content;
}

.txt-wrap-hide-note:hover {
    overflow: visible;
    white-space: initial;
    text-wrap: normal;
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------------------------
   Brand marks. These replace inline style attributes that were sitting on the markup.
   -------------------------------------------------------------------------------------------- */

/* ==============================================================================================
   BRAND LOGO SIZING - one place, fixed sizes, independent of viewport width.

   THE BUG THIS FIXES

   The admin header logo had NO height constraint anywhere. _MenuBar1 renders it inside
   .navbar-brand, and that navbar is flex-direction:column above 768px, so the brand gets a row of
   its own. With nothing capping the image, it rendered at the source file's natural size and blew
   that row out to roughly 400px tall on a desktop screen - an enormous logo above a thin nav bar,
   with the rest of the header empty.

   My first attempt set width:80px on that one image, which was the wrong axis: a header logo has
   to be pinned by HEIGHT so it fits the bar, with width following the aspect ratio. Any logo that
   is wider than it is tall would still have overflowed the row.

   THE RULE

   Fixed height in px, width:auto, and a max-width so an unusually wide logo cannot push the row.
   No vw/%/em units anywhere - the logo must be the same physical size on a 1280px laptop and a
   4K monitor, which is exactly what "fixed size no matter how big the screen" means. object-fit
   keeps the artwork undistorted whatever proportions the client's file has.
   ============================================================================================== */

/* Header / navbar logo - admin (_MenuBar1) and public site (_SiteLayout). */
.navbar-brand > img,
.brand-logo-sm {
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    display: block;
}

/* Slightly smaller on phones so it never competes with the toggle button. */
@media (max-width: 767.98px) {
    .navbar-brand > img,
    .brand-logo-sm {
        height: 40px;
        max-width: 150px;
    }
}

/* Logo on the sign-in / OTP / password screens, where it sits above a centred card.
   Replaces inline style="width:107px; margin-bottom:29px; margin-left:108px;" - that hardcoded
   left margin was a fixed pixel offset standing in for centring, so the logo sat off-centre at
   every width except the one it happened to be tuned on. */
.brand-logo-auth {
    height: 72px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    display: block;
    margin: 0 auto 20px;
}

/* The accent-coloured contact icons in the public header - was a repeated
   style="    color: #b6a208;" on each <i>. Uses the brand token where one is defined so the
   colour still changes from brand-theme.css, with the original literal as the fallback. */
.brand-accent-icon {
    color: var(--brand-accent, #b6a208);
}

/* Utility for plumbing elements that must exist in the DOM but never be shown - the anti-forgery
   token holder and the server-config holder. These carried style="display:none" inline; a class
   keeps the markup free of custom CSS and lets a Content-Security-Policy forbid inline styles. */
.etopup-hidden {
    display: none !important;
}

/* --------------------------------------------------------------------------------------------
   Notice / notification bars. These three declarations were repeated as inline style attributes
   across _Layout, _AdminLayoutPage and _KycLayout.
   -------------------------------------------------------------------------------------------- */

/* was style="font-weight:bold; padding-bottom:10px;" */
.etopup-notice--emphasis {
    font-weight: bold;
    padding-bottom: 10px;
}

/* DB-050 (Brief C, 08-09-2026): in-app USER LOW BALANCE banner. Rendered by the layouts from TempData["lowbal"]
   while UserLowBalanceAlert.State = BELOW; disappears on recovery. Colours follow the Bootstrap "warning" alert
   so it reads as a caution, not an error. */
.etopup-notice--lowbal {
    margin: 6px 0 10px;
    padding: 8px 12px;
    border: 1px solid #f0ad4e;
    border-radius: 3px;
    background: #fcf8e3;
    color: #8a6d3b;
    font-weight: bold;
}

/* was style="color:darkblue; font-style:italic; font-size:15px;" */
.etopup-notification-msg {
    color: darkblue;
    font-style: italic;
    font-size: 15px;
}

/* AdminLTE sidebar brand text - was style="color:navajowhite" with an inner style="color:white". */
.brand-logo-text {
    color: navajowhite;
}

.brand-logo-text b {
    color: white;
}

/* -- soft decorative section background --------------------------------------------------------
   Replaces two inline background-image styles (Site/About, Site/Contact) that pointed at
   Images/bg2.png - a file that does not exist anywhere in the repo, so both sections silently
   404'd their background on every load. ezytm-header-bg.png is the neutral gold wave art the
   public site already uses, so the sections gain the intended decoration with an asset that is
   actually present. */
.u-bg-soft-waves {
    background-image: url('../../Images/ezytm-header-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* -- footer brand mark -------------------------------------------------------------------------
   The public-site footer's first column shows the product logo (an empty <img src=""> before).
   Constrained so the ~square EzyTM artwork sits at a sensible size in a 3-column footer. */
.footer-brand-logo {
    max-height: 72px;
    width: auto;
    margin-bottom: .75rem;
}

/* -- template classes whose stylesheet never shipped -------------------------------------------
   Site/About and Site/Contact use a purchased template's markup (.dlab-bnr-inr banners,
   .services_blue/.services-hover icon pairs), but no stylesheet in the project defines ANY of
   these classes - the template's css was never copied in. Result: the page banner collapsed to
   invisible white-on-white text that slid under the navbar, and both icon <img>s of each service
   card rendered side by side. These rules supply the minimum the markup was written against,
   on brand tokens. */

.dlab-bnr-inr {
    background: linear-gradient(135deg, var(--menu-bg, #b6a208), var(--menu-bg-active, #6f6305));
    /* The public-site header (.navigation) is position:absolute and measures 158px tall at every
       tested width, overlaying the top of the document - the banner's heading sat invisible
       beneath it. 170px clears the header with a small cushion; the banner's gradient runs from
       y=0 so no white gap shows behind the header either. */
    padding: 170px 0 40px;
}

.dlab-bnr-inr h1 {
    color: #fff;
    margin-bottom: .25rem;
}

.dlab-bnr-inr .breadcrumb {
    margin-bottom: 0;
    background: transparent;
}

.dlab-bnr-inr .breadcrumb-item,
.dlab-bnr-inr .breadcrumb-item a,
.dlab-bnr-inr .breadcrumb-item.active,
.dlab-bnr-inr .breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
    text-decoration: none;
}

/* The hover twin of each service icon: the template swapped the pair on :hover, but that css
   never existed here, so both showed at once. The visible one is enough. */
.services-hover { display: none; }

.icon-bx-sm .services_blue {
    max-width: 96px;
    height: auto;
}

.icon-bx-wraper.style-3 {
    padding: 24px;
    border-radius: 12px;
}

/* Menu balance badges (Shared/_MenuBar.cshtml) - migrated from inline styles. The original
   inline set included `padding-left:-5px` (invalid CSS, ignored by every browser) - dropped
   here deliberately, rendering is identical. */
.menu-bal-label          { position: relative; top: -18px; font-size: smaller; color: #fff; }
.menu-bal-label--credit  { color: yellow; }
.menu-bal-value          { padding: 5px; margin-left: -40px; }
.menu-bal-value--wallet  { color: #ea116a; }
.menu-bal-value--credit  { margin-left: -45px; }

/* ------------------------------------------------------------------------------------------------
   Landing page hero (Views/Site/Index.cshtml <header>) - 07-09-2026 (owner: "too much space at the top").
   EzyTM_recharge.css gives the hero padding: 220px 0 80px and the row is align-items-end, so the copy was
   pushed to the BOTTOM of a column as tall as the (unconstrained) logo image: at 1900px the first line of
   text started ~490px down the page. The public header (.navigation) is position:absolute and 115-120px
   tall on desktop (150-175px when the contact strip wraps on phones), so 170px / 190px clears it with a
   cushion; the copy is vertically centred against the image, and the image is capped so it no longer
   dictates the section height on wide monitors. Scoped to the public layout (admin layouts stamp
   data-range-mode on <body> and never render this hero).
   ------------------------------------------------------------------------------------------------ */
body:not([data-range-mode]) header {
    padding-top: 170px;
    padding-bottom: 56px;
}

body:not([data-range-mode]) header .row.align-items-end {
    align-items: center !important;
}

body:not([data-range-mode]) header .col-6 > img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 440px;
    margin: 0 auto;
}

@media (max-width: 767.98px) {
    body:not([data-range-mode]) header {
        padding-top: 190px;
        padding-bottom: 40px;
    }

    body:not([data-range-mode]) header .col-6 > img {
        max-height: 260px;
    }
}

/* ------------------------------------------------------------------------------------------------
   P9 (15-09-2026) — COMMON SWITCH FILTER BAR
   Owner: "Common Switch me search filter chahiye — Operator Type, Operator Name, Vendor Name,
   User Name." Four controls above the routing grid; the filtering itself happens in the browser
   (Scripts/Custom/CommonSwitch/index.js), so this is presentation only.
   Scoped to #csFilterBar so nothing else on the page can pick these rules up.
   ------------------------------------------------------------------------------------------------ */
#csFilterBar {
    margin: 0 0 10px;
    padding: 10px 5px 6px;
    background: var(--brand-primary-light, #f5f7fa);
    border: 1px solid var(--brand-secondary-light, #e2e6ea);
    border-radius: 4px;
}

#csFilterBar label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--brand-secondary-dark, #55606e);
}

#csFilterBar select.form-control {
    width: 100%;
}

#csFilterBar .cs-filterbar-foot {
    margin-top: 8px;
}

/* "12 / 84" — how many routes the current filter leaves visible. Plain numbers, so it needs no
   translated sentence; the title attribute carries the explanation in the page's own language. */
#csFilterBar .cs-filter-count {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-secondary-dark, #55606e);
}

#csFilterBar .cs-filter-count.cs-filter-on {
    color: var(--brand-primary, #b8960c);
}

/* A filter that matches nothing must say so, otherwise an empty grid reads as "data is missing". */
#tblCommonSwitch tbody tr.cs-noresult td {
    max-width: none !important;
    padding: 18px 10px;
    text-align: center;
    font-weight: 600;
    color: var(--brand-secondary-dark, #55606e);
}

@media (max-width: 767px) {
    #csFilterBar .col-xs-12 {
        margin-bottom: 6px;
    }
}

/* ------------------------------------------------------------------------------------------------
   P6 (15-09-2026) — MONITOR ACCESS (Setting → Monitor Access)
   Who may watch which operators on the three live screens. Presentation only; the rules live in
   MonitorAccessController and LiveMonitorController.
   ------------------------------------------------------------------------------------------------ */
.ma-help {
    margin: 0 0 12px;
    padding: 8px 12px;
    border-left: 3px solid var(--brand-primary, #b8960c);
    background: var(--brand-primary-light, #f7f5ea);
    font-size: 13px;
    line-height: 1.6;
}

#tblMonitorAccess .ma-c-ops {
    max-width: 420px;
    font-size: 12px;
    color: var(--brand-secondary-dark, #55606e);
}

#tblMonitorAccess .ma-c-act {
    width: 90px;
    text-align: center;
}

/* ---- the edit dialog ---- */
.ma-edit .ma-radio {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    cursor: pointer;
}

.ma-edit .ma-radio small {
    font-weight: 400;
}

.ma-picker {
    border: 1px solid var(--brand-secondary-light, #e2e6ea);
    border-radius: 4px;
}

/* "All operators" is selected: the list still shows what WOULD be picked, but reads as inactive. */
.ma-picker.ma-dim {
    opacity: .45;
}

.ma-picker-bar {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid var(--brand-secondary-light, #e2e6ea);
    background: var(--brand-secondary-light, #f5f7fa);
}

.ma-picker-bar .form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.ma-picked {
    min-width: 34px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--brand-primary, #b8960c);
}

/* Hundreds of operators, so the list scrolls inside the dialog instead of the dialog growing off-screen. */
.ma-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 6px 8px;
}

.ma-list .ma-op {
    display: block;
    margin: 0;
    padding: 3px 2px;
    font-weight: 400;
    cursor: pointer;
}

.ma-list .ma-op:hover {
    background: var(--brand-secondary-light, #f5f7fa);
}

.ma-list .ma-op input {
    margin-right: 6px;
}

.ma-msg {
    margin-right: auto;
    float: left;
    padding-top: 7px;
    font-size: 12px;
    color: var(--brand-secondary-dark, #55606e);
}

.ma-msg.ma-msg-error {
    color: var(--brand-danger, #c0392b);
    font-weight: 600;
}

@media (max-width: 767px) {
    .ma-picker-bar {
        flex-wrap: wrap;
    }

    #tblMonitorAccess .ma-c-ops {
        max-width: none;
    }
}

/* ------------------------------------------------------------------------------------------------
   P7 (15-09-2026) — DAILY LIMIT REPORT (Reports → Daily Limit Report)
   Per-user daily limit and circle limit with used / remaining. Presentation only; the figures come
   from PackageComm / PackageCommCircle and the screen never writes.
   ------------------------------------------------------------------------------------------------ */
.lr-filters label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--brand-secondary-dark, #55606e);
}

.lr-filter-foot {
    padding-top: 22px;
}

.lr-filter-foot .lr-check {
    display: inline-block;
    margin-right: 12px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

/* ---- the four headline numbers ---- */
.lr-cards {
    margin-bottom: 10px;
}

.lr-card {
    padding: 10px 14px;
    border: 1px solid var(--brand-secondary-light, #e2e6ea);
    border-left: 4px solid var(--brand-secondary, #8a94a6);
    border-radius: 4px;
    background: #fff;
}

.lr-card-ok {
    border-left-color: var(--brand-success, #27ae60);
}

.lr-card-warn {
    border-left-color: var(--brand-danger, #c0392b);
}

.lr-card-k {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--brand-secondary-dark, #55606e);
}

.lr-card-v {
    display: block;
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700;
}

.lr-card-v small {
    font-size: 12px;
    font-weight: 400;
    color: var(--brand-secondary-dark, #55606e);
}

/* ---- the grid ---- */
#tblLimitReport .lr-num,
#tblLimitReport th.lr-num {
    text-align: right;
    white-space: nowrap;
}

#tblLimitReport .lr-bar-h {
    width: 150px;
}

#tblLimitReport tr.lr-out td {
    background: var(--brand-danger-light, #fdeceb);
}

.lr-bar {
    display: inline-block;
    width: 80px;
    height: 8px;
    vertical-align: middle;
    border-radius: 4px;
    background: var(--brand-secondary-light, #e2e6ea);
    overflow: hidden;
}

.lr-bar-fill {
    display: block;
    height: 100%;
    background: var(--brand-success, #27ae60);
}

.lr-bar-fill.lr-bar-high {
    background: var(--brand-warning, #d68910);
}

.lr-bar-fill.lr-bar-full {
    background: var(--brand-danger, #c0392b);
}

.lr-pct {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
}

.lr-empty,
.lr-note {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--brand-secondary-dark, #55606e);
}

@media (max-width: 767px) {
    .lr-filter-foot {
        padding-top: 8px;
    }

    .lr-card {
        margin-bottom: 8px;
    }

    #tblLimitReport .lr-bar {
        width: 46px;
    }
}

/* ------------------------------------------------------------------------------------------------
   FFFR-FIX (15-09-2026) — RANDOM KEY screen (Reports → Random Key)
   The generated keys now belong to a vendor and are saved, which is what [FFFR] reads. These rules
   cover the vendor picker, the save/clear actions and the saved-key list.
   ------------------------------------------------------------------------------------------------ */
.rk-req {
    color: var(--brand-danger, #c0392b);
}

.rk-hint {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--brand-secondary-dark, #55606e);
}

.rk-actions {
    padding-top: 24px;
}

.rk-actions .btn {
    margin: 0 4px 4px 0;
}

.rk-msg {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-secondary-dark, #55606e);
}

.rk-msg.rk-msg-error {
    color: var(--brand-danger, #c0392b);
}

.rk-note {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-left: 3px solid var(--brand-primary, #b8960c);
    background: var(--brand-primary-light, #f7f5ea);
    font-size: 13px;
    line-height: 1.6;
}

#tblSavedKeys .rk-c-n {
    width: 56px;
}

#tblSavedKeys .rk-c-act {
    width: 70px;
    text-align: center;
}

#tblSavedKeys .rk-key {
    font-family: Consolas, Menlo, monospace;
    word-break: break-all;
}

#tblSavedKeys .rk-empty {
    padding: 16px 10px;
    text-align: center;
    color: var(--brand-secondary-dark, #55606e);
}

/* Hundreds of keys: the list scrolls rather than pushing the page down forever. */
#tblSavedKeys {
    margin-bottom: 0;
}

.box-body > .table-responsive > #tblSavedKeys {
    max-height: none;
}

@media (max-width: 767px) {
    .rk-actions {
        padding-top: 6px;
    }
}

/* ==================================================================================================
   TAG-PREVIEW (15-09-2026) - Tag Value Setting -> "Check".
   A found tag reads green, a tag that pulled out nothing reads red - because the empty ones are the
   ones the admin is actually looking for when a vendor's response "does not work".
   ================================================================================================== */
.tvp-hint { margin-bottom: 8px; }
.tvp-sample { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.tvp-msg { margin-left: 10px; font-weight: 600; }
.tvp-good { color: var(--brand-success, #15803d); }
.tvp-warn { color: var(--brand-danger, #b91c1c); }
.tvp-result-wrap { margin-top: 12px; }
.tvp-result { margin-bottom: 0; }
.tvp-result .tvp-val { font-family: Consolas, "Courier New", monospace; word-break: break-all; }
.tvp-result .tvp-ok td { background-color: rgba(21, 128, 61, .06); }
.tvp-result .tvp-miss td { background-color: rgba(185, 28, 28, .06); color: var(--brand-danger, #b91c1c); }

/* ==================================================================================================
   TAG VALUE SETTING  -  Response Setting grid                                      (18-09-2026)

   Owner: "jo set response hain unke paas ek edit ka bhi option dijiye taaki remove na karna pade."
   Ab har row me do button hain - Edit aur Remove. Beech me jagah, aur chhoti screen par ek ke
   neeche ek, warna cell me thus jaate hain.

   URL-UI (usi din): Vendor URLs ka box sirf neeche ki taraf badhta tha. Ab dono taraf kheench
   sakte hain, aur ek theek shuruaati unchai bhi hai.
   ================================================================================================== */

.tv-actions .btn { margin-right: 4px; margin-bottom: 4px; }

@media (max-width: 767px) {
    .tv-actions .btn { display: block; width: 100%; margin-right: 0; }
}

/*  Vendor URL / Post-parameter ke bade box - dono taraf resize.
    "both" isliye ki owner ne kaha "horizontal size change nahi kar paa rahe hain".               */
/*  URL-WRAP (19-09-2026, owner): "link auto wrap ho jani chaiye or ek fix size tak hi
    height/width increase kar pa rahe hain".
      white-space: pre -> pre-wrap  + overflow-wrap  = lambi URL apne aap agli line me
                                                        jaati hai, neeche ka horizontal
                                                        scrollbar khatam.
      max-width / max-height        = resize ka handle inhi par rukta hai, isliye box ek
                                      hadd se zyada bada nahi ho sakta (screenshot wali
                                      row 2 jaisa phaila hua box ab nahi banega).
      overflow: auto                = hadd paar hone par andar vertical scroll.            */
.vendor-url-box,
textarea.vendor-url-box {
    resize: both;
    min-height: 90px;
    min-width: 220px;
    width: 100%;
    max-width: 100%;
    max-height: 260px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
    overflow: auto;
}

/*  Locked row (UrlTypeId 4 / 8) - pehle inline background-color:lightgray tha.  */
.vendor-url-locked {
    background: var(--ez-surface-3, #eceff3);
    color: var(--ez-text-muted, #6b7280);
}

/*  Post Parameter ka box thoda lamba - usme poora JSON body aata hai.  */
.vendor-post-box { min-height: 140px; min-width: 260px; }

/* ---------------------------------------------------------------- Vendor URLs grid, chhoti screen

   Grid me 5 column hain (URL, Method, Response-Type, Post Parameter, Setting). Phone par ye
   thus jaate the aur page ka apna horizontal scroll aa jaata tha. Ab table khud scroll karti
   hai, aur box poori chaudai le lete hain.                                                       */

.vendor-url-grid { width: 100%; overflow-x: auto; }
.vendor-url-grid > table { min-width: 860px; }

@media (max-width: 991px) {
    .vendor-url-box       { min-width: 0; }
    .vendor-url-grid > table { min-width: 760px; }
}

@media (max-width: 767px) {
    .vendor-url-box       { min-height: 80px; font-size: 11px; }
    .vendor-post-box      { min-height: 110px; }
}

/* Operator Switch: P-OpCode (PlanAPI operator code) - short numeric field, 28-09-2026 */
.opswitch-popcode        { min-width: 72px; max-width: 110px; text-align: center; }