/* ================================================================================================
   ETOPUP-MODERN — the 2026 visual modernisation layer
   ================================================================================================

   WHAT THIS FILE IS
   -----------------
   The single stylesheet that turns the legacy multi-colour UI (gold menu, gold-tinted table rows,
   black table headers with khaki text, pastel gradient cards, textured beige page background)
   into one coherent, professional B2B/fintech look driven ENTIRELY by the tokens in
   brand-theme.css. It is linked LAST on the app layouts so it wins the cascade without editing
   the three bundled Bootstrap generations or the hand-modified AdminLTE build underneath.

   WHY OVERRIDES INSTEAD OF EDITING THE 48 #b6a208 SITES IN PLACE
   --------------------------------------------------------------
   The gold is spread across vendor and vendor-modified files (AdminLTE.min.css, stylesheet.css,
   serviceplan1.css, etopup-tables.css...). Editing minified vendor CSS is unreviewable and
   unrepeatable; one late-loading, documented override layer is auditable, reversible (remove one
   <link>), and keeps every colour decision in brand-theme.css tokens.

   RULES OF THIS FILE
   ------------------
   - Colours come from var(--...) tokens only. No new hex except neutral #fff/#f8fafc zebra.
   - Nothing here changes layout mechanics, JS hooks, ids, or classes views rely on.
   - No display:none of functional elements: visual re-skin only.
   ================================================================================================ */

/* ------------------------------------------------------------------------------------------------
   1. PAGE CANVAS
   The old body carried a beige tint plus a texture image HOTLINKED FROM payu.in (an external
   request on every page view). Flat neutral canvas; the hotlink is also removed at source.
   ------------------------------------------------------------------------------------------------ */
body {
    background: var(--surface-page) !important;
    background-image: none !important;
    color: var(--text-primary);
}

footer {
    background: var(--menu-bg) !important;   /* matches the navy nav bar */
    color: #e7ecf7 !important;
    padding: 14px;
    margin-top: 32px;
}

    footer p, footer a, .copy-right-part p {
        color: #e7ecf7 !important;
        margin: 0;
    }

/* ------------------------------------------------------------------------------------------------
   2. CARDS / PANELS / "SEARCH PANEL" HEADERS
   .box-title blocks were solid gold with white text; content boxes sat directly on the beige
   texture. Boxes become white cards; the panel title becomes a quiet card header.
   ------------------------------------------------------------------------------------------------ */
.box {
    background: var(--surface-card);
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* AdminLTE box variants: the legacy build tinted the WHOLE box (gold at 24% opacity on
   .box-danger and friends). Modern reading of the same idiom: white card, coloured TOP edge. */
.box.box-danger, .box.box-primary, .box.box-success, .box.box-warning, .box.box-info, .box.box-default {
    background: var(--surface-card) !important;
    border: 1px solid var(--surface-border);
    border-top: 3px solid var(--brand-primary);
}

.box.box-danger  { border-top-color: var(--brand-danger); }
.box.box-success { border-top-color: var(--brand-success); }
.box.box-warning { border-top-color: var(--brand-warning); }
.box.box-info    { border-top-color: var(--brand-info); }

.box-title {
    border: none !important;
    padding: 2px 0;
}

.box-header {
    background: transparent !important;
    border-bottom: 1px solid var(--surface-border);
}

h1.box-title, h2.box-title, h3.box-title, .box-header .box-title, .box-title {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-weight: 600;
}

/* The gold "Search Panel" ribbon specifically (box-title carried its own background) */
.box-title, .panel-heading, .card-header {
    background: transparent !important;
}

/* Legacy gold tinted wells (e.g. background:#b6a20829 blocks) */
.well, .filter-panel, .search-panel {
    background: var(--surface-card) !important;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
}

/* ------------------------------------------------------------------------------------------------
   3. TABLES — the single biggest source of visual noise
   Old: every <tr> gold-tinted (#b6a208b3), bordered-table headers black with khaki text, gold
   tfoot. New: white rows with a light zebra, neutral sunken header, primary-tint hover, tokens
   for the money/status semantics (already in brand-theme.css).
   ------------------------------------------------------------------------------------------------ */
tr {
    background: transparent !important;
}

table {
    background: var(--surface-card);
}

table thead tr th,
table.table-bordered thead tr th,
table.table-bordered tr th,
table.dataTable thead th {
    background: var(--surface-sunken) !important;
    color: var(--text-primary) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--surface-border) !important;
    white-space: nowrap;
}

table tbody tr:nth-child(even) {
    background: #f8fafc !important;
}

table tbody tr:hover {
    background: var(--brand-primary-light) !important;
}

table.table-bordered tfoot tr,
table tfoot tr {
    background: var(--surface-sunken) !important;
    color: var(--text-primary);
    font-weight: 600;
}

