/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.main-menu .navbar-header .navbar-brand .brand-text {
    color: #4C64E6;
    padding-left: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    letter-spacing: 0.01rem;
    font-size: 1.25rem;
    animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
}

er {
    color: #ea5455;
}

.brand-text-pos:hover:not(.disabled):not(:disabled) {
    background-color: transparent !important;
}

.brand-logo-img {
    max-width: 170px !important;
}

.letter_head {
    height: 80px;
    width: 100%;
}

.print_body_margin {
    margin: 20px;

}


.hidden_border {
    border-style: hidden;
}

@media (min-width: 576px) {
    .modal-slide-in .modal-dialog-view {
        width: 50rem !important;
    }
}

.brand-text-paydart {
    margin-bottom: -5px !important;
    color: #00389D;
    font-weight: 600;
    letter-spacing: 0.01rem;
    font-size: 1.00rem;
    animation: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) 0s normal forwards 1 fadein;
}

/* ============================================================================
   ONE LEFT LINE — align the header company name, the table's first column, the
   pagination info and the footer to the SAME vertical line as the placeholder
   TEXT inside the search box (~301.5px). The search field has 15px inner padding,
   so its text sits at box-left (286) + 15. Everything below is matched to that
   line. Confirmed live via getComputedStyle on /reports/transactions & /ph-num-country.
   ============================================================================ */

/* 1. Header company name "emerafi": <h5.brand-text-paydart> sits at the bookmark
   wrapper edge (~286). Zero the stray 16px <li> margin it inherits from app.php's
   right-side `ul.navbar-nav > li:last-child{margin-left:16px}` (the title's <li> is
   also a :last-child), then give the nav-link 15px left padding — the SAME inset as
   the search input — so the title text lands on the search-text line (~301). */
.header-navbar .navbar-container .bookmark-wrapper ul.navbar-nav.bookmark-icons > li.nav-item:last-child {
    margin-left: 0 !important;
    margin-inline-start: 0 !important;
    margin-right: 0 !important;
}
.header-navbar .navbar-container .bookmark-wrapper ul.bookmark-icons > li > .nav-link {
    padding-inline-start: 8.25px !important; /* logical: left in LTR, right in RTL */
}
/* RTL only: the header's start-edge sits ~11px inboard of the content start-edge (in LTR they
   match, so 8.25px is enough there). Give the title a larger inset so it still lands on the
   search-text line in RTL. */
html[data-textdirection="rtl"] .header-navbar .navbar-container .bookmark-wrapper ul.bookmark-icons > li > .nav-link {
    padding-inline-start: 19px !important;
}

/* 2. Table FIRST column (header + cells): the card/table edge is ~278 and cells use
   7.5px padding (text at 285.5). Indent ONLY the first column's text to the search-
   text line (278 + 23.5 = 301.5); the other columns keep their padding. */
.tableFixHead table th:first-child,
.tableFixHead table td:first-child,
table.sortable-table th:first-child,
table.sortable-table td:first-child {
    padding-inline-start: 23.5px !important; /* logical: mirrors to the right in RTL */
}

/* Table column headers (list pages): strong + dark-black + larger. */
.tableFixHead table thead th,
.tableFixHead table thead th *,
table.sortable-table thead th,
table.sortable-table thead th *,
.table-responsive table thead th,
.table-responsive table thead th * {
    font-weight: 700 !important;
    color: #000 !important;
    font-size: 14px !important;
}

/* 3. Pagination "Showing 1 to 50…": remove the ms-2/ml-2 left margin some rows add so the
   base is the card edge (~278) on every page; with the info col's fixed 8px padding, a
   15.5px span margin lands the text on the line (278 + 8 + 15.5 = 301.5). Page numbers stay
   right (justify-content-between). */
.divider > .row,
#page_hide {
    margin-inline-start: 0 !important; /* logical: zeros the start margin (left LTR / right RTL) */
}
.row.justify-content-between > [class*="col-"]:first-child > .text-muted.m-1 {
    margin-inline-start: 15.5px !important; /* logical: mirrors to the right in RTL */
}

/* 4. Footer copyright: base offset is 260 (sidebar) — pad to the search-text line.
   Logical inline-start so it mirrors to the right in RTL (Vuexy already flips the footer's
   260px sidebar margin to the right in RTL). */
.footer.footer-static {
    padding-inline-start: 34.75px !important;
}

.scroll_bar {
    overflow-y: scroll;
    max-height: 300px;
    width: fit-content;

}