table td, table th {
    border-color: var(--surface-border) !important;
    vertical-align: middle;
}

/* DataTables chrome: the length/search/info/pagination row spacing and colours */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: var(--text-secondary);
    padding: 6px 0;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
    border-radius: var(--radius-sm);
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--brand-primary-light) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
}

/* ------------------------------------------------------------------------------------------------
   4. BUTTONS — one consistent hierarchy
   The legacy sheets painted .btn-success black, mixed three Bootstrap generations of button
   styling, and used random colours per page. Everything maps to tokens; sizes and radius unify.
   ------------------------------------------------------------------------------------------------ */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

/* The doubled selectors (.btn.btn-primary etc.) out-rank legacy page sheets such as login.css,
   which pins the gold with `.btn.btn-primary { ... !important }`. */
.btn-primary, .btn.btn-primary, body .btn.btn-primary, .btn-info, .btn.btn-info,
input[type="submit"].btn:not(.btn-danger):not(.btn-success):not(.btn-default) {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: var(--brand-primary-contrast) !important;
}

    .btn-primary:hover, .btn.btn-primary:hover, body .btn.btn-primary:hover,
    .btn-primary:focus, .btn.btn-primary:focus,
    .btn-info:hover, .btn.btn-info:hover, .btn-info:focus {
        background-color: var(--brand-primary-dark) !important;
        border-color: var(--brand-primary-dark) !important;
    }

.btn-success {
    background-color: var(--brand-success) !important;
    border-color: var(--brand-success) !important;
    color: #fff !important;
}

    .btn-success:hover, .btn-success:focus {
        background-color: #116632 !important;
        border-color: #116632 !important;
    }

.btn-danger {
    background-color: var(--brand-danger) !important;
    border-color: var(--brand-danger) !important;
    color: #fff !important;
}

    .btn-danger:hover, .btn-danger:focus {
        background-color: #8f1e18 !important;
        border-color: #8f1e18 !important;
    }

.btn-warning {
    background-color: var(--brand-warning) !important;
    border-color: var(--brand-warning) !important;
    color: #fff !important;
}

.btn-default, .btn-secondary, .btn-light {
    background-color: var(--surface-card) !important;
    border: 1px solid var(--surface-border) !important;
    color: var(--text-primary) !important;
}

    .btn-default:hover, .btn-secondary:hover, .btn-light:hover {
        background-color: var(--surface-sunken) !important;
    }

.btn[disabled], .btn.disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* A bare `.btn` with no variant class inherited the legacy gold from EzyTM_recharge.css.
   Unvarianted buttons are treated as primary actions (that is how the views use them —
   e.g. the KYC upload call-to-action). */