.scroll_bar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scroll_bar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#uparrow:before {
    content: '\276F';
    transform: rotate(90deg) !important;
}


#downarrow:before {
    content: '\276E';

}

#uparrow,
#downarrow {
    font-size: 1.00rem;
    color: #4C64E6;
    display: inline-block;
    -ms-transform: rotate(90deg) !important;
    -webkit-transform: rotate(90deg) !important;

    padding: 10px;
}

.brand-logo-img-login {
    width: 170px;
}

.table_view> :not(caption)>*>* {
    padding: 1rem 0rem !important;
    border-bottom-width: 0px !important;
    word-break: break-all;
}

.margin-link-item {}

@media (min-width: 576px) {
    .modal-slide-in .modal-dialog-branding {
        width: 60rem !important;
    }
}

.form-switch-mode {
    width: 5.5rem !important;
    margin-right: 10px !important;
}

.form-switch-mode:not(:checked) {
    background-color: #ff9f43 !important;
    color: white
}

.color-white {
    color: white
}

.w-37 {
    width: 37% !important;
}

.ml-10 {
    margin-left: 10px;
}

.graph-no-data {
    height: 400px !important;
    vertical-align: middle !important;
    position: relative;
    top: 50%;
    ;
}

.color-dashboard-label {
    color: #6e6b7b
}

.badge-dot {
    display: inline-block !important;
    margin: 0;
    padding: 0;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0%;
    vertical-align: middle;
}

.info-badge-container {
    padding: 10px;
}

.badge {
    margin: 5px;
}

html.dark-layout .swal2-popup {
    background: rgba(15, 2, 2) !important;
    color: white !important;
}

.breadcrumb:not([class*='breadcrumb-']) .breadcrumb-item+.breadcrumb-item:before {
    margin-top: 0px !important;
}

.breadcrumb:not([class*='breadcrumb-']) .breadcrumb-item+.breadcrumb-item.dashboard:before {
    margin-top: 5px !important;
}

label input[type=checkbox] {
    margin-top: 5px !important;
}

.code {
    padding: 20px;
    background-color: #292d3e;
    border-radius: 20px;
    font-size: 14px;
    margin: 20px 0px !important;
}

.link {
    padding: 13px;
    background-color: #292d3e;
    border-radius: 5px;
    font-size: 14px;
    color: lightgray;
    margin: 20px 0px !important;
}

.color-purple {
    color: rgb(199, 146, 234);
    font-size: 20px !important;
}

.color-skyblue {
    color: rgb(137, 221, 255);
}

.color-blue {
    color: rgb(199, 146, 234);
}

.color-yellow {
    color: yellow;
    font-size: 13px;
}

.color-grey {
    color: rgb(191, 199, 213);
}

.color-orange {
    color: rgb(247, 140, 108);
}

.vertical-top {
    vertical-align: top !important;
}

.small-amount {
    float: right !important;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}

.logo-wrapper img {
    width: 150px;
    height: auto;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.invoice-download {
    padding: 50px 100px;
}

.width-40 {
    width: 40% !important;
}

/* The message box is shown when the user clicks on the password field */
#message {
    display: none;
    background: #fefefe;
    color: #000;
    position: relative;
    padding: 10px;

}

#message p {
    padding: 0px 35px;
    margin-bottom: -6px;

}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
    color: green;
}

.valid:before {
    position: relative;
    left: -45px;
    content: "✔";
    margin-right: -30px;
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
    color: red;
}

.invalid:before {
    position: relative;
    left: -35px;
    content: "✖";
    margin-right: -30px;
}

.blockOverlay {
    position: fixed !important;
}

.picker {
    margin-left: -4px;
    width: 106%;
    text-align: left;
    position: absolute;
    top: 100%;
    margin-top: 0;
    z-index: 990;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: -14px;
}

.picker__select--month {
    width: 44%;
}

.picker__select--year {
    width: 27.5%;
}

.tooltip {
    z-index: 1040 !important;
}

.doc_label {
    font-size: 14px;
}

.row-above {
    border-top: solid 1px #ccc;
    padding-top: 20px;
}

.sort-header {
    cursor: pointer !important;
}

.min-width {
    min-width: 130px;
}

.medium-width {
    min-width: 150px;
}

.sorted-asc:after {
    content: " ▲" !important;
}

.sorted-desc:after {
    content: " ▼" !important;
}

.action_btn_group {
    z-index: 9;
}

.export-group-buttons {
    z-index: 9;
}

.sidebar-icon {
    width: 25px !important;
    height: 25px !important;
}

.header-navbar .navbar-container ul.navbar-nav li {
    margin: 0px 5px !important;
}

.list-icon {
    border-radius: 0px;
    padding: 5px 10px;
    border: 1px solid #000;
    border-left: 1px solid #000;
    font-size: 38px;
    box-shadow: 0 10px 5px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.badge-full-width span {
    /* Was width:100%, which stretched the status pill across the whole ORDER STATUS column
       (text centered → looked like huge left/right padding). Let the pill hug its text instead. */
    width: auto !important;
    display: inline-block !important;
}

.badge.badge-light-expired {
    background-color: rgb(255 100 0 / 12%);
    color: #FF8C00 !important;
}

.badge.badge-light-info {
    background-color: rgb(91 16 242 / 12%) !important;
    color: #001fe8 !important;
}

/* *********************************************************** */


/* header-style */
table th {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6E6B7B;
    padding: 12px 16px;
    border-bottom: 2px solid #E4E8EE;
    min-width: 100px;
}

/* General Cell */
table td {
    font-size: 14px;
    color: #6E6B7B;
    padding: 14px 16px;
    border-bottom: 1px solid #F0F0F0;
}

/* ORDER ID */
.order-id {
    font-size: 14px;
    font-weight: 500;
    /* Medium */
    color: #7367F0;
    /* Primary Purple */
}

/* STATUS BADGE (Base) */
.status-badge {
    font-size: 12px;
    font-weight: 600;
    /* Semi-bold */
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    line-height: 1;
    text-align: center;
}

.status-captured {
    background-color: #D4EDDA;
    color: #28C76F;
}

.status-pending {
    background-color: #FFF3CD;
    color: #FF9F43;
}

.status-failed {
    background-color: #F8D7DA;
    color: #EA5455;
}

.status-refunded {
    background-color: #E2E3E5;
    color: #82868B;
}

/* status-expired, status-void, status-debit classes removed — these statuses
   no longer have dedicated badge styling; they fall back to the default class */

/* AMOUNT VALUES */
.amount-positive {}


amount-negative {}

/* MERCHANT INFO */
.merchant-name {
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
    /* Medium */
    color: #5E5873;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.merchant-code {
    font-size: 12px;
    color: #82868B;
}


/* DATE & TIME */
.txn-date {
    font-size: 14px;
    font-weight: 500;
    /* Medium */
    color: #5E5873;
}

.txn-time {
    font-size: 12px;
    color: #82868B;
}

/* Pagination */
.pagination {
    gap: 6px;
}

/* Pagination – Page Info Text */
.pagination-info {
    font-size: 14px;
    color: #6E6B7B;
}

.pagination-btn {
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 6px;
    border: auto !important;
    ;
    background-color: #ecc94b !important;
    color: auto !important;
    ;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover {
    background-color: #F8F8FF;
    border-color: #D6D9E0;
}

.pagination-btn.active {
    background-color: #ecc94b !important;
    border-color: #e2cf22ff;
    color: #FFFFFF;
}

.pagination-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pagination footer wrapper — compact AND vertically centered in the white card.
   In this app `.divider` is used ONLY as the pagination-footer wrapper (43 listing views),
   never as a text divider, so these tweaks are safe and consistent across all pages.
   Trim the margin 1rem -> 0.5rem (footer ~16px shorter). style.css loads after components.css
   (`.divider { margin: 1rem 0 }`), so this wins by source order. */
.divider {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
/* The template injects an inline `.app-content .card .row.justify-content-between
   { margin-top: 11px !important }` hack. The pagination row has `row justify-content-between`,
   so it inherits that 11px and sits ~11px low inside the footer strip (not centered).
   Cancel it for the pagination row only — higher specificity (5 classes) + !important to beat
   the hack. The row then sits flush in the symmetric-margin divider = vertically centered. */
.app-content .card .divider > .row.justify-content-between {
    margin-top: 0 !important;
}

/* ---- Sticky footer ----
   On pages whose content is shorter than the viewport (e.g. a 9-row list), the static footer used
   to float in the middle of the screen, leaving a large empty band beneath it (the "blank space").
   Make <body> a flex column so the content area grows to fill the available height and the footer
   is pinned to the bottom. The header and sidebar are position:fixed (out of flow) so they aren't
   affected; only #pjax-container (the page content) and the footer are flex items.
   Vertical-only -> identical in LTR and RTL; viewport-relative (100vh) -> responsive at any size;
   long pages are unaffected (content exceeds the min-height and the footer flows below normally). */
body.vertical-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.vertical-layout > #pjax-container {
    flex: 1 0 auto;
}
body.vertical-layout > footer.footer {
    flex-shrink: 0;
}

/* ---- List table height cap (LTR + RTL parity) ----
   The scrollable-list styling (`.tableFixHead`: capped height + inner scroll, sticky header,
   hidden scrollbar) lived ONLY in the LTR `app-assets/css/bootstrap.css`. The app loads a separate
   RTL stylesheet set (`css-rtl/bootstrap.css`) that never got this block, so in Arabic the list
   rendered full-length (no scroll box, no sticky header) — a different design from English. style.css
   is loaded for BOTH directions, so defining it here makes the listing identical in LTR and RTL.
   Values match the English version; viewport-relative -> responsive. */
.tableFixHead {
    overflow: auto;
    /* NOTE: fitTableFixHead() in common.js is the authority on list height — it measures each list's
       actual top + the bar/footer below it and sets max-height/min-height inline on load, resize and
       PJAX. These values are only the pre-JS fallback (first paint / JS disabled): a conservative
       viewport-relative cap so a long list never blows out to a whole-window scroll before JS runs.
       Tune sizing in fitTableFixHead, not here. */
    max-height: calc(100vh - 330px);
    min-height: 300px;
    scrollbar-width: none;          /* Firefox: hide scrollbar */
    -ms-overflow-style: none;       /* IE/Edge: hide scrollbar */
}
/* The list card carried a full Bootstrap bottom margin (~2rem), which showed as a dead gap between
   the pagination and the sticky footer. Trim it to a small breathing space — scoped via :has() to
   ONLY the card that contains the scroll-list, so every other card keeps its normal spacing. */
.card:has(> .tableFixHead),
.card:has(.tableFixHead) {
    margin-bottom: 0.5rem !important;
}
.tableFixHead thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.tableFixHead::-webkit-scrollbar { /* Chrome/Safari: hide scrollbar */
    display: none;
}

/* Sticky pagination — the "Showing X to Y of Z / page numbers" bar (#page_hide). Markup varies by
   page: on some it's the last child INSIDE the .tableFixHead scroll list (so it scrolled out of view
   below the rows); on others it's a sibling just below the table. Target #page_hide directly so BOTH
   look identical and stay pinned to the bottom of the visible area. */
#page_hide {
    background: #fff;
    margin-top: 0 !important;
    padding-top: 8px;
    padding-bottom: 4px;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06); /* hairline above, separating it from the rows */
    align-items: center; /* vertically center the "Showing X of Y" text with the page-number nav */
}
/* Pin the pagination ONLY when it lives INSIDE the scroll box (so it stays visible as rows scroll).
   When it's a .divider sibling BELOW the table, keep it static so it sits above the footer and can
   never overlap / hide under it. */