a.btn:not([class*="btn-"]):not(.grid-btn), button.btn:not([class*="btn-"]):not(.grid-btn) {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* KYC "Verify" actions were .btn-warning purely for the old gold colour, not as a warning —
   inside an input group they are ordinary primary actions. Scoped so genuine warning buttons
   elsewhere stay amber. */
.input-group-btn .btn-warning {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* KYC page (User/UpLoadKYCDoc): its internal styles used five unrelated colours - periwinkle
   band, mint tiles, magenta labels/submit, green hover, black preview frame. One business
   palette now: primary for the actions and band, neutral surfaces for the upload tiles. */
.kycForm .heading, .kycForm .box .heading, .kycForm h4.heading {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

.kycForm .file-upload, .kycForm .btn-my, .kycForm .btnKyc {
    background: var(--brand-primary) !important;
    color: #fff !important;
    border-color: var(--brand-primary) !important;
}

    .kycForm .file-upload:hover, .kycForm .btnKyc:hover, .kycForm .btn-my:hover {
        background: var(--brand-primary-dark) !important;
        color: #fff !important;
    }

.kycForm .containers .imageWrapper {
    background: var(--surface-sunken) !important;
    border: 2px dashed var(--surface-border) !important;
    border-radius: var(--radius-md);
}

/* Retailer dashboard KYC prompt: was a pink gradient band with an istockphoto hotlink.
   Reads as a proper notice now. */
.kyc_div {
    background-image: none !important;
    background: var(--brand-info-light) !important;
    border: 1px solid var(--brand-info);
    border-radius: var(--radius-md);
}

/* Tiny grid action buttons keep their compact size but pick up the palette above */
.grid-btn {
    box-shadow: none;
}

/* ------------------------------------------------------------------------------------------------
   5. FORMS
   Consistent field chrome + a real focus state (the ring in brand-theme.css handles keyboard).
   ------------------------------------------------------------------------------------------------ */
.form-control, input[type="text"], input[type="password"], input[type="number"], input[type="email"], select, textarea {
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-sm);
    background-color: var(--surface-card);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .form-control:focus, input:focus, select:focus, textarea:focus {
        border-color: var(--brand-primary);
        box-shadow: 0 0 0 3px var(--brand-primary-light);
        outline: none;
    }

label {
    color: var(--text-secondary);
    font-weight: 600;
}

/* ------------------------------------------------------------------------------------------------
   6. DASHBOARD KPI CARDS
   The pastel gradient blobs and multicolour circles become clean white stat cards. The circle
   ornaments (decorative pseudo-elements/imgs) are toned, not removed, so the markup is untouched.
   ------------------------------------------------------------------------------------------------ */
#total-report .bg-white, .re-box, .kpi-card {
    background: var(--surface-card) !important;
    background-image: none !important;
    border: 1px solid var(--surface-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

#total-report .re-box:hover {
    box-shadow: var(--shadow-md);
}

/* The admin dashboard's six stat cards (Home/Index sec_1..sec_6): the decorative gradient
   circle ornaments are switched off, the near-transparent card face becomes a real surface,
   and each card keeps its MEANING via a coloured left accent instead of a colour explosion. */
.sec_1::before, .sec_1::after,
.sec_2::before, .sec_2::after,
.sec_3::before, .sec_3::after,
.sec_4::before, .sec_4::after,
.sec_5::before, .sec_5::after,
.sec_6::before, .sec_6::after {
    display: none !important;
}

.container2 .card, .card.front-face {
    background: var(--surface-card) !important;
    border: 1px solid var(--surface-border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}

.sec_1 .front-face { border-left: 4px solid var(--brand-success) !important; }
.sec_2 .front-face { border-left: 4px solid var(--brand-danger) !important; }
.sec_3 .front-face { border-left: 4px solid var(--brand-warning) !important; }
.sec_4 .front-face { border-left: 4px solid var(--brand-warning) !important; }
.sec_5 .front-face { border-left: 4px solid var(--brand-primary) !important; }
.sec_6 .front-face { border-left: 4px solid var(--brand-info) !important; }

.container2 h5 {
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.container2 h4 {
    color: var(--text-primary) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------------------------------
   7. ALERTS / NOTIFICATIONS
   ------------------------------------------------------------------------------------------------ */
.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
}

.alert-success { background: var(--brand-success-light); color: var(--brand-success); border-color: var(--brand-success); }
.alert-danger  { background: var(--brand-danger-light);  color: var(--brand-danger);  border-color: var(--brand-danger); }
.alert-warning { background: var(--brand-warning-light); color: var(--brand-warning); border-color: var(--brand-warning); }
.alert-info    { background: var(--brand-info-light);    color: var(--brand-info);    border-color: var(--brand-info); }

/* ------------------------------------------------------------------------------------------------
   8. MODALS
   ------------------------------------------------------------------------------------------------ */
.modal-content {
    border-radius: var(--radius-lg);
    border: 1px solid var(--surface-border);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--surface-border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* Bootstrap-5 modal JS + Bootstrap-3 modal CSS bridge (11-09-2026, REQRES-POPUP "popup not showing" on live).
   The layouts load Bootstrap 3 CSS last, whose .modal.fade is opacity 0 and whose dialog sits at translate(0,-25%)
   until the ".in" class is added - but the Bootstrap 5 modal JS that runs adds ".show" instead. Shared/_Modal.cshtml
   works only because it hard-codes "modal fade in". These rules make ".show" mean what ".in" means, so every modal
   (with or without "in") opens visible and centred, with a normal dimmed backdrop. */
.modal.fade.show { opacity: 1; }
.modal.fade.show .modal-dialog { -webkit-transform: translate(0, 0); transform: translate(0, 0); }
.modal-backdrop.fade.show { opacity: .5; }

/* ------------------------------------------------------------------------------------------------
   9. LEGACY GOLD SWEEP
   Anything still painted with the old gold family that the sections above did not reach:
   headings, pills, misc blocks. These selectors are deliberately conservative — they only
   retarget elements that carried the literal legacy classes.
   ------------------------------------------------------------------------------------------------ */
.bg-warning, .label-warning, .badge-warning {
    background-color: var(--brand-warning) !important;
    color: #fff !important;
}

/* Notification Settings switches (GlobalSetting/Index rebuild) - token-driven toggle idiom. */
.ns-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
}

    .ns-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.ns-slider {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--surface-border);
    border-radius: 999px;
    transition: background-color var(--transition-fast);
}

    .ns-slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        top: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform var(--transition-fast);
        box-shadow: var(--shadow-sm);
    }

.ns-switch input:checked + .ns-slider {
    background: var(--brand-success);
}

    .ns-switch input:checked + .ns-slider::before {
        transform: translateX(20px);
    }

.ns-switch input:focus-visible + .ns-slider {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

.notification-settings-intro {
    color: var(--text-secondary);
    max-width: 640px;
    margin: 0 auto 18px;
}

.notification-settings-action {
    color: var(--text-muted);
    font-size: 12px;
}

/* Google Authenticator policy rows (TwoFactorSetting/Index, SEC-DB-002): switch + text side by side, no overlap */
.tf-opt {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--surface-border);
}

    .tf-opt:last-of-type {
        border-bottom: 0;
    }

    .tf-opt .ns-switch {
        flex: 0 0 44px;
        margin-top: 2px;
    }

    .tf-opt .tf-opt-text {
        flex: 1 1 auto;
        color: var(--text-secondary);
    }

.tf-enrolled {
    color: var(--text-secondary);
    font-weight: normal;
    margin-left: 12px;
}

#tf-qr canvas, #tf-qr img {
    display: block;
    margin: 12px auto;
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------------------------------------
   Google Authenticator enable-popup wizard (Views/TwoFactor/_Prompt.cshtml, SEC-DB-002).
   Own fixed overlay: the admin layouts load Bootstrap 3 AND 5, and a .modal.fade there is rendered
   translated off the top of the screen with a solid backdrop. This overlay depends on neither.
   Responsive: card is 100% wide up to 600px, scrolls inside itself on short screens; the QR and the
   key column stack under 620px; buttons stack under 420px.
   ------------------------------------------------------------------------------------------------ */
body.tf-lock { overflow: hidden; }

.tf-ov {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.62);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .tf-ov[hidden] { display: none; }

.tf-card {
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background: #fff;
    color: #1f2937;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    padding: 0 22px 18px;
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

.tf-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 14px;
}

    .tf-head h3 {
        flex: 1 1 auto;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.3;
        color: #111827;
    }

.tf-head-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-primary, #b8103f);
    color: #fff;
    font-size: 18px;
}

/*  line-height:1 on a 26px glyph is a box exactly as tall as the em square, which is SHORTER than the
    font's real ink (ascender to descender is about 1.15em). The × has no descender so it survived,
    but the FORM-CLIP check flags it correctly and a language pack with a taller close glyph would
    clip it for real. 1.15 plus a 32px floor, which also makes it a reachable tap target. */
.tf-x {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1.15;
    min-height: 32px;
    min-width: 32px;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
}

    .tf-x:hover { color: #111827; }

.tf-lead { margin: 0 0 12px; font-size: 15px; }
.tf-sub { color: #6b7280; font-size: 13px; margin-top: 2px; }
.tf-center { text-align: center; }
.tf-foot { margin: 12px 0 0; font-size: 12px; color: #6b7280; }
.tf-kbd { display: inline-block; border: 1px solid #d1d5db; border-radius: 4px; padding: 0 6px; font-weight: 700; line-height: 1.4; background: #f9fafb; }

.tf-guide {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .tf-guide li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px dashed #e5e7eb;
    }

        .tf-guide li:last-child { border-bottom: 0; }

.tf-num {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand-primary, #b8103f);
    color: #fff;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.tf-links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px 16px; }
    .tf-links a { font-size: 13px; white-space: nowrap; }

.tf-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    flex-wrap: wrap;
}

    .tf-actions .btn { min-width: 120px; }

.tf-scan { display: flex; gap: 20px; align-items: flex-start; }
.tf-qr-wrap { flex: 0 0 200px; }
.tf-qr { display: flex; justify-content: center; padding: 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; min-height: 120px; }
    .tf-qr canvas, .tf-qr img { max-width: 100%; height: auto; }
.tf-scan-side { flex: 1 1 auto; min-width: 0; }
.tf-key { display: block; margin: 6px 0; padding: 8px 10px; font-size: 14px; letter-spacing: 1px; word-break: break-all; background: #f3f4f6; color: #111827; border-radius: 6px; user-select: all; }
.tf-label { display: block; margin: 12px 0 6px; font-weight: 600; color: #111827; }
.tf-code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tf-code { width: 130px !important; font-size: 20px; letter-spacing: 6px; text-align: center; height: 42px; }
.tf-msg { min-height: 20px; margin-top: 8px; font-size: 13px; }
    .tf-msg[data-kind="err"] { color: #b91c1c; font-weight: 600; }

.tf-done { text-align: center; padding: 8px 0 4px; }
.tf-done-icon { width: 64px; height: 64px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 30px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.tf-done h4 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.tf-done .tf-actions { justify-content: center; }

@media (max-width: 620px) {
    .tf-scan { flex-direction: column; }
    .tf-qr-wrap { flex-basis: auto; width: 100%; }
    .tf-card { padding: 0 14px 14px; border-radius: 10px; }
    .tf-head h3 { font-size: 16px; }
}

@media (max-width: 420px) {
    .tf-actions { flex-direction: column-reverse; }
        .tf-actions .btn { width: 100%; }
    .tf-code-row .btn { width: 100%; }
    .tf-code { width: 100% !important; }
}

.ns-state { min-width: 70px; display: inline-block; }

/* Page heading strip on report pages (grey bar with centred title) */
.content-header, .page-title-bar {
    background: transparent;
    color: var(--text-primary);
}

/* Legacy gold TEXT accents → brand. Marketing sub-headings and icons take the magenta accent
   (that's what an accent is for); footer headings on the navy footer read white; the login-card
   greeting takes the accent too. */
.sub-heading, .Why-Choosee .layer-icon, .icon__box-item-icon i, .brand-accent-icon {
    color: var(--brand-accent) !important;
}

.login-wrap h3 {
    color: var(--text-primary) !important;
}

footer .heading {
    color: #ffffff !important;
}

.service-boxes, .service-boxes .service-btn, .wrapper {
    color: var(--text-primary) !important;
}

/* Marketing-template gold accents (EzyTM_recharge.css): footer icon chips, the copyright bar and
   the service-tile hover all carried the legacy gold. Same palette as the app now. */
footer li.icon i {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

.footer-bottom {
    background: #0f1830 !important;   /* one step darker than the footer navy */
    color: #e7ecf7 !important;
}

.service-layer-active,
.our_strengths .bg-green,
.flexitype_team_two-item:hover .flexitype_team_two-item-cont {
    background: var(--brand-primary) !important;
    color: #fff !important;
}

/* Menu count bubbles: a later legacy rule still painted .badge-menu bright yellow (#fdfe24);
   route every bubble variant through the badge tokens. */
.badge-menu, .badge-submenu, .badge.rec, span.rec {
    background: var(--menu-badge-bg) !important;
    color: var(--menu-badge-text) !important;
    border-radius: 999px;
    font-weight: 700;
}

/* P4 (owner 04-10-2026): pending-complaint badge recharge se alag (laal) + tooltip - menu me 'kitni complaint pending' turant dikhe. */
.badge-complaint { background: #e53935 !important; color: #fff !important; }
/* P4 (owner 04-10-2026): Reports parent par DO badge (complaint + recharge) hote hain. Dono position:absolute
   the (right:31px / 18%), to ek doosre ke THEEK PEECHE aa jaate the - sirf ek '0' dikhta tha. Ab ek wrapper me
   side-by-side, taaki complaint count bhi menu bar par alag dikhe. */
header .badge-menu-wrap { position: absolute; top: 0; right: 14px; display: inline-flex; gap: 4px; align-items: center; }
header .badge-menu-wrap .badge-menu { position: static; top: auto; right: auto; }
.navbar-collapse .navbar-nav > li > a .badge-menu-wrap { position: static; right: auto; top: auto; margin-left: 6px; display: inline-flex; gap: 4px; }

/* ---- CommonSwitch: Common Route Settings table (owner fix 2026-08-30) ----
   The add-row squeezed 19 columns into the viewport: select2 boxes collapsed to
   ~40px and placeholder inputs truncated. The table now scrolls horizontally
   inside .table-responsive with sane minimum widths per control. */
#tblCommonSwitch { min-width: 1700px; }
#tblCommonSwitch th { white-space: nowrap; vertical-align: middle; }
#tblCommonSwitch tfoot td { vertical-align: top; }
#tblCommonSwitch tfoot .form-control { min-width: 96px; }
#tblCommonSwitch tfoot td .select2-container,
#tblCommonSwitch tfoot td .select2-container .select2-selection { min-width: 130px; width: 100% !important; }
#tblCommonSwitch .select2-container .select2-selection--single,
#tblCommonSwitch .select2-container .select2-selection--multiple { min-height: 34px; }
#tblCommonSwitch tfoot #btnAdd { min-width: 90px; }

/* Company Profile branding previews (owner point 23 + logo upload) */
.company-logo-preview { max-height: 64px; max-width: 240px; background: var(--surface-page, #f4f6f9); padding: 4px; border: 1px solid var(--brand-primary-light, #e8effd); border-radius: 4px; }
.company-favicon-preview { height: 32px; width: 32px; background: var(--surface-page, #f4f6f9); padding: 2px; border: 1px solid var(--brand-primary-light, #e8effd); border-radius: 4px; }

/* User Profile photo preview (owner request 2026-08-30) */
.profile-photo-preview { max-height: 96px; max-width: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand-primary-light, #e8effd); }

/* ---- ThemeSetting live-preview sample (owner request 2026-08-30) ----
   Every colour comes from the same var(--brand-*) tokens the real site uses,
   so the picker's documentElement.style.setProperty updates this instantly. */
.theme-preview-title { margin: 24px 0 8px; }
.theme-preview { border: 1px solid var(--brand-primary-light, #e8effd); border-radius: 6px; overflow: hidden; }
.theme-preview-label { font-size: 11px; opacity: .75; font-weight: normal; }
.theme-preview-menu { background: var(--menu-bg, #16213e); color: var(--menu-text, #e7ecf7); padding: 10px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.theme-preview-menu .theme-preview-label { color: #fff; }
.theme-preview-menu-item { padding: 5px 12px; border-radius: 4px; font-size: 13px; }
.theme-preview-menu-item--active { background: var(--brand-primary, #1d4ed8); color: var(--brand-primary-contrast, #fff); }
.theme-preview-badge { background: var(--menu-badge-bg, #c60d59); color: var(--menu-badge-text, #fff); border-radius: 10px; padding: 1px 7px; font-size: 11px; margin-left: 4px; }
.theme-preview-page { background: var(--surface-page, #f4f6f9); padding: 16px; }
.theme-preview-card { background: #fff; color: var(--text-primary, #1f2933); border: 1px solid var(--brand-primary-light, #e8effd); border-top: 3px solid var(--brand-primary, #1d4ed8); border-radius: 4px; padding: 12px 14px; }
.theme-preview-card p { margin: 0 0 10px; }
.theme-preview-heading { font-weight: 600; color: var(--brand-primary-dark, #1e40af); }
.theme-preview-secondary { background: var(--brand-secondary, #475569); border-color: var(--brand-secondary, #475569); color: #fff; }
.theme-preview-refund { background: var(--brand-accent, #c60d59); color: #fff; }
.theme-preview-accent { color: var(--brand-accent, #c60d59); font-weight: 600; text-decoration: underline; }
.theme-preview-info { color: var(--brand-info, #0369a1); }
.theme-preview-warning { color: var(--brand-warning, #a16207); }
.theme-preview-tint { background: var(--brand-primary-light, #e8effd); color: var(--brand-primary-dark, #1e40af); padding: 2px 8px; border-radius: 3px; }

/* ---- Font style tokens (owner request 2026-08-30) ----
   Fallbacks are EXACTLY the shipped AdminLTE stack/size, so with no token set
   the site renders identically to before. */
body {
    /* L10N 02-09: 'Nirmala UI' (Windows) + 'Noto Sans' (Android/Linux) appended as the Indic
       system-font fallback - Devanagari/Gujarati/Tamil/Telugu/Bengali/Kannada/Gurmukhi all
       render from fonts users ALREADY have. Zero webfonts shipped (locked design (S)16).
       Latin text is untouched: these fonts only catch glyphs the earlier fonts lack. */
    font-family: var(--font-family-base, 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, 'Nirmala UI', 'Noto Sans', sans-serif);
    font-size: var(--font-size-base, 14px);
    /* Indic scripts carry taller matras/conjuncts - a hair more leading stops descender
       clipping in dense grids without visibly changing Latin layouts. */
    line-height: 1.5;
}

/* ---- ThemeSetting weekly scheduler UI ---- */
.theme-week-box { padding: 12px 14px; }
.theme-week-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.theme-day-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.theme-day-pill { padding: 5px 14px; border-radius: 16px; border: 1px solid var(--brand-primary-light, #e8effd); color: var(--brand-primary-dark, #1e40af); background: #fff; font-size: 13px; text-decoration: none; }
.theme-day-pill:hover { background: var(--brand-primary-light, #e8effd); text-decoration: none; }
.theme-day-pill--active { background: var(--brand-primary, #1d4ed8); border-color: var(--brand-primary, #1d4ed8); color: var(--brand-primary-contrast, #fff); }
.theme-day-pill--today { box-shadow: 0 0 0 2px var(--brand-accent, #c60d59); }
.theme-day-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.theme-preset-select { width: auto; display: inline-block; }
.theme-font-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--brand-primary-light, #e8effd); }
.theme-font-select { width: auto; display: inline-block; }

/* ---- Report row colours by status (owner 14-09-2026) ----
   The preview consumes the SAME --status-row-* tokens Content/css/livemonitor.css uses, with the same
   shipped defaults, so a picker change (documentElement.style.setProperty) recolours it instantly and
   what the admin sees here is exactly what the Live Monitor rows will show. */
.theme-rowcolor-box { padding: 12px 14px; }
.theme-rowcolor-box .theme-week-controls { margin-bottom: 12px; }
.theme-rowcolor-preview { font-size: 12px; margin-bottom: 0; }
.theme-rowcolor-preview > thead > tr > th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #55606b; background: #f6f8fa; }
.theme-rowcolor-preview > tbody > tr > td { font-family: Consolas, "Courier New", monospace; white-space: nowrap; }
/* !important: section 3 above paints every tr transparent / zebra / hover with !important */
/* Keep these four fallbacks the same as livemonitor.css and EditableTokens, or the preview lies about
   the default. Owner 14-09 (2nd pass): Success green, Processing BLUE, Failed red, Hold YELLOW, a shade darker. */
.theme-rowcolor-preview > tbody > tr[data-status="1"] { background: var(--status-row-success-bg, #c9edd7) !important;    color: var(--status-row-success-text, #12512b); }
.theme-rowcolor-preview > tbody > tr[data-status="2"] { background: var(--status-row-processing-bg, #cfe2fb) !important; color: var(--status-row-processing-text, #0b3a66); }
.theme-rowcolor-preview > tbody > tr[data-status="3"] { background: var(--status-row-failed-bg, #f9cdc7) !important;     color: var(--status-row-failed-text, #7a1a15); }
.theme-rowcolor-preview > tbody > tr[data-status="4"] { background: var(--status-row-hold-bg, #fbe7a8) !important;       color: var(--status-row-hold-text, #6b4e05); }
/* switch OFF: tokens resolve to --row-plain-bg -> the preview shows the plain zebra look, like the real grid */
.theme-rowcolor-preview > tbody > tr:nth-child(even) { --row-plain-bg: #f8fafc; }

/* ---- Package › Add/Edit operator grid (owner 14-09-2026: "mouse hover par issue") ----
   Custom.css gives EVERY td "nowrap + ellipsis" and flips it to "wrap + white" on hover. In this grid the
   Circle-Pack cell (checkbox + button) was ellipsised to ". ." at rest and, on hover, wrapped onto a second
   line - the row jumped 40px under the mouse. Here the cells never wrap and never re-flow on hover; the long
   operator name stays ellipsised with its full text in the title tooltip. Inputs keep the row one line tall. */
#tabid > tbody > tr > td { white-space: nowrap; overflow: visible; max-width: none; vertical-align: middle; }
#tabid > tbody > tr > td:hover { white-space: nowrap; overflow: visible; background-color: transparent; }
#tabid > tbody > tr > td:nth-child(2) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
#tabid > tbody > tr > td:nth-child(2):hover { overflow: hidden; }
#tabid .pkg-circle-cell { min-width: 96px; }
#tabid .pkg-circle-cell input[type="checkbox"] { vertical-align: middle; margin: 0 6px 0 0; }
#tabid .pkg-circle-btn { display: inline-block; padding: 4px 8px; font-size: 0; line-height: 1; vertical-align: middle; color: #fff; }   /* font-size 0 hides the "." link text */
#tabid .pkg-circle-btn::before { font-size: 12px; line-height: 1; margin-right: 0; }                                                       /* the refresh icon keeps its size */
#tabid input[type="text"] { max-width: 140px; }

/* ================================================================================================
   PKG-RESPONSIVE (15-09-2026) — OWNER: "package list me package ko edit karke naam change, ya ye jo
   circle package ka margin set karne ka option, sahi se dikh nahi raha. Is page ko responsive karo."

   WHAT WAS ACTUALLY WRONG (from the owner's screenshot, at a normal laptop width)
   The grid has ten columns, six of which hold a form control. Bootstrap 3's .table-responsive only
   switches on BELOW 768px, so above that the table was forced to the container's width and the
   browser had to shrink columns to fit. The Circle-Pack cell lost the race: its min-width was only a
   hint, the cell was squeezed, and because these cells are overflow:visible the blue Circle-Package
   button spilled out of its own column and ended up half-hidden behind the OP Commission input. The
   button was there and clickable - you just could not see it. The same squeeze is why the last
   column sat against the window edge.

   THE FIX
     1. the wrapper scrolls sideways at EVERY width, not only on a phone;
     2. the table gets a min-width, so columns take the space they need instead of being crushed;
     3. Id and Operator stay pinned while you scroll, so you never lose track of whose row you are
        editing - on 855 operators that is the difference between usable and not;
     4. the Circle-Pack cell is wide enough for checkbox + button, and clips nothing;
     5. below 768px the whole grid becomes one card per operator with every field labelled.
   ================================================================================================ */

.pkg-grid-hint {
    margin: 0 0 8px;
    font-size: 12px;
    color: #55606b;
}

.pkg-grid-wrap {
    /* Both axes scroll inside this box. A package can carry 855 operators; with the whole list on the
       page the header scrolls away after the first screenful and you are left editing anonymous rows.
       A bounded box means the sticky header and the two pinned columns actually hold still. */
    max-height: 70vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #e2e6ea;
    border-radius: 4px;
}

/* Wide enough that nothing has to be squeezed. Anything narrower and the browser starts stealing
   pixels from whichever column has the least rigid content - which is how the button got clipped. */
.pkg-grid {
    min-width: 1100px;
    margin-bottom: 0;
}

.pkg-grid > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #f6f8fa;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #55606b;
    white-space: nowrap;
}

/* ---- the two pinned columns ---- */
.pkg-grid > thead > tr > th.pkg-c-id,
.pkg-grid > tbody > tr > td.pkg-c-id {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 64px;
    min-width: 64px;
    background: #fff;
}

.pkg-grid > thead > tr > th.pkg-c-op,
.pkg-grid > tbody > tr > td.pkg-c-op {
    position: sticky;
    left: 64px;
    z-index: 2;
    min-width: 180px;
    background: #fff;
    box-shadow: 1px 0 0 #e2e6ea;
}

.pkg-grid > thead > tr > th.pkg-c-id,
.pkg-grid > thead > tr > th.pkg-c-op {
    z-index: 4;
    background: #f6f8fa;
}

/* the sticky cells need their own background or the scrolling columns show through them */
.pkg-grid > tbody > tr:nth-of-type(odd) > td.pkg-c-id,
.pkg-grid > tbody > tr:nth-of-type(odd) > td.pkg-c-op {
    background: #f9f9f9;
}

.pkg-grid > tbody > tr:hover > td.pkg-c-id,
.pkg-grid > tbody > tr:hover > td.pkg-c-op {
    background: #f5f5f5;
}

/* ---- the cell the owner could not see ---- */
.pkg-grid .pkg-circle-cell {
    min-width: 104px;
    width: 104px;
    white-space: nowrap;
    overflow: visible;
}

/*  THE ACTUAL CAUSE of the owner's screenshot, measured in the browser rather than guessed:
    stylesheet.css carries a blanket `input { width: 100% }`. A checkbox obeys it, so the
    Circle-Pack checkbox was rendering 87px wide (and IsUserLoss 75px). That one stretched
    checkbox filled the cell and pushed the blue Circle-Package button clean past the cell's
    right edge, where the next column's OP Commission box drew over it. The button was always
    there and always clickable - it was underneath. A checkbox has no business being 87px wide
    anywhere in this grid. */
#tabid input[type="checkbox"],
#tabid input[type="radio"] {
    width: auto;
    min-width: 0;
    max-width: none;
}

.pkg-grid .pkg-circle-btn {
    margin-left: 2px;
}

.pkg-grid .pkg-c-used {
    min-width: 90px;
    text-align: right;
}

.pkg-grid > tbody > tr > td > input[type="text"],
.pkg-grid > tbody > tr > td > select {
    min-width: 110px;
}

/* ================================================================================================
   Phone: one card per operator. The header row is gone at this width, so each value states its own
   name from the data-label the view writes.
   ================================================================================================ */
@media (max-width: 767px) {
    .pkg-grid-wrap {
        max-height: none;
        overflow: visible;
        border: 0;
    }

    .pkg-grid {
        min-width: 0;
    }

    .pkg-grid > thead {
        display: none;
    }

    .pkg-grid,
    .pkg-grid > tbody,
    .pkg-grid > tbody > tr,
    .pkg-grid > tbody > tr > td {
        display: block;
        width: auto;
    }

    .pkg-grid > tbody > tr {
        margin-bottom: 10px;
        border: 1px solid #e2e6ea;
        border-radius: 4px;
        background: #fff;
        overflow: hidden;
    }

    /* the operator's name becomes the card's title */
    .pkg-grid > tbody > tr > td.pkg-c-op {
        position: static;
        max-width: none;
        padding: 8px 10px;
        border: 0;
        border-bottom: 1px solid #e2e6ea;
        background: #f6f8fa;
        box-shadow: none;
        font-weight: 700;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .pkg-grid > tbody > tr > td.pkg-c-id {
        position: static;
        width: auto;
        min-width: 0;
    }

    .pkg-grid > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 6px 10px;
        border: 0;
        border-bottom: 1px solid #f0f2f5;
        white-space: normal;
    }

    .pkg-grid > tbody > tr > td:last-child {
        border-bottom: 0;
    }

    .pkg-grid > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: #55606b;
    }

    /* the title cell must not print its own label twice */
    .pkg-grid > tbody > tr > td.pkg-c-op::before {
        content: attr(data-label) ": ";
        display: inline;
    }

    .pkg-grid > tbody > tr > td > input[type="text"],
    .pkg-grid > tbody > tr > td > select {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 60%;
        text-align: right;
    }

    .pkg-grid .pkg-circle-cell {
        width: auto;
        min-width: 0;
    }
}

/* ---- Submit / Cancel ---- */
.pkg-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin: 12px 0;
}

@media (max-width: 767px) {
    .pkg-actions {
        flex-direction: column-reverse;
    }

    .pkg-actions .btn,
    .pkg-actions input.btn {
        width: 100%;
    }
}