.tableFixHead #page_hide {
    position: sticky;
    bottom: 0;
    z-index: 5;
}
/* keep the page-number list flush with the centered row (drop its default bottom margin) */
#page_hide .pagination {
    margin-bottom: 0;
}
.dark-layout #page_hide {
    background: #283046; /* Vuexy dark card background */
}

/* ---- LTR/RTL parity: structural fixes that the stale RTL stylesheet missed ----
   The English `css/*` files were hand-edited but the Arabic `css-rtl/*` twins weren't, so these
   diverged. Defining them in this COMMON stylesheet pins them identically in both directions
   (and prevents future drift). Colour drift (navy vs purple) was fixed at source in css-rtl/*. */

/* Pagination buttons: English commented out the grey `.page-link` fill (flat look); Arabic kept it,
   so every page button showed a grey pill. Make non-active links flat in both; the active page
   keeps its solid (navy) fill. */
.page-item:not(.active) .page-link {
    background-color: transparent !important;
}

/* Table cell padding: English uses 1rem horizontal, Arabic had 2rem (looser/wider rows). Unify. */
.table > :not(caption) > * > * {
    padding: 0.72rem 1rem;
}

/* `.btn-melon` (custom green button) existed only in the English colour file; define it for both. */
.btn-melon {
    border-color: #3C7646 !important;
    background-color: #3C7646 !important;
    color: #fff !important;
}

/* ---- Collapsed-sidebar layout fix ----
   When the sidebar collapses to the icon rail, this build leaves the floating header pinned to
   the EXPANDED menu width (it hardcodes left:260px / width:calc(100% - 260px ...)), so the header
   stays narrow and over-inset instead of widening into the freed space ("header not expanding").
   Two parts:
   1) Reinforce the rail + content collapse. The menu is position:fixed and its width is
      over-constrained (a JS-set right pins it), so `width:80px` alone is ignored — `max-width`
      clamps the rail reliably. Content/footer margin follows to 80px.
   2) Pin the floating header by left + right (width:auto) so it fills the content area with even
      ~1.2rem insets, matching the expanded look — independent of the hardcoded menu-width math
      (which otherwise caps the header's width). */
body.menu-collapsed .main-menu:not(.expanded) {
    max-width: 80px !important;
}
/* Collapsed content/footer: reserve the 80px icon-rail on the MENU side only — left in LTR,
   right in RTL. The old unscoped `margin-left:80` left an empty strip on the WRONG side in RTL
   (the menu is on the right there), which read as wasted space. Scope by text-direction. */
html[data-textdirection="ltr"] body.menu-collapsed .app-content,
html[data-textdirection="ltr"] body.menu-collapsed .footer {
    margin-left: 80px !important;
    margin-right: 0 !important;
}
html[data-textdirection="rtl"] body.menu-collapsed .app-content,
html[data-textdirection="rtl"] body.menu-collapsed .footer {
    margin-right: 80px !important;
    margin-left: 0 !important;
}
/* Collapsed floating header: clear the rail on the menu side, 1.2rem on the other — so it never
   overlaps the sidebar (it did in RTL, which truncated the brand). Direction-aware. */
html[data-textdirection="ltr"] body.menu-collapsed .header-navbar.floating-nav {
    left: calc(80px + 1.2rem) !important;
    right: 1.2rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
html[data-textdirection="rtl"] body.menu-collapsed .header-navbar.floating-nav {
    right: calc(80px + 1.2rem) !important;
    left: 1.2rem !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}

/* Table-to-header WIDTH alignment: widen the content/table card so it fills the same
   horizontal band as the floating header — lift the container's ~1440px max-width cap and
   match the header's 1.2rem side inset. DIRECTION-SAFE: values are symmetric (1.2rem each
   side) and the app's own LTR/RTL stylesheets already place content + header per direction,
   so this widens the table identically in LTR and RTL without touching the header's side. */
.app-content .content-wrapper.container-xxl {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
html body .content.app-content {
    /* Match the content area to the header (nav.header-navbar.container-xxl), which uses an
       11.25px (0.75rem @15px base) side margin — so the cards line up exactly under the header
       on both edges. (`body` raises specificity above app.php's inline 0.75rem rule, which this
       now equals.) Shifts content ~6.75px left vs the old 1.2rem; the title + footer (outside
       .app-content) are re-padded below to follow the same line. */
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    /* Bootstrap `.row` carries -15px side margins; with the tighter 11.25px padding the row's
       empty negative-margin edge pokes ~4px past the viewport → a stray horizontal scrollbar.
       Clip that empty overflow (real card content ends ~11px inside, so nothing visible is cut).
       `clip` (not hidden) doesn't create a scroll container, so it can't break the table's sticky
       header or any position:fixed overlay (filter modal). */
    overflow-x: clip !important;
}
@media (max-width: 1199.98px) {
    .app-content .content-wrapper.container-xxl {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* Button Group */
.tool-btn-group,
.tool-btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Column Chooser */
.tool-btn-group .column-chooser {
    position: relative;
    display: inline-block;
}

.tool-btn-group .chooser-panel {
    display: none;
    position: absolute;
    top: 40px;
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    z-index: 1000;
    min-width: 180px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.tool-btn-group .chooser-panel label {
    display: block;
    margin: 5px 0;
    font-size: 15px;
}

/* Hide View */
.d-none {
    display: none;
}

/* nowrap */
.nowrap {
    white-space: nowrap
}

.col-1-5 {
    flex: 0 0 12.5% !important;
    max-width: 12.5% !important;
}

button:disabled,
button[disabled] {
    border: 1px solid #999999 !important;
    background-color: #cccccc !important;
    color: #666666 !important;
    cursor: not-allowed !important;
    pointer-events: unset !important;
}

.tooltip {
  z-index: 1090 !important;
}