@font-face {
    font-family: "ara";
    src: url("AraHamahKilania.ttf");
}

/* Sales Row Counter Styles - Theme Aware */
.sales-row-counter {
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--btn-primary-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
    font-size: 13px;
    transition: all 0.3s ease;
    cursor: default;
    user-select: none;
}

.sales-row-counter:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

.sales-row-counter .row-counter-icon {
    color: var(--theme-text-on-dark, rgba(255, 255, 255, 0.85));
    font-size: 12px;
}

.sales-row-counter .row-counter-text {
    color: var(--theme-text-on-dark, #fff);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sales-row-counter #sales-current-row {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    display: inline-block;
    text-align: center;
    transition: all 0.2s ease;
}

.sales-row-counter .row-counter-separator {
    opacity: 0.7;
    margin: 0 2px;
}

.sales-row-counter #sales-total-rows {
    opacity: 0.9;
}

.sales-row-counter.updating #sales-current-row,
.sales-back-row-counter.updating #sales-back-current-row {
    animation: pulse-counter 0.3s ease;
}

@keyframes pulse-counter {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); background: rgba(255,255,255,0.4); }
    100% { transform: scale(1); }
}

/* Sales-Back Row Counter Styles - Same as Sales */
.sales-back-row-counter {
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--btn-primary-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
    font-size: 13px;
    transition: all 0.3s ease;
    cursor: default;
    user-select: none;
}

.sales-back-row-counter:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

.sales-back-row-counter .row-counter-icon {
    color: var(--theme-text-on-dark, rgba(255, 255, 255, 0.85));
    font-size: 12px;
}

.sales-back-row-counter .row-counter-text {
    color: var(--theme-text-on-dark, #fff);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.sales-back-row-counter #sales-back-current-row {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    display: inline-block;
    text-align: center;
    transition: all 0.2s ease;
}

.sales-back-row-counter .row-counter-separator {
    opacity: 0.7;
    margin: 0 2px;
}

.sales-back-row-counter #sales-back-total-rows {
    opacity: 0.9;
}

/* Purchases Row Counter Styles */
.purchases-row-counter,
.purchases-back-row-counter,
.sanad-sarf-row-counter,
.sanad-kabd-row-counter,
.eisal-tahsil-row-counter {
    margin-right: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--btn-primary-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
    padding: 6px 14px;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.3);
    font-size: 13px;
    transition: all 0.3s ease;
    cursor: default;
    user-select: none;
}

.purchases-row-counter:hover,
.purchases-back-row-counter:hover,
.sanad-sarf-row-counter:hover,
.sanad-kabd-row-counter:hover,
.eisal-tahsil-row-counter:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 102, 126, 234), 0.4);
}

.purchases-row-counter .row-counter-icon,
.purchases-back-row-counter .row-counter-icon,
.sanad-sarf-row-counter .row-counter-icon,
.sanad-kabd-row-counter .row-counter-icon,
.eisal-tahsil-row-counter .row-counter-icon {
    color: var(--theme-text-on-dark, rgba(255, 255, 255, 0.85));
    font-size: 12px;
}

.purchases-row-counter .row-counter-text,
.purchases-back-row-counter .row-counter-text,
.sanad-sarf-row-counter .row-counter-text,
.sanad-kabd-row-counter .row-counter-text,
.eisal-tahsil-row-counter .row-counter-text {
    color: var(--theme-text-on-dark, #fff);
    font-weight: 600;
    letter-spacing: 0.5px;
}

.purchases-row-counter #purchases-current-row,
.purchases-back-row-counter #purchases-back-current-row,
.sanad-sarf-row-counter #sanad-sarf-current-row,
.sanad-kabd-row-counter #sanad-kabd-current-row,
.eisal-tahsil-row-counter #eisal-tahsil-current-row {
    background: rgba(255, 255, 255, 0.25);
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 20px;
    display: inline-block;
    text-align: center;
    transition: all 0.2s ease;
}

.purchases-row-counter .row-counter-separator,
.purchases-back-row-counter .row-counter-separator,
.sanad-sarf-row-counter .row-counter-separator,
.sanad-kabd-row-counter .row-counter-separator,
.eisal-tahsil-row-counter .row-counter-separator {
    opacity: 0.7;
    margin: 0 2px;
}

.purchases-row-counter #purchases-total-rows,
.purchases-back-row-counter #purchases-back-total-rows,
.sanad-sarf-row-counter #sanad-sarf-total-rows,
.sanad-kabd-row-counter #sanad-kabd-total-rows,
.eisal-tahsil-row-counter #eisal-tahsil-total-rows {
    opacity: 0.9;
}

.purchases-row-counter.updating #purchases-current-row,
.purchases-back-row-counter.updating #purchases-back-current-row,
.sanad-sarf-row-counter.updating #sanad-sarf-current-row,
.sanad-kabd-row-counter.updating #sanad-kabd-current-row,
.eisal-tahsil-row-counter.updating #eisal-tahsil-current-row {
    animation: pulse-counter 0.3s ease;
}

body {
    font-family: "ara" !important;
    direction: rtl;
    overflow-x: hidden;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

html {
    margin: 0;
    padding: 0;
}

.parent_code {
    text-align: right;
    padding-top: 10px;
}

.input-flex-container{
    display: flex;
    justify-content: space-between;
}

.input-flex-container label{
    position: unset !important;
    font-weight: bold;
}

#loading-content-light {
    width: 100vw;
    height: 100vh;
    background: #0a1e3c;
    top: 0;
    position: fixed;
    z-index: 1000000000000;
    opacity: .5;
}

/**************************** start selectbox ****************************/

.selectboxit-container {
    width: 100% !important
}

.selectboxit-container .selectboxit {
    width: 100% !important;
    height: 38px;
    background: unset;
}

.selectboxit-container .selectboxit:hover,
.selectboxit-container .selectboxit:active {
    background: unset;
}

.selectboxit-container .selectboxit:focus {
    background: #fff
}

.selectboxit-text {
    float: right;
    font-family: "ara" !important;
    font-size: 18px;
}

.selectboxit-option-anchor {
    font-family: "ara" !important;
    font-size: 18px;
}

.selectboxit-arrow-container {
    right: auto;
    left: 0
}

.selectboxit-option {
    text-align: right;
}


/**************************** End selectbox ****************************/

label {
    color: rgb(0, 0, 0);
    border-color: #FFF;
    border-width: 1px;
}

.tgml {
    text-decoration: none;
    position: relative;
    width: 102px !important;
    right: 180px;
    top: 37px;
    background-color: #007bff;
    border-radius: 5px;
    height: 36px;
}

.dropdown-menu {
    position: absolute;
    top: -4px;
    right: 102%;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 20px;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
}

.dropdown-toggle::after {
    display: none;
}

input:disabled.input-td,
.input-td {
    border: none;
    background: rgba(200, 220, 240, 0.6) !important;
}

.input-td:focus {
    outline: none !important;
}

textarea {
    resize: none !important
}

input:disabled,
.form-control:disabled {
    background: #FFF !important;
    color: #000 !important;
}

.form-control,
.form-control:focus {
    color: #000
}

.title-header-container {
    background-color: #0d3a5c;
    font-size: 18px;
}

.nav-container {
    background-color: #0a1e3c;
    padding: 5px 0;
}

.nav-container .row {
    align-items: center;
}

.nav-container,
.nav-container .col-sm-3,
.nav-container .col-sm-4,
.nav-container .col-sm-1,
.nav-container #rased_check {
    color: #fff;
}

.nav-container .mainselect .text {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 160, 176, 0.5);
    color: #fff;
}

.nav-container .mainselect .icon {
    background-color: #00a0b0;
    color: #fff;
}

.nav-container .mainselect .icon i {
    color: #fff;
}

.nav-container .change-logged-in-user {
    border-color: #00a0b0 !important;
    color: #fff;
}

.nav-container .selectbody {
    background: #fff;
    color: #000;
}

.nav-container .selectbody ul li {
    color: #000;
}

.nav-container .selectbody ul li span {
    color: #000;
}

.nav-bar,
.pen-cont {
    display: inline-block;
    margin-top: 5px;
    background-color: #00a0b0;
    padding: 0px 8px;
    padding-top: 4px;
    border-radius: 5px;
    cursor: pointer
}

.nav-bar i,
.pen-cont i {
    color: #FFF;
}

.select-col {
    text-align: -webkit-left;
}

.nav-container select {
    background: none;
    max-width: 380px;
}

.balance-bar-options {
    background-color: #0a1e3c;
    padding: 20px 60px;
}

.home-content {
    background: linear-gradient(135deg, #0a1628 0%, #0d2847 25%, #0a1e3c 50%, #0d3a5c 75%, #0a1628 100%);
    padding-top: 40px;
    min-height: calc(100vh - 64px);
    position: relative;
    overflow: hidden;
}

/* ── 3D Perspective Floor (togglable via .floor3d-enabled) ── */
html.floor3d-enabled .home-content::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: -50%;
    width: 200%;
    height: 80%;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(100, 180, 255, 0.25) 0px,
            rgba(100, 180, 255, 0.25) 1px,
            transparent 1px,
            transparent 60px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(100, 180, 255, 0.2) 0px,
            rgba(100, 180, 255, 0.2) 1px,
            transparent 1px,
            transparent 60px
        );
    transform: perspective(300px) rotateX(50deg);
    transform-origin: center bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,1) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Floor ambient glow */
html.floor3d-enabled .home-content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 40%;
    background: radial-gradient(ellipse at center bottom, rgba(13, 110, 253, 0.2) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Keep content above the floor */
html.floor3d-enabled .home-content > .container {
    position: relative;
    z-index: 1;
}

.home-content .num {
    margin-right: 50px;
    margin-left: 50px;
    font-size: 20px;
}

.home-content .btns .btn-primary,
.balance-bar-options .btn-primary,
.balance-bar-options .show>.btn-primary.dropdown-toggle:focus {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    color: #fff;
    padding: 12px 28px;
    font-weight: 500;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-content .btns .btn-primary:hover,
.balance-bar-options .btn-primary:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.home-content .btns .btn-primary:active,
.balance-bar-options .btn-primary:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.1);
}

.balance-bar-options .dropdown-item {
    cursor: pointer;
}

.home-content .btns a {
    margin: 0 20px
}

.home-content .title {
    font-size: 30px;
    padding-bottom: 10px;
    color: #b2b8c3;
    font-weight: bold;
}

.row-btns {
    margin-top: 20px
}

#nav-bar.dropdown-toggle::after,
#lang.dropdown-toggle::after {
    display: none
}

#lang {
    margin-right: 20px;
    margin-left: 20px;
    margin-top: 5px;
    display: inline-block;
    position: relative;
    top: -3px;
    cursor: pointer;
}

.dropdown-item {
    text-align: right;
    background: #0a1e3c;
    color: #FFF;
}

.sub-items-menu .dropdown-item {
    border-bottom: solid 2px #fff !important;
}

.dropdown-menu {
    min-width: 30px;
    padding: 0;
    border: 2px solid #FFF;
}

.hr-div {
    width: 100%;
    height: 2px;
    color: #FFF
}

.footer {
    background: #0a1e3c;
    padding: 3px 0;
}

.footer .phone,
.footer .mail {
    display: inline-block;
    margin-top: 5px;
    background-color: #00a0b0;
    padding: 0px 8px;
    padding-top: 4px;
    border-radius: 5px;
    cursor: pointer;
}

.footer .search {
    display: inline-block;
    margin-top: 5px;
    cursor: pointer;
    margin-right: 5px;
    font-size: 19px;
    margin-right: 10px
}

.footer .input-search {
    display: inline-block;
    margin-top: 5px;
    margin-right: 5px;
    width: 200px
}

.footer .phone i,
.footer .mail i {
    color: #FFF
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > a.dropdown-toggle::after {
    content: '\25C0';
    font-size: 8px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    border: none !important;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-left: .1rem;
    margin-right: .1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    display: block !important;
}

.dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.dropdown-submenu .dropdown-menu {
    transition-delay: 0.2s;
}

.dropdown-submenu .dropdown-submenu .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
}

/* Expand hover area for easier navigation */
.dropdown-submenu > a.dropdown-toggle {
    padding-left: 30px;
}

.sub-items-menu {
    min-width: 180px;
}

.sub-items-menu .dropdown-submenu .dropdown-menu {
    min-width: 180px;
}

/* Hover effect for all nav dropdowns */
.navbar .dropdown:hover > .dropdown-menu {
    display: block;
}

.navbar .dropdown-menu {
    margin-top: 0;
}

#nav-items-menu .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
    display: block !important;
    transition-delay: 0.2s;
}

#nav-items-menu .dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
    padding: 13px 20px 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: rgba(10, 30, 60, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px 16px 0 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    direction: rtl;
    gap: 15px;
}

.modal-header .modal-title {
    display: none;
}

.modal-header .title-header,
.modal-header .e7sabat-sab-title {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Modal Header Logo Section - Right side (RTL) */
.modal-header-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.modal-header-logo img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Unified Modal Header Title - Center */
.modal-header-title {
    flex: 1;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Modal Header Buttons Container - Left side (RTL) */
.modal-header-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Modal Header Buttons - Liquid Glass */
.modal-header-buttons .modal-close,
.modal-header-buttons .modal-maximize {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-header-buttons .modal-close:hover {
    background: rgba(220, 53, 69, 0.5);
    border-color: rgba(220, 53, 69, 0.6);
    transform: scale(1.05);
}

.modal-header-buttons .modal-maximize:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

/* Kayed (journal entry) — Export to Excel button */
.kayed-export-excel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.kayed-export-excel-btn:hover {
    background: rgba(33, 115, 70, 0.55);
    border-color: rgba(33, 115, 70, 0.7);
    transform: scale(1.05);
}

.kayed-export-excel-btn .fa-file-excel {
    color: #fff;
}

/* ============================================
   GLASS THEME - MODAL HEADER (h-back-product)
   ============================================ */
.modal-header.h-back-product,
.modal .modal-header.h-back-product,
.commonad_sold_body .modal-header.h-back-product {
    background: rgba(10, 30, 60, 0.95) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 15px !important;
    height: auto !important;
    min-height: 40px !important;
    position: relative !important;
    gap: 8px !important;
}

.modal-header.h-back-product .modal-title,
.modal .modal-header.h-back-product .modal-title {
    display: none !important;
}

.modal-header.h-back-product .title-header,
.modal .modal-header.h-back-product .title-header {
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    order: 1 !important;
}

.modal-header.h-back-product .modal-header-extra {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    order: 2 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.modal-header.h-back-product .modal-header-extra > [class*="col-"] {
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: auto !important;
}

.modal-header.h-back-product .modal-header-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-inline-start: auto !important;
    margin-right: auto !important;
    order: 100 !important;
}

.modal-header.h-back-product .title-header img {
    width: 24px !important;
    height: 24px !important;
}

.modal-header.h-back-product .e7sabat-sab-title,
.modal .modal-header.h-back-product .e7sabat-sab-title,
.h-back-product .e7sabat-sab-title {
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    flex: 1 !important;
    order: 2 !important;
}

.modal-header.h-back-product .e7sabat-sab-title .command_sold_select,
.modal-header.h-back-product .e7sabat-sab-title select,
.modal .modal-header.h-back-product .e7sabat-sab-title select,
.h-back-product .e7sabat-sab-title select {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 6px 12px !important;
    height: auto !important;
    margin: 0 10px !important;
    width: auto !important;
    min-width: 150px !important;
}

.modal-header.h-back-product .e7sabat-sab-title .command_sold_select option,
.modal-header.h-back-product .e7sabat-sab-title select option {
    background: #0a1e3c !important;
    color: #fff !important;
}

.modal-header.h-back-product .close,
.modal-header.h-back-product .modal-close,
.modal .modal-header.h-back-product .close {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    opacity: 1 !important;
    margin: 0 !important;
    margin-left: 5px !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    order: 100 !important;
}

.modal-header.h-back-product .close:hover,
.modal-header.h-back-product .modal-close:hover {
    background: rgba(220, 53, 69, 0.8) !important;
}

.modal-header.h-back-product .maximize,
.modal-header.h-back-product .modal-maximize {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    margin: 0 !important;
    margin-left: 5px !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    order: 99 !important;
}

.modal-header .modal-close,
.modal-header .modal-maximize {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
}

.modal-header .modal-close:hover {
    background: rgba(220, 53, 69, 0.8);
    border-color: rgba(220, 53, 69, 0.9);
    color: #fff;
}

.modal-header .modal-maximize:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.modal-header .modal-close i,
.modal-header .modal-maximize i {
    color: inherit;
}

.modal-footer {
    direction: rtl;
    background: linear-gradient(135deg, rgba(0, 80, 100, 0.75), rgba(10, 50, 80, 0.8));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 16px 16px;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================
   MODAL FOOTER SECTIONS - Liquid Glass RTL Layout
   ============================================ */

/* Main container - flexbox column layout, sec4 on top, sec3 below */
.modal-footer.col-md-4 {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 10px !important;
    gap: 6px !important;
}

/* sec2 - Hidden/empty section */
.modal-footer .sec2 {
    display: none !important;
}

/* sec4 - Buttons container - Flex layout for inline buttons */
.modal-footer .sec4 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    order: 1 !important;
    direction: rtl !important;
    align-items: center !important;
}

/* sec4 buttons - Base layout styling (accent colors applied by theme files) */
.modal-footer .sec4 button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 6px 8px !important;
    min-height: 32px !important;
    /* background set by theme accent colors - do not override here */
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 6px !important;
    color: #fff !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.modal-footer .sec4 button:hover:not(:disabled) {
    /* background hover set by theme accent colors */
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Disabled buttons handled in global section above */

/* Exit button - red icon (global rule for all modals) */
.modal-footer .sec4 button .exit-icon,
.modal-footer .sec4 button.close-modal i.fa-times,
.modal-footer button.close-modal i.fa-times,
.modal .close-modal i.fa-times,
button.close-modal i.fa-times.icons {
    color: #ff6b6b !important;
}

/* WhatsApp button override */
.modal-footer .sec4 button.btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    border-color: rgba(37, 211, 102, 0.4) !important;
}

.modal-footer .sec4 button.btn-whatsapp:hover:not(:disabled) {
    background: linear-gradient(135deg, #2EE874, #1BA085) !important;
}

/* sec3 - Options/checkboxes container */
.modal-footer .sec3 {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    order: 2 !important;
    direction: rtl !important;
    padding: 6px 0 2px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Checkbox items in sec3 - RTL proper alignment */
.modal-footer .sec3 .custom-control.custom-checkbox {
    display: flex !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
}

.modal-footer .sec3 .custom-control-input {
    position: relative !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.modal-footer .sec3 .custom-control-label {
    color: rgba(255, 255, 255, 0.95) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
}

.modal-footer .sec3 .custom-control-label::before,
.modal-footer .sec3 .custom-control-label::after {
    display: none !important;
}

/* Kayed number label and input - on separate line, label beside input */
.modal-footer .sec3 > span,
.modal-footer .sec3 .kayed-num-label,
.modal-footer .sec3 span[for="tesst"] {
    display: inline !important;
    position: static !important;
    color: #fff !important;
    white-space: nowrap !important;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 6px !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    vertical-align: middle !important;
    flex-basis: auto !important;
}

.modal-footer .sec3 input.open-dafter-elkoyod,
.modal-footer .sec3 input[type="text"],
.modal-footer .sec3 input#kayed_num_sales,
.modal-footer .sec3 input[id^="kayed_num"] {
    display: inline !important;
    position: static !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    color: #fff !important;
    padding: 5px 10px !important;
    min-width: 180px !important;
    width: 180px !important;
    text-align: center !important;
    height: auto !important;
    vertical-align: middle !important;
}

.modal-footer .sec3 input.open-dafter-elkoyod:focus,
.modal-footer .sec3 input[type="text"]:focus {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: #00c9b7 !important;
    outline: none !important;
}

/* Force kayed num section to new line - 100% width breaks to new row */
.modal-footer .sec3::before {
    content: "";
    width: 100%;
    order: 10;
}

.modal-footer .sec3 .kayed-num-label,
.modal-footer .sec3 span[for="tesst"] {
    order: 11 !important;
}

.modal-footer .sec3 input.open-dafter-elkoyod,
.modal-footer .sec3 input[id^="kayed_num"] {
    order: 12 !important;
}

/* ============================================
   DELIVERY ADDRESS SECTION - Liquid Glass RTL
   ============================================ */
.delivery-address-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    direction: rtl;
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 242, 255, 0.9));
    border-radius: 10px;
    border: 1px solid rgba(0, 160, 176, 0.2);
}

.delivery-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.delivery-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 180px;
}

.delivery-field-full {
    flex: 1 1 100%;
}

.delivery-field-wide {
    flex: 2;
    min-width: 250px;
}

.delivery-field label {
    color: #0a3d5c;
    font-weight: 600;
    white-space: nowrap;
    min-width: fit-content;
}

.delivery-field input.form-control,
.delivery-field select.form-control {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    color: #1a3a5c;
    padding: 6px 10px;
    height: auto;
    min-height: 32px;
}

.delivery-field input.form-control:focus,
.delivery-field select.form-control:focus {
    background: #fff;
    border-color: #00a0b0;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.15);
    outline: none;
}

.delivery-field input.form-control:disabled,
.delivery-field select.form-control:disabled {
    background: rgba(200, 210, 220, 0.5);
    color: #5a6a7a;
}

.delivery-field input.form-control::placeholder {
    color: #8a9aaa;
}

/* ============================================
   MYZAN FILTERS - Liquid Glass RTL
   ============================================ */
.myzan-header-container {
    padding: 0 !important;
}

.select2-container {
    width: 200px !important;
}

.myzan-filters-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    direction: rtl;
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 242, 255, 0.9));
    border-radius: 10px;
    border: 1px solid rgba(0, 160, 176, 0.2);
    box-shadow: 0 2px 8px rgba(0, 80, 120, 0.08);
}

.myzan-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.myzan-filter-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 150px;
}

.myzan-filter-field > label:first-child {
    color: #0a3d5c;
    font-weight: 600;
    white-space: nowrap;
    min-width: fit-content;
}

.myzan-date-range {
    flex: 0 0 auto;
    min-width: 140px;
}

.myzan-field-wide {
    flex: 2;
    min-width: 200px;
}

.myzan-field-full {
    flex: 1 1 100%;
}

.myzan-analysis-field {
    flex: 2;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.myzan-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.myzan-checkbox-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.myzan-checkbox-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #00a0b0;
}

.myzan-checkbox-item label {
    color: #1a3a5c;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.myzan-checkbox-single {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.myzan-checkbox-single input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #00a0b0;
}

.myzan-checkbox-single label {
    color: #1a3a5c;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.myzan-filter-field input.form-control,
.myzan-filter-field select.form-control {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    color: #1a3a5c;
    padding: 6px 10px;
    height: auto;
    min-height: 34px;
}

.myzan-filter-field input.form-control:focus,
.myzan-filter-field select.form-control:focus {
    background: #fff;
    border-color: #00a0b0;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.15);
    outline: none;
}

.myzan-filter-field input.form-control::placeholder {
    color: #8a9aaa;
}

/* ============================================
   MYZAN MODAL FOOTER - Liquid Glass RTL
   ============================================ */
.myzan-modal-footer {
    padding: 10px 15px !important;
    direction: rtl;
}

.myzan-footer-container {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(20, 50, 80, 0.95), rgba(15, 40, 70, 0.9));
    border-radius: 8px;
    border: 1px solid rgba(0, 200, 183, 0.2);
}

.myzan-footer-buttons {
    display: flex;
    gap: 6px;
    order: 1;
}

.myzan-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #00a0b0, #008090);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.myzan-btn:hover {
    background: linear-gradient(135deg, #00b8c8, #0090a0);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 160, 176, 0.3);
}

.myzan-btn i {
    color: #fff;
}

.myzan-footer-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    flex: 1;
    order: 2;
}

.myzan-footer-options select.form-control {
    flex: 0 0 auto;
    width: auto;
    min-width: 100px;
    max-width: 150px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: #fff;
    padding: 5px 10px;
    height: auto;
}

.myzan-footer-options select.form-control:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: #00c9b7;
    outline: none;
}

.myzan-footer-options select.form-control option {
    background: #1a3a5c;
    color: #fff;
}

.myzan-system-select {
    min-width: 60px !important;
    max-width: 80px !important;
}

.myzan-footer-checkbox {
    display: flex;
    align-items: center;
    gap: 5px;
}

.myzan-footer-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #00c9b7;
}

.myzan-footer-checkbox label {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
}

.myzan-footer-exit {
    order: 3;
    margin-right: auto;
}

.myzan-btn-exit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, #dc3545, #c82333);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.myzan-btn-exit:hover {
    background: linear-gradient(135deg, #e04555, #d83343);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);
}

.myzan-btn-exit i {
    color: #fff;
}

/* ============================================
   ACCOUNT CONNECT FILTERS - Liquid Glass RTL
   ============================================ */
.account-connect-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 15px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 242, 255, 0.9));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 12px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    direction: rtl;
}

.account-connect-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 160px;
    max-width: 220px;
}

.account-connect-filters .filter-group label {
    color: #0a3d5c;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.account-connect-filters .glass-select {
    height: 34px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 8px;
    color: #1a3a5c;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.account-connect-filters .glass-select:focus {
    outline: none;
    border-color: rgba(0, 160, 176, 0.6);
    box-shadow: 
        0 0 0 3px rgba(0, 160, 176, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.account-connect-filters .glass-select option {
    background: #fff;
    color: #1a3a5c;
    padding: 8px;
}

/* Add Row Button - Liquid Glass */
.glass-btn-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    margin-bottom: 10px;
    float: left;
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 160, 176, 0.5);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(0, 160, 176, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-btn-add:hover {
    background: linear-gradient(135deg, rgba(0, 180, 196, 0.9), rgba(0, 148, 164, 1));
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 160, 176, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-btn-add:active {
    transform: translateY(0);
}

.glass-btn-add i {
    font-size: 14px;
}

/* Add Line Button - Liquid Glass (for invoices/sanads) */
.glass-btn-add-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 160, 176, 0.5);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        0 2px 8px rgba(0, 160, 176, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.glass-btn-add-line:hover {
    background: linear-gradient(135deg, rgba(0, 180, 196, 0.95), rgba(0, 148, 164, 1));
    transform: translateY(-1px);
    box-shadow: 
        0 4px 12px rgba(0, 160, 176, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-btn-add-line:active {
    transform: translateY(0);
}

.glass-btn-add-line i {
    font-size: 16px;
}

/* ============================================
   ACCOUNT CONNECT FOOTER - Liquid Glass RTL
   ============================================ */
.account-connect-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    direction: rtl;
}

.account-connect-footer .footer-export-section {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.account-connect-footer .footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Dark Glass Select for Footer */
.glass-select-dark {
    height: 34px;
    padding: 6px 12px;
    min-width: 140px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.glass-select-dark:focus {
    outline: none;
    border-color: rgba(0, 160, 176, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.2);
}

.glass-select-dark option {
    background: #0a1e3c;
    color: #fff;
    padding: 8px;
}

/* Footer Button Base - Liquid Glass */
.glass-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.glass-footer-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.glass-footer-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.glass-footer-btn i {
    font-size: 14px;
}

/* Excel Export - Green Glass */
.glass-btn-excel {
    background: rgba(34, 139, 34, 0.5);
    border-color: rgba(34, 139, 34, 0.6);
}
.glass-btn-excel:hover:not(:disabled) {
    background: rgba(34, 139, 34, 0.7);
}

/* Info/Copy - Cyan Glass */
.glass-btn-info {
    background: rgba(0, 160, 176, 0.4);
    border-color: rgba(0, 160, 176, 0.5);
}
.glass-btn-info:hover:not(:disabled) {
    background: rgba(0, 160, 176, 0.6);
}

/* Danger/Delete - Red Glass */
.glass-btn-danger {
    background: rgba(220, 53, 69, 0.4);
    border-color: rgba(220, 53, 69, 0.5);
}
.glass-btn-danger:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.6);
}

/* Warning/Undo - Orange Glass */
.glass-btn-warning {
    background: rgba(255, 152, 0, 0.4);
    border-color: rgba(255, 152, 0, 0.5);
}
.glass-btn-warning:hover:not(:disabled) {
    background: rgba(255, 152, 0, 0.6);
}

/* Primary/Add - Blue Glass */
.glass-btn-primary {
    background: rgba(59, 130, 246, 0.4);
    border-color: rgba(59, 130, 246, 0.5);
}
.glass-btn-primary:hover:not(:disabled) {
    background: rgba(59, 130, 246, 0.6);
}

/* Edit - Amber Glass */
.glass-btn-edit {
    background: rgba(245, 158, 11, 0.4);
    border-color: rgba(245, 158, 11, 0.5);
}
.glass-btn-edit:hover:not(:disabled) {
    background: rgba(245, 158, 11, 0.6);
}

/* Print - Purple Glass */
.glass-btn-print {
    background: rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.5);
}
.glass-btn-print:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.6);
}

/* Success/Save - Green Glass */
.glass-btn-success {
    background: rgba(34, 197, 94, 0.4);
    border-color: rgba(34, 197, 94, 0.5);
}
.glass-btn-success:hover:not(:disabled) {
    background: rgba(34, 197, 94, 0.6);
}

/* Exit - Dark Glass with Red Icon */
.glass-btn-exit {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}
.glass-btn-exit:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.5);
    border-color: rgba(220, 53, 69, 0.6);
}
.glass-btn-exit i {
    color: #ff6b6b;
}
.glass-btn-exit:hover:not(:disabled) i {
    color: #fff;
}

/* ============================================
   ACCOUNTS GUIDE FOOTER - Liquid Glass RTL
   ============================================ */
.accounts-guide-footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(15, 40, 60, 0.95), rgba(10, 30, 50, 0.98));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(0, 180, 200, 0.2);
    border-radius: 0 0 12px 12px;
    direction: rtl;
}

.accounts-guide-footer-meta {
    flex-shrink: 0;
    max-width: 200px;
}

.accounts-guide-meta-text {
    display: block;
    color: rgba(180, 210, 230, 0.7);
    font-size: 11px;
    line-height: 1.4;
    text-align: right;
}

.accounts-guide-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    flex: 1;
}

/* Compact button sizing for footer */
.accounts-guide-footer .glass-footer-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
    gap: 5px;
}

.accounts-guide-footer .glass-footer-btn i {
    font-size: 13px;
}

.accounts-guide-footer .glass-footer-btn span {
    white-space: nowrap;
}

/* Icon-only buttons */
.accounts-guide-footer .glass-footer-btn:not(:has(span)) {
    padding: 0 8px;
    min-width: 32px;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .accounts-guide-footer {
        flex-direction: column;
        gap: 8px;
    }
    
    .accounts-guide-footer-meta {
        max-width: 100%;
        order: 2;
    }
    
    .accounts-guide-meta-text {
        text-align: center;
    }
    
    .accounts-guide-footer-actions {
        justify-content: center;
        order: 1;
    }
}

@media (max-width: 576px) {
    .accounts-guide-footer .glass-footer-btn span {
        display: none;
    }
    
    .accounts-guide-footer .glass-footer-btn {
        padding: 0 8px;
        min-width: 32px;
    }
}

/* ============================================
   ACCOUNTS GUIDE TABLE ROWS - Theme Compatible
   ============================================ */
.accounts-guide-row {
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.accounts-guide-row:hover {
    background-color: rgba(0, 160, 176, 0.15) !important;
}

.accounts-guide-row.accounts-guide-main {
    color: var(--theme-primary, #0e7490);
}

.accounts-guide-row.accounts-guide-main td {
    color: var(--theme-primary, #0e7490);
}

.accounts-guide-row:not(.accounts-guide-main) {
    color: var(--theme-text-on-light-secondary, #334155);
    font-weight: 500;
}

.accounts-guide-row:not(.accounts-guide-main) td {
    color: var(--theme-text-on-light-secondary, #334155);
    font-weight: 500;
}

.accounts-guide-row.accounts-guide-main.accounts-guide-leaf,
.accounts-guide-row.accounts-guide-main.accounts-guide-leaf td {
    color: #7c3aed;
    font-weight: 600;
}

.accounts-guide-row.accounts-guide-leaf:not(.accounts-guide-main),
.accounts-guide-row.accounts-guide-leaf:not(.accounts-guide-main) td {
    color: #6d28d9;
    font-weight: 600;
}

.accounts-guide-row td {
    padding: 6px 10px;
}

/* Accounts Guide Code Input Group */
.accounts-guide-code-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.accounts-guide-code-input-group {
    display: flex;
    align-items: stretch;
    flex: 1;
    gap: 8px;
    flex-direction: row-reverse;
}

.accounts-guide-code-input-group .parent_code {
    min-width: 40px;
    max-width: 120px;
    padding: 6px 12px;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    border: 1px solid rgba(0, 160, 176, 0.3);
    background: rgba(240, 248, 255, 0.8);
    color: rgb(10, 61, 92);
    font-size: 16px;
    line-height: 24px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.accounts-guide-code-input-group .parent_code:empty {
    display: none;
}

[data-theme] #accounts-guide-modal .accounts-guide-code-input-group .parent_code {
    background: rgba(240, 248, 255, 0.8) !important;
    border-color: rgba(0, 160, 176, 0.3) !important;
    color: rgb(10, 61, 92) !important;
}

.accounts-guide-code-input-group input[name="code"] {
    flex: 1;
    min-width: 120px !important;
    width: auto !important;
    height: 40px;
}

/* ============================================
   ACCOUNTS GUIDE BROWSER - Liquid Glass RTL
   ============================================ */
.accounts-guide-browser-wrapper {
    padding: 0;
}

.accounts-guide-browser {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--light-section-bg, linear-gradient(135deg, rgba(240, 250, 255, 0.95), rgba(230, 245, 250, 0.9)));
    border: 1px solid var(--light-section-border, rgba(0, 160, 176, 0.2));
    border-radius: var(--radius-md, 8px);
    direction: rtl;
    height: 100%;
}

.accounts-guide-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.accounts-guide-nav-btns {
    display: flex;
    gap: 6px;
}

.accounts-guide-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9)));
    border: 1px solid var(--theme-border, rgba(0, 160, 176, 0.5));
    border-radius: var(--radius-sm, 6px);
    color: var(--theme-text-primary, #fff);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.accounts-guide-nav-btn:hover {
    background: var(--btn-primary-hover, linear-gradient(135deg, rgba(0, 180, 196, 0.9), rgba(0, 148, 164, 1)));
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(var(--theme-primary-rgb, 0, 160, 176), 0.3);
}

.accounts-guide-nav-btn i {
    font-size: 11px;
}

.accounts-guide-search {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 120px;
    max-width: 200px;
    position: relative;
}

.accounts-guide-search-icon {
    position: absolute;
    right: 8px;
    color: var(--theme-text-muted, rgba(10, 60, 90, 0.5));
    font-size: 11px;
    pointer-events: none;
}

.accounts-guide-search-input {
    width: 100%;
    padding: 5px 26px 5px 8px;
    border: 1px solid var(--light-input-border, rgba(0, 160, 176, 0.3));
    border-radius: var(--radius-sm, 6px);
    background: var(--light-input-bg, rgba(255, 255, 255, 0.9));
    color: var(--theme-text-on-light, #0a3d5c);
    font-size: 13px;
    transition: all 0.2s ease;
}

.accounts-guide-search-input:focus {
    outline: none;
    border-color: var(--theme-primary, rgba(0, 160, 176, 0.6));
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 0, 160, 176), 0.1);
}

.accounts-guide-search-input::placeholder {
    color: var(--theme-text-muted, rgba(10, 60, 90, 0.4));
}

.accounts-guide-table-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 300px;
    max-height: 480px;
    border: 1px solid var(--table-border, rgba(0, 160, 176, 0.2));
    border-radius: var(--radius-sm, 6px);
    background: var(--light-input-bg, rgba(255, 255, 255, 0.85));
}

.accounts-guide-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
}

.accounts-guide-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.accounts-guide-table th {
    padding: 8px 10px;
    background: var(--table-header-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.9), rgba(0, 140, 156, 0.95)));
    color: var(--theme-text-primary, #fff);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    border-bottom: 2px solid var(--theme-border, rgba(0, 160, 176, 0.5));
}

.accounts-guide-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--table-border, rgba(0, 160, 176, 0.1));
    color: var(--theme-text-on-light, #0a3d5c);
}

.accounts-guide-table tbody tr {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.accounts-guide-table tbody tr:hover {
    background: var(--table-row-hover, rgba(0, 160, 176, 0.1));
}

.accounts-guide-table tbody tr.selectedCell td,
.accounts-guide-table tbody tr td.selectedCell {
    background: rgba(var(--theme-primary-rgb, 0, 160, 176), 0.25) !important;
}

/* Accounts Guide: Mass Delete Checkbox Column */
.accounts-guide-th-checkbox {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 6px 4px !important;
}

.accounts-guide-td-checkbox {
    width: 32px;
    min-width: 32px;
    max-width: 32px;
    padding: 4px 4px !important;
}

.accounts-guide-checkbox,
#select-all-accounts-guide {
    cursor: pointer;
    width: 15px;
    height: 15px;
    accent-color: var(--theme-primary, #00a0b0);
}

/* Accounts Guide: Mass Delete Button */
.accounts-guide-mass-delete-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.85), rgba(200, 35, 51, 0.95));
    border: 1px solid rgba(220, 53, 69, 0.5);
    border-radius: var(--radius-sm, 6px);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.accounts-guide-mass-delete-btn:hover {
    background: linear-gradient(135deg, rgba(240, 63, 79, 0.95), rgba(220, 53, 69, 1));
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.4);
}

.accounts-guide-mass-delete-btn i {
    font-size: 12px;
}

#mass-delete-accounts-guide-count {
    font-size: 11px;
    background: rgba(255, 255, 255, 0.25);
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .accounts-guide-browser-wrapper {
        padding: 0 5px;
    }
    
    .accounts-guide-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }
    
    .accounts-guide-nav-btns {
        justify-content: center;
    }
    
    .accounts-guide-search {
        max-width: 100%;
    }
}

/* ============================================
   ACCOUNT CONNECT ASSUMPTIONS - Liquid Glass
   ============================================ */
.account-connect-assumptions {
    display: flex;
    justify-content: flex-end;
    padding: 8px 15px;
    background: linear-gradient(180deg, rgba(240, 245, 250, 0.95), rgba(230, 240, 248, 0.9));
    border-top: 1px solid rgba(0, 160, 176, 0.1);
    direction: rtl;
}

.account-connect-assumptions .assumptions-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 15px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.account-connect-assumptions .assumptions-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #0a3d5c;
    font-size: 20px;
    font-weight: 600;
}

.account-connect-assumptions .assumptions-label i {
    color: #00a0b0;
    font-size: 14px;
}

.account-connect-assumptions .assumptions-list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.account-connect-assumptions .assumptions-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.account-connect-assumptions .assumptions-list li i {
    color: #7a9ab5;
    font-size: 8px;
    transition: all 0.2s ease;
}

.account-connect-assumptions .assumptions-list li:hover i {
    color: #00a0b0;
    transform: scale(1.2);
}

.account-connect-assumptions .assumptions-list li#save-accounts-connect-closed-columns i {
    font-size: 14px;
    color: #00a0b0;
}

.account-connect-assumptions .assumptions-list li#save-accounts-connect-closed-columns:hover i {
    color: #008090;
}

/* ============================================
   MODAL HEADER COMPONENT - Liquid Glass RTL
   ============================================ */
.modal-header .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.modal-header .header-title i {
    font-size: 20px;
    color: #00d4e8;
}

.modal-header .header-search {
    flex: 1;
    max-width: 200px;
    margin: 0 15px;
}

.modal-header .header-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #ff6b6b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-header .header-close:hover {
    background: rgba(220, 53, 69, 0.5);
    border-color: rgba(220, 53, 69, 0.6);
    color: #fff;
}

.modal-header .header-close i {
    font-size: 20px;
}

/* Users Modal Body */
.users-modal-body {
    margin-bottom: 0;
    padding: 10px;
}

.users-search-container {
    margin-bottom: 10px;
    max-width: 250px;
}

/* ============================================
   REPORTS MODAL - Liquid Glass RTL
   ============================================ */

/* Make modal-xl wider globally */
.modal-dialog.modal-xl {
    max-width: 1600px;
    width: 95%;
    margin: 1rem auto;
}

/* Tablet: max-width 1024px */
@media (max-width: 1200px) {
    .modal-dialog.modal-xl {
        max-width: 1024px;
        width: 98%;
    }
}

/* Reports Makhzon Modal */
#reports-makhzon-modal .modal-dialog {
    max-width: 1600px;
    width: 95%;
    margin: 1rem auto;
}

#reports-makhzon-modal .modal-content {
    max-height: 90vh;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#reports-makhzon-modal .reports-modal-body {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 120px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Datepicker positioning fix for reports-makhzon-modal */
#reports-makhzon-modal .tab-pane,
#reports-makhzon-modal .tab-content {
    overflow: visible !important;
}

.reports-modal-body {
    padding: 10px;
}

/* Glass Nav Tabs */
.glass-nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 10px;
    margin: 0;
    list-style: none;
    background: linear-gradient(135deg, rgba(20, 40, 70, 0.9), rgba(15, 35, 60, 0.95));
    border-radius: 10px;
    direction: rtl;
}

.glass-nav-tabs li {
    margin: 0;
}

.glass-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.glass-tab i {
    font-size: 20px;
    color: rgba(0, 200, 220, 0.7);
}

.glass-tab:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    text-decoration: none;
}

.glass-tab:hover i {
    color: #00d4e8;
}

.glass-tab.active {
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.6), rgba(0, 128, 144, 0.7));
    border-color: rgba(0, 160, 176, 0.5);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 160, 176, 0.3);
}

.glass-tab.active i {
    color: #fff;
}

/* Reports Modal Footer */
.reports-modal-footer {
    display: flex;
    justify-content: center;
    padding: 10px 15px;
}

/* ============================================
   REPORT FILTERS - Refactored (RTL Ready)
   ============================================ */
.report-filters-container {
    padding: 10px;
    background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
    border: 1px solid rgba(0, 160, 176, 0.35);
    overflow: visible;
    border-radius: 6px;
    direction: rtl;
    text-align: right;
}

.report-filters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 12px;
    margin-bottom: 10px;
    align-items: end;
    overflow: visible;
}

.report-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    position: relative;
}

.report-field label {
    color: #1a3a4a;
    font-weight: 600;
    white-space: nowrap;
}

.report-field-range {
    grid-column: span 2;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.report-field-range > label {
    width: 100%;
    display: block;
    flex-shrink: 0;
}

.report-field-range > .range-inputs {
    width: 100%;
}

.report-field-range .range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-field-range .range-inputs .glass-input {
    flex: 1;
    text-align: center;
}

.report-field-range .range-separator {
    color: #1a3a4a;
    font-weight: 500;
    white-space: nowrap;
}

.report-field-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}

.report-field-checkbox label:last-child {
    cursor: pointer;
    color: #1a3a4a;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 160, 176, 0.2);
}

/* Glass Report Button */
.glass-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.glass-report-btn:hover {
    background: linear-gradient(135deg, #0e7490, #0c6478);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
}

.glass-report-btn:active {
    transform: translateY(0);
}

.glass-report-btn i {
    font-size: 13px;
}

/* Report Button Color Variants */
.glass-report-btn-primary {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}
.glass-report-btn-primary:hover {
    background: linear-gradient(135deg, #0e7490, #0c6478);
}

/* Button Variants - Simplified */
.glass-report-btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}
.glass-report-btn-warning:hover {
    background: linear-gradient(135deg, #d97706, #b45309);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

.glass-report-btn-info {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}
.glass-report-btn-info:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
}

.glass-report-btn-secondary {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}
.glass-report-btn-secondary:hover {
    background: linear-gradient(135deg, #4b5563, #374151);
    box-shadow: 0 2px 6px rgba(75, 85, 99, 0.3);
}

.glass-report-btn-accent {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
.glass-report-btn-accent:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 2px 6px rgba(124, 58, 237, 0.3);
}

.glass-report-btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
}
.glass-report-btn-success:hover {
    background: linear-gradient(135deg, #059669, #047857);
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.3);
}

/* Grid Layout Variants */
.report-filters-grid-1col { grid-template-columns: minmax(200px, 300px); }
.report-filters-grid-2col { grid-template-columns: 1fr 2fr; }
.report-filters-grid-3col { grid-template-columns: 1fr 1fr 2fr; }

/* Design Report Modal - Moved from inline styles */
.design-report-modal { overflow-y: auto; }
.design-report-title { margin-inline-start: auto; }
.design-report-field-label { text-align: right; }

/* Responsive */
@media (max-width: 768px) {
    .report-filters-grid,
    .report-filters-grid-3col,
    .report-filters-grid-2col {
        grid-template-columns: repeat(2, 1fr);
    }
    .report-filters-grid-1col {
        grid-template-columns: 1fr;
    }
    .report-field-range,
    .report-filters-grid-3col .report-field-range,
    .report-filters-grid-2col .report-field-range {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .report-filters-grid,
    .report-filters-grid-3col,
    .report-filters-grid-2col,
    .report-filters-grid-1col {
        grid-template-columns: 1fr;
    }
    .report-field-range,
    .report-filters-grid-3col .report-field-range,
    .report-filters-grid-2col .report-field-range {
        grid-column: span 1;
    }
    .report-field-range .range-inputs {
        flex-direction: column;
        gap: 6px;
    }
    .report-actions {
        justify-content: center;
    }
    .glass-report-btn {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* ============================================
   PERMISSION MODAL - Liquid Glass RTL
   ============================================ */

/* Permission Modal Body */
.permission-modal-body {
    margin-bottom: 0;
    padding: 10px;
}

/* Permission Header Elements */
.permission-header-search {
    flex: 1;
    max-width: 200px;
}

.permission-header-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Glass Search Input */
.glass-search-input {
    height: 32px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 160, 176, 0.4);
    border-radius: 8px;
    color: #1a1a2e;
    font-size: 14px;
    transition: all 0.2s ease;
}

.glass-search-input::placeholder {
    color: #6b7280;
}

.glass-search-input:focus {
    outline: none;
    background: #fff;
    border-color: #00a0b0;
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.2);
}

/* Permission Filters Bar */
.permission-filters-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 15px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 242, 255, 0.9));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 12px;
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        inset 0 -1px 0 rgba(0, 0, 0, 0.03);
    direction: rtl;
}

.permission-filters-bar .permission-filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.permission-filters-bar .permission-filter-group label {
    color: #0a3d5c;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.permission-filters-bar .permission-copy-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.permission-filters-bar .permission-copy-section .glass-select {
    flex: 1;
    min-width: 120px;
    max-width: 180px;
}

/* Glass Copy Button */
.glass-btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(0, 160, 176, 0.5);
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 
        0 4px 15px rgba(0, 160, 176, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.glass-btn-copy:hover {
    background: linear-gradient(135deg, rgba(0, 180, 196, 0.9), rgba(0, 148, 164, 1));
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 160, 176, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.glass-btn-copy:active {
    transform: translateY(0);
}

.glass-btn-copy i {
    font-size: 13px;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .permission-filters-bar .permission-copy-section {
        flex-direction: column;
        align-items: stretch;
    }
    
    .permission-filters-bar .permission-copy-section .glass-select,
    .permission-filters-bar .permission-copy-section .glass-btn-copy {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   USER FORM - Liquid Glass RTL
   ============================================ */
.user-form-container {
    padding: 8px 10px;
    background: var(--light-section-bg, linear-gradient(135deg, rgba(240, 248, 255, 0.95), rgba(230, 242, 255, 0.9)));
    backdrop-filter: var(--glass-blur, blur(20px));
    -webkit-backdrop-filter: var(--glass-blur, blur(20px));
    border: 1px solid var(--light-section-border, rgba(0, 160, 176, 0.15));
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.06));
    direction: rtl;
}

.user-placeholder {
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-placeholder-content {
    text-align: center;
    padding: 40px;
}

.user-placeholder-icon {
    font-size: 80px;
    color: var(--theme-primary, rgba(0, 160, 176, 0.3));
    opacity: 0.3;
    margin-bottom: 20px;
    display: block;
}

.user-placeholder-text {
    font-size: 18px;
    color: var(--theme-text-secondary, #5a7a9a);
    font-weight: 500;
    margin: 0;
}

.user-form-row-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.user-form-row-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.user-form-row {
    margin-bottom: 6px;
}

.user-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-field-full {
    width: 100%;
}

.user-field-checkbox {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.user-field label {
    color: var(--light-section-text, #0a3d5c);
    font-weight: 600;
    white-space: nowrap;
}

/* Glass Input */
.glass-input {
    height: 34px;
    padding: 6px 10px;
    background: var(--light-input-bg, rgba(255, 255, 255, 0.85));
    border: 1px solid var(--light-input-border, rgba(0, 160, 176, 0.25));
    border-radius: var(--radius-md, 8px);
    color: var(--light-section-text, #1a3a5c);
    font-weight: 500;
    transition: all var(--transition-fast, 0.15s ease);
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.04));
}

.glass-input:focus {
    outline: none;
    border-color: var(--input-border-focus, rgba(0, 160, 176, 0.6));
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 0, 160, 176), 0.12);
}

.glass-input:disabled {
    background: var(--theme-bg-tertiary, rgba(240, 245, 250, 0.9));
    color: var(--theme-text-muted, #5a7a9a);
    cursor: not-allowed;
}

.glass-input::placeholder {
    color: var(--input-placeholder, rgba(90, 122, 154, 0.6));
}

/* Glass Select - Themed Dropdown */
.glass-select {
    height: 34px;
    padding: 0;
    padding-right: 28px;
    background-color: var(--light-input-bg, rgba(255, 255, 255, 0.88));
    border: 1px solid var(--light-input-border, rgba(0, 160, 176, 0.25));
    border-radius: var(--radius-md, 8px);
    color: var(--light-section-text, #1a3a5c);
    font-weight: 500;
    width: 100%;
    cursor: pointer;
    transition: all var(--transition-fast, 0.15s ease);
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, 0.04));
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300a0b0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 12px;
}

[dir="rtl"] .glass-select,
.glass-select[dir="rtl"] {
    padding-left: 10px;
    padding-right: 28px;
    background-position: right 10px center;
}

.glass-select:focus {
    outline: none;
    border-color: var(--input-border-focus, rgba(0, 160, 176, 0.6));
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb, 0, 160, 176), 0.12);
}

.glass-select:hover {
    border-color: var(--theme-border-light, rgba(0, 160, 176, 0.4));
}

.glass-select:disabled {
    background: var(--theme-bg-tertiary, rgba(240, 245, 250, 0.9));
    color: var(--theme-text-muted, #5a7a9a);
    cursor: not-allowed;
    opacity: 0.7;
}

.glass-select option {
    background: var(--dropdown-bg, #fff);
    color: var(--dropdown-text, #1a3a5c);
    padding: 8px;
}

.glass-select option:checked {
    background: rgba(var(--theme-primary-rgb, 0, 160, 176), 0.15);
}

/* Glass Checkbox */
.glass-checkbox-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.glass-checkbox-wrapper input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.glass-checkbox-label {
    display: inline-block;
    width: 40px;
    height: 22px;
    background: var(--theme-bg-tertiary, rgba(200, 210, 220, 0.6));
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: all var(--transition-normal, 0.2s ease);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.glass-checkbox-label::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--theme-bg-secondary, #fff);
    border-radius: 50%;
    transition: all var(--transition-normal, 0.2s ease);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.glass-checkbox-wrapper input[type="checkbox"]:checked + .glass-checkbox-label {
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9)));
}

.glass-checkbox-wrapper input[type="checkbox"]:checked + .glass-checkbox-label::after {
    left: 20px;
}

.glass-checkbox-wrapper input[type="checkbox"]:disabled + .glass-checkbox-label {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Transfer Account Balances Modal ===== */
.transfer-balance-body {
    padding: 20px 24px;
}

.transfer-balance-form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
    align-items: end;
}

.transfer-balance-accounts-row {
    grid-template-columns: repeat(2, 1fr);
}

.transfer-balance-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transfer-balance-field > label {
    color: var(--light-section-text, #0a3d5c);
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.transfer-balance-account-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.transfer-balance-account-input-group .glass-input {
    width: 100%;
}

.transfer-balance-account-name {
    font-size: 12px;
    color: var(--theme-primary, #00a0b0);
    font-weight: 600;
    min-height: 18px;
    padding: 0 4px;
}

.transfer-balance-options-row {
    grid-template-columns: auto auto 1fr;
    align-items: center;
    margin-top: 8px;
}

.transfer-balance-checkbox-field {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.transfer-balance-checkbox-text {
    color: var(--light-section-text, #0a3d5c);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.transfer-balance-execute-field {
    display: flex;
    justify-content: flex-end;
}

.transfer-balance-execute-btn {
    min-width: 180px;
}

.transfer-balance-footer {
    display: flex;
    justify-content: flex-end;
}

.transfer-balance-footer .footer-actions {
    display: flex;
    gap: 8px;
}

/* Dedicated account picker for transfer balances - must appear above transfer modal */
#transfer-balance-accounts-picker {
    z-index: 1070;
}

#transfer-balance-accounts-picker + .modal-backdrop {
    z-index: 1065;
}

/* Transfer balance modal responsive */
@media (max-width: 768px) {
    .transfer-balance-form-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .transfer-balance-accounts-row {
        grid-template-columns: 1fr;
    }

    .transfer-balance-options-row {
        grid-template-columns: 1fr 1fr;
    }

    .transfer-balance-execute-field {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .transfer-balance-execute-btn {
        width: 100%;
    }
}

/* Table Header Checkbox - Liquid Glass Style */
.table-header-empty {
    background: transparent !important;
    width: 30px !important;
    min-width: 30px !important;
}

.table-header-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.table-header-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.table-header-checkbox-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.9) 0%, 
        rgba(255, 255, 255, 0.7) 100%);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #5a7a9a;
    font-size: 14px;
}

.table-header-checkbox-label:hover {
    background: linear-gradient(135deg, 
        rgba(0, 160, 176, 0.15) 0%, 
        rgba(0, 160, 176, 0.1) 100%);
    border-color: rgba(0, 160, 176, 0.5);
    color: #00a0b0;
    transform: scale(1.05);
}

.table-header-checkbox input[type="checkbox"]:checked + .table-header-checkbox-label {
    background: linear-gradient(135deg, #00a0b0 0%, #008090 100%);
    border-color: #008090;
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.4);
}

.table-header-checkbox input[type="checkbox"]:checked + .table-header-checkbox-label:hover {
    background: linear-gradient(135deg, #00b8c8 0%, #00a0b0 100%);
    transform: scale(1.05);
}

/* Table Row Checkbox - Compact Style */
.table-row-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-row-checkbox-input {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #00a0b0;
    border-radius: 3px;
}

.table-row-checkbox-input:checked {
    background-color: #00a0b0;
}

/* Glass Select Multi for Select2 */
.glass-select-multi + .select2-container {
    width: 100% !important;
}

.glass-select-multi + .select2-container .select2-selection--multiple {
    min-height: 34px;
    background: var(--light-input-bg, rgba(255, 255, 255, 0.85));
    border: 1px solid var(--light-input-border, rgba(0, 160, 176, 0.25));
    border-radius: var(--radius-md, 8px);
    padding: 2px 4px;
}

.glass-select-multi + .select2-container .select2-selection--multiple .select2-selection__choice {
    background: rgba(var(--theme-primary-rgb, 0, 160, 176), 0.12);
    border: 1px solid rgba(var(--theme-primary-rgb, 0, 160, 176), 0.25);
    border-radius: var(--radius-sm, 6px);
    padding: 1px 6px;
    margin: 2px;
    color: var(--light-section-text, #0a3d5c);
}

.glass-select-multi + .select2-container .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--theme-primary, #00a0b0);
    margin-left: 4px;
}

/* User Form Footer */
.user-form-footer {
    display: flex;
    justify-content: center;
    padding: 8px 10px;
    direction: rtl;
    background: var(--modal-footer-bg, transparent);
    border-top: 1px solid var(--theme-border-light, rgba(0, 160, 176, 0.15));
}

.user-form-footer .footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Impersonate Button - Amber/Gold Glass */
.glass-btn-impersonate {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.6), rgba(217, 119, 6, 0.7));
    border-color: rgba(245, 158, 11, 0.6);
}
.glass-btn-impersonate:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.8), rgba(217, 119, 6, 0.9));
}

/* Responsive */
@media (max-width: 768px) {
    .user-form-row-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .user-form-row-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .user-form-row-4,
    .user-form-row-3,
    .user-form-grid {
        grid-template-columns: 1fr;
    }
    
    .user-field-checkbox {
        flex-direction: row;
    }
    
    .user-form-footer .footer-actions {
        gap: 4px;
    }
    
    .user-form-footer .glass-footer-btn {
        padding: 0 8px;
    }
}

/* ============================================
   GLASS THEME - THINKING & TABS SECTIONS
   ============================================ */

/* Weight with Bags field - inline beside tabs, pushed to far left */
.sales-weight-with-bags-field {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 10px !important;
    direction: rtl !important;
    vertical-align: middle !important;
    margin-right: auto !important;
}

.sales-weight-with-bags-field label {
    white-space: nowrap !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a3a5c !important;
    margin: 0 !important;
}

.sales-weight-with-bags-field input {
    width: 110px !important;
    height: 32px !important;
    border: 1px solid rgba(0, 160, 176, 0.4) !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a3a5c !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 2px 6px !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.sales-weight-with-bags-field input:focus {
    border-color: rgba(0, 160, 176, 0.7) !important;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.1) !important;
}

/* Thinking/Assumptions container */
.commonad_sold_body .thinking,
.ast3rad_body .thinking,
#show_kyood .thinking,
.arsdt-elasnaf-body .thinking,
.rased-efttahy-body .thinking {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 10px !important;
    padding: 8px 15px !important;
    margin-top: 5px !important;
    height: auto !important;
    direction: rtl !important;
}

.commonad_sold_body .thinking > a,
.ast3rad_body .thinking > a,
#show_kyood .thinking > a,
.arsdt-elasnaf-body .thinking > a,
.rased-efttahy-body .thinking > a {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #1a3a5c !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.commonad_sold_body .thinking > a > img,
.ast3rad_body .thinking > a > img,
#show_kyood .thinking > a > img,
.arsdt-elasnaf-body .thinking > a > img,
.rased-efttahy-body .thinking > a > img {
    display: none !important;
}

.commonad_sold_body .thinking > a::before,
.ast3rad_body .thinking > a::before,
#show_kyood .thinking > a::before,
.arsdt-elasnaf-body .thinking > a::before,
.rased-efttahy-body .thinking > a::before {
    font-family: "Font Awesome 5 Pro" !important;
    content: "\f013" !important;
    font-weight: 900 !important;
    font-size: 18px !important;
    color: #00a0b0 !important;
}

.commonad_sold_body .thinking > span,
.ast3rad_body .thinking > span,
#show_kyood .thinking > span,
.arsdt-elasnaf-body .thinking > span,
.rased-efttahy-body .thinking > span {
    color: #1a3a5c !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.commonad_sold_body .thinking ul,
.ast3rad_body .thinking ul,
#show_kyood .thinking ul,
.arsdt-elasnaf-body .thinking ul,
.rased-efttahy-body .thinking ul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
}

.commonad_sold_body .thinking ul li,
.ast3rad_body .thinking ul li,
#show_kyood .thinking ul li,
.arsdt-elasnaf-body .thinking ul li,
.rased-efttahy-body .thinking ul li {
    margin: 0 !important;
    cursor: pointer !important;
}

.commonad_sold_body .thinking ul li img,
.ast3rad_body .thinking ul li img,
#show_kyood .thinking ul li img,
.arsdt-elasnaf-body .thinking ul li img,
.rased-efttahy-body .thinking ul li img {
    display: none !important;
}

.commonad_sold_body .thinking ul li::before,
.ast3rad_body .thinking ul li::before,
#show_kyood .thinking ul li::before,
.arsdt-elasnaf-body .thinking ul li::before,
.rased-efttahy-body .thinking ul li::before {
    font-family: "Font Awesome 5 Pro" !important;
    content: "\f111" !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #00a0b0 !important;
    transition: all 0.2s ease !important;
}

.commonad_sold_body .thinking ul li:hover::before,
.ast3rad_body .thinking ul li:hover::before,
#show_kyood .thinking ul li:hover::before,
.arsdt-elasnaf-body .thinking ul li:hover::before,
.rased-efttahy-body .thinking ul li:hover::before {
    font-weight: 900 !important;
    color: #008090 !important;
    transform: scale(1.1) !important;
}

.commonad_sold_body .thinking ul li#save-sales-closed-columns::before,
.commonad_sold_body .thinking ul li#save-sales-back-closed-columns::before,
.commonad_sold_body .thinking ul li#save-purchases-recieving-closed-columns::before,
.commonad_sold_body .thinking ul li#save-purchases-back-closed-columns::before,
.commonad_sold_body .thinking ul li#save-convert-closed-columns::before,
.ast3rad_body .thinking ul li#save-sales-closed-columns::before,
.thinking ul li#save-at3rad-closed-columns::before,
.arsdt-elasnaf-body .thinking ul li#save-arsdt-elasnaf-closed-columns::before,
.rased-efttahy-body .thinking ul li#save-rased-efttahy-closed-columns::before {
    content: "\f0c7" !important;
    font-weight: 900 !important;
    color: #00a0b0 !important;
}

/* Nested Modals - Z-Index Fix 
   Only apply when these specific modals are open */
#invoice-screen-assumptions-modal.show,
#advanced-search-modal.show {
    z-index: 1070 !important;
}

#invoice-screen-assumptions-modal.show .modal-dialog,
#advanced-search-modal.show .modal-dialog {
    z-index: 1070 !important;
}

#invoice-screen-assumptions-modal.show .modal-content,
#advanced-search-modal.show .modal-content {
    z-index: 1070 !important;
}

/* Hidden assumptions form styling */
#hidden-assumptions-form #save-hidden-assumptions,
.hidden-assumptions-modal #save-hidden-assumptions {
    background: linear-gradient(135deg, #00a0b0, #008090) !important;
    border: none !important;
    color: #fff !important;
    padding: 10px 30px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    box-shadow: 0 4px 15px rgba(0, 160, 176, 0.3) !important;
    transition: all 0.3s ease !important;
}

#hidden-assumptions-form #save-hidden-assumptions:hover,
.hidden-assumptions-modal #save-hidden-assumptions:hover {
    background: linear-gradient(135deg, #008090, #006070) !important;
    box-shadow: 0 6px 20px rgba(0, 160, 176, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ============================================
   SANAD HEADER GRID - Compact Inline RTL Layout
   ============================================ */
.sanad-header-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 0.8fr 1.2fr 1fr 1fr;
    gap: 2px 6px;
    padding: 4px 8px;
    direction: rtl;
    border: 1px solid #bbb;
    border-radius: 4px;
    margin: 3px 5px;
    background: #fdfdfd;
}

/* Eisal-tahsil: 4-column compact layout matching design */
#eisal-tahsil-modal .sanad-header-grid {
    grid-template-columns: 1fr 1fr 2fr 1.5fr;
}

/* In eisal-tahsil, wide fields span 3 cols (supplier code + statement fills row 2) */
#eisal-tahsil-modal .sanad-field-wide {
    grid-column: span 3;
}

/* Eisal-tahsil: Compact supplier balance table matching design */
#eisal-tahsil-modal .eisal-tahsil-supplier-balance {
    margin: 2px 5px;
}

#eisal-tahsil-modal .eisal-tahsil-supplier-balance .table {
    margin-bottom: 2px;
    border-collapse: collapse;
}

#eisal-tahsil-modal .eisal-tahsil-supplier-balance th,
#eisal-tahsil-modal .eisal-tahsil-supplier-balance td {
    padding: 2px 6px;
    vertical-align: middle;
    border: 1px solid #999;
}

/* Eisal-tahsil: Compact balance-after-payment table */
#eisal-tahsil-modal .eisal-tahsil-summary-row {
    margin: 2px 0 !important;
    gap: 8px !important;
}

#eisal-tahsil-modal .eisal-tahsil-balance-after {
    min-width: auto !important;
}

#eisal-tahsil-modal .eisal-tahsil-balance-after .table {
    margin-bottom: 0;
    border-collapse: collapse;
}

#eisal-tahsil-modal .eisal-tahsil-balance-after th,
#eisal-tahsil-modal .eisal-tahsil-balance-after td {
    padding: 2px 6px;
    vertical-align: middle;
    border: 1px solid #999;
}

.sanad-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    text-align: right;
    padding: 1px 0;
}

.sanad-field-wide {
    grid-column: span 2;
}

.sanad-field-full {
    grid-column: 1 / -1;
}

.sanad-field label {
    color: #0a2540;
    font-size: 20px;
    font-weight: 700;
    white-space: nowrap;
    line-height: 1.3;
    flex-shrink: 0;
}

.sanad-input {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 4px 8px;
    color: #0a2540;
    font-size: 20px;
    font-weight: 500;
    height: 30px;
    width: 100%;
    flex: 1;
    min-width: 0;
    text-align: right;
    direction: rtl;
    transition: all 0.15s ease;
}

.sanad-input::placeholder {
    color: #7a8fa5;
    font-weight: 400;
}

.sanad-input:hover {
    border-color: #999;
}

.sanad-input:focus {
    border-color: #0080a0;
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 128, 160, 0.15);
    background: #fff;
}

.sanad-input:disabled {
    background: #f5f7f9;
    color: #4a5c6a;
    cursor: not-allowed;
    border-color: #ddd;
}



.opposite-sanad-num {
    min-width: 120px;
}

.sanad-btn-field {
    display: flex;
    align-items: flex-end;
}

.sanad-btn {
    background: linear-gradient(135deg, #00a0b0, #007888);
    border: none;
    color: #fff;
    padding: 4px 12px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    height: 30px;
    white-space: nowrap;
    transition: all 0.15s ease;
    box-shadow: 0 2px 6px rgba(0, 160, 176, 0.2);
}

.sanad-btn:hover {
    background: linear-gradient(135deg, #008898, #006070);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 160, 176, 0.4);
}

.sanad-btn:active {
    transform: translateY(0);
}

.sanad-field select.sanad-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230a2540' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
    padding-left: 32px;
    cursor: pointer;
}

/* ============================================
   SANAD TABLE SCROLLBAR - Under Table Navigation
   ============================================ */
.sanad-table-scrollbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #e8eef3, #dde5ec);
    border: 1px solid #c5d0db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    direction: rtl;
    width: 100%;
}

.sanad-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    color: #5a7089;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.sanad-scroll-btn:hover {
    background: linear-gradient(180deg, #00a0b0, #008090);
    color: #fff;
    border-color: #007080;
}

.sanad-scroll-btn:active {
    transform: scale(0.95);
}

.sanad-scroll-track {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #d0d8e0, #c0c8d0);
    border-radius: 14px;
    padding: 0 10px;
    min-width: 180px;
}

.sanad-scroll-position {
    font-size: 16px;
    font-weight: 600;
    color: #1a3a5c;
    white-space: nowrap;
    min-width: 50px;
    text-align: center;
}

.sanad-scroll-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #a0b0c0, #90a0b0);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.sanad-scroll-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #00a0b0, #007080);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    transition: transform 0.1s ease;
}

.sanad-scroll-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.sanad-scroll-range::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.sanad-scroll-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #00a0b0, #007080);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 2px solid #fff;
}

.sanad-scroll-filter {
    display: flex;
    align-items: center;
}

.sanad-scroll-filter-select {
    height: 28px;
    padding: 2px 8px;
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    font-size: 12px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    color: #1a3a5c;
    cursor: pointer;
    min-width: 100px;
    direction: rtl;
}

.sanad-scroll-filter-select:focus {
    outline: none;
    border-color: #00a0b0;
}

.sanad-scroll-filter-select:hover {
    border-color: #00a0b0;
}

.sanad-scroll-search {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.sanad-scroll-input {
    height: 28px;
    width: 120px;
    padding: 4px 8px;
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    font-size: 20px;
    background: #fff;
    direction: ltr;
    text-align: center;
}

.sanad-scroll-input:focus {
    outline: none;
    border-color: #00a0b0;
}

.sanad-scroll-input.show {
    display: block !important;
}

/* Slider Mode Toggle Button */
.sales-slider-mode-toggle {
    position: relative;
    min-width: 50px;
    gap: 6px;
}

.sales-slider-mode-toggle .slider-mode-label {
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

.sales-slider-mode-toggle[data-mode="nine"] {
    background: linear-gradient(180deg, #00a0b0, #008090);
    color: #fff;
    border-color: #007080;
}

.sales-slider-mode-toggle[data-mode="main"] {
    background: linear-gradient(180deg, #f0ad4e, #ec971f);
    color: #fff;
    border-color: #d58512;
}

/* ============================================
   SANAD MODAL & TABLE STYLES
   ============================================ */
.sanad-modal-scroll {
    overflow-y: scroll;
}

.sanad_kabd_body,
.sanad_sarf_body {
    padding-top: 5px !important;
}

.sanad-th-empty {
    background-color: white !important;
}

.sanad-cell-input,
.sanad-cell-select {
    width: 100%;
}

/* Field Group - Side by Side */
.sanad-field-group {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    direction: rtl;
}

.sanad-field-group .sanad-field {
    margin-bottom: 0;
    min-width: 0;
}

.sanad-field-grow {
    flex: 1;
    min-width: 0;
}

/* Balance Inquiry Section */
.sanad-balance-inquiry-section {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: linear-gradient(135deg, 
        rgba(0, 160, 176, 0.1) 0%, 
        rgba(0, 128, 144, 0.05) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(0, 160, 176, 0.2);
    margin-top: 8px;
}

.sanad-btn-balance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.5), rgba(0, 128, 144, 0.6));
    border: 1px solid rgba(0, 160, 176, 0.4);
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    height: 30px;
    color: #fff;
}

.sanad-btn-balance:hover {
    background: linear-gradient(135deg, 
        rgba(0, 160, 176, 0.7) 0%, 
        rgba(0, 128, 144, 0.8) 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(0, 160, 176, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sanad-btn-balance:active {
    transform: translateY(0);
}

.sanad-btn-balance i {
    font-size: 14px;
}

.sanad-balance-inquiry-section .raseed-fatoorah-container {
    flex: 1;
}

/* ============================================
   BALANCE INQUIRY POPUP - Liquid Glass RTL
   ============================================ */
.raseed-fatoorah-container:not(.none) {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 99999 !important;
    width: auto;
    min-width: 320px;
    max-width: 400px;
    animation: balancePopupFadeIn 0.2s ease-out;
    isolation: isolate;
}

@keyframes balancePopupFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Balance Popup Container */
.balance-popup {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(245, 250, 255, 0.96) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    border: 2px solid rgba(0, 160, 176, 0.4);
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: hidden;
    direction: rtl;
}

/* Popup Header */
.balance-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, 
        rgba(0, 160, 176, 0.15) 0%, 
        rgba(0, 120, 140, 0.1) 100%);
    border-bottom: 1px solid rgba(0, 160, 176, 0.15);
}

.balance-popup-title {
    font-weight: 700;
    color: #0a2540;
    display: flex;
    align-items: center;
    gap: 6px;
}

.balance-popup-header .close-raseed-fatoorah {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.2);
    color: #dc3545;
    cursor: pointer;
    transition: all 0.15s ease;
}

.balance-popup-header .close-raseed-fatoorah:hover {
    background: rgba(220, 53, 69, 0.2);
    transform: scale(1.05);
}

.balance-popup-header .close-raseed-fatoorah i {
    font-size: 12px;
}

/* Popup Content */
.balance-popup-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
}

/* Balance Section */
.balance-section {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(0, 160, 176, 0.1);
}

.balance-section-header {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(0, 160, 176, 0.2);
    color: #0a2540;
    font-weight: 700;
}

.balance-section-header i {
    color: #00a0b0;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Highlight Section (Calibrated) */
.balance-section-highlight {
    background: linear-gradient(135deg, 
        rgba(0, 160, 176, 0.08) 0%, 
        rgba(0, 120, 140, 0.05) 100%);
    border-color: rgba(0, 160, 176, 0.2);
}

.balance-section-highlight .balance-section-header {
    color: #006070;
    border-color: rgba(0, 160, 176, 0.3);
}

/* Balance Item */
.balance-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    gap: 10px;
}

.balance-item + .balance-item {
    border-top: 1px dotted rgba(0, 0, 0, 0.08);
}

.balance-label {
    color: #4a5568;
    font-weight: 500;
    text-align: right;
}

.balance-value {
    font-weight: 700;
    color: #0a2540;
    font-family: 'Courier New', monospace;
    background: rgba(0, 160, 176, 0.08);
    padding: 2px 8px;
    border-radius: 4px;
    min-width: 80px;
    text-align: center;
}

/* Primary value (Ryal) */
.balance-item-primary .balance-value {
    background: linear-gradient(135deg, 
        rgba(34, 197, 94, 0.15) 0%, 
        rgba(22, 163, 74, 0.1) 100%);
    color: #166534;
}

/* Gold value */
.balance-value-gold {
    background: linear-gradient(135deg,
        rgba(245, 158, 11, 0.15) 0%,
        rgba(217, 119, 6, 0.1) 100%);
    color: #92400e;
}

/* Silver value */
.balance-value-silver {
    background: linear-gradient(135deg,
        rgba(148, 163, 184, 0.18) 0%,
        rgba(100, 116, 139, 0.12) 100%);
    color: #475569;
}

/* Copy Balance Button */
.copy-balance-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: rgba(0, 160, 176, 0.1);
    color: #00a0b0;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.copy-balance-btn:hover {
    background: rgba(0, 160, 176, 0.2);
    color: #008090;
    transform: scale(1.1);
}

.copy-balance-btn:active {
    transform: scale(0.95);
}

.copy-balance-btn.copied {
    background: rgba(34, 197, 94, 0.2);
    color: #16a34a;
}

.copy-balance-btn i {
    font-size: 11px;
}

.copy-balance-btn .copied-text {
    display: none;
    font-size: 9px;
    font-weight: 600;
    margin-right: 2px;
}

.copy-balance-btn.copied {
    width: auto;
    padding: 0 6px;
}

.copy-balance-btn.copied .copied-text {
    display: inline;
}

.copy-balance-btn.copied i {
    display: none;
}

/* ============================================
   ZATCA UPLOAD GRID - Liquid Glass RTL Layout
   ============================================ */
.zatca-upload-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 12px;
    padding: 12px 16px;
    direction: rtl;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.15) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    margin: 8px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    align-items: end;
}

.zatca-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
}

.zatca-field label {
    color: #0a2540;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.zatca-input {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    padding: 6px 10px;
    color: #0a2540;
    font-size: 14px;
    font-weight: 500;
    height: 36px;
    width: 100%;
    text-align: right;
    direction: rtl;
    transition: all 0.15s ease;
}

.zatca-input:hover {
    border-color: rgba(0, 160, 176, 0.5);
}

.zatca-input:focus {
    outline: none;
    border-color: #00a0b0;
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.15);
}

select.zatca-input {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230a2540' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 10px center;
    padding-left: 30px;
}

.zatca-btn-field {
    display: flex;
    align-items: flex-end;
}

.zatca-btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 20px;
    background: linear-gradient(135deg, #00a0b0, #007888);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    height: 36px;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 160, 176, 0.3);
}

.zatca-btn-submit:hover {
    background: linear-gradient(135deg, #008898, #006070);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 160, 176, 0.4);
}

.zatca-btn-submit:active {
    transform: translateY(0);
}

.zatca-btn-submit i {
    font-size: 14px;
}

/* ============================================
   ZATCA STATUS INDICATOR - Liquid Glass Style
   ============================================ */
.zatca-status-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-inline-start: auto;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.2) 0%, 
        rgba(255, 255, 255, 0.08) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    overflow: hidden;
    transition: all 0.3s ease;
}

.zatca-status-indicator::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/fatoora.png');
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.85;
    z-index: 1;
}

.zatca-status-indicator:hover {
    transform: scale(1.03);
    box-shadow: 
        0 6px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.zatca-status-icon {
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 2;
    display: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
}

/* Success state - Green checkmark */
.zatca-status-icon.zatca-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
}

.zatca-status-icon.zatca-success[style*="color"] {
    display: flex !important;
}

/* Warning state - Yellow triangle */
.zatca-status-icon.zatca-warning {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #78350f;
}

.zatca-status-icon.zatca-warning[style*="color"] {
    display: flex !important;
}

/* Error state - Red X */
.zatca-status-icon.zatca-error {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
}

.zatca-status-icon.zatca-error[style*="color"] {
    display: flex !important;
}

/* Hover effect on clickable error icon */
.zatca-status-icon.zatca-error:hover {
    cursor: pointer;
    transform: scale(1.1);
}

/* ============================================
   SANAD FOOTER - Liquid Glass Style
   ============================================ */
.sanad-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px !important;
    background: rgba(10, 30, 60, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 16px 16px;
    gap: 15px;
    direction: rtl;
}

.sanad-footer-right {
    display: flex;
    align-items: center;
}

.sanad-kayed-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.sanad-kayed-label {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.sanad-kayed-input {
    width: 110px;
    height: 30px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 160, 176, 0.4);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #0a2540;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sanad-kayed-input:hover {
    background: #fff;
    border-color: rgba(0, 160, 176, 0.6);
}

.sanad-kayed-input:focus {
    outline: none;
    background: #fff;
    border-color: #00a0b0;
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.2);
}

.sanad-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sanad-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.sanad-footer-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

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

.sanad-footer-btn i {
    font-size: 14px;
}

.sanad-btn-info {
    background: rgba(23, 162, 184, 0.4);
    border-color: rgba(23, 162, 184, 0.5);
}

.sanad-btn-info:hover:not(:disabled) {
    background: rgba(23, 162, 184, 0.6);
}

.sanad-btn-whatsapp {
    background: linear-gradient(135deg, #25d366, #128c7e) !important;
    border-color: #128c7e !important;
    color: #ffffff !important;
}

.sanad-btn-whatsapp:hover:not(:disabled) {
    background: linear-gradient(135deg, #2ee874, #1ba085) !important;
}

.sanad-btn-whatsapp:disabled {
    background: linear-gradient(135deg, rgba(37, 160, 100, 0.35), rgba(18, 110, 100, 0.3)) !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

.sanad-btn-danger {
    background: rgba(220, 53, 69, 0.4);
    border-color: rgba(220, 53, 69, 0.5);
}

.sanad-btn-danger:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.6);
}

.sanad-btn-success {
    background: rgba(40, 167, 69, 0.4);
    border-color: rgba(40, 167, 69, 0.5);
}

.sanad-btn-success:hover:not(:disabled) {
    background: rgba(40, 167, 69, 0.6);
}

.sanad-btn-new {
    background: rgba(0, 123, 255, 0.4);
    border-color: rgba(0, 123, 255, 0.5);
}

.sanad-btn-new:hover:not(:disabled) {
    background: rgba(0, 123, 255, 0.6);
}

.sanad-btn-exit {
    background: rgba(220, 53, 69, 0.4);
    border-color: rgba(220, 53, 69, 0.5);
}

.sanad-btn-exit:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.6);
}

.sanad-btn-import {
    background: rgba(255, 193, 7, 0.8) !important;
    border-color: rgba(255, 193, 7, 0.9) !important;
    color: #1a3a5c !important;
    font-weight: 600 !important;
}

.sanad-btn-import:hover:not(:disabled) {
    background: rgba(255, 193, 7, 1) !important;
    color: #000 !important;
}

/* ============================================
   SANAD BOTTOM SECTION - Compact Layout
   ============================================ */
.sanad-bottom-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: rgba(240, 245, 250, 0.95);
    border-top: 1px solid rgba(0, 160, 176, 0.1);
    direction: rtl;
    margin-bottom: 0;
}

/* Fix kayed modal body to remove gap before footer */
.kayed-modal-body {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.kayed-modal-body .container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.kayed-modal-body + .modal-footer,
.kayed-modal-body ~ .modal-footer {
    margin-top: 0 !important;
    border-top: none !important;
}

/* Accounts elkyood modal specific fixes */
#accounts-elkyood-modal .modal-content.kid-yom {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#accounts-elkyood-modal .modal-body.kayed-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

#accounts-elkyood-modal .modal-footer.sanad-footer {
    flex-shrink: 0;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 0 16px 16px;
    box-sizing: border-box;
}

/* Ensure container doesn't constrain footer */
#accounts-elkyood-modal .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.sanad-totals-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.sanad-total-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sanad-total-item label {
    font-size: 16px;
    font-weight: 600;
    color: #1a3a5c;
    white-space: nowrap;
}

.sanad-total-input {
    width: 90px;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
    background: #fff;
}

.sanad-options-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
}

.sanad-options-compact .thinking {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.sanad-options-compact .thinking > a {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: #00a0b0 !important;
    cursor: pointer !important;
}

.sanad-options-compact .thinking > a > img {
    display: none !important;
}

.sanad-options-compact .thinking > a::before {
    font-family: "Font Awesome 5 Pro" !important;
    content: "\f013" !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    color: #00a0b0 !important;
}

.sanad-options-compact .thinking > span {
    color: #1a3a5c !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

.sanad-options-compact .thinking ul {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sanad-options-compact .thinking ul li {
    cursor: pointer !important;
}

.sanad-options-compact .thinking ul li img {
    display: none !important;
}

.sanad-options-compact .thinking ul li::before {
    font-family: "Font Awesome 5 Pro" !important;
    content: "\f111" !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    color: #7a8a9a !important;
    transition: all 0.2s ease !important;
}

.sanad-options-compact .thinking ul li:hover::before {
    font-weight: 900 !important;
    color: #00a0b0 !important;
    transform: scale(1.2) !important;
}

.sanad-options-compact .thinking ul li#save-kayed-youm-closed-columns::before {
    content: "\f0c7" !important;
    font-weight: 900 !important;
    color: #00a0b0 !important;
}

.sanad-assumptions-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sanad-assumptions-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: rgba(0, 160, 176, 0.1);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #1a3a5c;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sanad-assumptions-btn:hover {
    background: rgba(0, 160, 176, 0.2);
}

.sanad-assumptions-btn i {
    font-size: 16px;
}

.sanad-assumptions-list {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sanad-assumptions-list li {
    cursor: pointer;
}

.sanad-assumptions-list li img {
    width: 18px;
    height: 18px;
}

.sanad-checkbox-inline {
    display: flex;
    align-items: center;
    gap: 5px;
}

.sanad-checkbox-inline input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.sanad-checkbox-inline label {
    font-size: 16px;
    color: #1a3a5c;
    white-space: nowrap;
    cursor: pointer;
}

.sanad-import-form {
    display: flex;
    align-items: center;
    gap: 6px;
}

.sanad-import-input {
    font-size: 16px;
    width: 120px;
}

/* ============================================
   GOLD PRICE MODAL - Refactored (RTL Ready)
   ============================================ */
.gold-price-modal {
    border-radius: 8px;
    overflow: hidden;
}

.gold-price-form {
    display: flex;
    flex-direction: column;
}

.gold-price-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px !important;
    background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
    direction: rtl;
}

.gold-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: #ffffff;
    border: 1px solid rgba(0, 160, 176, 0.25);
    border-radius: 6px;
}

.gold-price-row label {
    flex-shrink: 0;
    min-width: 65px;
    font-weight: 600;
    color: #1a3a4a;
    text-align: right;
}

.gold-price-select {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 160, 176, 0.35);
    border-radius: 4px;
    color: #1a3a4a;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s;
}

.gold-price-select:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}

.gold-price-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.gold-price-val {
    flex: 1;
    height: 30px;
    padding: 0 10px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    transition: border-color 0.15s;
}

.gold-price-val.gold-val {
    background: #fffbeb;
    border: 2px solid #d97706;
    color: #92400e;
}

.gold-price-val.gold-val:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.gold-price-val.silver-val {
    background: #f8fafc;
    border: 2px solid #64748b;
    color: #334155;
}

.gold-price-val.silver-val:focus {
    outline: none;
    border-color: #475569;
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.2);
}

.gold-price-chart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    border: none;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    transition: all 0.15s;
}

.gold-price-chart:hover {
    background: linear-gradient(135deg, #0e7490, #0c6478);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
    color: #fff;
    text-decoration: none;
}

/* ============================================
   PAYMENT MODAL - Liquid Glass Styling
   ============================================ */
#choose-payment-modal {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

#choose-payment-modal .payment-modal-dialog {
    width: 63%;
    max-width: 63%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#choose-payment-modal .modal-content.payment-modal-content {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    position: relative !important;
}

.payment-modal-content {
    border-radius: 16px;
    overflow: hidden;
    border: none;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.payment-modal-form {
    display: flex;
    flex-direction: column;
}

.payment-modal-body {
    background: linear-gradient(135deg, #1a3a5c 0%, #2d578c 50%, #1a3a5c 100%);
    padding: 25px 20px;
    direction: rtl;
}

.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
}

.payment-method-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px 15px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.payment-method-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.payment-method-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    text-align: center;
    letter-spacing: 0.5px;
}

.payment-method-input {
    width: 100%;
    height: 45px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 160, 176, 0.3);
    border-radius: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1a3a5c;
    text-align: center;
    transition: all 0.2s ease;
    direction: ltr;
}

.payment-method-input:focus {
    outline: none;
    border-color: #00a0b0;
    box-shadow: 0 0 0 4px rgba(0, 160, 176, 0.25);
    background: #fff;
}

.payment-method-input::placeholder {
    color: #8fadc8;
    font-weight: 400;
}

.payment-method-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    border: none;
    border-radius: 8px;
    color: #1a3a5c;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 3px 10px rgba(255, 193, 7, 0.3);
}

.payment-method-btn:hover {
    background: linear-gradient(135deg, #ffca28 0%, #ffa726 100%);
    transform: translateY(-1px);
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
    color: #1a3a5c;
    text-decoration: none;
}

.payment-method-btn i {
    font-size: 20px;
}

.payment-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 18px 25px;
    background: linear-gradient(135deg, #0d2840 0%, #1a3a5c 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    direction: rtl;
}

.payment-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 25px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 120px;
}

.payment-btn-save {
    background: linear-gradient(135deg, #00a0b0 0%, #007a87 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 160, 176, 0.3);
}

.payment-btn-save:hover {
    background: linear-gradient(135deg, #00b8c9 0%, #008a97 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 160, 176, 0.4);
}

.payment-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.payment-btn-cancel:hover {
    background: rgba(220, 53, 69, 0.8);
    border-color: rgba(220, 53, 69, 0.9);
    transform: translateY(-2px);
}

/* Payment Modal Responsive */
@media (max-width: 576px) {
    .payment-modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    .payment-methods-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }
    
    .payment-method-card {
        padding: 15px 12px;
    }
    
    .payment-modal-footer {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .payment-footer-btn {
        flex: 1;
        min-width: 100px;
    }
}

/* ============================================
   KAYED YOUM MODAL - Refactored (RTL Ready)
   ============================================ */
.kayed-modal-body {
    background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
    padding: 10px !important;
    direction: rtl;
}

/* ============================================
   KAYED HEADER GRID - Refactored (RTL Ready)
   ============================================ */
.kayed-header-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 6px 10px;
    padding: 8px 10px;
    background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 6px;
    margin-bottom: 6px;
    direction: rtl;
}

/* Ensure kayed-field takes full width of its grid cell */
.kayed-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    width: 100%;
}

.kayed-field label {
    font-weight: 600;
    color: #1a3a4a;
    text-align: right;
    white-space: nowrap;
}

.kayed-input {
    height: 32px;
    min-height: 32px;
    padding: 6px 10px;
    background: #ffffff;
    line-height: 1.2;
    border: 1px solid rgba(0, 160, 176, 0.35);
    border-radius: 4px;
    color: #1a3a4a;
    transition: border-color 0.15s;
    direction: rtl;
    text-align: right;
    width: 100%;
    box-sizing: border-box;
}

/* Select specific styles to prevent text cropping */
select.kayed-input {
    appearance: auto;
    -webkit-appearance: auto;
    -moz-appearance: auto;
    padding: 0 8px;
    cursor: pointer;
    line-height: 30px;
    height: 34px;
    vertical-align: middle;
}

.kayed-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15);
}

.kayed-input:disabled {
    background: #f8fafc;
    color: #475569;
}

.kayed-field-grow {
    grid-column: span 2;
    min-width: 200px;
}

.kayed-field-row {
    display: flex;
    flex-direction: row-reverse;
    gap: 6px;
    align-items: center;
}

.kayed-field-row .kayed-input {
    flex: 1;
}

.kayed-btn-add {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    border: none;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}

.kayed-btn-add:hover {
    background: linear-gradient(135deg, #0e7490, #0c6478);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
}

.kayed-btn-add i {
    font-size: 12px;
}

.kayed-btn-add img {
    width: 14px;
    height: 14px;
    filter: brightness(10);
}

/* RTL Support for Kayed Modal */
[dir="rtl"] .kayed-header-grid,
.dir-ar .kayed-header-grid {
    direction: rtl;
    text-align: right;
}

[dir="ltr"] .kayed-header-grid,
.dir-en .kayed-header-grid {
    direction: ltr;
    text-align: left;
}

[dir="ltr"] .kayed-input,
.dir-en .kayed-input {
    direction: ltr;
    text-align: left;
}

[dir="ltr"] .kayed-field-row,
.dir-en .kayed-field-row {
    flex-direction: row;
}

/* ============================================
   SANAD OPTIONS ROW - Bottom Section
   ============================================ */
.sanad-options-row {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 15px;
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.05), transparent);
    border-radius: 8px;
    margin-top: 10px;
    direction: rtl;
}

.sanad-options-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sanad-options-group.thinking {
    flex-shrink: 0;
}

.sanad-options-group.thinking > a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #00a0b0, #008090);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sanad-options-group.thinking > a:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.3);
}

.sanad-options-group.thinking > span {
    color: #1a3a5c;
    font-size: 16px;
    font-weight: 600;
}

.sanad-options-group.thinking ul {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sanad-options-group.thinking ul li {
    cursor: pointer;
    color: #7a8a9a;
    font-size: 16px;
    transition: all 0.2s ease;
}

.sanad-options-group.thinking ul li:hover {
    color: #00a0b0;
    transform: scale(1.2);
}

.sanad-options-group.thinking ul li#save-closed-columns {
    color: #00a0b0;
    font-size: 14px;
}

.sanad-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sanad-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 20px;
    color: #1a3a5c;
}

.sanad-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #00a0b0;
    cursor: pointer;
}

.sanad-branch-select {
    margin-right: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sanad-branch-select label {
    font-size: 20px;
    font-weight: 600;
    color: #1a3a5c;
    white-space: nowrap;
}

.sanad-select {
    height: 32px;
    padding: 4px 10px;
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    font-size: 20px;
    background: #fff;
    min-width: 180px;
    color: #1a3a5c;
}

.sanad-select:focus {
    outline: none;
    border-color: #00a0b0;
}

/* Tabs container */
.commonad_sold_body .tabs {
    display: flex !important;
    align-items: stretch !important;
    padding-left: 0 !important;
}

.commonad_sold_body .tabs .newtabs {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 10px !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    height: auto !important;
    position: static !important;
    top: auto !important;
}

.commonad_sold_body .tabs .newtabs li {
    margin: 0 !important;
}

.commonad_sold_body .tabs .newtabs li a {
    display: block !important;
    padding: 8px 12px !important;
    color: #1a3a5c !important;
    font-size: 18px !important;
    border-radius: 8px !important;
    height: auto !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.commonad_sold_body .tabs .newtabs li a:hover,
.commonad_sold_body .tabs .newtabs li a.active {
    background: rgba(0, 160, 176, 0.15) !important;
    color: #00a0b0 !important;
}

/* Currency select (amlaa) */
.commonad_sold_body .tabs .amlaa,
.commonad_sold_body .amlaa {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    direction: rtl !important;
    padding: 0 10px !important;
}

.commonad_sold_body .tabs .amlaa label,
.commonad_sold_body .amlaa label {
    color: #1a3a5c !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

.commonad_sold_body .tabs .amlaa select,
.commonad_sold_body .amlaa select {
    padding: 6px 10px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
    font-size: 16px !important;
    min-width: 100px !important;
    height: auto !important;
    width: auto !important;
}

/* ============================================
   GLASS THEME - CONTENT TAB
   ============================================ */
.commonad_sold_body .content-tab {
    background: rgba(240, 245, 250, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

.commonad_sold_body .content-tab .shows .sec div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    direction: rtl !important;
}

.commonad_sold_body .content-tab .shows .sec div label {
    color: #1a3a5c !important;
    position: static !important;
    right: unset !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.commonad_sold_body .content-tab .shows .sec div input {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
    flex: 1 !important;
}

/* Modal btn-primary - Base styling only, accent colors set by theme files */
.modal-footer .btn-primary,
.modal .btn-primary,
.commonad_sold_body .sec4 button.btn-primary {
    /* background set by theme accent colors - do not override here */
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 8px 16px;
    font-weight: 500;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

.modal-footer .btn-primary:hover,
.modal .btn-primary:hover,
.commonad_sold_body .sec4 button.btn-primary:hover {
    /* background hover set by theme accent colors */
    border-color: rgba(255, 255, 255, 0.35) !important;
    transform: translateY(-1px);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

.modal-footer .btn-primary:active,
.modal .btn-primary:active {
    transform: translateY(0);
}

/* ============================================
   DISABLED BUTTONS - Global Styling
   Better contrast with muted cyan tint
   ============================================ */
.modal-footer .btn-primary:disabled,
.modal .btn-primary:disabled,
.modal .btn:disabled,
.modal button:disabled,
.commonad_sold_body .sec4 button:disabled,
.sanad-footer-btn:disabled,
.glass-footer-btn:disabled {
    background: linear-gradient(135deg, rgba(100, 130, 140, 0.4), rgba(80, 110, 120, 0.35)) !important;
    border: 1px solid rgba(100, 140, 150, 0.3) !important;
    color: rgba(180, 200, 210, 0.85) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.85 !important;
}

.modal-footer .btn-primary:disabled i,
.modal .btn-primary:disabled i,
.modal .btn:disabled i,
.modal button:disabled i,
.commonad_sold_body .sec4 button:disabled i {
    color: rgba(180, 200, 210, 0.85) !important;
}

.modal-footer .btn-primary:disabled:hover,
.modal .btn-primary:disabled:hover,
.modal .btn:disabled:hover,
.modal button:disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* WhatsApp button - solid green style */
.modal .btn-whatsapp,
.modal #whatsapp-message,
.commonad_sold_body .sec4 #whatsapp-message {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 8px 18px;
    font-weight: 600;
    box-shadow: 
        0 4px 15px rgba(37, 211, 102, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    transition: all 0.3s ease;
}

.modal .btn-whatsapp:hover,
.modal #whatsapp-message:hover,
.commonad_sold_body .sec4 #whatsapp-message:hover {
    background: linear-gradient(135deg, #2EE874 0%, #1BA085 100%) !important;
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(37, 211, 102, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* WhatsApp disabled - muted green */
.modal .btn-whatsapp:disabled,
.modal #whatsapp-message:disabled,
.commonad_sold_body .sec4 #whatsapp-message:disabled {
    background: linear-gradient(135deg, rgba(37, 160, 100, 0.35), rgba(18, 110, 100, 0.3)) !important;
    border: 1px solid rgba(37, 160, 100, 0.25) !important;
    color: rgba(180, 220, 200, 0.8) !important;
    opacity: 0.85 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* Close modal button - glass style with red icon */
.modal .close-modal {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 12px;
}

.modal .close-modal:hover {
    background: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.5);
}

.modal .close-modal .icons {
    color: #dc3545;
}



.icons {
    margin-right: 5px;
    position: relative;
    top: 3px;
}

.sp {
    position: absolute;
    left: 11px;
    bottom: 14px;
    text-align: right;
}

.modal-content {
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* ── Modal Rise-From-Floor + Zoom Animation (togglable via .modal-animation-enabled) ── */
html.modal-animation-enabled .modal.fade .modal-content {
    transform: translateY(50vh) scale(0.05);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

html.modal-animation-enabled .modal.show .modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.nav-tabs .nav-item {
    margin-bottom: -1px;
    width: 33%;
    text-align: center;
}

.modal-body {
    background: rgba(240, 245, 250, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 15px !important;
    margin: 0 !important;
    color: #333;
}

/* ============================================
   INVOICE FORM SECTIONS (dis-1) - Refactored RTL
   ============================================ */
.commonad_sold_body {
    margin-top: 0 !important;
    padding: 0 !important;
}

.commonad_sold_body .dis-1 {
    padding: 4px 8px !important;
    margin: 0 !important;
    background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
    border-radius: 6px;
    border: 1px solid rgba(0, 160, 176, 0.2);
    overflow: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Section rows - flex layout */
.commonad_sold_body .dis-1 .sec-1,
.commonad_sold_body .dis-1 .sec-2,
.commonad_sold_body .dis-1 .sec-3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px 8px !important;
    margin-bottom: 3px !important;
    direction: rtl !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* Field containers */
.commonad_sold_body .dis-1 .sec-1 > div,
.commonad_sold_body .dis-1 .sec-2 > div,
.commonad_sold_body .dis-1 .sec-3 > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    direction: rtl !important;
    padding: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Labels - dark text for readability */
.commonad_sold_body .dis-1 .sec-1 > div > label,
.commonad_sold_body .dis-1 .sec-2 > div > label,
.commonad_sold_body .dis-1 .sec-3 > div > label {
    color: #1a3a4a !important;
    font-weight: 600;
    position: static !important;
    right: unset !important;
    left: unset !important;
    white-space: nowrap;
    flex-shrink: 0 !important;
    text-align: right !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Inputs and selects - white background for contrast */
.commonad_sold_body .dis-1 .sec-1 > div > input,
.commonad_sold_body .dis-1 .sec-1 > div > select,
.commonad_sold_body .dis-1 .sec-2 > div > input,
.commonad_sold_body .dis-1 .sec-2 > div > select,
.commonad_sold_body .dis-1 .sec-3 > div > input,
.commonad_sold_body .dis-1 .sec-3 > div > select {
    background: #ffffff !important;
    border: 1px solid rgba(0, 160, 176, 0.35) !important;
    border-radius: 4px !important;
    color: #1a3a4a !important;
    padding: 4px 8px !important;
    height: 28px !important;
    transition: all 0.15s ease;
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Focus state */
.commonad_sold_body .dis-1 .sec-1 > div > input:focus,
.commonad_sold_body .dis-1 .sec-1 > div > select:focus,
.commonad_sold_body .dis-1 .sec-2 > div > input:focus,
.commonad_sold_body .dis-1 .sec-2 > div > select:focus,
.commonad_sold_body .dis-1 .sec-3 > div > input:focus,
.commonad_sold_body .dis-1 .sec-3 > div > select:focus {
    border-color: #0891b2 !important;
    box-shadow: 0 0 0 2px rgba(8, 145, 178, 0.15) !important;
    outline: none;
}

/* sec-4 buttons row */
.commonad_sold_body .dis-1 .sec-4 {
    direction: rtl !important;
    padding-top: 4px !important;
    margin-top: 2px !important;
    border-top: 1px solid rgba(0, 160, 176, 0.15);
}

/* Override inline styles on specific fields */
.commonad_sold_body .dis-1 [style*="display: block"],
.commonad_sold_body .dis-1 [style*="display:block"] {
    display: flex !important;
}

.commonad_sold_body .dis-1 label[style] {
    width: auto !important;
    position: static !important;
    right: unset !important;
    margin-right: 0 !important;
    padding-left: 4px !important;
}

/* ============================================
   GLASS THEME - IMPORT SALES & UUID SECTIONS
   ============================================ */
.commonad_sold_body .import-sales,
.commonad_sold_body .uuid {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    direction: rtl !important;
}

.commonad_sold_body .import-sales form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.commonad_sold_body .import-sales label,
.commonad_sold_body .uuid label {
    color: #1a3a5c !important;
    position: static !important;
    right: unset !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.commonad_sold_body .import-sales input[type="file"] {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
}

.commonad_sold_body .import-sales button {
    background: rgba(0, 160, 176, 0.2) !important;
    border: 1px solid rgba(0, 160, 176, 0.4) !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
    padding: 6px 12px !important;
    white-space: nowrap !important;
}

.commonad_sold_body .import-sales button:hover {
    background: rgba(0, 160, 176, 0.35) !important;
}

.commonad_sold_body .uuid input {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
}

/* ============================================
   GLASS THEME - KASHF 7SAB (Account Statement) FORM
   ============================================ */
.kashf-7sab-header .row {
    margin-bottom: 8px !important;
}

.kashf-7sab-input-1 > div,
.kashf-7sab-input-2 > div,
.kashf-7sab-input-3 > div,
.kashf-7sab-input-4 > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    direction: rtl !important;
}

.kashf-7sab-input-1 label,
.kashf-7sab-input-2 label,
.kashf-7sab-input-3 label,
.kashf-7sab-input-4 > div > label {
    color: #1a3a5c !important;
    position: static !important;
    right: unset !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.kashf-7sab-input-1 input,
.kashf-7sab-input-1 select,
.kashf-7sab-input-2 input,
.kashf-7sab-input-2 select,
.kashf-7sab-input-3 input,
.kashf-7sab-input-3 select,
.kashf-7sab-input-4 select {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.kashf-7sab-input-3 .kashf-7sab-date-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    direction: rtl !important;
}

/* kashf-7sab-input-4 - Analysis checkboxes row - CLEAN LAYOUT */
.row.kashf-7sab-input-4 {
    display: grid !important;
    grid-template-columns: 1fr auto auto !important;
    gap: 20px !important;
    align-items: start !important;
    direction: rtl !important;
    padding: 0!important;
    margin: 0 !important;
}

/* Column 1: تحليل الحساب checkboxes */
.kashf-7sab-input-4 > .col-md-7 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}

.kashf-7sab-input-4 .big-label-container {
    margin-bottom: 8px !important;
}

.kashf-7sab-input-4 .big-label-container label {
    display: block !important;
    color: #1a3a5c !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    position: static !important;
    width: auto !important;
    margin: 0 !important;
}

.kashf-7sab-input-4 .form-check {
    all: unset !important;
    display: block !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    padding: 12px 15px !important;
}

.kashf-7sab-input-4 .form-check .group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    direction: rtl !important;
}

.kashf-7sab-input-4 .form-check .group .item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.kashf-7sab-input-4 .form-check .group .item input {
    all: unset !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #00a0b0 !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
}

.kashf-7sab-input-4 .form-check .group .item label {
    all: unset !important;
    color: #1a3a5c !important;
    font-size: 16px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

/* Column 2: فرز بواسطة */
.kashf-7sab-input-4 > .col-md-3.sort-by {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    min-width: 160px !important;
}

.kashf-7sab-input-4 .sort-by > label {
    display: block !important;
    color: #1a3a5c !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
    position: static !important;
    width: auto !important;
}

.kashf-7sab-input-4 .sort-by select {
    display: block !important;
    width: 100% !important;
    padding: 10px 12px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
    font-size: 16px !important;
}

/* Column 3: بدون إفتتاحي / أرصده فقط - RTL Arabic layout */
.kashf-7sab-input-4 .balance-option,
.kashf-7sab-input-4 > .col-md-2.balance-option,
.row.kashf-7sab-input-4 .balance-option {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    min-width: 150px !important;
    text-align: right !important;
    direction: rtl !important;
}

/* Row 1: بدون إفتتاحي - inline layout */
.kashf-7sab-input-4 .balance-option > label,
.kashf-7sab-input-4 .balance-option > .form-check-label {
    display: inline !important;
    position: static !important;
    width: auto !important;
    color: #1a3a5c !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.kashf-7sab-input-4 .balance-option > input,
.kashf-7sab-input-4 .balance-option > .form-check-input {
    display: inline !important;
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin: 0 0 0 8px !important;
    vertical-align: middle !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

/* Row 2: أرصده فقط - inside div */
.kashf-7sab-input-4 .balance-option > div {
    display: block !important;
    margin-top: 10px !important;
    text-align: right !important;
    direction: rtl !important;
}

.kashf-7sab-input-4 .balance-option > div > label,
.kashf-7sab-input-4 .balance-option > div > .form-check-label {
    display: inline !important;
    position: static !important;
    width: auto !important;
    color: #1a3a5c !important;
    font-size: 16px !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
}

.kashf-7sab-input-4 .balance-option > div > input,
.kashf-7sab-input-4 .balance-option > div > .form-check-input {
    display: inline !important;
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    margin: 0 0 0 8px !important;
    vertical-align: middle !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

/* Fix kashf-7sab modal body to contain all content */
.kashf-7sab-body {
    height: auto !important;
    min-height: 600px !important;
    overflow-y: auto !important;
}

.kashf-7sab-body .container {
    height: auto !important;
}

/* Fix kashf-7sab buttons and table visibility */
.btn-table2-kashf {
    position: static !important;
    top: unset !important;
    left: unset !important;
    text-align: right !important;
    margin: 5px 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.btn-table2-kashf button {
    background: rgba(0, 160, 176, 0.2) !important;
    border: 1px solid rgba(0, 160, 176, 0.4) !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #00a0b0 !important;
    transition: all 0.2s ease !important;
}

.btn-table2-kashf button:hover {
    background: rgba(0, 160, 176, 0.35) !important;
    transform: scale(1.05) !important;
}

.btn-table2-kashf button i {
    font-size: 14px !important;
}

/* kashf-table-2 - Balance summary grid - RTL */
.kashf-table-2 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 8px 15px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 10px !important;
    padding: 15px 20px !important;
    direction: rtl !important;
    width: 100% !important;
    margin-top: 15px !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
}

/* Labels row */
.kashf-table-2 span {
    display: block !important;
    color: #1a3a5c !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-align: center !important;
    padding: 5px 0 !important;
}

/* Inputs row */
.kashf-table-2 input {
    display: block !important;
    width: 100% !important;
    background: rgba(240, 245, 250, 0.95) !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    border-radius: 8px !important;
    color: #1a3a5c !important;
    padding: 8px 10px !important;
    text-align: center !important;
    font-size: 18px !important;
    margin: 0 !important;
}

/* Fix kashf-footer buttons visibility */
.kashf-footer {
    position: static !important;
    left: unset !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    padding: 10px 15px !important;
}

.kashf-footer .but {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
}

.kashf-footer .row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    width: 100% !important;
}

.kashf-footer button {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 8px 16px !important;
    margin: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.kashf-footer button:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

.kashf-footer button i {
    position: static !important;
    right: unset !important;
    top: unset !important;
}

/* Enhanced Kashf Hesab Footer - Single Row Layout */
.kashf-footer-enhanced {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 50%, #1e3a5f 100%) !important;
    border-top: 2px solid rgba(0, 180, 216, 0.4) !important;
    padding: 12px 20px !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15) !important;
}

.kashf-footer-buttons {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    overflow-x: auto !important;
}

.kashf-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

.kashf-btn i {
    font-size: 12px !important;
    position: static !important;
}

/* Display button - Blue */
.kashf-btn-display {
    background: linear-gradient(135deg, #0ea5e9, #0284c7) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3) !important;
}

.kashf-btn-display:hover {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9) !important;
    transform: translateY(-1px) !important;
}

/* Print buttons - Unified Teal/Cyan */
.kashf-btn-print {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.3) !important;
}

.kashf-btn-print:hover {
    background: linear-gradient(135deg, #2dd4bf, #14b8a6) !important;
    transform: translateY(-1px) !important;
}

/* Close button - Subtle Gray */
.kashf-btn-close {
    background: linear-gradient(135deg, #64748b, #475569) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(100, 116, 139, 0.3) !important;
    margin-right: auto !important;
    margin-left: 15px !important;
}

.kashf-btn-close:hover {
    background: linear-gradient(135deg, #94a3b8, #64748b) !important;
    transform: translateY(-1px) !important;
}

/* RTL support */
[dir="rtl"] .kashf-btn-close,
.dir-ar .kashf-btn-close {
    margin-left: auto !important;
    margin-right: 15px !important;
}

/* sec-3 inline layout fix */
.commonad_sold_body .dis-1 .sec-3.row {
    flex-wrap: nowrap !important;
}

.commonad_sold_body .dis-1 .sec-3 .col-md-2 {
    flex: 0 0 auto !important;
}

.commonad_sold_body .dis-1 .sec-3 .col-md-2 input[type="time"] {
    width: 90px !important;
}

/* sec-4 action buttons */
.commonad_sold_body .dis-1 .sec-4 button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px;
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    border: none !important;
    border-radius: 4px !important;
    color: #ffffff !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.commonad_sold_body .dis-1 .sec-4 button:hover {
    background: linear-gradient(135deg, #0e7490, #0c6478) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
}

.commonad_sold_body .dis-1 .sec-4 button i {
    font-size: 12px;
}

/* Balance check button */
.commonad_sold_body .dis-1 .sec-4 .raseed-check-display-fatoorah {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.commonad_sold_body .dis-1 .sec-4 .raseed-check-display-fatoorah:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
}

.modal-body .input_test,
.modal-body .form-control,
.modal-body input[type="text"],
.modal-body select {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.modal-body .input_test:focus,
.modal-body .form-control:focus,
.modal-body input[type="text"]:focus,
.modal-body select:focus {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 160, 176, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.15);
    outline: none;
}

.modal .nav-tabs {
    border-bottom: 1px solid rgba(0, 160, 176, 0.2);
}

.modal .nav-tabs .nav-link {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 10px 10px 0 0;
    color: #0a1e3c;
    margin-right: 2px;
    transition: all 0.2s ease;
}

.modal .nav-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 160, 176, 0.4);
}

.modal .nav-tabs .nav-link.active {
    background: rgba(0, 160, 176, 0.15);
    border-color: rgba(0, 160, 176, 0.4);
    color: #0a1e3c;
    font-weight: 600;
}

.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    color: black;
}

.cont {
    padding: 30px 42px;
    display: grid;
}

.conta {
    padding: 30px 42px;
    display: grid;
}

.conta h6 {
    margin-bottom: 26px;
    text-decoration: underline;
}

.conta .level span {
    width: 43%;
}

.conta .level input {
    width: 15% !important;
}

.cont h6 {
    margin-bottom: 26px;
    text-decoration: underline;
}

.but {
    margin-right: 2%;
}

.level {
    display: inline-flex;
}

.level input {
    width: 8% !important;
    margin-bottom: 6px;
}

.level span {
    width: 16%;
}

.modal-close {
    position: absolute;
}

.modal-close i {
    color: red
}

.modal-close:focus {
    outline: none;
}

.modal-header .title-header {
    margin: 0 auto;
    font-size: 18px
}



/* Label/input positioning removed - using flexbox layout instead */

.modal-input-form {
    margin-bottom: 5px
}

.modal-body .new-section {
    margin-top: 30px
}

.modal-body table {
    width: 100%
}



.newtabs {
    padding: 0;
}


.newtabs .nav-item {
    margin-bottom: -1px;
    width: auto;
    text-align: center;
}

.coin {
    display: inline-grid;
    margin-top: 26%;
}

.coin button {
    margin-bottom: 10px;
}

.coinnm {
    border: 1px solid #000;
    background: #ffffff !important;
}

.coin_sy input {
    width: 20%;
    margin-right: 16px;
    margin-bottom: 5px;
    margin-top: 9px;
}

.side {
    position: absolute;
    bottom: -10px;
    right: 18px;
}

.two_buttons {
    position: relative;
    top: 29px;
    margin-bottom: 18px;
}

.users label {
    width: auto;
}

.users input {
    width: 87%;
}

.users {
    width: 100%;
}

.out {
    margin-left: 0%;
}

@media(min-width:768px) {
    .out {
        margin-left: 30%;
    }
}

.but11 button {
    font-size: 16px;
}

.showme {
    display: none;
}

.js-message {
    z-index: 999999999;
    text-align: right;
    max-width: 800px;
    margin: 0 auto
}

.js-message .close {
    float: left
}

.none,
.hide-not-tahweel {
    display: none !important;
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
    color: #000;
}


/* By Mohamed */

/* ============================================
   REPORTS MODAL - Liquid Glass RTL Design
   ============================================ */

/* Reports Modal - Wide dialog with proper scrolling */
#reports-modal .modal-dialog {
    max-width: 1600px;
    width: 95%;
    margin: 1rem auto;
}

#reports-modal .modal-content {
    max-height: 90vh;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(15, 45, 75, 0.95), rgba(10, 35, 60, 0.98));
    border: 1px solid rgba(0, 160, 176, 0.3);
    width: 100%;
    max-width: 100%;
}

#reports-modal .modal-body.set-public-body {
    overflow-y: auto;
    overflow-x: hidden !important;
    max-height: calc(90vh - 50px);
    padding: 8px;
    background: linear-gradient(180deg, rgba(15, 45, 75, 0.92), rgba(10, 35, 60, 0.95));
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Reports Modal Main Container */
#reports-modal .reports-main-container {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* Reports Modal Layout Row */
#reports-modal .reports-layout-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Reports Content Column */
#reports-modal .reports-content-col {
    flex: 1 1 0;
    max-width: calc(100% - 72px) !important; /* Account for sidebar + gap */
    min-width: 0 !important;
    background: transparent;
    padding: 0;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* Global overflow containment for all elements inside reports modal */
#reports-modal .reports-content-col * {
    max-width: 100%;
}

#reports-modal .reports-content-col table {
    max-width: none; /* Tables can be wider and scroll */
}

/* Reports Export Sidebar */
#reports-modal .reports-export-sidebar {
    flex: 0 0 64px;
    max-width: 64px;
    min-width: 64px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 4px;
    background: linear-gradient(145deg, rgba(0, 80, 100, 0.4), rgba(0, 60, 80, 0.5));
    border-radius: 10px;
    border: 1px solid rgba(0, 160, 176, 0.25);
}

.reports-export-sidebar .export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reports-export-sidebar .export-btn:hover {
    background: rgba(0, 160, 176, 0.4);
    transform: translateY(-1px);
}

.reports-export-sidebar .export-btn i {
    font-size: 18px;
}

/* Export button icon colors */
.export-btn-excel i { color: #4ade80; }
.export-btn-word i { color: #60a5fa; }
.export-btn-pdf i { color: #f87171; }
.export-btn-preview i,
.export-btn-print i { color: #60a5fa; }

.export-icon-img {
    width: 14px;
    height: 18px;
    object-fit: contain;
}

.reports-export-sidebar .export-btn-display {
    width: auto;
    padding: 6px 12px;
    font-weight: 600;
    background: linear-gradient(145deg, rgba(0, 165, 182, 0.8), rgba(0, 130, 148, 0.9));
}

/* Reports Glass Tabs */
.reports-glass-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
    margin-bottom: 8px;
    background: linear-gradient(145deg, rgba(0, 80, 100, 0.5), rgba(0, 60, 80, 0.6));
    border-radius: 10px;
    border: 1px solid rgba(0, 160, 176, 0.25);
    list-style: none;
    direction: rtl;
}

.reports-glass-tabs .nav-item {
    margin: 0;
}

.reports-glass-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.reports-glass-tabs .nav-link:hover {
    background: rgba(0, 160, 176, 0.35);
    color: #fff;
}

.reports-glass-tabs .nav-link.active {
    background: linear-gradient(145deg, rgba(0, 165, 182, 0.8), rgba(0, 130, 148, 0.9));
    border-color: rgba(0, 180, 200, 0.5);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 140, 160, 0.3);
}

/* Reports Tab Content */
#reports-modal .reports-tab-content {
    background: linear-gradient(145deg, rgba(0, 60, 80, 0.4), rgba(0, 45, 65, 0.5));
    border-radius: 8px;
    border: 1px solid rgba(0, 160, 176, 0.2);
    padding: 8px;
    margin-bottom: 6px;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible;
    box-sizing: border-box;
    width: 100%;
}

#reports-modal .reports-tab-content .tab-pane {
    direction: rtl;
    text-align: right;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box;
    width: 100%;
}

/* Reports Glass Table */
#reports-modal .reports-glass-table-container {
    overflow-x: auto;
    overflow-y: scroll !important;
    max-height: 200px;
    border-radius: 6px;
    border: 1px solid rgba(0, 160, 176, 0.35);
    background: rgba(0, 40, 60, 0.6);
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    scrollbar-width: auto;
    scrollbar-color: rgba(0, 180, 200, 0.7) rgba(0, 40, 70, 0.5);
}

/* Scrollbar styling for table containers */
#reports-modal .reports-glass-table-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    display: block;
}

#reports-modal .reports-glass-table-container::-webkit-scrollbar-track {
    background: rgba(0, 40, 70, 0.6);
    border-radius: 5px;
    border: 1px solid rgba(0, 160, 176, 0.2);
}

#reports-modal .reports-glass-table-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(0, 180, 200, 0.8), rgba(0, 140, 160, 0.9));
    border-radius: 5px;
    border: 1px solid rgba(0, 200, 220, 0.5);
    min-height: 30px;
}

#reports-modal .reports-glass-table-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(0, 200, 220, 0.95), rgba(0, 160, 180, 1));
}

/* Hidden condition cells (date/month pickers) */
.report-condition-hidden {
    display: none !important;
}

.reports-glass-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
    text-align: right;
}

.reports-glass-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.reports-glass-table th {
    background: linear-gradient(145deg, #006070, #004d5c) !important;
    color: #ffffff !important;
    padding: 6px 8px !important;
    font-weight: 600;
    border: 1px solid rgba(0, 180, 200, 0.5) !important;
    white-space: nowrap;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.reports-glass-table td {
    background: rgba(0, 50, 70, 0.7) !important;
    padding: 4px 6px !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    vertical-align: middle;
    color: #ffffff !important;
}

/* Override modal-body td rules for reports-glass-table */
#reports-modal .reports-glass-table td {
    background: rgba(0, 50, 70, 0.7) !important;
    padding: 4px 6px !important;
    padding-right: 6px !important;
    border: 1px solid rgba(0, 160, 176, 0.3) !important;
    color: #ffffff !important;
}

.reports-glass-table tr:hover td {
    background: rgba(0, 120, 140, 0.4);
}

.reports-glass-table select,
.reports-glass-table input[type="text"],
.reports-glass-table input[type="number"] {
    width: 100%;
    padding: 4px 8px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 160, 176, 0.5) !important;
    border-radius: 4px;
    color: #1a3a4a !important;
    outline: none;
}

/* Override #reports-modal select/input rules */
#reports-modal .reports-glass-table select,
#reports-modal .reports-glass-table input[type="text"],
#reports-modal .reports-glass-table input[type="number"] {
    background: #ffffff !important;
    color: #1a3a4a !important;
    border: 1px solid rgba(0, 160, 176, 0.5) !important;
}

.reports-glass-table select option {
    background: #ffffff !important;
    color: #1a3a4a !important;
    padding: 6px 8px;
}

.reports-glass-table select:focus,
.reports-glass-table input:focus {
    border-color: rgba(0, 200, 220, 0.6);
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.15);
}

.reports-glass-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: rgba(0, 160, 176, 0.8);
}

/* Condition table specific - compact columns */
#report-conditions th:nth-child(2),
#report-conditions th:nth-child(6),
#report-conditions td:nth-child(2),
#report-conditions td:nth-child(7) {
    width: 40px;
    text-align: center;
}

#report-conditions th:nth-child(5),
#report-conditions td:nth-child(6) {
    width: 70px;
}

/* Reports Conditions Tab Grid */
#reports-modal .reports-conditions-grid {
    display: grid;
    grid-template-columns: 7fr 3fr 2fr;
    gap: 8px;
    direction: rtl;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#reports-modal .reports-conditions-grid > div {
    min-width: 0 !important;
    overflow: hidden;
}

/* Reports Content Tab Grid */
#reports-modal .reports-content-grid {
    display: grid;
    grid-template-columns: 3fr auto 3fr 3fr 2fr;
    gap: 8px;
    direction: rtl;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

#reports-modal .reports-content-grid > div {
    min-width: 0 !important;
    overflow: hidden;
}

@media (max-width: 1200px) {
    #reports-modal .reports-conditions-grid {
        grid-template-columns: 1fr;
    }

    #reports-modal .reports-content-grid {
        grid-template-columns: 1fr;
    }
}

/* Reports Form Section - Light Theme */
.reports-form-section {
    background: linear-gradient(145deg, #f0f7fa 0%, #fff 100%);
    border-radius: 8px;
    border: 1px solid rgba(0, 160, 176, 0.3);
    padding: 8px;
}

.reports-form-section-title {
    color: #1a3a4a;
    font-weight: 600;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0, 160, 176, 0.25);
    text-align: right;
}

/* Reports Glass Checkbox/Radio - Light Theme */
.reports-glass-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin-bottom: 4px;
    background: #fff;
    border: 1px solid rgba(0, 160, 176, 0.2);
    border-radius: 4px;
    cursor: pointer;
    direction: rtl;
    transition: background 0.2s ease;
}

.reports-glass-check:hover {
    background: #e8f4f8;
}

.reports-glass-check label {
    color: #1a3a4a;
    cursor: pointer;
    margin: 0;
    flex: 1;
}

.reports-glass-check input[type="checkbox"],
.reports-glass-check input[type="radio"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #00a0b0;
}

.reports-glass-check input[type="number"] {
    width: 60px;
    padding: 2px 6px;
    background: #fff;
    border: 1px solid #00a0b0;
    border-radius: 4px;
    color: #1a3a4a;
}

/* ============================================
   REPORTS ARROWS - Transfer Buttons (RTL Ready)
   ============================================ */

.reports-arrows-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    flex-shrink: 0;
}

/* Arrow button base styles */
.arrow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

.arrow-btn:hover {
    background: rgba(0, 0, 0, 0.18);
    color: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.arrow-btn:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.25);
}

.arrow-btn:focus {
    outline: 2px solid rgba(0, 160, 176, 0.5);
    outline-offset: 1px;
}

.arrow-btn i {
    font-size: 12px;
    line-height: 1;
}

/* Double arrow buttons (move all) */
.arrow-btn-double {
    height: 26px;
}

.arrow-btn-double i {
    font-size: 11px;
}

/* RTL: Icons already point correct direction for RTL layout */
[dir="rtl"] .reports-arrows-col,
html[lang="ar"] .reports-arrows-col {
    /* No changes needed - vertical layout works same in RTL */
}

/* Legacy support for old .btn class */
.reports-arrows-col .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
    font-weight: bold;
}

.reports-arrows-col .btn:hover {
    background: rgba(0, 0, 0, 0.18);
    color: rgba(0, 0, 0, 0.8);
}

/* Reports Field Select Box - Light Theme */
.reports-field-select-box {
    position: relative;
}

.reports-field-select-box select[multiple] {
    width: 100%;
    height: 120px;
    padding: 2px;
    background: #fff;
    border: 1px solid #00a0b0;
    border-radius: 6px;
    color: #1a3a4a;
}

.reports-field-select-box select[multiple] option {
    padding: 3px 6px;
    background: #fff;
    color: #1a3a4a;
    border-radius: 3px;
    margin: 1px 0;
}

.reports-field-select-box select[multiple] option:checked {
    background: #00a0b0;
    color: #fff;
}

.reports-field-search {
    margin-top: 4px;
    padding: 4px 8px;
    width: 100%;
    background: #fff;
    border: 1px solid #00a0b0;
    border-radius: 4px;
    color: #1a3a4a;
}

.reports-field-search::placeholder {
    color: #8a9aa4;
}

/* Reports Textarea Section */
.reports-textarea-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.reports-glass-textarea {
    width: 100%;
    min-height: 100px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 8px;
    color: #fff;
    resize: vertical;
}

/* ============================================
   REPORTS NAME BAR - Refactored (RTL Ready)
   ============================================ */

/* ============================================
   REPORTS NAME BAR - Compact Single-Row Toolbar
   ============================================ */
#reports-modal .reports-name-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    margin: 4px 0;
    background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
    border-radius: 5px;
    border: 1px solid rgba(0, 160, 176, 0.35);
    direction: rtl;
    min-height: 34px;
}

/* Report Selector */
.reports-name-bar #reports_types {
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 280px;
    height: 26px;
    padding: 0 6px;
    background: #fff;
    border: 1px solid rgba(0, 140, 160, 0.45);
    border-radius: 4px;
    color: #1a3a4a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.reports-name-bar #reports_types:focus {
    border-color: #00a0b0;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.18);
}

/* Searchable Reports Dropdown — replaces the native <select> visually.
   The native select is kept in the DOM (visually hidden) so existing JS
   that reads/writes $('#reports_types').val() continues to work. */
.reports-name-bar .rt-shell {
    position: relative;
    flex: 1 1 auto;
    min-width: 120px;
    max-width: 280px;
}
.reports-name-bar .rt-shell #reports_types {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    min-width: 0;
    max-width: none;
    flex: none;
    padding: 0;
    border: 0;
    background: transparent;
}
.reports-name-bar .rt-shell.rt-hidden .rt-trigger,
.reports-name-bar .rt-shell.rt-hidden .rt-panel {
    display: none !important;
}
.reports-name-bar .rt-trigger {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    font-size: 18px;
    font-weight: 600;
    color: #1a3a4a;
    background: #fff;
    border: 1px solid rgba(0, 140, 160, 0.45);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.reports-name-bar .rt-trigger:hover {
    border-color: #00a0b0;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.12);
}
.reports-name-bar .rt-label {
    flex: 1;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reports-name-bar .rt-label i {
    color: #00a0b0;
    margin-left: 8px;
    font-size: 16px;
}
.reports-name-bar .rt-count {
    font-size: 15px;
    color: #64748b;
    background: #e6edf5;
    border-radius: 12px;
    padding: 2px 10px;
    min-width: 30px;
    text-align: center;
    font-weight: 600;
}
.reports-name-bar .rt-chevron {
    font-size: 15px;
    color: #64748b;
    transition: transform .15s;
}
.reports-name-bar .rt-shell.rt-open .rt-chevron {
    transform: rotate(180deg);
}

/* Panel is teleported to <body> on open to escape modal overflow/stacking,
   so these rules MUST NOT be scoped to .reports-name-bar. */
.rt-panel {
    display: none;
    position: fixed;
    z-index: 1060;
    background: #fff;
    border: 1px solid rgba(0, 140, 160, 0.35);
    border-radius: 8px;
    box-shadow: 0 14px 32px rgba(10, 40, 60, 0.22);
    padding: 8px;
    direction: rtl;
}
.rt-search-wrap {
    position: relative;
    margin-bottom: 6px;
}
.rt-search-wrap > i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #94a3b8;
    pointer-events: none;
}
.rt-search-input {
    width: 100%;
    font-size: 18px;
    padding: 9px 32px 9px 10px;
    border: 1px solid #d0dbe5;
    border-radius: 6px;
    outline: none;
    background: #f9fbfd;
}
.rt-search-input:focus {
    border-color: #00a0b0;
    background: #fff;
}
.rt-list {
    max-height: 420px;
    overflow-y: auto;
    padding-left: 2px;
}
.rt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 6px;
    margin-bottom: 2px;
    color: #1a3a4a;
}
.rt-row > i {
    font-size: 16px;
    color: #00a0b0;
}
.rt-row-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rt-row:hover {
    background: #e8f4f8;
}
.rt-row.rt-active,
.rt-row.rt-active:hover {
    background: #00a0b0;
    color: #fff;
    font-weight: 700;
}
.rt-row.rt-active > i {
    color: #fff;
}
.rt-drag-handle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: #94a3b8;
    cursor: grab;
    border-radius: 4px;
    user-select: none;
}
.rt-drag-handle:hover {
    background: rgba(0, 160, 176, 0.12);
    color: #00a0b0;
}
.rt-row.rt-active .rt-drag-handle {
    color: rgba(255, 255, 255, 0.85);
}
.rt-row.rt-active .rt-drag-handle:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.rt-row.rt-dragging {
    opacity: 0.45;
}
.rt-row.rt-dragging .rt-drag-handle {
    cursor: grabbing;
}
.rt-empty {
    font-size: 16px;
    color: #94a3b8;
    display: block;
    padding: 12px;
    text-align: center;
}
.rt-list::-webkit-scrollbar {
    width: 6px;
}
.rt-list::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 3px;
}

/* Inline Rename Group */
.reports-name-bar .report-rename-group {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 0;
}
.reports-name-bar .report-rename-group input {
    flex: 1;
    min-width: 80px;
    height: 26px;
    padding: 0 6px;
    background: #fff;
    border: 1px solid #3b82f6;
    border-radius: 4px;
    color: #1a3a4a;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* Action Buttons Container */
.reports-name-bar .rbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* Separator */
.reports-name-bar .rbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(0, 140, 160, 0.3);
    margin: 0 2px;
}

/* Shared Button Base */
.reports-name-bar .rbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.12s ease;
    padding: 0;
    flex-shrink: 0;
}
.reports-name-bar .rbar-btn i { font-size: 14px; }
.reports-name-bar .rbar-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13);
}
.reports-name-bar .rbar-btn:active { transform: translateY(0); }

/* Button Color Variants */
.rbar-btn-edit { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; }
.rbar-btn-edit:hover { background: linear-gradient(135deg, #d97706, #b45309); }

.rbar-btn-save { background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff; }
.rbar-btn-save:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }

.rbar-btn-cancel { background: linear-gradient(135deg, #6b7280, #4b5563); color: #fff; }
.rbar-btn-cancel:hover { background: linear-gradient(135deg, #4b5563, #374151); }

.rbar-btn-new { background: linear-gradient(135deg, #10b981, #059669); color: #fff; }
.rbar-btn-new:hover { background: linear-gradient(135deg, #059669, #047857); }

.rbar-btn-delete { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.rbar-btn-delete:hover { background: linear-gradient(135deg, #dc2626, #b91c1c); }

.rbar-btn-print { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
.rbar-btn-print:hover { background: linear-gradient(135deg, #7c3aed, #6d28d9); }

.rbar-btn-share { background: linear-gradient(135deg, #06b6d4, #0891b2); color: #fff; }
.rbar-btn-share:hover { background: linear-gradient(135deg, #0891b2, #0e7490); }

#reports-modal .reports-name-bar .rbar-btn.rbar-btn-whatsapp {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    min-height: 28px;
    max-width: 28px;
    max-height: 28px;
    padding: 0 !important;
    background: linear-gradient(135deg, #25d366, #128C7E) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    font-size: inherit;
    font-weight: normal;
    line-height: 1;
}
#reports-modal .reports-name-bar .rbar-btn.rbar-btn-whatsapp:hover {
    background: linear-gradient(135deg, #2ee673, #25d366) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4) !important;
}
#reports-modal .reports-name-bar .rbar-btn.rbar-btn-whatsapp i {
    font-size: 14px;
    line-height: 1;
    display: inline-flex;
}

/* Options Group */
#reports-modal .reports-name-bar .rbar-options {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    margin-inline-start: auto;
    padding-inline-start: 8px;
    border-inline-start: 1px solid rgba(0, 140, 160, 0.25);
    height: 28px;
}

/* Checkbox Label */
#reports-modal .reports-name-bar .rbar-check {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    background: rgba(0, 140, 160, 0.1);
    border: 1px solid rgba(0, 140, 160, 0.25);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    height: 28px;
    box-sizing: border-box;
    margin: 0;
}
#reports-modal .reports-name-bar .rbar-check:hover { background: rgba(0, 140, 160, 0.18); }
#reports-modal .reports-name-bar .rbar-check span {
    color: #1a3a4a;
    font-weight: 500;
    white-space: nowrap;
}
#reports-modal .reports-name-bar .rbar-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #00a0b0;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Filter Select */
#reports-modal .reports-name-bar .rbar-select {
    height: 28px;
    padding: 0 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 140, 160, 0.5);
    border-radius: 4px;
    color: #1a3a4a;
    outline: none;
    min-width: 140px;
    max-width: 220px;
    transition: border-color 0.15s, box-shadow 0.15s;
    vertical-align: middle;
    box-sizing: border-box;
}
#reports-modal .reports-name-bar .rbar-select:focus {
    border-color: #00a0b0;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.2);
}

/* Reports Rows Count Bar */
#reports-modal .reports-rows-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    background: linear-gradient(145deg, rgba(0, 140, 120, 0.5), rgba(0, 120, 100, 0.6));
    border-radius: 6px;
    border: 1px solid rgba(0, 180, 160, 0.3);
    direction: rtl;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.reports-rows-bar strong {
    color: #fff;
    font-weight: 600;
}

.reports-rows-bar input[type="number"] {
    width: 80px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    text-align: center;
}

.reports-rows-bar .hint-text {
    color: rgba(255, 255, 255, 0.6);
}

/* Reports Results Table */
#reports-modal .reports-results-container {
    margin-top: 6px;
    border-radius: 8px;
    overflow: hidden !important;
    border: 1px solid rgba(0, 160, 176, 0.3);
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
}

#reports-modal .reports-results-scroll {
    max-height: 320px;
    overflow: auto !important;
    background: #f8fcfd;
    border: 1px solid rgba(0, 160, 176, 0.4);
    border-radius: 8px;
}

#reports-modal .reports-results-table,
#reports-modal #table_display {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    direction: rtl;
}

.reports-results-table th,
.reports-results-table thead th {
    background: #005a6e !important;
    color: #fff !important;
    padding: 6px 8px !important;
    font-weight: 600;
    border: 1px solid #007a8e !important;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.reports-results-table th div,
.reports-results-table thead th div {
    padding: 0 !important;
    white-space: nowrap;
}

.reports-results-table td {
    padding: 5px 8px !important;
    border: 1px solid rgba(0, 160, 176, 0.3);
    color: #1a2a3a;
    white-space: nowrap;
}

.reports-results-table td div {
    padding: 0 !important;
    white-space: nowrap;
}

.reports-results-table tbody tr:nth-child(odd) td {
    background: #e8f4f8;
}

.reports-results-table tbody tr:nth-child(even) td {
    background: #f5fafc;
}

.reports-results-table tr:hover td {
    background: #d0e8f0 !important;
}

.reports-results-table tfoot td {
    background: #00697a !important;
    color: #fff !important;
    font-weight: 700;
    border: 1px solid #008a9e !important;
    position: sticky;
    bottom: 0;
}

/* Override any remaining inline styles */
.reports-results-table td[style],
.reports-results-table th[style] {
    background: inherit !important;
}

.reports-results-table td div[style] {
    padding: 0 !important;
    white-space: nowrap !important;
}

/* Reports Pagination */
.reports-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    direction: rtl;
}

.reports-pagination .page-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: linear-gradient(145deg, rgba(0, 130, 150, 0.7), rgba(0, 100, 120, 0.8));
    border: 1px solid rgba(0, 160, 176, 0.4);
    border-radius: 6px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.reports-pagination .page-btn:hover {
    background: linear-gradient(145deg, rgba(0, 160, 180, 0.85), rgba(0, 130, 150, 0.9));
}

/* Report Table Scroll Container */
#reports-modal .report-table-wrapper {
    padding: 0 !important;
}

#reports-modal .report-table-scroll-container {
    display: block;
    width: 100%;
    max-height: 320px;
    overflow: auto !important;
    border: 1px solid rgba(0, 160, 176, 0.4);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

#reports-modal .report-table-scroll-container #table_display,
#reports-modal .reports-results-scroll #table_display {
    min-width: 100%;
    width: max-content;
    table-layout: auto;
}

/* Reports Look Tab */
.reports-look-grid {
    display: grid;
    grid-template-columns: 2fr 4fr 2fr;
    gap: 12px;
}

.reports-look-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.reports-look-field label {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.reports-look-field input[type="number"],
.reports-look-field input[type="file"] {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    color: #fff;
}

/* ============================================
   REPORTS ZATCA SECTION - Refactored (RTL Ready)
   ============================================ */

.reports-zatca-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    direction: rtl;
    padding: 8px;
    background: linear-gradient(135deg, #f0f7fa 0%, #e8f4f8 100%);
    border-radius: 6px;
    border: 1px solid rgba(0, 160, 176, 0.35);
}

.reports-zatca-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 auto;
    min-width: 120px;
}

.reports-zatca-field-btn {
    flex: 0 0 auto;
    min-width: auto;
}

.reports-zatca-field label {
    color: #1a3a4a;
    font-weight: 600;
    white-space: nowrap;
}

.reports-zatca-field select,
.reports-zatca-field input {
    height: 32px;
    padding: 0 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 140, 160, 0.5);
    border-radius: 4px;
    color: #1a3a4a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.reports-zatca-field select:focus,
.reports-zatca-field input:focus {
    border-color: #00a0b0;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.2);
}

.reports-zatca-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    border: none;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.reports-zatca-submit:hover {
    background: linear-gradient(135deg, #0e7490, #0c6478);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(8, 145, 178, 0.3);
}

.reports-zatca-submit i {
    font-size: 13px;
}

/* No permission message */
.reports-zatca-no-permission {
    color: #64748b;
    text-align: center;
    padding: 16px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 6px;
    margin: 8px 0;
}

/* ZATCA Progress Bar */
.zatca-progress-container {
    margin-top: 10px;
    padding: 12px;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f7fa 100%);
    border-radius: 6px;
    border: 1px solid rgba(0, 160, 176, 0.25);
    direction: rtl;
}

.zatca-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.zatca-progress-title {
    font-weight: 600;
    color: #0e7490;
    font-size: 13px;
}

.zatca-progress-count {
    font-weight: 700;
    color: #1a3a4a;
    font-size: 13px;
    font-family: monospace;
}

.zatca-progress-bar-track {
    width: 100%;
    height: 18px;
    background: #e2e8f0;
    border-radius: 9px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.zatca-progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0891b2, #06b6d4, #22d3ee);
    border-radius: 9px;
    transition: width 0.4s ease;
    position: relative;
    min-width: 0;
}

.zatca-progress-bar-fill.zatca-progress-complete {
    background: linear-gradient(90deg, #059669, #10b981, #34d399);
}

.zatca-progress-bar-fill.zatca-progress-has-errors {
    background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
}

.zatca-progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    animation: zatca-shimmer 2s infinite;
}

.zatca-progress-bar-fill.zatca-progress-complete::after {
    animation: none;
}

@keyframes zatca-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.zatca-progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.zatca-progress-percent {
    font-weight: 700;
    color: #0e7490;
    font-size: 14px;
    font-family: monospace;
}

.zatca-progress-status {
    font-size: 12px;
    color: #64748b;
}

.zatca-progress-result {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.6;
    direction: rtl;
}

.zatca-progress-result.zatca-result-success {
    background: rgba(5, 150, 105, 0.08);
    border: 1px solid rgba(5, 150, 105, 0.3);
    color: #065f46;
}

.zatca-progress-result.zatca-result-warning {
    background: rgba(217, 119, 6, 0.08);
    border: 1px solid rgba(217, 119, 6, 0.3);
    color: #92400e;
}

.zatca-progress-result.zatca-result-error {
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #991b1b;
}

/* Datepicker container - must be outside scrollable area */
#reports-zatca-date-picker {
    position: relative;
    z-index: 99999;
}

#reports-zatca-date-picker .datepicker {
    z-index: 99999 !important;
}

/* Ensure datepickers in reports modal show above everything */
#reports-modal .datepicker {
    z-index: 99999 !important;
}

/* Reports Modal Footer */
#reports-modal .reports-modal-footer {
    padding: 6px 10px;
    background: transparent;
    border: none;
}

#reports-modal .modal-body input,
#reports-modal .modal-body select,
#reports-modal .modal-body textarea {
    width: 100%;
}

#reports-modal table {
    direction: rtl;
}

#reports-modal button,
#reports-modal input,
#reports-modal optgroup,
#reports-modal select,
#reports-modal textarea {
    line-height: 20px;
    border-width: 1px;
}

/* Old #reports-modal .modal-header removed - uses x-modal-header component styling */

#reports-modal .modal-footer {
    background: var(--modal-footer-bg);
}

#reports-modal .modal-body,
#reports-modal .containner {
    margin: 0;
    padding: 0;
}

/* #reports-modal line-height removed */

#reports-modal .modal-body {
    font-size: 20px;
}

#reports-modal input[type=text] {
    height: 24px;
}

#reports-modal [class*=col] {
    padding: 0 5px !important;
}

#reports-modal .modal-body {
    background: var(--modal-body-bg);
}

#reports-modal .modal-body th {
    background: #fff;
    border-color: #b7b9bd;
}

#reports-modal select,
#reports-modal input,
#reports-modal .modal-body td {
    background: rgba(0, 160, 176, 0.4);
}

#reports-modal .container {
    padding: 0px;
}

#reports-modal .row {
    margin: 0px;
}


/* .modal .maximize position: absolute REMOVED - using flexbox layout in modal header */

button:focus {
    outline: initial;
}

button.maximize.modal-maximize:focus {
    outline: none;
}

#reports-modal .modal .close {
    text-shadow: initial;
}

/* col-md-11 and col-md-1 sizing handled in reports modal section above */

#reports-modal .modal-body td {
    padding-right: 0px;
    border-color: #b7b9bd;
}

#reports-modal .modal-footer {
    padding: 0;
    border: #79798c 2px solid;
}

#reports-modal .report-name {
    text-align: right;
    margin: 2px;
    border: 1px solid rgba(0, 160, 176, 0.4);
    border-radius: 8px;
    background-color: rgba(0, 160, 176, 0.25);
}

#reports-modal .report-name [class*=col] {
    padding: 3px !important;
}

#reports-modal .report-name input,
#reports-modal .report-name select {
    border: 1px solid rgba(255, 255, 255, 0.3);
    outline: none;
    background-color: rgba(0, 160, 176, 0.35);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    vertical-align: middle;
    max-height: 24px;
}

#reports-modal .report-name button {
    border: #fff 1px solid;
    outline: #cec9cb 1px solid;
    box-shadow: 0px 0px 1px 1px #000d82;
    vertical-align: middle;
}

#reports-modal .report-name i {
    vertical-align: middle;
}

#reports-modal i,
#reports-modal img {
    vertical-align: middle;
}

#reports-modal label {
    width: initial !important;
}

.export-button {
    text-align: center;
}

.export-button button {
    width: 23px;
    height: 23px;
}



/* Fix table head */

.tableFixHead {
    overflow-y: auto;
    height: 127px;
    overflow-x: hidden;
}

.tableFixHead th {
    position: sticky;
    top: 0;
}


/* Just common table stuff. */


/* width */

::-webkit-scrollbar {
    width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
    background: #f1f1f1;
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: #888;
}


/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.w3-blue,
.w3-hover-black:hover {
    position: relative;
    ;
    color: #fff !important;
    background-color: #000d82 !important;
    z-index: 1;
}

.w3-bar {
    width: 100%;
    overflow: hidden
}

.w3-center .w3-bar {
    display: inline-block;
    width: auto
}

.w3-bar .w3-bar-item {
    padding: 8px 16px;
    float: right;
    width: auto;
    border: none;
    display: block;
    outline: 0
}

.w3-bar .w3-dropdown-hover,
.w3-bar .w3-dropdown-click {
    position: static;
    float: left
}

.w3-bar .w3-button {
    background-color: #f0f0f0;
    color: black;
    white-space: normal;
    border: #fff 1px solid;
    outline: #cec9cb 1px solid;
    box-shadow: 0px 0px 1px 1px #000d82;
    padding: 0px 48px;
    margin: 0 0 0 4px;
    position: relative;
}

.w3-bar .w3-button.w3-red {
    box-shadow: 0px 0px 5px 0px #555 !important;
    margin-left: -1px !important;
    margin-right: -4px !important;
    z-index: 2 !important;
    background-color: #fff;
}

.w3-btn,
.w3-button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap
}

.subject-info-arrows input[type=button] {
    margin: 2px !important;
    padding: 0px;
    background-color: #e0e0e0 !important;
    border: #bdbdbd 1px solid;
    border-radius: 0;
    box-shadow: 0px 0px 1px 1px #c6c6c6;
    vertical-align: middle;
}

#reports-modal #reportCont input[type=radio],
#reports-modal #reportCont input[type=checkbox],
#reports-modal #reportLook input[type=checkbox],
#reports-modal #reportLook input[type=radio] {
    width: initial !important;
    float: right;
}

#reports-modal #reportLook input[type=file] {
    margin-right: 132px;
    width: 200px;
    float: right;
}

#reports-modal #reportLook label {
    margin-top: 5px;
}

#reports-modal input[type=number] {
    max-width: 50px;
    direction: rtl;
    text-align: center;
    float: right;
    margin-right: 55px;
    border: 0;
}

#table_display tr:nth-child(odd) td {
    background: #c2cdd8;
}

#table_display tr:nth-child(even) td {
    background: #FFF;
}


input::-webkit-inner-spin-button {
    opacity: 1;
}

.form-check {
    margin-top: 20px;
}

.form-check label {
    padding-right: 20px;
}

#reports-modal .modal-body #reportCont th,
#reports-modal .modal-body #reportAddress th {
    border: 0;
}

textarea {
    background-color: rgba(0, 160, 176, 0.25);
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
}

#reports-modal .modal-body #reportAddress td {
    border: #fff 3px solid;
    outline: #b7b9bd 1px solid;
}

#reports-modal .modal-body #reportAddress table {
    border-collapse: initial;
}


/* By Mohamed */

select:disabled {
    opacity: 1 !important;
    color: #000 !important;
}


/* ========================================================================================================================================

                                                        Start Sanad kabd

=========================================================================================================================================*/

.sanad_kabd_table,
.arsdt-elasnaf-table,
.sanad_sarf_table,
.eisal_tahsil_table,
.purchases_recieving_table,
.sales_table,
.convert_table,
.rased_efttahy_table,
.sales_back_table,
.buying-calibration-table,
.selling-calibration-table,
.accounts-connect-table,
.accounts-elkyood-table,
.purchases_back_table,
.myzan-table,
.ast3rad_table {
    width: 2152px;
    height: 450px;
    overflow-x: scroll;
    overflow-y: scroll;
    direction: ltr;
    border: 2px solid;
    padding: 0;
}



.ltr {
    direction: ltr;
}

.sanad_kabd_table table,
.sanad_sarf_table table,
.eisal_tahsil_table table,
.purchases_recieving_table table,
.rased_efttahy_table table,
.sales_table table,
.convert_table table,
.sales_back_table table,
.arsdt-elasnaf-table table,
.buying-calibration-table table,
.selling-calibration-table table,
.accounts-connect-table table,
.accounts-elkyood-table table,
.purchases_back_table table,
.ast3rad_table table {
    right: 20px;
    /*     width: 2018px;
    width: unset !important;*/
    direction: rtl;
    /* position: relative; */
}

.sanad_kabd_row1 div:nth-of-type(16),
.defaults {
    background-color: rgba(200, 210, 230, 0.6);
    margin-top: 15px;
    height: 40px;
    display: flex;
    align-items: center;
    border: solid 2px;
    border-left-color: white;
    border-top-color: white;
    border-right-color: #737379;
    border-bottom-color: #737379;
    user-select: none;
}


/* Edit hasabat  */

.sanad_kabd_row1 div:nth-of-type(16) ul,
.defaults ul {
    list-style: none;
    display: inline-flex;
    height: 12px;
    margin-right: 5%;
}


/* Edit hasabat  */

.sanad_kabd_row1 div:nth-of-type(16) ul li,
.defaults ul li {
    margin: 0px 8px;
}


/* Edit hasabat  */

.sanad_kabd_row1 div:nth-of-type(16) ul li img,
.defaults ul li img {
    width: 20px;
    cursor: pointer;
}


/* Edit hasabat  */

.sanad_kabd_row1 div:nth-of-type(18) label {
    width: 33.5%;
    text-align: left;
    margin-top: 3.5%;
}


/* Edit hasabat  */

.sanad_kabd_row1 div:nth-of-type(18) select {
    width: 70%;
    margin-right: 33%;
    margin-top: 15px;
    height: 33px;
}

.sanad_kabd_fotter {
    position: relative;
    top: 15px;
    width: 100%;
}


/* Edit hasabat  */

.sanad_kabd_fotter button {
    padding: 5px 21px !important;
    margin: 0.1rem;
}

.sanad_kabd_fotter button i {
    position: relative !important;
    right: 31% !important;
}

.sanad_kabd_fotter button:nth-of-type(8) {
    margin-right: 2%;
}

.sanad_kabd_fotter button:nth-of-type(2) {
    margin-right: 2%;
}

.sanad_kabd_fotter label {
    width: 90.4%;
    text-align: left;
    margin-top: .6%;
}

.sanad_kabd_fotter input {
    width: 9%;
    position: relative;
    right: 6%;
    border: solid 2px white;
    margin-bottom: 2px;
}


/* Edit hasabat new code */

.sanad_kabd_row1 div:nth-of-type(15) {
    width: 100%;
    height: 40px;
    background-color: rgba(180, 195, 210, 0.7);
    border-radius: 3px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    padding: 0 3px;
}

.sanad_kabd_row1 div:nth-of-type(15) div:nth-of-type(1) {
    width: 5%;
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.sanad_kabd_row1 div:nth-of-type(15) div:nth-of-type(1) button {
    width: 50%;
    background-color: #fff;
    border: none;
    border-bottom: 2px solid #a7a7a7;
    border-left: 2px solid #a7a7a7;
    display: flex;
    height: 30px;
    align-items: center;
}

.sanad_kabd_row1 div:nth-of-type(15) div:nth-of-type(2) {
    background-color: #9d9d9d;
    width: 89.8%;
    display: inline-flex;
    margin: 0 0.1%;
    padding: 0;
    height: 30px;
}

.sanad_kabd_row1 div:nth-of-type(15) div:nth-of-type(2) button {
    border-radius: 3px;
    border: 2px solid #919191;
    border-left: 2px solid #e3e3e3;
    background-image: linear-gradient(#dfdfdf, #a5a5a5);
    width: 10%;
}

.sanad_kabd_row1 div:nth-of-type(15) div:nth-of-type(3) {
    width: 5%;
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.sanad_kabd_row1 div:nth-of-type(15) div:nth-of-type(3) button {
    width: 50%;
    background-color: #fff;
    border: none;
    border-bottom: 2px solid #a7a7a7;
    border-right: 2px solid #a7a7a7;
    display: flex;
    height: 30px;
    align-items: center;
    margin: 0;
}

.sanad_kabd_row1 div:nth-of-type(15) div:nth-of-type(3) button:nth-last-of-type(2) {
    margin-right: 0px;
}


/* ========================================================================================================================================

                                                        End Sanad kabd

=========================================================================================================================================*/


/* ========================================================================================================================================

                                                        Start Sanad sarf

=========================================================================================================================================*/

.sanad_sarf_fotter {
    position: relative;
    top: 15px;
    width: 100%;
}

.sanad_sarf_fotter button {
    padding: 5px 21px !important;
    margin: 0px !important;
}

.sanad_sarf_fotter button i {
    position: relative !important;
    right: 31% !important;
}

.sanad_sarf_fotter button:nth-of-type(8) {
    margin-left: 4% !important;
}

.sanad_sarf_fotter label {
    width: 90.4%;
    text-align: left;
    margin-top: 1.1%;
}

.sanad_sarf_fotter input {
    width: 9%;
    position: relative;
    right: 11%;
    border: solid 2px white;
    margin-bottom: 2px;
}

.sanad_sarf_fotter button:nth-of-type(1) {
    margin-right: 4% !important;
}

.sanad_sarf_fotter img {
    position: relative;
    right: 6%;
    cursor: pointer;
}


/*.modal { overflow-y: hidden !important; }*/

.sanad_kabd_row1 div:nth-of-type(13) select {
    margin-bottom: unset;
}

.sanad_kabd_row1 div:nth-of-type(13) {
    margin-right: 40%;
    width: 60%;
    height: 33px;
    margin-bottom: 20px;
}

.ui-autocomplete {
    z-index: 9999999999999999999999;
}


/* ========================================================================================================================================

                                                        End Sanad sarf

=========================================================================================================================================*/


/*
.resize-div-sanad-kabd {
    resize: horizontal;
    overflow: hidden;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 1px solid black;
    display: block;
    direction: ltr
}
*/

/* Table resize divs - all tables */
.resize-div-sanad-kabd,
.resize-div-sanad-sarf,
.resize-div-eisal-tahsil,
.resize-div-accounts-elkyood,
.resize-div-sales,
.resize-div-purchases-recieving,
.resize-div-purchases-back,
.resize-div-sales-back,
.resize-div-accounts-connect,
.resize-div-ast3rad {
    margin: 0 auto;
    color: #ffffff;
    font-weight: 600;
}

.resize-div-sanad-kabd textarea,
.resize-div-sanad-sarf textarea,
.resize-div-eisal-tahsil textarea,
.resize-div-accounts-elkyood textarea,
.resize-div-sales textarea,
.resize-div-purchases-recieving textarea,
.resize-div-purchases-back textarea,
.resize-div-sales-back textarea,
.resize-div-accounts-connect textarea {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    text-align: center;
    font-weight: 600;
    resize: none;
    height: 20px !important;
    min-height: 20px !important;
    max-height: 20px !important;
    line-height: 20px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

/* Sanad table first column (empty) */
#sanad-kabd-table .sanad-th-empty,
#sanad-sarf-table .sanad-th-empty,
#eisal-tahsil-table .sanad-th-empty {
    background: #f8fafc !important;
    min-width: 24px;
    width: 24px;
}

.resize-div-purchases-recieving {
    /*    overflow: hidden*/
    margin: 0 auto;
}

.resize-div-rased-efttahy {
    /*    overflow: hidden*/
    margin: 0 auto;
}

.resize-div-sales {
    /*    overflow: hidden*/
    margin: 0 auto;
    position: relative;
}

/* Hide west (left) resize handle for sales - only allow east (right) resize */
.resize-div-sales .ui-resizable-w,
.resize-div-sales .ui-resizable-sw,
.resize-div-sales .ui-resizable-nw {
    display: none !important;
}

/* Resize handle indicator for sales table */
.resize-div-sales .ui-resizable-e {
    width: 8px !important;
    right: -4px !important;
    background: transparent;
    cursor: col-resize;
}

.resize-div-sales .ui-resizable-e::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.6) 20%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0.6) 80%, 
        transparent 100%);
    border-radius: 2px;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.resize-div-sales .ui-resizable-e:hover::before {
    opacity: 1;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.8) 20%, 
        rgba(255,255,255,1) 50%, 
        rgba(255,255,255,0.8) 80%, 
        transparent 100%);
}

.resize-div-convert {
    /*    overflow: hidden*/
    margin: 0 auto;
}

/* Convert table body inputs - width moved from inline styles */
#convert-table tbody td input,
#convert-table tbody td select {
    width: 100%;
}

/* Sanad Sarf resize styles - match sales table */
.resize-div-sanad-sarf {
    margin: 0 auto;
    position: relative;
}

.resize-div-sanad-sarf .ui-resizable-w,
.resize-div-sanad-sarf .ui-resizable-sw,
.resize-div-sanad-sarf .ui-resizable-nw {
    display: none !important;
}

.resize-div-sanad-sarf .ui-resizable-e {
    width: 8px !important;
    right: -4px !important;
    background: transparent;
    cursor: col-resize;
}

.resize-div-sanad-sarf .ui-resizable-e::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.6) 20%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0.6) 80%, 
        transparent 100%);
    border-radius: 2px;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.resize-div-sanad-sarf .ui-resizable-e:hover::before {
    opacity: 1;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.8) 20%, 
        rgba(255,255,255,1) 50%, 
        rgba(255,255,255,0.8) 80%, 
        transparent 100%);
}

/* Sanad Kabd resize styles - match sales table */
.resize-div-sanad-kabd {
    margin: 0 auto;
    position: relative;
}

.resize-div-sanad-kabd .ui-resizable-w,
.resize-div-sanad-kabd .ui-resizable-sw,
.resize-div-sanad-kabd .ui-resizable-nw {
    display: none !important;
}

.resize-div-sanad-kabd .ui-resizable-e {
    width: 8px !important;
    right: -4px !important;
    background: transparent;
    cursor: col-resize;
}

.resize-div-sanad-kabd .ui-resizable-e::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.6) 20%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0.6) 80%, 
        transparent 100%);
    border-radius: 2px;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.resize-div-sanad-kabd .ui-resizable-e:hover::before {
    opacity: 1;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.8) 20%, 
        rgba(255,255,255,1) 50%, 
        rgba(255,255,255,0.8) 80%, 
        transparent 100%);
}

/* Eisal Tahsil resize styles - match sanad-sarf table */
.resize-div-eisal-tahsil {
    margin: 0 auto;
    position: relative;
}

.resize-div-eisal-tahsil .ui-resizable-w,
.resize-div-eisal-tahsil .ui-resizable-sw,
.resize-div-eisal-tahsil .ui-resizable-nw {
    display: none !important;
}

.resize-div-eisal-tahsil .ui-resizable-e {
    width: 8px !important;
    right: -4px !important;
    background: transparent;
    cursor: col-resize;
}

.resize-div-eisal-tahsil .ui-resizable-e::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 16px;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.6) 20%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,0.6) 80%, 
        transparent 100%);
    border-radius: 2px;
    opacity: 0.7;
    transition: opacity 0.2s, background 0.2s;
}

.resize-div-eisal-tahsil .ui-resizable-e:hover::before {
    opacity: 1;
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255,255,255,0.8) 20%, 
        rgba(255,255,255,1) 50%, 
        rgba(255,255,255,0.8) 80%, 
        transparent 100%);
}

/* Tables - horizontal scroll support */
#sales-table,
#sanad-sarf-table,
#sanad-kabd-table,
#eisal-tahsil-table,
#purchases-recieving-table,
#purchases-back-table,
#sales-back-table,
#accounts-elkyood-table,
#accounts-connect-table,
#convert-table,
#rased-efttahy-table,
#ast3rad-table,
#arsdt-elasnaf-table {
    width: auto !important;
    min-width: max-content;
    table-layout: auto;
}

#kashf-hesab-table {
    width: max-content !important;
    min-width: 100%;
    table-layout: fixed;
}

#sales-table th,
#sales-table td,
#sanad-sarf-table th,
#sanad-sarf-table td,
#sanad-kabd-table th,
#sanad-kabd-table td,
#eisal-tahsil-table th,
#eisal-tahsil-table td,
#purchases-recieving-table th,
#purchases-recieving-table td,
#purchases-back-table th,
#purchases-back-table td,
#sales-back-table th,
#sales-back-table td,
#accounts-elkyood-table th,
#accounts-elkyood-table td,
#accounts-connect-table th,
#accounts-connect-table td,
#convert-table th,
#convert-table td,
#rased-efttahy-table th,
#rased-efttahy-table td,
#ast3rad-table th,
#ast3rad-table td,
#arsdt-elasnaf-table th,
#arsdt-elasnaf-table td {
    width: auto;
    min-width: min-content;
    white-space: nowrap;
}

#kashf-hesab-table th,
#kashf-hesab-table td {
    width: auto;
    min-width: 0;
    overflow: hidden;
}

#kashf-hesab-table th {
    white-space: nowrap;
    text-overflow: ellipsis;
}

#kashf-hesab-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#kashf-hesab-table td a {
    word-break: break-word;
    overflow-wrap: anywhere;
}

#ast3rad-table th,
#ast3rad-table td {
    width: auto;
    min-width: min-content;
    white-space: nowrap;
}

.sales_table,
.sanad_sarf_table,
.sanad_kabd_table,
.eisal_tahsil_table,
.purchases_recieving_table,
.purchases_back_table,
.sales_back_table,
.accounts_elkyood_table,
.accounts_connect_table,
.convert_table,
.rased_efttahy_table,
.kashf_hesab_table,
.ast3rad_table,
.arsdt-elasnaf-table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
}

#kashf-hasabat-table {
    overflow-x: auto;
    overflow-y: visible;
    width: 100%;
}

.resize-div-sales-back {
    /*    overflow: hidden*/
    margin: 0 auto;
}

.resize-div-convert-back {
    /*    overflow: hidden*/
    margin: 0 auto;
}

.resize-div-purchases-back {
    /*    overflow: hidden*/
    margin: 0 auto;
}

.hide {
    visibility: hidden !important;
}

.ui-icon,
.ui-widget-content .ui-icon {
    background-image: none;
}

.last-scroll {
    margin-right: auto !important;
}

.scroll-btn input {
    width: 100px;
    height: 26px;
    position: relative;
}

.scroll-btn:focus {
    outline: none;
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary:disabled i {
    color: #ab9999 !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ============================================
   INVOICE DATA TABLES - MOVED TO unified-table.css
   See: /css/components/unified-table.css
   ============================================ */

/* Account code and name inputs in sanad tables */
.sanad-sarf-account-code,
.sanad-sarf-account-name,
.sanad-kabd-account-code,
.sanad-kabd-account-name {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    color: #334155 !important;
    font-size: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 30px !important;
    height: auto !important;
}

/* Ensure account_guide_id and account-name cells have proper height */
.sanad-sarf-resize-account_guide_id,
.sanad-sarf-resize-account-name,
.sanad-kabd-resize-account_guide_id,
.sanad-kabd-resize-account-name {
    min-height: 30px !important;
    height: auto !important;
}

#sanad-kabd-table td input:focus,
#sanad-kabd-table td select:focus,
#sanad-sarf-table td input:focus,
#sanad-sarf-table td select:focus,
#eisal-tahsil-table td input:focus,
#eisal-tahsil-table td select:focus,
#sales-table td input:focus,
#sales-table td select:focus,
#sales-back-table td input:focus,
#sales-back-table td select:focus,
#purchases-recieving-table td input:focus,
#purchases-recieving-table td select:focus,
#purchases-back-table td input:focus,
#purchases-back-table td select:focus,
#convert-table td input:focus,
#convert-table td select:focus,
#convert-back-table td input:focus,
#convert-back-table td select:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
    outline: none !important;
}

th textarea:focus-visible {
    outline: none;
}

/* Sanad Sarf & Sanad Kabd - Select2 clear (X) button styling */
#sanad-sarf-table .select2-container--default .select2-selection--single .select2-selection__clear,
#sanad-kabd-table .select2-container--default .select2-selection--single .select2-selection__clear,
#eisal-tahsil-table .select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 4px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    float: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    z-index: 10;
}

#sanad-sarf-table .select2-container--default .select2-selection--single .select2-selection__clear span,
#sanad-kabd-table .select2-container--default .select2-selection--single .select2-selection__clear span,
#eisal-tahsil-table .select2-container--default .select2-selection--single .select2-selection__clear span {
    display: none;
}

#sanad-sarf-table .select2-container--default .select2-selection--single .select2-selection__clear::before,
#sanad-kabd-table .select2-container--default .select2-selection--single .select2-selection__clear::before,
#eisal-tahsil-table .select2-container--default .select2-selection--single .select2-selection__clear::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900;
    font-size: 10px;
    color: #ef4444;
    line-height: 1;
    pointer-events: none;
}

#sanad-sarf-table .select2-container--default .select2-selection--single .select2-selection__clear:hover,
#sanad-kabd-table .select2-container--default .select2-selection--single .select2-selection__clear:hover,
#eisal-tahsil-table .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    background: rgba(220, 53, 69, 0.15);
}

#sanad-sarf-table .select2-container--default .select2-selection--single .select2-selection__clear:hover::before,
#sanad-kabd-table .select2-container--default .select2-selection--single .select2-selection__clear:hover::before,
#eisal-tahsil-table .select2-container--default .select2-selection--single .select2-selection__clear:hover::before {
    color: #dc2626;
}

#sanad-sarf-table .select2-container--default .select2-selection--single .select2-selection__rendered,
#sanad-kabd-table .select2-container--default .select2-selection--single .select2-selection__rendered,
#eisal-tahsil-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 22px;
}

/* UI Resizable handles - ensure handles are above other elements */
.ui-resizable-handle {
    z-index: 100 !important;
}

/* Ensure resize handles in table headers are always accessible */
.resize-div-sanad-sarf .ui-resizable-handle,
.resize-div-sanad-kabd .ui-resizable-handle,
.resize-div-eisal-tahsil .ui-resizable-handle,
.resize-div-sales .ui-resizable-handle,
.resize-div-purchases-recieving .ui-resizable-handle,
.resize-div-purchases-back .ui-resizable-handle,
.resize-div-sales-back .ui-resizable-handle,
.resize-div-accounts-elkyood .ui-resizable-handle,
.resize-div-accounts-connect .ui-resizable-handle,
.resize-div-kashf-hesab .ui-resizable-handle,
.resize-div-ast3rad .ui-resizable-handle {
    z-index: 100 !important;
    cursor: e-resize;
}

/* Kashf Hesab resize divs - match sales structure */
.resize-div-kashf-hesab {
    margin: 0 auto;
    position: relative;
}

/* Resize handle indicator for kashf-hesab table */
.resize-div-kashf-hesab .ui-resizable-e {
    width: 8px !important;
    right: -4px !important;
    background: transparent;
    cursor: col-resize;
}

/* Only allow resize from the right side (like sales) */
.resize-div-kashf-hesab .ui-resizable-w,
.resize-div-kashf-hesab .ui-resizable-sw,
.resize-div-kashf-hesab .ui-resizable-nw {
    display: none !important;
}

.resize-div-kashf-hesab .ui-resizable-e::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(255, 255, 255, 0.6) 30%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.6) 70%,
        transparent 100%);
    border-radius: 2px;
    opacity: 0.8;
    transition: opacity 0.2s, background 0.2s;
}

.resize-div-kashf-hesab .ui-resizable-e:hover::before {
    opacity: 1;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 160, 176, 0.6) 30%,
        rgba(0, 160, 176, 0.9) 50%,
        rgba(0, 160, 176, 0.6) 70%,
        transparent 100%);
}


.check-control {
    height: 20px;
    width: 30px !important
}

.additional-info {
    background: #b6c7e3 !important;
    margin-top: 7px;
    padding: 15px;
}

.additional-label {
    width: 120px;
    display: inline-block;
    text-align: center;
}

.additional-info input {
    width: calc(100% - 123px);
    border: 1px solid gray;
    background: #adc6e4 !important;
}

.additional-info input:disabled {
    background: #adc6e4 !important;
}

.half-width {
    display: inline-block;
    width: 50%;
}

.quarter-width {
    display: inline-block;
    width: calc(33% - 6px);
}

.row-content {
    margin-bottom: 3px;
}

.ordering-container {
    width: 100%;
    height: 40px;
    background-color: rgba(180, 195, 210, 0.7);
    border-radius: 3px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    padding: 0 3px;
}

.btn-ordering-container {
    width: 5%;
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.scroll-btn-container {
    background-color: #9d9d9d;
    width: 89.8%;
    display: inline-flex;
    margin: 0 0.1%;
    padding: 0;
    height: 30px;
}

.scroll-btn {
    border-radius: 3px;
    border: 2px solid #919191;
    border-left: 2px solid #e3e3e3;
    background-image: linear-gradient(#dfdfdf, #a5a5a5);
    width: 10%;
}

.btn-ordering-container button {
    width: 50%;
    background-color: #fff;
    border: none;
    border-bottom: 2px solid #a7a7a7;
    border-left: 2px solid #a7a7a7;
    display: flex;
    height: 30px;
    align-items: center;
}

.buying-v2 input {
    margin-right: -27px;
    width: 137px !important;
}


/* Enhancment and resize for models */

/* Modal body padding moved to glass theme section */

#sales-modal select,
#sales-back-modal select,
#convert-modal select,
#convert-back-modal select,
#purchases-recieving-modal select,
#purchases-back-modal select {
    height: 35px !important;
}

#sales-modal .modal-dialog {
    margin: 0 auto;
}

#sales-modal .modal-body.sales_body {
    padding: 5px 10px !important;
    margin: 0 !important;
}

#sales-modal .content-tab {
    padding: 5px !important;
}

#convert-modal .modal-dialog {
    margin: 0 auto;
}

#rased_aftata7e .modal-dialog {
    margin: 0 auto;
}

#rased_aftata7e .sanad_sarf_table {
    height: 230px !important;
}

#accounts-elkyood-modal .accounts-elkyood-table {
    height: 400px;
}

.modal-dialog {
    margin: 0 auto !important;
}

.kashf-7sab-body {
    margin: initial !important;
}

#purchases-recieving-modal .sec4 .icon img,
#sales-modal .sec4 .icon img,
#convert-modal .sec4 .icon img,

#purchases-back-modal .sec4 .icon img,
#sales-back-modal .sec4 .icon img {
    height: 20px !important;
}

#convert-back-modal .sec4 .icon img {
    height: 20px !important;
}


#purchases-recieving-modal .purchases_recieving_table,
#sales-modal .sales_table,
#convert-modal .convert_table,
#purchases-back-modal .purchases_back_table,
#sales-back-modal .sales_back_table,
#convert-back-modal,
#show_kyood .ast3rad_table {
    height: 275px;
}

#rased_aftata7e .rased_efttahy_table {
    height: 275px;
}

#purchases-recieving-modal .commonad_sold_body .scroll-bar,
#sales-modal .commonad_sold_body .scroll-bar,
#convert-modal .commonad_sold_body .scroll-bar,

#purchases-back-modal .commonad_sold_body .scroll-bar,
#sales-back-modal .commonad_sold_body .scroll-bar,
#convert-back-modal .commonad_sold_body .scroll-bar,
#convert-back-modal .commonad_sold_body .scroll-bar {
    margin-top: 2px;
}

/* Modal body margin removed - using glass theme layout */

#item-card-modal .modal-body {
    margin-bottom: 0px;
}

#purchases-recieving-modal .modal-body,
#purchases-back-modal .modal-body,
#sales-back-modal .modal-body,
#convert-back-modal .modal-body,
#item-card-modal .modal-body {
    margin-bottom: 0px;
    padding-bottom: 5px;
}

#purchases-recieving-modal .dis-1,
#sales-modal .dis-1,
#convert-modal .dis-1,
#purchases-back-modal .dis-1,
#sales-back-modal .dis-1 {
    margin-bottom: 2px;
}

#rased_aftata7e .modal-footer,
#purchases-recieving-modal .modal-footer,
#sales-modal .modal-footer,
#convert-modal .modal-footer,
#purchases-back-modal .modal-footer,
#sales-back-modal .modal-footer {
    padding: 0px;
}

#sanad-sarf-modal .sanad_kabd_body,
#sanad-kabd-modal .sanad_kabd_body {
    margin-bottom: 0px !important;
}

#sanad-sarf-modal .sanad_kabd_fotter,
#sanad-kabd-modal .sanad_kabd_fotter {
    top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

#sanad-sarf-modal .sanad_kabd_row1 div:nth-of-type(15),
#sanad-kabd-modal .sanad_kabd_row1 div:nth-of-type(15) {
    margin-top: 5px !important;
}

#sanad-sarf-modal .sanad_sarf_table,
#sanad-kabd-modal .sanad_sarf_table {
    margin-top: 5px;
    max-height: 300px;
}

#eisal-tahsil-modal .eisal_tahsil_table {
    margin-top: 5px;
    max-height: none;
    height: auto;
    width: 100%;
    overflow-x: auto;
}

#eisal-tahsil-modal #eisal-tahsil-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: fixed !important;
}

#item-card-modal .modal-header {
    position: relative !important;
    z-index: 10 !important;
}

#item-card-modal .modal-body {
    margin-bottom: 0px !important;
    position: relative;
    z-index: 1;
    overflow: visible;
}

#item-card-modal .modal-body > .container > .row:last-child {
    position: relative;
    z-index: 1;
    margin-top: 15px;
    clear: both;
    display: block;
}

#item-card-modal .modal-body > .container > .row:last-child::before {
    content: "";
    display: table;
    clear: both;
}

#item-card-modal .betakat-row3 {
    height: auto;
    position: relative;
    z-index: 5;
}

#item-card-modal .btakat-imgb {
    min-height: 200px;
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.1), rgba(10, 61, 92, 0.1));
    border-radius: 10px;
    border: 1px solid rgba(0, 160, 176, 0.2);
}

#item-card-modal .modal-footer {
    padding-bottom: 5px;
}


/* Setup General settings options */

#setup-general-setting-options {
    /* display: block; */
    margin: 0 auto;
}

#setup-general-setting-options .modal-content {
    width: 30%;
    right: 40%;
}

#setup-general-setting-options .modal-footer {
    padding-top: 0px;
}

#setup-general-setting-options .modal-body {
    padding: 5px;
    padding-bottom: 0px;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
}

#setup-general-setting-options .modal-title {
    padding: 0;
    margin: 0;
}

#setup-general-setting-options label {
    color: white;
    width: auto;
    position: relative;
}

#setup-general-setting-options .btn {
    margin-top: 10px;
    margin-right: 12px
}

/* ============================================
   MODERN LOADER - Document Loading
   ============================================ */
#loading-content,
#loading-content-light,
.modal-loader {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(240, 247, 250, 0.98), rgba(232, 244, 248, 0.95));
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#loading-content {
    width: 100vw;
    height: 100vh;
}

.modal-loader {
    position: absolute;
    border-radius: 8px;
}

/* Modern Spinner */
.loader,
.modern-loader {
    width: 40px;
    height: 40px;
    position: relative;
}

.loader::before,
.loader::after,
.modern-loader::before,
.modern-loader::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}

.loader::before,
.modern-loader::before {
    border-top-color: #0891b2;
    border-right-color: #0891b2;
    animation: loader-spin 0.8s ease-in-out infinite;
}

.loader::after,
.modern-loader::after {
    border-bottom-color: #06b6d4;
    border-left-color: #06b6d4;
    animation: loader-spin 0.8s ease-in-out infinite reverse;
    animation-delay: -0.4s;
}

@keyframes loader-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Loader Text */
.loader-text {
    color: #1a3a4a;
    font-weight: 600;
    font-size: 14px;
    animation: loader-pulse 1.5s ease-in-out infinite;
}

@keyframes loader-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Dots Loader Alternative */
.dots-loader {
    display: flex;
    gap: 6px;
}

.dots-loader span {
    width: 10px;
    height: 10px;
    background: #0891b2;
    border-radius: 50%;
    animation: dots-bounce 1.4s ease-in-out infinite both;
}

.dots-loader span:nth-child(1) { animation-delay: -0.32s; }
.dots-loader span:nth-child(2) { animation-delay: -0.16s; }
.dots-loader span:nth-child(3) { animation-delay: 0s; }

@keyframes dots-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* Skeleton Loader for Tables */
.skeleton-loader {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 4px;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gold-price-widget {
    width: 100%;
    overflow: hidden;
}

.btns-beside-widget .btn-primary {
    font-size: 22px !important;
    margin: 5px 10px;
    padding: 10px 20px;
    min-width: 120px;
    font-weight: 600;
}

.btns-beside-widget {
    margin-top: 20px;
}

.btns-beside-widget .row-btns {
    margin-bottom: 10px;
}

.no-th-border-top th {
    border-top: none !important;
}



#sales-modal,
#purchases-back-modal,
#purchases-recieving-modal,
#rased_aftata7e,
#sales-back-modal,
#sanad-kabd-modal,
#sanad-sarf-modal,
#convert-modal,
#update-arsdt-elasnaf-modal,
#buying-calibration-modal,
#selling-calibration-modal {
    top: 47px !important;
}

#item-card-modal .block-label-contatiner {
    margin-right: 0 !important;
}

#item-card-modal .block-label-contatiner .custom-md-4 {
    float: right;
    margin-right: 1px !important;
    margin-top: 0 !important;
    width: 32%;
}



#item-card-modal .block-label-contatiner label {
    position: unset !important;
    width: 100% !important;
    display: block;
    height: unset !important;
    margin-bottom: 0;
    text-align: right !important;
}

#item-card-modal .block-label-contatiner input {
    margin-right: 0 !important;
    width: 100% !important;
}

.height-auto {
    height: auto !important;
    /*max-height: 402px;*/
}

.full-screen #sales-modal,
.full-screen #purchases-back-modal,
.full-screen #purchases-recieving-modal,
.full-screen #rased_aftata7e,
.full-screen #sales-back-modal,
.full-screen #sanad-kabd-modal,
.full-screen #sanad-sarf-modal,
.full-screen #convert-modal,
.full-screen #update-arsdt-elasnaf-modal,
.full-screen #buying-calibration-modal,
.full-screen #selling-calibration-modal {
    top: 0px !important;
}

/* Modal content in native fullscreen mode */
.modal-content:fullscreen,
.modal-content:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
    overflow-y: auto;
}

.modal-content:fullscreen .container,
.modal-content:-webkit-full-screen .container,
.modal-content:fullscreen .modal-body,
.modal-content:-webkit-full-screen .modal-body {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px;
    padding-right: 15px;
}

.modal-content:fullscreen .modal-body,
.modal-content:-webkit-full-screen .modal-body {
    flex: 1;
    overflow-y: auto;
}


#accounts {
    z-index: 1060;
}


/* start elmordon */

.block_inline {
    display: flex;
    align-items: center;
    justify-content: left;
}

.block_inline label {
    position: unset;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    text-align: end;
}

.block_inline-col-6 label {
    width: 20% !important;
}

.block_inline-col-4 label {
    width: 30.8% !important;
}

.block_inline-col-3 label {
    width: 42% !important;
}

.block_inline-col-3 select {
    width: 42% !important;
}

#cost-center-form .block_inline{
    margin-bottom: 5px;
}

.block_inline input, .block_inline select, .block_inline textarea{
    margin-right: 6px;
    height: 100%;
}

.block_inline-col-6 input {
    width: 80%;
}

.block_inline-col-6 select {
    width: 80%;
}

.block_inline-col-4 input {
    width: 70%;
}

.block_inline-col-3 input {
    width: 58%;
}

.block_inline-check-box input {
    width: 50px;
    margin-right: 0;
    margin-left: 6px;
    position: unset !important;
}

.block_inline-check-box input {
    width: max-content;
}

/* end elmordon */

/* start reprots */
.reports-screen .block_inline-check-box input {
    width: 15px !important;
    margin-left: 4px;
}

/* end reports */

/* start account guide */
.accounts-guide-modal .block_inline-col-6 span {
    width: 100% !important;
}

.accounts-guide-modal input,
#AccountGuide_model select,
#AccountGuide_model .select2-container {
    margin-right: 6px !important;
}

/* end account guide */


/* start account settings */
.accounts-settings-modal .conta .level span {
    position: unset;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

/* end account settings */


/* start general settings */

.general_settings_modal .text_inline {
    position: unset;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    text-align: end;
}

.general_settings_modal .label-of-box {
    position: unset !important;
    width: auto !important;
}

.general_settings_modal .label-of-checkbox {
    position: unset !important;
    width: auto !important;
}

.general_settings_modal .quarter-width {
    width: 33.1633% !important;
}

.general_settings_modal .multicheck {
    padding-right: 20px;
}

.general_settings_modal .check-box-inline {
    display: flex;
    padding: 0px 10px;
}

.general_settings_modal .check-box-inline input {
    width: 5%;
}

/* end general settings */


/* .arsdt-elasnaf-table input margin moved to arsdt-elasnaf-* namespaced classes */

.text_inline {
    position: unset;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    text-align: end;
}

/* Removed redundant purchases-recieving dis-1 padding - now unified in .commonad_sold_body .dis-1 */

#purchases-recieving-modal .commonad_sold_body th {
    padding: 0px 10px !important;
}

#purchases-recieving-modal .custom-control-label {
    margin-right: 20px !important;
}

.input-width-percentage-100 input{
    width: 100% !important;
}

.financial-analysis-header {
    font-size: 22px;
    color: #ffff;
}

.financial-analysis-item {
    border: 1px solid;
    margin: 10px;
    background: #ffff;
    padding: 5px 0px;
}

.financial-analysis-item .result {
    text-align: left;
}

.financial-analysis-item .title::after {
    content: '';
    position: absolute;
    left: 0;
    border: 13px solid;
    border-color: transparent;
    border-right-color: #5c8dc2;
}

/* Old datepicker positioning - now handled in Liquid Glass Datepicker section */

#financial_analysis_settings_modal .fn-ana-set-btn {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: end !important;
    margin-top: 0px !important;
}
#adv-srch-inpt {
    margin-right: 250px;
}
#adv-srch-slct {
    margin-right: 250px;
}

/* #datepicker4 positioning - now handled in Liquid Glass Datepicker section */

#accounts-connect-modal .buttons .fa-file-excel {
    padding: 5px 10px;
    font-size: 25px;
    color: green;
    background-color: white
}

#accounts-connect-modal .buttons {
    display: flex;
}


#accounts-connect-modal .buttons button {
    margin-left: 2px !important;
}

button#export-accounts-connect {
    padding: 0 !important;
}

/* Hide native scrollbar and set relative positioning for positioning inner elements */
.subject-info-box-1, .subject-info-box-2{
    overflow: hidden;
    position: relative;
}

/* ============================================
   CUSTOM SCROLLBAR - Base Styles (RTL Ready)
   ============================================ */

/* Subject info box container */
.subject-info-box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 140px;
}

/* Scrollbar container - groups buttons and track */
.custom-scrollbar-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 24px;
    flex-shrink: 0;
    order: 1; /* RTL: scrollbar on right */
}

[dir="rtl"] .custom-scrollbar-container,
html[lang="ar"] .custom-scrollbar-container {
    order: 1; /* Keep on right for RTL */
}

/* Custom scrollbar track */
.custom-scrollbar-track {
    position: relative;
    flex: 1;
    width: 16px;
    min-height: 60px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    user-select: none;
    cursor: pointer;
}

/* Custom scrollbar thumb */
.custom-scrollbar-thumb {
    position: absolute;
    width: 100%;
    min-height: 24px;
    max-height: calc(100% - 8px);
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
    cursor: grab;
    top: 4px;
    transition: background-color 0.15s ease;
}

.custom-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.custom-scrollbar-thumb:active {
    cursor: grabbing;
    background: rgba(0, 0, 0, 0.45);
}

/* Scroll buttons */
.scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

.scroll-btn:hover {
    background: rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.7);
}

.scroll-btn:active {
    background: rgba(0, 0, 0, 0.2);
}

.scroll-btn i {
    font-size: 10px;
    line-height: 1;
}

.scroll-up {
    margin-bottom: 2px;
}

.scroll-down {
    margin-top: 2px;
}

/* Select box styling */
.subject-info-box select {
    flex: 1;
    order: 0; /* RTL: select on left */
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 4px;
    margin-inline-end: 6px;
}

[dir="rtl"] .subject-info-box select,
html[lang="ar"] .subject-info-box select {
    margin-inline-end: 6px;
    margin-inline-start: 0;
}

/* Hide native scrollbar */
.subject-info-box select::-webkit-scrollbar {
    display: none;
}

.subject-info-box select {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#reportCont table {
    height: 200px;

}

.tableFixHead {
    height: 200px;
}

#reportCont select {
    height: 170px
}

h5#sanad-kabd-attachments-modal-label,
h5#sanad-kabd-attachments-modal-label{
    padding: 0;
}

#sanad-kabd-attachments-modal .modal-header .close,
#sanad-sarf-attachments-modal .modal-header .close {
    padding: 0;
    margin: 0;
} 

#sanad-sarf-attachments-modal .col-md-6,
#sanad-sarf-attachments-modal .col-md-4 {
    text-align: left !important;
}


/* Attachment Modal elkyood */
#accounts-elkyood-modal .custom-control.custom-checkbox.my-1.mx-3.hidden-assumptions-2 {
    margin-left: 6rem !important;
}
#accounts-elkyood-modal .btn-foter-set {
    height: 40px;
    padding: 0 10px !important;
    line-height: 40px !important;
    margin-top: 10px !important;
}

#accounts-elkyood-attachments-modal .modal-title{
    padding: 0px 10px;
}

#accounts-elkyood-attachments-modal .modal-header .close {
    padding: 0;
    margin: 0 !important;
}

/* Modal z-index fix - Ensure proper stacking order */
#list_account_report_modal {
    z-index: 1050 !important;
}

#accounts-elkyood-modal {
    z-index: 1055 !important;
}

#accounts-elkyood-attachments-modal {
    z-index: 999999 !important;
}

#sanad-kabd-attachments-modal {
    z-index: 999999 !important;
}

#sanad-sarf-attachments-modal {
    z-index: 999999 !important;
}

.nav-container {
    margin-top:0;
}

/* ===== Close Gold: Fix Typeahead dropdown positioning ===== */
#close-gold-modal .modal-dialog,
#close-gold-modal .modal-content {
    overflow: visible;
}

#close-gold-modal .modal-content {
    position: relative;
}

/* The global .dropdown-menu styles (e.g., right: 102%) conflict with
   bootstrap-3-typeahead which sets inline left/top. Reset here. */
#close-gold-modal .typeahead.dropdown-menu {
    right: auto !important;   /* allow inline left from plugin to take effect */
    z-index: 1080;            /* ensure it appears above modal content */
}
/* Make autocomplete cells a positioning context so the menu aligns under the input */
#close-gold-modal .close-gold-table td.autocomplete-cell {
    position: relative;
    overflow: visible !important;
    z-index: 20;
}
/* Ensure the menu aligns visually with the input width */
#close-gold-modal .close-gold-table td.autocomplete-cell .typeahead.dropdown-menu {
    min-width: 100%;
}
/* Make suggestion items wrap and fit text */
#close-gold-modal .typeahead.dropdown-menu li > a {
    display: block;
    width: 100%;
    white-space: normal; /* allow long names to wrap */
    padding: 4px 10px;
}
#close-gold-modal .typeahead.dropdown-menu .tt-suggestion {
    white-space: normal; /* wrap inner text */
}
/* Optional: make suggestions align with RTL content nicely */
[dir="rtl"] #close-gold-modal .typeahead.dropdown-menu {
    text-align: right;
}
.typeahead li.active a{
    background: white;
    color: black
}

/** Close Gold Modal **/
#close-gold-modal .modal-body {
    background: var(--modal-body-bg) !important;
}

#close-gold-modal .modal-footer {
    background: var(--modal-footer-bg) !important;
}

#close-gold-modal .modal-footer button {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
    margin: 0 !important;
    border-radius: 0.25rem !important;
}

#close-gold-modal .btn-primary.disabled, #close-gold-modal .btn-primary:disabled {
    color: #fff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
}
#close-gold-modal .btn-primary.disabled,
#close-gold-modal .btn-primary:disabled,
#close-gold-modal .btn-primary:disabled i {
    color: #fff !important;
}

#close-gold-modal .modal-body label {
    position: unset;
    right: unset;
}

#close-gold-modal .modal-body {
    margin-top: 45px !important;
}

/* Legacy th/td resets - scoped to NOT affect .close-gold-table and .close-gold-summary-table */
#close-gold-modal .modal-body th {
    border: unset;
    background: unset;
}
#close-gold-modal .modal-body .close-gold-table th,
#close-gold-modal .modal-body .close-gold-summary-table th {
    border: 1px solid var(--table-header-border, rgba(0, 160, 176, 0.4));
    background: var(--table-header-bg, linear-gradient(145deg, rgba(0, 130, 150, 0.9), rgba(0, 100, 120, 0.95)));
    color: var(--table-header-text, #fff);
}

#close-gold-modal .modal-body td {
    border: unset;
    background-color: unset;
    padding: unset;
    padding-right: 10px;
    padding-left: 10px;
}
#close-gold-modal .modal-body .close-gold-table td {
    border: 1px solid var(--table-border, rgba(0, 160, 176, 0.3));
    background: var(--table-cell-bg, rgba(255, 255, 255, 0.7));
    padding: 2px;
}
#close-gold-modal .modal-body .close-gold-summary-table td {
    border: 1px solid var(--table-border, rgba(0, 160, 176, 0.3));
    padding: 4px 8px;
}

#close-gold-modal .modal-body .close-gold-data tbody td {
    padding: 0;
}

#close-gold-modal input, #close-gold-modal select {
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.23) !important;
    width: 100%;
}

#close-gold-modal input[readonly] {
    background-color: #F8F7FA !important;
    color: #333333 !important;
}

#close-gold-modal th, #close-gold-modal td {
    text-align: center;
    white-space: nowrap;
}

#close-gold-modal td .btn{
    padding: 0.4rem;
    border: 0;
    line-height: 0;
    margin-top: 4px;
}

.document-navigation {
    direction: inherit; /* Inherits the direction from the body or parent element */
}

.navigation-controls button {
    margin: 0 5px; /* Adds space between buttons */
}

/* Specific styles for RTL layouts */
[dir="rtl"] .document-navigation {
    text-align: right;
}

[dir="rtl"] .navigation-controls button {
    /* Swaps the order of icon and text for RTL */
    flex-direction: row-reverse;
}

/* Enhancements for input and buttons */
#doc-search {
    margin-left: 10px; /* Ensures some space between the buttons and the input */
    flex-grow: 1; /* Allows the input to take up available space */
}

.btn-primary {
    white-space: nowrap; /* Prevents button text from wrapping */
}

@media (max-width: 768px) {
    .document-navigation {
        flex-direction: column; /* Stacks elements vertically on smaller screens */
    }

    #doc-search {
        width: 100%; /* Full width for the search box on smaller screens */
        margin-top: 10px; /* Adds space above the search box when stacked */
    }
}

#close-gold-modal .table td, #close-gold-modal .table th {
    padding: 0.2rem;
}

/* ============================================================
   CLOSE GOLD MODAL - Base/Fallback Styles
   Uses CSS variables so themes (liquid-glass, light, dark) auto-override.
   ============================================================ */

/* Modal Body Scroll */
#close-gold-modal .modal-body.close-gold {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* Table Container - Ensure visible when d-none is removed */
#close-gold-modal #cgs-desktop:not(.d-none) {
    display: block !important;
}

/* Header Row - RTL Layout */
.close-gold-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    direction: rtl;
}

.close-gold-date-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.close-gold-date-field label {
    white-space: nowrap;
    margin: 0;
    color: var(--theme-text-primary, #333);
}

.close-gold-date-field .form-control {
    width: 120px;
}

.close-gold-action-btns {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.close-gold-btn {
    background: var(--btn-primary-bg, #007bff);
    border: 1px solid var(--modal-btn-border, transparent);
    color: var(--modal-btn-text, #fff);
    padding: 4px 10px;
    border-radius: var(--modal-btn-radius, 4px);
    transition: all 0.2s ease;
    cursor: pointer;
    backdrop-filter: var(--glass-blur-light, none);
    -webkit-backdrop-filter: var(--glass-blur-light, none);
    box-shadow: var(--modal-btn-shadow, none);
    text-shadow: var(--modal-btn-text-shadow, none);
    font-weight: 500;
}

.close-gold-btn:hover {
    background: var(--btn-primary-bg-hover, var(--btn-primary-hover, #0056b3));
    border-color: var(--modal-btn-border-hover, transparent);
    transform: translateY(-1px);
}

.close-gold-price-field {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.close-gold-price-field label {
    white-space: nowrap;
    margin: 0;
    color: var(--theme-text-primary, #333);
}

.close-gold-price-field .form-control {
    width: 100px;
}

/* Prices Bar */
.close-gold-prices-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--theme-bg-tertiary, #f8f9fa);
    border: 1px solid var(--theme-border-light, #dee2e6);
    border-radius: var(--radius-sm, 4px);
    margin: 6px 0;
    direction: rtl;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.close-gold-prices-toggle {
    color: var(--theme-primary, #007bff);
    cursor: pointer;
    font-weight: 600;
}

.close-gold-fare-input {
    width: 45px;
    min-width: 45px;
    max-width: 45px;
    text-align: center;
    background: rgba(0, 119, 182, 0.1);
    border: 1px solid var(--theme-border, #ced4da);
    border-radius: var(--radius-sm, 4px);
    color: var(--theme-text-primary, #333);
    padding: 2px 4px;
}

.close-gold-prices-label {
    color: var(--theme-text-secondary, #6c757d);
}

.close-gold-carat-badge {
    background: var(--theme-primary, #007bff);
    color: #fff;
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    font-size: 13px;
}

.close-gold-price-value {
    color: var(--theme-text-primary, #333);
    min-width: 50px;
}

/* Table Scroll Container */
.close-gold-table-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid var(--table-border, rgba(0, 160, 176, 0.3));
    scrollbar-width: thin;
    scrollbar-color: var(--theme-primary, rgba(0, 160, 176, 0.5)) transparent;
}

.close-gold-table-wrapper::-webkit-scrollbar {
    height: 6px;
}
.close-gold-table-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 30, 60, 0.15);
    border-radius: 3px;
}
.close-gold-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--theme-primary, rgba(0, 160, 176, 0.5));
    border-radius: 3px;
}

/* Main Table - Compact columns to minimize scrolling */
#close-gold-modal .close-gold-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    direction: rtl;
    table-layout: fixed;
}

#close-gold-modal .close-gold-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

#close-gold-modal .close-gold-table thead th {
    background: var(--table-header-bg, linear-gradient(145deg, rgba(0, 130, 150, 0.9), rgba(0, 100, 120, 0.95)));
    color: var(--table-header-text, #fff);
    padding: 5px 3px;
    text-align: center;
    border: 1px solid var(--table-header-border, rgba(0, 160, 176, 0.4));
    border-bottom: 2px solid var(--table-header-border-bottom, rgba(0, 160, 176, 0.5));
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    letter-spacing: 0.3px;
    overflow: hidden;
}

/* Compact column widths - tuned to content */
#close-gold-modal .close-gold-table .col-num       { width: 24px; }
#close-gold-modal .close-gold-table .col-bond      { width: 68px; }
#close-gold-modal .close-gold-table .col-type      { width: 36px; }
#close-gold-modal .close-gold-table .col-voucher   { width: 80px; }
#close-gold-modal .close-gold-table .col-account   { width: 95px; }
#close-gold-modal .close-gold-table .col-statement  { width: 38px; }
#close-gold-modal .close-gold-table .col-item      { width: 85px; }
#close-gold-modal .close-gold-table .col-qty       { width: 50px; }
#close-gold-modal .close-gold-table .col-price     { width: 52px; }
#close-gold-modal .close-gold-table .col-premium   { width: 46px; }
#close-gold-modal .close-gold-table .col-total     { width: 58px; }
#close-gold-modal .close-gold-table .col-actions   { width: 84px; }

#close-gold-modal .close-gold-table td {
    padding: 2px;
    border: 1px solid var(--table-border, #dee2e6);
    vertical-align: middle;
    background: var(--table-cell-bg, rgba(255, 255, 255, 0.7));
    overflow: hidden;
}

#close-gold-modal .close-gold-table .form-control,
#close-gold-modal .close-gold-table td input,
#close-gold-modal .close-gold-table td a.form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 2px 3px !important;
    height: auto !important;
    font-size: 14px;
    border-color: var(--table-input-border, rgba(0, 160, 176, 0.3)) !important;
    background: var(--table-input-bg, rgba(255, 255, 255, 0.9)) !important;
    background-color: var(--table-input-bg, rgba(255, 255, 255, 0.9)) !important;
    color: var(--table-input-text, #334155);
    overflow: hidden;
    text-overflow: ellipsis;
}

#close-gold-modal .close-gold-table .form-control:focus {
    border-color: var(--table-input-focus-border, #00a0b0);
    box-shadow: 0 0 0 2px var(--table-input-focus-shadow, rgba(0, 160, 176, 0.15));
}

#close-gold-modal .close-gold-table .input-num {
    text-align: center;
    padding: 2px 0;
}

#close-gold-modal .close-gold-table .input-clickable {
    cursor: pointer;
}

/* Action Buttons in Table - Glass style */
.close-gold-action-group {
    display: flex;
    gap: 1px;
    justify-content: center;
    flex-wrap: nowrap;
}

.close-gold-tbl-btn {
    padding: 3px 5px;
    border-radius: var(--radius-sm, 4px);
    border: none;
    transition: all 0.2s ease;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 11px;
}

.close-gold-tbl-btn.btn-save {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.5), rgba(22, 163, 74, 0.6));
    color: #fff;
}
.close-gold-tbl-btn.btn-save:hover {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.8), rgba(22, 163, 74, 0.9));
    color: #fff;
}

.close-gold-tbl-btn.btn-print {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(124, 58, 237, 0.5));
    color: #fff;
}
.close-gold-tbl-btn.btn-print:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.7), rgba(124, 58, 237, 0.8));
    color: #fff;
}

.close-gold-tbl-btn.btn-share {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.4), rgba(8, 145, 178, 0.5));
    color: #fff;
}
.close-gold-tbl-btn.btn-share:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.7), rgba(8, 145, 178, 0.8));
    color: #fff;
}

.close-gold-tbl-btn.btn-edit {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.4), rgba(217, 119, 6, 0.5));
    color: #fff;
}
.close-gold-tbl-btn.btn-edit:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.7), rgba(217, 119, 6, 0.8));
    color: #fff;
}

.close-gold-tbl-btn.btn-delete {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.4), rgba(220, 38, 38, 0.5));
    color: #fff;
}
.close-gold-tbl-btn.btn-delete:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.7), rgba(220, 38, 38, 0.8));
    color: #fff;
}

/* Navigation - Glass style */
.close-gold-nav {
    padding: 8px 0;
    direction: rtl;
}

.close-gold-nav-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.close-gold-nav-btn {
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9)));
    border: 1px solid var(--modal-btn-border, rgba(255, 255, 255, 0.2));
    color: var(--modal-btn-text, #fff);
    padding: 4px 8px;
    border-radius: var(--modal-btn-radius, 8px);
    transition: all 0.2s ease;
    white-space: nowrap;
    cursor: pointer;
    backdrop-filter: var(--glass-blur-light, blur(10px));
    -webkit-backdrop-filter: var(--glass-blur-light, blur(10px));
    box-shadow: var(--modal-btn-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
    text-shadow: var(--modal-btn-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.3));
    font-weight: 500;
    font-size: 13px;
}

.close-gold-nav-btn:hover {
    background: var(--btn-primary-bg-hover, var(--btn-primary-hover, linear-gradient(135deg, rgba(0, 180, 196, 0.9), rgba(0, 148, 164, 1))));
    border-color: var(--modal-btn-border-hover, rgba(255, 255, 255, 0.35));
    transform: translateY(-1px);
}

.close-gold-search {
    width: 130px;
    min-width: 90px;
    max-width: 130px;
    flex: 0 0 auto;
    text-align: center;
}

/* Summary Button - Glass style */
.close-gold-summary-btn {
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9)));
    border: 1px solid var(--modal-btn-border, rgba(255, 255, 255, 0.2));
    color: var(--modal-btn-text, #fff);
    padding: 6px 16px;
    border-radius: var(--modal-btn-radius, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: var(--glass-blur-light, blur(10px));
    -webkit-backdrop-filter: var(--glass-blur-light, blur(10px));
    box-shadow: var(--modal-btn-shadow, 0 2px 8px rgba(0, 0, 0, 0.2));
    text-shadow: var(--modal-btn-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.3));
    font-weight: 500;
}
.close-gold-summary-btn:hover {
    background: var(--btn-primary-bg-hover, var(--btn-primary-hover, linear-gradient(135deg, rgba(0, 180, 196, 0.9), rgba(0, 148, 164, 1))));
    border-color: var(--modal-btn-border-hover, rgba(255, 255, 255, 0.35));
    transform: translateY(-1px);
}

/* Summary Table */
#close-gold-modal .close-gold-summary-table {
    width: 100%;
    border-collapse: collapse;
    direction: rtl;
    margin-top: 8px;
}

#close-gold-modal .close-gold-summary-table .summary-header th {
    background: var(--table-header-bg, linear-gradient(145deg, rgba(0, 130, 150, 0.9), rgba(0, 100, 120, 0.95)));
    color: var(--table-header-text, #fff);
    padding: 4px 8px;
    text-align: center;
    border: 1px solid var(--table-header-border, rgba(0, 160, 176, 0.4));
    font-weight: 600;
    white-space: nowrap;
    font-size: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

#close-gold-modal .close-gold-summary-table .summary-row-sales td {
    background: rgba(37, 99, 235, 0.18);
    color: var(--theme-text-primary, #1e293b);
    padding: 5px 8px;
    text-align: center;
    border: 1px solid rgba(37, 99, 235, 0.35);
    font-weight: 500;
}

#close-gold-modal .close-gold-summary-table .summary-row-purchases td {
    background: rgba(22, 163, 74, 0.18);
    color: var(--theme-text-primary, #1e293b);
    padding: 5px 8px;
    text-align: center;
    border: 1px solid rgba(22, 163, 74, 0.35);
    font-weight: 500;
}

#close-gold-modal .close-gold-summary-table .summary-row-total td {
    background: rgba(217, 119, 6, 0.22);
    color: var(--theme-text-primary, #1e293b);
    padding: 5px 8px;
    text-align: center;
    border: 1px solid rgba(217, 119, 6, 0.4);
    font-weight: 700;
    font-size: 13px;
}

/* Keep summary text readable on light row backgrounds */
#close-gold-modal .close-gold-summary-table tbody td {
    color: #111827 !important;
}

#close-gold-modal .close-gold-summary-table .status-cell {
    font-weight: 600;
}

/* Footer - Glass style */
.close-gold-footer {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 0;
    direction: rtl;
    border-top: none;
    margin-top: 8px;
}

.close-gold-footer-btn,
.close-gold-footer .btn.btn-primary {
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9)));
    border: 1px solid var(--modal-btn-border, rgba(255, 255, 255, 0.2));
    color: var(--modal-btn-text, #fff);
    padding: 8px 20px;
    min-height: var(--modal-btn-min-height, 36px);
    border-radius: var(--modal-btn-radius, 8px);
    transition: all 0.2s ease;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: var(--glass-blur-light, blur(10px));
    -webkit-backdrop-filter: var(--glass-blur-light, blur(10px));
    box-shadow: var(--modal-btn-shadow, 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2));
    text-shadow: var(--modal-btn-text-shadow, 0 1px 2px rgba(0, 0, 0, 0.3));
}

.close-gold-footer-btn:hover,
.close-gold-footer .btn.btn-primary:hover {
    background: var(--btn-primary-bg-hover, var(--btn-primary-hover, linear-gradient(135deg, rgba(0, 180, 196, 0.9), rgba(0, 148, 164, 1))));
    border-color: var(--modal-btn-border-hover, rgba(255, 255, 255, 0.35));
    transform: translateY(-1px);
}

.close-gold-footer-btn .exit-icon {
    color: var(--theme-danger, #dc3545);
}

/* ============================================================
   END Close Gold Modal Base Styles
   ============================================================ */

select#sar_cash_account_guide_id {
    width: 100%;
}

/* Select2 styling for SAR cash account dropdown */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    padding-right: 12px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 10px;
}

/* Account Connect Table Select2 - RTL Support with FontAwesome */
#accounts-connect-table .select2-container {
    direction: rtl;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

#accounts-connect-table td {
    overflow: hidden;
    box-sizing: border-box;
}

#accounts-connect-table .select2-container--default .select2-selection--single {
    height: 28px;
    width: 100% !important;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
}

#accounts-connect-table .select2-container .selection {
    width: 100% !important;
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    padding-right: 8px;
    padding-left: 24px;
    font-size: 18px;
    color: #334155;
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    width: 20px;
    position: absolute;
    left: 3px;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none;
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__arrow::after {
    content: "\f107";
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900;
    font-size: 12px;
    color: #64748b;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#accounts-connect-table .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
    content: "\f106";
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-left: 0;
    margin-right: auto;
    padding: 0 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__clear span {
    display: none;
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__clear::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900;
    font-size: 10px;
    color: #ef4444;
    line-height: 1;
}

#accounts-connect-table .select2-container--default .select2-selection--single .select2-selection__clear:hover::before {
    color: #dc2626;
}

.account-connect-filters {
    text-align: right;
}

/* Payment Method Currency Config Section Styles */
.payment-currency-config-wrapper label {
    position: static !important;
    right: unset !important;
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

.payment-currency-config-wrapper select.payment-currency-config {
    width: 100% !important;
    height: 32px !important;
    padding: 4px 8px !important;
    font-size: 16px !important;
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    background-color: #fff !important;
    display: block !important;
    appearance: auto !important;
    -webkit-appearance: listbox !important;
    -moz-appearance: auto !important;
}

.payment-currency-config-wrapper select.payment-currency-config:disabled {
    background-color: #e9ecef !important;
    color: #000 !important;
    opacity: 1 !important;
}

.payment-currency-config-wrapper .form-group {
    margin-bottom: 15px !important;
    position: relative !important;
}

/* ========================================
   SALES MODAL - MOBILE & TABLET RESPONSIVE
   Significant refactor with aggressive overrides
   ======================================== */

/* ===== HIDE TRADINGVIEW WIDGET ON MOBILE ===== */
@media screen and (max-width: 768px) {
    a[href*="tradingview.com"],
    .tradingview-widget-copyright,
    iframe[src*="tradingview"],
    div:has(> iframe[src*="tradingview"]) {
        display: none !important;
    }
}

/* ===== TABLET (max-width: 1024px) ===== */
@media screen and (max-width: 1024px) {
    /* Force modal to full width - override width:135% and left:19% */
    .modal#sales-modal .modal-dialog,
    .modal#sales-back-modal .modal-dialog,
    .modal#purchases-recieving-modal .modal-dialog,
    .modal#purchases-back-modal .modal-dialog {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .modal#sales-modal .modal-dialog .modal-content,
    .modal#sales-back-modal .modal-dialog .modal-content,
    .modal#purchases-recieving-modal .modal-dialog .modal-content,
    .modal#purchases-back-modal .modal-dialog .modal-content {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
        position: relative !important;
        min-height: 100vh !important;
    }
}

/* ===== MOBILE (max-width: 768px) ===== */
@media screen and (max-width: 768px) {
    /* === MODAL RESET === */
    .modal#sales-modal {
        padding: 0 !important;
        overflow-x: hidden !important;
    }
    
    .modal#sales-modal .modal-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }
    
    .modal#sales-modal .modal-dialog .modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        position: fixed !important;
        overflow: hidden !important;
    }
    
    /* === COMPACT HEADER === */
    .modal#sales-modal .modal-header.h-back-product {
        padding: 12px 16px !important;
        min-height: 50px !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        background: rgba(10, 30, 60, 0.95) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    .modal#sales-modal .modal-header .modal-title {
        display: none !important;
    }
    
    .modal#sales-modal .modal-header .title-header {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        color: #fff !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        order: 1 !important;
    }
    
    .modal#sales-modal .modal-header .title-header img {
        height: 24px !important;
        width: 24px !important;
        border-radius: 6px !important;
    }
    
    .modal#sales-modal .modal-header .e7sabat-sab-title {
        display: flex !important;
        flex: 1 !important;
        align-items: center !important;
        color: #fff !important;
        font-size: 16px !important;
        gap: 8px !important;
        order: 2 !important;
    }
    
    .modal#sales-modal .modal-header .e7sabat-sab-title select {
        background: rgba(255, 255, 255, 0.15) !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        border-radius: 6px !important;
        color: #fff !important;
        padding: 6px 10px !important;
        font-size: 16px !important;
        max-width: 140px !important;
    }
    
    .modal#sales-modal .modal-header button.close,
    .modal#sales-modal .modal-header button.maximize,
    .modal#sales-modal .modal-header .modal-close,
    .modal#sales-modal .modal-header .modal-maximize {
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 8px 12px !important;
        color: #fff !important;
        opacity: 1 !important;
        font-size: 18px !important;
        cursor: pointer !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        flex-shrink: 0 !important;
    }
    
    .modal#sales-modal .modal-header button.close,
    .modal#sales-modal .modal-header .modal-close {
        order: 99 !important;
    }
    
    .modal#sales-modal .modal-header button.maximize,
    .modal#sales-modal .modal-header .modal-maximize {
        order: 98 !important;
    }
    
    .modal#sales-modal .modal-header button.close:hover,
    .modal#sales-modal .modal-header .modal-close:hover {
        background: rgba(220, 53, 69, 0.8) !important;
    }
    
    .modal#sales-modal .modal-header button.maximize:hover,
    .modal#sales-modal .modal-header .modal-maximize:hover {
        background: rgba(255, 255, 255, 0.25) !important;
    }
    
    /* === BODY - More space === */
    .modal#sales-modal .modal-body.sales_body {
        padding: 5px !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: calc(100vh - 50px) !important;
        max-height: calc(100vh - 50px) !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .modal#sales-modal .modal-body .container.commonad_sold_body {
        padding: 0 5px !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .modal#sales-modal .modal-body .container.commonad_sold_body > .row {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* === MOBILE FORM - SINGLE 2-COLUMN GRID (JS restructured) === */
    .modal#sales-modal .dis-1 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    
    .modal#sales-modal .dis-1 > .col-md-12.row {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Hide original sections when grid is active */
    .modal#sales-modal .dis-1 .sec-1,
    .modal#sales-modal .dis-1 .sec-2,
    .modal#sales-modal .dis-1 .sec-3 {
        display: none !important;
    }
    
    .modal#sales-modal .dis-1 .sec-4 {
        display: none !important;
    }
    
    /* Single mobile grid - 2 columns using flexbox */
    .modal#sales-modal .mobile-form-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        width: 100% !important;
        padding: 5px !important;
        background: #eef3f7 !important;
        border-radius: 6px !important;
        margin-bottom: 8px !important;
        box-sizing: border-box !important;
    }
    
    /* Each field item - exactly 50% minus gap */
    .modal#sales-modal .mobile-form-grid > div[class*="col-"],
    .modal#sales-modal .mobile-form-grid > div {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 0 0 calc(50% - 3px) !important;
        width: calc(50% - 3px) !important;
        max-width: calc(50% - 3px) !important;
        min-width: 0 !important;
        padding: 6px !important;
        margin: 0 !important;
        background: #fff !important;
        border-radius: 4px !important;
        border: 1px solid #ddd !important;
        gap: 5px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Labels - compact */
    .modal#sales-modal .mobile-form-grid label {
        display: block !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 40px !important;
        max-width: 55px !important;
        position: static !important;
        right: auto !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #333 !important;
        line-height: 1.2 !important;
        text-align: right !important;
        word-wrap: break-word !important;
    }
    
    /* Inputs - fill remaining space */
    .modal#sales-modal .mobile-form-grid input[type="text"],
    .modal#sales-modal .mobile-form-grid input[type="number"],
    .modal#sales-modal .mobile-form-grid input[type="time"],
    .modal#sales-modal .mobile-form-grid select {
        display: block !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: 32px !important;
        font-size: 16px !important;
        padding: 4px 6px !important;
        box-sizing: border-box !important;
        border: 1px solid #aaa !important;
        border-radius: 4px !important;
        background: #fff !important;
    }
    
    /* Hidden inputs */
    .modal#sales-modal .mobile-form-grid input[type="hidden"] {
        display: none !important;
    }
    
    /* Fix containers inside grid items */
    .modal#sales-modal .mobile-form-grid .low-size-input,
    .modal#sales-modal .mobile-form-grid .more-size-input {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* === FOOTER & CONTENT-TAB MOBILE LAYOUT === */
    .modal#sales-modal .modal-body .row:last-child {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Footer section - full width, buttons grid */
    .modal#sales-modal .col-md-4.modal-footer {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 2 !important;
        padding: 5px !important;
        height: auto !important;
    }
    
    /* Buttons grid - 4 columns, compact (Sales & Sales-Back unified) */
    .modal#sales-modal .modal-footer .sec4,
    .modal#sales-back-modal .modal-footer .sec4 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 3px !important;
        margin-bottom: 5px !important;
        position: relative !important;
        z-index: 100 !important;
    }
    
    .modal#sales-modal .modal-footer .sec4 button,
    .modal#sales-back-modal .modal-footer .sec4 button {
        font-size: 8px !important;
        padding: 4px 2px !important;
        min-height: 32px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 1px !important;
        border-radius: 4px !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
    }
    
    .modal#sales-modal .modal-footer .sec4 button i,
    .modal#sales-modal .modal-footer .sec4 button svg,
    .modal#sales-back-modal .modal-footer .sec4 button i,
    .modal#sales-back-modal .modal-footer .sec4 button svg {
        font-size: 16px !important;
        width: 12px !important;
        height: 12px !important;
    }
    
    /* Hide sec2, sec3 on mobile to save space */
    .modal#sales-modal .modal-footer .sec2,
    .modal#sales-modal .modal-footer .sec3,
    .modal#sales-back-modal .modal-footer .sec2,
    .modal#sales-back-modal .modal-footer .sec3 {
        display: none !important;
    }
    
    /* Content-tab - full width, above footer */
    .modal#sales-modal .col-md-8.content-tab,
    .col-md-8.content-tab {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        order: 1 !important;
        padding: 5px !important;
        left: 0 !important;
        position: relative !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }
    
    /* Tab panes container */
    .content-tab .tab-pane {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    
    /* Hide original totals sections when JS grid is active */
    .modal#sales-modal .content-tab .shows .sec1,
    .modal#sales-modal .content-tab .shows .gold-totals,
    .modal#sales-modal .content-tab .shows .gold-totals-col2 {
        display: none !important;
    }
    
    /* === MOBILE TOTALS GRID (JS Generated) - 2-column === */
    .mobile-totals-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 8px !important;
        background: #e8eef4 !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
    }
    
    .mobile-totals-grid .mobile-total-item {
        display: block !important;
        flex: 0 0 calc(50% - 3px) !important;
        width: calc(50% - 3px) !important;
        padding: 8px !important;
        background: #ffffff !important;
        border-radius: 6px !important;
        border: 1px solid #ccc !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }
    
    .mobile-totals-grid .mobile-total-item .mobile-total-label {
        display: block !important;
        width: 100% !important;
        font-size: 16px !important;
        font-weight: bold !important;
        color: #222 !important;
        margin-bottom: 5px !important;
        text-align: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mobile-totals-grid .mobile-total-item .mobile-total-input,
    .mobile-totals-grid .mobile-total-item input {
        display: block !important;
        width: 100% !important;
        height: 32px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        padding: 5px 8px !important;
        border: 1px solid #999 !important;
        border-radius: 4px !important;
        text-align: center !important;
        background: #fafafa !important;
        color: #000 !important;
        box-sizing: border-box !important;
    }
    
    /* === PAYMENTS TAB MOBILE - CSS-only solution with ::before labels === */
    
    /* Container fixes */
    #sales_paied .show3 {
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    /* Hide header row on mobile */
    #sales_paied .sec1 {
        display: none !important;
    }
    
    /* CRITICAL: Override Bootstrap .row - use display:block with wrapped fields */
    #sales_paied .sec2 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        margin: 0 0 10px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #e8f0f8 !important;
        border-radius: 8px !important;
        border-right: 4px solid #007bff !important;
        box-sizing: border-box !important;
    }
    
    /* Create 2-column grid inside sec2 using a wrapper approach */
    #sales_paied .sec2::after {
        content: "";
        display: table;
        clear: both;
    }
    
    /* Each input/select: 50% width, float for 2-column effect */
    #sales_paied .sec2 > input,
    #sales_paied .sec2 > select:not(.select2-hidden-accessible) {
        display: block !important;
        float: right !important;
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        height: 40px !important;
        font-size: 16px !important;
        padding: 8px 10px !important;
        border: 1px solid #999 !important;
        border-radius: 5px !important;
        background: #fff !important;
        margin: 0 0 8px 5px !important;
        box-sizing: border-box !important;
    }
    
    /* Odd fields (1st, 3rd, 5th) - clear float for new row */
    #sales_paied .sec2 > input:nth-of-type(odd),
    #sales_paied .sec2 > select:nth-of-type(odd):not(.select2-hidden-accessible) {
        margin-left: 0 !important;
        margin-right: 5px !important;
        clear: right !important;
    }
    
    /* Select2 containers */
    #sales_paied .sec2 > .select2-container {
        display: block !important;
        float: right !important;
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        margin: 0 0 8px 5px !important;
    }
    
    #sales_paied .select2-selection {
        height: 40px !important;
        border: 1px solid #999 !important;
        border-radius: 5px !important;
    }
    
    #sales_paied .select2-selection__rendered {
        line-height: 38px !important;
        font-size: 16px !important;
    }
    
    /* Hide original selects that Select2 replaces */
    #sales_paied .sec2 > select.select2-hidden-accessible {
        display: none !important;
    }
    
    /* === DELIVERY ADDRESS TAB - Compact === */
    .modal#sales-modal #sales-delivery-address .show3 {
        padding: 5px !important;
    }
    
    .modal#sales-modal #sales-delivery-address .sec1 {
        margin-bottom: 5px !important;
        padding: 5px !important;
        background: #f5f5f5 !important;
        border-radius: 4px !important;
    }
    
    .modal#sales-modal #sales-delivery-address .sec1 .row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }
    
    .modal#sales-modal #sales-delivery-address [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }
    
    .modal#sales-modal #sales-delivery-address .col-12 {
        grid-column: span 2 !important;
    }
    
    .modal#sales-modal #sales-delivery-address label {
        font-size: 9px !important;
        font-weight: 600 !important;
        display: block !important;
        margin: 0 !important;
        position: static !important;
    }
    
    .modal#sales-modal #sales-delivery-address input,
    .modal#sales-modal #sales-delivery-address select {
        height: 28px !important;
        font-size: 16px !important;
        width: 100% !important;
        padding: 3px 5px !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
    }
    
    /* === OUTLAY TAB - Compact === */
    .modal#sales-modal #sales_outlay .shows {
        padding: 5px !important;
    }
    
    .modal#sales-modal #sales_outlay .sec1 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
        padding: 5px !important;
        background: #f5f5f5 !important;
        border-radius: 4px !important;
    }
    
    .modal#sales-modal #sales_outlay .sec1 > div {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }
    
    .modal#sales-modal #sales_outlay .sec1 label {
        flex: 0 0 40px !important;
        font-size: 9px !important;
        font-weight: 600 !important;
    }
    
    .modal#sales-modal #sales_outlay .sec1 input {
        flex: 1 !important;
        height: 26px !important;
        font-size: 16px !important;
        padding: 3px 5px !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
    }
    
    /* === ATTACHMENTS TAB - Mobile Compact === */
    .modal#sales-modal .attachments-container {
        padding: 5px !important;
    }
    
    .modal#sales-modal .attachments-upload-row {
        gap: 5px !important;
    }
    
    .modal#sales-modal .attachments-list {
        max-height: 100px !important;
    }
    
    .modal#sales-modal .attachments-add-btn {
        padding: 5px 10px !important;
    }
    
    /* === COMPACT TABLE === */
    .modal#sales-modal .col-12.sales_table {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 160px !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin: 5px 0 !important;
        padding: 0 !important;
        border: 1px solid #999 !important;
        border-radius: 4px !important;
        background: #fff !important;
    }
    
    .modal#sales-modal .sales_table table#sales-table {
        min-width: 900px !important;
        width: max-content !important;
        font-size: 16px !important;
        border-collapse: collapse !important;
    }
    
    .modal#sales-modal .sales_table table thead {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }
    
    .modal#sales-modal .sales_table table th {
        padding: 4px 5px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
        background: #63d4e4 !important;
        border: 1px solid #000 !important;
        text-align: center !important;
    }
    
    .modal#sales-modal .sales_table table td {
        padding: 2px 4px !important;
        white-space: nowrap !important;
        border: 1px solid #000 !important;
    }
    
    .modal#sales-modal .sales_table table input,
    .modal#sales-modal .sales_table table select {
        font-size: 16px !important;
        height: 24px !important;
        min-width: 50px !important;
        padding: 1px 3px !important;
    }
    
    /* === COMPACT SCROLL BAR === */
    .modal#sales-modal .col-md-12.scroll-bar {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 4px !important;
        height: auto !important;
        min-height: 32px !important;
    }
    
    .modal#sales-modal .scroll-bar > div {
        width: auto !important;
    }
    
    .modal#sales-modal .scroll-bar button {
        padding: 6px 10px !important;
        font-size: 14px !important;
        min-width: 36px !important;
        min-height: 36px !important;
    }
    
    /* === TABS & CONTENT ROW === */
    .modal#sales-modal .modal-body > .container > .row {
        display: block !important;
        margin: 0 !important;
    }
    
    /* Hide thinking/assumptions section */
    .modal#sales-modal .col-md-4.thinking {
        display: none !important;
    }
    
    /* Compact Tabs */
    .modal#sales-modal .col-md-8.tabs,
    .modal#sales-modal .col-md-12.tabs {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
        margin-bottom: 5px !important;
    }
    
    .modal#sales-modal .tabs > .col-md-8.tabs,
    .modal#sales-modal .tabs > .col-md-12.tabs {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        padding: 0 !important;
    }
    
    .modal#sales-modal .tabs .nav-tabs.newtabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0 0 3px 0 !important;
        margin: 0 !important;
        border-bottom: 1px solid #ddd !important;
        gap: 2px !important;
    }
    
    .modal#sales-modal .tabs .nav-tabs .nav-item {
        flex-shrink: 0 !important;
    }
    
    .modal#sales-modal .tabs .nav-tabs .nav-link {
        font-size: 16px !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        border-radius: 3px 3px 0 0 !important;
    }
    
    /* Hide amlaa currency section */
    .modal#sales-modal .tabs .col-md-3.amlaa,
    .modal#sales-modal .tabs .col-md-1 {
        display: none !important;
    }
    
    /* === FOOTER & CONTENT SIDE BY SIDE === */
    .modal#sales-modal .modal-body .row:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    
    /* Footer - buttons on top, compact */
    .modal#sales-modal .row > .col-md-4.modal-footer {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        display: block !important;
        padding: 5px !important;
        height: auto !important;
        border-top: 1px solid #ddd !important;
        margin-top: 5px !important;
        order: 2 !important;
    }
    
    /* Compact Buttons - 4 columns (Sales & Sales-Back unified) */
    .modal#sales-modal .modal-footer .sec4,
    .modal#sales-back-modal .modal-footer .sec4 {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
        margin-bottom: 5px !important;
        position: relative !important;
        z-index: 100 !important;
    }
    
    .modal#sales-modal .modal-footer .sec4 button,
    .modal#sales-back-modal .modal-footer .sec4 button {
        font-size: 9px !important;
        padding: 6px 3px !important;
        min-height: 32px !important;
        border-radius: 3px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 101 !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        touch-action: manipulation !important;
    }
    
    .modal#sales-modal .modal-footer .sec4 button i,
    .modal#sales-modal .modal-footer .sec4 button svg,
    .modal#sales-back-modal .modal-footer .sec4 button i,
    .modal#sales-back-modal .modal-footer .sec4 button svg {
        font-size: 16px !important;
        width: 12px !important;
        height: 12px !important;
    }
    
    /* Hide button text, show only icons on very small widths */
    .modal#sales-modal .modal-footer .sec4 button,
    .modal#sales-back-modal .modal-footer .sec4 button {
        flex-direction: column !important;
        line-height: 1.1 !important;
    }
    
    /* sec3 - compact checkboxes (Sales & Sales-Back unified) */
    .modal#sales-modal .modal-footer .sec3,
    .modal#sales-back-modal .modal-footer .sec3 {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 4px 0 !important;
        font-size: 16px !important;
    }
    
    .modal#sales-modal .modal-footer .sec3 span,
    .modal#sales-back-modal .modal-footer .sec3 span {
        position: static !important;
        font-size: 9px !important;
    }
    
    .modal#sales-modal .modal-footer .sec3 input[type="text"],
    .modal#sales-back-modal .modal-footer .sec3 input[type="text"] {
        width: 80px !important;
        height: 28px !important;
        font-size: 16px !important;
    }
    
    .modal#sales-modal .modal-footer .sec3 .custom-control,
    .modal#sales-back-modal .modal-footer .sec3 .custom-control {
        margin: 0 !important;
    }
    
    .modal#sales-modal .modal-footer .sec3 .custom-control-label {
        font-size: 9px !important;
    }
    
    /* === COMPACT CONTENT-TAB === */
    .modal#sales-modal .row > .col-md-8.content-tab {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 5px !important;
        left: 0 !important;
        position: relative !important;
        height: auto !important;
        min-height: 100px !important;
        order: 1 !important;
    }
    
    /* Tab panes - Unified for all invoice modals */
    .modal#sales-modal .content-tab .tab-pane,
    .modal#sales-back-modal .content-tab .tab-pane,
    .modal#purchases-recieving-modal .content-tab .tab-pane,
    .modal#purchases-back-modal .content-tab .tab-pane {
        padding: 3px !important;
    }
    
    .modal#sales-modal .content-tab .tab-pane .shows,
    .modal#sales-back-modal .content-tab .tab-pane .shows,
    .modal#purchases-recieving-modal .content-tab .tab-pane .shows,
    .modal#purchases-back-modal .content-tab .tab-pane .shows {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    
    /* Two-column layout for totals - Unified */
    .modal#sales-modal .content-tab .shows .sec,
    .modal#sales-modal .content-tab .shows .gold-totals,
    .modal#sales-modal .content-tab .shows .gold-totals-col2,
    .modal#sales-back-modal .content-tab .shows .sec,
    .modal#sales-back-modal .content-tab .shows .gold-totals,
    .modal#sales-back-modal .content-tab .shows .gold-totals-col2,
    .modal#purchases-recieving-modal .content-tab .shows .sec,
    .modal#purchases-recieving-modal .content-tab .shows .gold-totals,
    .modal#purchases-recieving-modal .content-tab .shows .gold-totals-col2,
    .modal#purchases-back-modal .content-tab .shows .sec,
    .modal#purchases-back-modal .content-tab .shows .gold-totals,
    .modal#purchases-back-modal .content-tab .shows .gold-totals-col2 {
        width: calc(50% - 3px) !important;
        max-width: calc(50% - 3px) !important;
        flex: 0 0 calc(50% - 3px) !important;
        margin-bottom: 5px !important;
        padding: 5px !important;
        background: #f5f5f5 !important;
        border-radius: 4px !important;
    }
    
    .modal#sales-modal .content-tab .shows .sec > div,
    .modal#sales-modal .content-tab .shows .gold-totals .form-group,
    .modal#sales-back-modal .content-tab .shows .sec > div,
    .modal#sales-back-modal .content-tab .shows .gold-totals .form-group,
    .modal#purchases-recieving-modal .content-tab .shows .sec > div,
    .modal#purchases-recieving-modal .content-tab .shows .gold-totals .form-group,
    .modal#purchases-back-modal .content-tab .shows .sec > div,
    .modal#purchases-back-modal .content-tab .shows .gold-totals .form-group {
        display: flex !important;
        align-items: center !important;
        margin-bottom: 4px !important;
        gap: 4px !important;
    }
    
    .modal#sales-modal .content-tab .shows label,
    .modal#sales-back-modal .content-tab .shows label,
    .modal#purchases-recieving-modal .content-tab .shows label,
    .modal#purchases-back-modal .content-tab .shows label {
        width: 45% !important;
        min-width: 45% !important;
        font-size: 9px !important;
        position: static !important;
        right: auto !important;
        text-align: right !important;
        padding-left: 3px !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }
    
    .modal#sales-modal .content-tab .shows input,
    .modal#sales-back-modal .content-tab .shows input,
    .modal#purchases-recieving-modal .content-tab .shows input,
    .modal#purchases-back-modal .content-tab .shows input {
        width: 55% !important;
        height: 26px !important;
        font-size: 16px !important;
        padding: 3px 5px !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
    }
    
    /* Gold totals - inline compact - Unified */
    .modal#sales-modal .gold-totals .form-group label,
    .modal#sales-modal .gold-totals-col2 .form-group label,
    .modal#sales-back-modal .gold-totals .form-group label,
    .modal#sales-back-modal .gold-totals-col2 .form-group label,
    .modal#purchases-recieving-modal .gold-totals .form-group label,
    .modal#purchases-recieving-modal .gold-totals-col2 .form-group label,
    .modal#purchases-back-modal .gold-totals .form-group label,
    .modal#purchases-back-modal .gold-totals-col2 .form-group label {
        width: 50% !important;
        font-size: 9px !important;
    }
    
    .modal#sales-modal .gold-totals .form-group input,
    .modal#sales-modal .gold-totals-col2 .form-group input,
    .modal#sales-back-modal .gold-totals .form-group input,
    .modal#sales-back-modal .gold-totals-col2 .form-group input,
    .modal#purchases-recieving-modal .gold-totals .form-group input,
    .modal#purchases-recieving-modal .gold-totals-col2 .form-group input,
    .modal#purchases-back-modal .gold-totals .form-group input,
    .modal#purchases-back-modal .gold-totals-col2 .form-group input {
        width: 50% !important;
        height: 24px !important;
    }
    
    /* Hide QR code image area on mobile */
    .modal#sales-modal .gold-totals-col2 .total-gold-in-24:last-child {
        display: none !important;
    }
    
    /* === COMPACT PAYMENT TAB === */
    .modal#sales-modal #sales_paied .show3 {
        display: block !important;
    }
    
    .modal#sales-modal #sales_paied .col-md-12.sec1 {
        display: none !important;
    }
    
    .modal#sales-modal #sales_paied .col-md-12.row.sec2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 5px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
        margin-bottom: 8px !important;
        background: #f5f5f5 !important;
        border-radius: 4px !important;
    }
    
    .modal#sales-modal #sales_paied .sec2 input,
    .modal#sales-modal #sales_paied .sec2 select {
        display: block !important;
        width: 100% !important;
        height: 32px !important;
        margin: 0 !important;
        font-size: 16px !important;
        padding: 4px 6px !important;
        border: 1px solid #ccc !important;
        border-radius: 3px !important;
        box-sizing: border-box !important;
    }
    
    /* === COMPACT DELIVERY ADDRESS TAB === */
    .modal#sales-modal #sales-delivery-address .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }
    
    .modal#sales-modal #sales-delivery-address [class*="col-"] {
        width: calc(50% - 3px) !important;
        max-width: calc(50% - 3px) !important;
        flex: 0 0 calc(50% - 3px) !important;
        padding: 2px !important;
        margin: 0 !important;
    }
    
    .modal#sales-modal #sales-delivery-address label {
        display: block !important;
        margin-bottom: 2px !important;
        font-weight: 600 !important;
        font-size: 16px !important;
    }
    
    .modal#sales-modal #sales-delivery-address input,
    .modal#sales-modal #sales-delivery-address select {
        width: 100% !important;
        height: 32px !important;
        font-size: 16px !important;
    }
    
    /* === BALANCE POPUP MOBILE === */
    .raseed-fatoorah-container:not(.none) {
        min-width: 280px !important;
        max-width: 90vw !important;
    }
    
    .balance-popup-content {
        gap: 6px !important;
        padding: 8px !important;
    }
    
    .balance-section {
        padding: 6px 8px !important;
    }
    
    .balance-value {
        min-width: 70px !important;
        padding: 2px 6px !important;
    }
}

/* ===== SMALL MOBILE (max-width: 480px) ===== */
@media screen and (max-width: 480px) {
    .modal#sales-modal .modal-header .title-header {
        font-size: 16px !important;
    }
    
    .modal#sales-modal .modal-body.sales_body {
        padding: 3px !important;
    }
    
    /* Keep 2 fields per row but more compact */
    .modal#sales-modal .dis-1 .sec-1 > div[class*="col-"],
    .modal#sales-modal .dis-1 .sec-2 > div[class*="col-"],
    .modal#sales-modal .dis-1 .sec-3 > div[class*="col-"] {
        padding: 3px 4px !important;
        gap: 4px !important;
    }
    
    .modal#sales-modal .dis-1 label {
        font-size: 16px !important;
        min-width: 40px !important;
        max-width: 60px !important;
    }
    
    .modal#sales-modal .dis-1 input,
    .modal#sales-modal .dis-1 select {
        height: 28px !important;
        font-size: 16px !important;
        padding: 3px 5px !important;
    }
    
    .modal#sales-modal .col-12.sales_table {
        max-height: 140px !important;
    }
    
    .modal#sales-modal .sales_table table {
        min-width: 850px !important;
        font-size: 9px !important;
    }
    
    .modal#sales-modal .sales_table table input,
    .modal#sales-modal .sales_table table select {
        font-size: 16px !important;
        height: 22px !important;
    }
    
    .modal#sales-modal .scroll-bar button {
        padding: 5px 8px !important;
        font-size: 16px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }
    
    .modal#sales-modal .tabs .nav-tabs .nav-link {
        font-size: 16px !important;
        padding: 5px 8px !important;
    }
    
    /* Single column totals on very small - Unified */
    .modal#sales-modal .content-tab .shows .sec,
    .modal#sales-modal .content-tab .shows .gold-totals,
    .modal#sales-modal .content-tab .shows .gold-totals-col2,
    .modal#sales-back-modal .content-tab .shows .sec,
    .modal#sales-back-modal .content-tab .shows .gold-totals,
    .modal#sales-back-modal .content-tab .shows .gold-totals-col2,
    .modal#purchases-recieving-modal .content-tab .shows .sec,
    .modal#purchases-recieving-modal .content-tab .shows .gold-totals,
    .modal#purchases-recieving-modal .content-tab .shows .gold-totals-col2,
    .modal#purchases-back-modal .content-tab .shows .sec,
    .modal#purchases-back-modal .content-tab .shows .gold-totals,
    .modal#purchases-back-modal .content-tab .shows .gold-totals-col2 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    .modal#sales-modal .content-tab .shows label,
    .modal#sales-back-modal .content-tab .shows label,
    .modal#purchases-recieving-modal .content-tab .shows label,
    .modal#purchases-back-modal .content-tab .shows label {
        font-size: 9px !important;
        width: 40% !important;
    }
    
    .modal#sales-modal .content-tab .shows input,
    .modal#sales-back-modal .content-tab .shows input,
    .modal#purchases-recieving-modal .content-tab .shows input,
    .modal#purchases-back-modal .content-tab .shows input {
        font-size: 16px !important;
        height: 24px !important;
        width: 60% !important;
    }
    
    /* 3 column buttons on small mobile (Sales & Sales-Back unified) */
    .modal#sales-modal .modal-footer .sec4,
    .modal#sales-back-modal .modal-footer .sec4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    .modal#sales-modal .modal-footer .sec4 button,
    .modal#sales-back-modal .modal-footer .sec4 button {
        font-size: 8px !important;
        padding: 5px 2px !important;
        min-height: 28px !important;
    }
    
    .modal#sales-modal .modal-footer .sec3,
    .modal#sales-back-modal .modal-footer .sec3 {
        gap: 4px !important;
    }
    
    .modal#sales-modal .modal-footer .sec3 input[type="text"],
    .modal#sales-back-modal .modal-footer .sec3 input[type="text"] {
        width: 65px !important;
        height: 24px !important;
    }
    
    /* Payment tab - keep 2 columns on small screens */
    .modal#sales-modal #sales_paied .col-md-12.row.sec2 {
        grid-template-columns: 1fr 1fr !important;
    }
    
    /* Delivery address - single column */
    .modal#sales-modal #sales-delivery-address [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ===== LANDSCAPE MODE ===== */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .modal#sales-modal .modal-header.h-back-product {
        min-height: 30px !important;
        max-height: 30px !important;
        padding: 3px 5px !important;
    }
    
    .modal#sales-modal .modal-body.sales_body {
        height: calc(100vh - 30px) !important;
    }
    
    .modal#sales-modal .col-12.sales_table {
        max-height: 100px !important;
    }
    
    .modal#sales-modal .content-tab .shows .sec,
    .modal#sales-modal .content-tab .shows .gold-totals,
    .modal#sales-modal .content-tab .shows .gold-totals-col2,
    .modal#sales-back-modal .content-tab .shows .sec,
    .modal#sales-back-modal .content-tab .shows .gold-totals,
    .modal#sales-back-modal .content-tab .shows .gold-totals-col2,
    .modal#purchases-recieving-modal .content-tab .shows .sec,
    .modal#purchases-recieving-modal .content-tab .shows .gold-totals,
    .modal#purchases-recieving-modal .content-tab .shows .gold-totals-col2,
    .modal#purchases-back-modal .content-tab .shows .sec,
    .modal#purchases-back-modal .content-tab .shows .gold-totals,
    .modal#purchases-back-modal .content-tab .shows .gold-totals-col2 {
        width: calc(33% - 4px) !important;
        max-width: calc(33% - 4px) !important;
        flex: 0 0 calc(33% - 4px) !important;
    }
    
    .modal#sales-modal .modal-footer .sec4,
    .modal#sales-back-modal .modal-footer .sec4,
    .modal#purchases-recieving-modal .modal-footer .sec4,
    .modal#purchases-back-modal .modal-footer .sec4 {
        grid-template-columns: repeat(6, 1fr) !important;
    }
    
    .modal#sales-modal .modal-footer .sec4 button,
    .modal#sales-back-modal .modal-footer .sec4 button {
        font-size: 8px !important;
        padding: 4px 2px !important;
        min-height: 26px !important;
    }
}

/* ========================================
   MOBILE STYLES - APPLIED GLOBALLY (Outside media query for testing)
   These override everything to ensure mobile layout works
   ======================================== */

/* === PAYMENTS TAB - 2-column grid with label+input cells === */
@media screen and (max-width: 768px) {
    /* Hide payment header */
    #sales_paied .sec1 {
        display: none !important;
    }
    
    /* Payment row - 2 column grid */
    #sales_paied .sec2 {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        margin: 0 0 12px 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #e3ecf5 !important;
        border-radius: 10px !important;
        border-right: 5px solid #0d6efd !important;
        box-sizing: border-box !important;
    }
    
    /* Each field cell - contains label + input stacked */
    #sales_paied .mobile-field-cell {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        min-width: 0 !important;
    }
    
    /* Labels inside cells */
    #sales_paied .mobile-field-cell .mobile-label {
        display: block !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #333 !important;
        margin: 0 !important;
    }
    
    /* Inputs inside cells */
    #sales_paied .mobile-field-cell input,
    #sales_paied .mobile-field-cell select {
        width: 100% !important;
        height: 38px !important;
        font-size: 16px !important;
        padding: 8px 10px !important;
        border: 1px solid #aaa !important;
        border-radius: 5px !important;
        background: #fff !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Select2 inside cells */
    #sales_paied .mobile-field-cell .select2-container {
        width: 100% !important;
    }
    
    #sales_paied .mobile-field-cell .select2-selection {
        height: 38px !important;
        border: 1px solid #aaa !important;
        border-radius: 5px !important;
    }
    
    #sales_paied .mobile-field-cell .select2-selection__rendered {
        line-height: 36px !important;
        font-size: 16px !important;
    }
    
    /* Hide Select2 hidden selects */
    #sales_paied .mobile-field-cell select.select2-hidden-accessible {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        clip: rect(0,0,0,0) !important;
    }
}

/* === MOBILE FIELD CELLS - Global styles (no media query) === */
.mobile-field-cell {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}

.mobile-field-cell .mobile-label {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin: 0 !important;
}

.mobile-field-cell input,
.mobile-field-cell select {
    width: 100% !important;
    height: 38px !important;
    font-size: 16px !important;
    padding: 8px 10px !important;
    border: 1px solid #aaa !important;
    border-radius: 5px !important;
    background: #fff !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mobile-field-cell .select2-container {
    width: 100% !important;
}

.mobile-field-cell .select2-selection {
    height: 38px !important;
    border: 1px solid #aaa !important;
    border-radius: 5px !important;
}

.mobile-field-cell .select2-selection__rendered {
    line-height: 36px !important;
    font-size: 16px !important;
}

/* === TOTALS GRID - Force 2-column layout === */
.mobile-totals-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 12px !important;
    background: #e3ecf5 !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
}

.mobile-totals-grid .mobile-total-item {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    min-width: calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    padding: 10px !important;
    background: #fff !important;
    border-radius: 8px !important;
    border: 2px solid #ccc !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.mobile-totals-grid .mobile-total-item > div:first-child,
.mobile-totals-grid .mobile-total-label {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #222 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
}

.mobile-totals-grid .mobile-total-item input,
.mobile-totals-grid .mobile-total-input {
    display: block !important;
    width: 100% !important;
    height: 36px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    border: 2px solid #999 !important;
    border-radius: 5px !important;
    text-align: center !important;
    background: #f5f5f5 !important;
    color: #000 !important;
    box-sizing: border-box !important;
}

/* ============================================
   FIX: Account Search Modal - Override secondary.css global .modal-content
   ============================================ */
#accounts .modal-content,
#fina_anal_set .modal-content,
#accounts .update-gold-price.modal-content,
#fina_anal_set .update-gold-price.modal-content {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    position: relative !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

#accounts .modal-dialog,
#fina_anal_set .modal-dialog {
    max-width: 520px !important;
    margin: 30px auto !important;
}

/* Ensure main content is visible and properly positioned on ALL screen sizes */
#main-content-div {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    top: 0 !important;
    margin-top: 0 !important;
}

/* Ensure nav-container is at the top */
.nav-container {
     position: relative !important;
     top: 0 !important;
     margin-top: 0 !important;
 }

    .mobile-totals-grid .mobile-total-item {
        display: flex !important;
        flex-direction: column !important;
        flex: 0 0 calc(50% - 5px) !important;
        width: calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        padding: 10px !important;
        background: #fff !important;
        border-radius: 8px !important;
        border: 2px solid #ccc !important;
        box-sizing: border-box !important;
        text-align: center !important;
    }

    .mobile-totals-grid .mobile-total-item > div:first-child,
    .mobile-totals-grid .mobile-total-label {
        display: block !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        color: #222 !important;
        margin-bottom: 6px !important;
        text-align: center !important;
    }

    .mobile-totals-grid .mobile-total-item input,
    .mobile-totals-grid .mobile-total-input {
        display: block !important;
        width: 100% !important;
        height: 36px !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        padding: 6px 10px !important;
        border: 2px solid #999 !important;
        border-radius: 5px !important;
        text-align: center !important;
        background: #f5f5f5 !important;
        color: #000 !important;
        box-sizing: border-box !important;
    }

    /* ============================================
       FIX: Account Search Modal - Override secondary.css global .modal-content
       ============================================ */
    #accounts .modal-content,
    #fina_anal_set .modal-content,
    #accounts .update-gold-price.modal-content,
    #fina_anal_set .update-gold-price.modal-content {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        position: relative !important;
        max-width: 500px !important;
        margin: 0 auto !important;
    }

    #accounts .modal-dialog,
    #fina_anal_set .modal-dialog {
        max-width: 520px !important;
        margin: 30px auto !important;
    }

    /* Ensure main content is visible and properly positioned on ALL screen sizes */
    #main-content-div {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
    }

    /* Ensure nav-container is at the top */
    .nav-container {
        position: relative !important;
        top: 0 !important;
        margin-top: 0 !important;
    }

    /* Mobile fix: ensure navbar stays at top */
    .mobile-only-shortcuts {
        display: none !important;
    }

    .mobile-shortcut-btn {
        display: none !important;
    }

    @media screen and (max-width: 768px) {
        .mobile-only-shortcuts {
            display: block !important;
        }

        .mobile-shortcut-btn {
            display: flex !important;
        }

        body {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }

        #main-content-div {
            position: relative !important;
            top: 0 !important;
            transform: none !important;
            margin-top: 0 !important;
        }

        .nav-container {
            position: relative !important;
            top: 0 !important;
            transform: none !important;
            margin-top: 0 !important;
            z-index: 1000;
        }

        .title-header-container {
            display: none !important;
        }

        /* Mobile shortcut buttons - side by side */
        .mobile-only-shortcuts .btns {
            display: flex !important;
            flex-direction: row !important;
            justify-content: center !important;
            gap: 6px !important;
            padding: 0 5px !important;
        }

        .mobile-shortcut-btn {
            flex: 1 !important;
            font-size: 9px !important;
            padding: 8px 4px !important;
            text-align: center !important;
            line-height: 1.4 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            min-height: 50px !important;
        }

        .mobile-shortcut-btn i {
            display: block !important;
            font-size: 16px !important;
            margin-bottom: 4px !important;
        }
    }
}

/* ============================================
   GENERAL SETTINGS NAV TABS - Liquid Glass RTL
   Inline Horizontal Scrollable Tab Bar
   ============================================ */
.modal .general-settings-nav-tabs,
.general-settings-nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 5px 6px !important;
    margin: 0 0 6px 0 !important;
    list-style: none !important;
    background: linear-gradient(180deg, rgba(230, 240, 250, 0.95), rgba(215, 230, 245, 0.98)) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(0, 120, 140, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    direction: rtl !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 160, 176, 0.3) transparent;
}

.general-settings-nav-tabs::-webkit-scrollbar {
    height: 2px;
}

.general-settings-nav-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.general-settings-nav-tabs::-webkit-scrollbar-thumb {
    background: rgba(0, 160, 176, 0.3);
    border-radius: 2px;
}

.modal .general-settings-nav-tabs .nav-item,
.general-settings-nav-tabs .nav-item {
    margin: 0 !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

.modal .general-settings-nav-tabs .nav-link,
.general-settings-nav-tabs .nav-link {
    display: block !important;
    padding: 5px 10px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 5px !important;
    color: #1e3a5f !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: background 0.15s, color 0.15s, border-color 0.15s !important;
}

.modal .general-settings-nav-tabs .nav-link:hover,
.general-settings-nav-tabs .nav-link:hover {
    background: rgba(0, 130, 150, 0.15) !important;
    border-color: rgba(0, 130, 150, 0.25) !important;
    color: #0a5a6a !important;
}

.modal .general-settings-nav-tabs .nav-link.active,
.general-settings-nav-tabs .nav-link.active {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    border-color: #0891b2 !important;
    color: #fff !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.35) !important;
}

.modal .general-settings-nav-tabs .nav-link:focus,
.general-settings-nav-tabs .nav-link:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================
   GENERAL SETTINGS TAB CONTENT - Liquid Glass
   ============================================ */
.general-settings .tab-content {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96)) !important;
    border: 1px solid rgba(0, 160, 176, 0.15) !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    padding: 12px !important;
    direction: rtl !important;
}

.general-settings .tab-pane {
    direction: rtl !important;
}

/* Buttons sidebar */
.general-settings .set-public-btn-side {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 8px !important;
    background: linear-gradient(180deg, rgba(15, 35, 65, 0.95), rgba(10, 28, 55, 0.97)) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 160, 176, 0.25) !important;
}

.general-settings .set-public-btn-side .btn {
    padding: 6px 12px !important;
    border-radius: 5px !important;
    border: 1px solid transparent !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

.general-settings .set-public-btn-side .btn-primary {
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.7), rgba(0, 130, 145, 0.8)) !important;
    border-color: rgba(0, 180, 200, 0.5) !important;
    color: #fff !important;
}

.general-settings .set-public-btn-side .btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.85), rgba(0, 130, 145, 0.95)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.3) !important;
}

/* Tables in general settings */
.general-settings .set-table1,
.general-settings .set-table2 {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.2) !important;
    border-radius: 6px !important;
    overflow: visible !important;
    margin-bottom: 8px !important;
}

.general-settings table thead th {
    background: linear-gradient(180deg, rgba(15, 35, 65, 0.95), rgba(10, 28, 55, 0.97)) !important;
    color: #fff !important;
    padding: 8px 10px !important;
    font-weight: 600 !important;
    border: none !important;
}

.general-settings table tbody tr {
    border-bottom: 1px solid rgba(0, 160, 176, 0.1) !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
}

.general-settings table tbody tr:hover {
    background: rgba(0, 160, 176, 0.08) !important;
}

.general-settings table tbody tr.selected,
.general-settings table tbody tr.active {
    background: rgba(0, 160, 176, 0.15) !important;
}

.general-settings table tbody td {
    padding: 6px 10px !important;
    border: none !important;
    color: #1e293b !important;
}

/* Form inputs */
.general-settings .input_test,
.general-settings input[type="text"],
.general-settings input[type="number"],
.general-settings select,
.general-settings textarea {
    padding: 6px 10px !important;
    border: 1px solid rgba(0, 160, 176, 0.25) !important;
    border-radius: 5px !important;
    background: #fff !important;
    color: #1e293b !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.general-settings .input_test:focus,
.general-settings input[type="text"]:focus,
.general-settings input[type="number"]:focus,
.general-settings select:focus,
.general-settings textarea:focus {
    border-color: rgba(0, 160, 176, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(0, 160, 176, 0.1) !important;
    outline: none !important;
}

.general-settings .input_test:disabled,
.general-settings input:disabled,
.general-settings select:disabled,
.general-settings textarea:disabled {
    background: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed !important;
}

/* Coin field rows */
.general-settings .coin_sy {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
    direction: rtl !important;
}

.general-settings .coin_sy > span,
.general-settings .text_inline {
    min-width: 50px !important;
    color: #334155 !important;
    font-weight: 500 !important;
    position: static !important;
}

.general-settings .coin_sy input {
    flex: 1 !important;
    max-width: none !important;
}

/* Section spacing */
.general-settings .set-sec2,
.general-settings .set-sec3 {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

.general-settings .set-public-show-1 {
    margin: 0 !important;
}

/* Kind attribute table - liquid glass */
.general-settings .kind-attr-table {
    width: 100% !important;
    border-collapse: collapse !important;
}

.general-settings .kind-attr-table td {
    padding: 3px 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.general-settings .kind-attr-table .attr-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 130, 145, 0.9)) !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    flex-shrink: 0 !important;
}

.general-settings .kind-attr-table input.input-td {
    flex: 1 !important;
    padding: 4px 8px !important;
    border: 1px solid rgba(0, 160, 176, 0.2) !important;
    border-radius: 4px !important;
    background: #fff !important;
}

.general-settings .kind-attr-table input.input-td:disabled {
    background: #f8fafc !important;
}

.general-settings .kind-attr-table input.input-td:not(:disabled) {
    border-color: rgba(0, 160, 176, 0.4) !important;
}

.general-settings .attr-section-title {
    display: block !important;
    margin-bottom: 4px !important;
    color: #1e293b !important;
    font-weight: 600 !important;
}

/* Definition tab boxes */
.general-settings .hst-def-wrap {
    padding: 8px !important;
    direction: rtl !important;
    display: grid !important;
    gap: 8px !important;
}

.general-settings .hst-def-box {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.2) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

.general-settings .hst-def-box-head {
    background: linear-gradient(180deg, rgba(15, 35, 65, 0.95), rgba(10, 28, 55, 0.97)) !important;
    color: #fff !important;
    padding: 6px 10px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.general-settings .hst-def-box-head i {
    color: rgba(0, 200, 220, 0.9) !important;
}

.general-settings .hst-def-box-body {
    padding: 8px !important;
}

/* Action buttons row */
.general-settings .hst-def-actions {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
    direction: rtl !important;
}

.general-settings .hst-def-btn {
    padding: 5px 12px !important;
    border-radius: 5px !important;
    border: none !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.15s !important;
}

.general-settings .hst-def-btn-edit {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
}

.general-settings .hst-def-btn-save {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #fff !important;
}

.general-settings .hst-def-btn-undo {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
}

.general-settings .hst-def-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Toggle switches */
.general-settings .hst-def-tog-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    direction: rtl !important;
}

.general-settings .hst-def-tog {
    position: relative !important;
    width: 36px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.general-settings .hst-def-tog input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.general-settings .hst-def-tog-sl {
    position: absolute !important;
    cursor: pointer !important;
    inset: 0 !important;
    background: #cbd5e1 !important;
    border-radius: 20px !important;
    transition: 0.2s !important;
}

.general-settings .hst-def-tog-sl:before {
    content: "" !important;
    position: absolute !important;
    height: 16px !important;
    width: 16px !important;
    left: 2px !important;
    bottom: 2px !important;
    background: #fff !important;
    border-radius: 50% !important;
    transition: 0.2s !important;
}

.general-settings .hst-def-tog input:checked + .hst-def-tog-sl {
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.9), rgba(0, 130, 145, 1)) !important;
}

.general-settings .hst-def-tog input:checked + .hst-def-tog-sl:before {
    transform: translateX(16px) !important;
}

.general-settings .hst-def-tog-lbl {
    color: #334155 !important;
}

/* VAT/Currency boxes */
.general-settings .hst-def-vat,
.general-settings .hst-def-cur {
    background: #f8fafc !important;
    border: 1px solid rgba(0, 160, 176, 0.15) !important;
    border-radius: 6px !important;
    padding: 8px !important;
}

.general-settings .hst-def-vat-title,
.general-settings .hst-def-cur-title {
    font-weight: 600 !important;
    color: #1e293b !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.general-settings .hst-def-cur-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
}

.general-settings .hst-def-cur-item {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.15) !important;
    border-radius: 4px !important;
    padding: 4px !important;
}

.general-settings .hst-def-cur-item label {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin-bottom: 2px !important;
}

.general-settings .hst-def-cur-item select {
    width: 100% !important;
    padding: 3px !important;
    border: 1px solid rgba(0, 160, 176, 0.2) !important;
    border-radius: 3px !important;
    font-size: 11px !important;
}

/* Payment table */
.general-settings .hst-def-pay-tbl {
    width: 100% !important;
    border-collapse: collapse !important;
}

.general-settings .hst-def-pay-tbl th {
    background: #f1f5f9 !important;
    padding: 6px 8px !important;
    text-align: right !important;
    font-weight: 600 !important;
    color: #475569 !important;
    border-bottom: 1px solid rgba(0, 160, 176, 0.2) !important;
}

.general-settings .hst-def-pay-tbl td {
    padding: 4px 6px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* Select2 in general settings */
.general-settings .select2-container .select2-selection--single {
    height: 32px !important;
    border: 1px solid rgba(0, 160, 176, 0.25) !important;
    border-radius: 5px !important;
    background: #fff !important;
}

.general-settings .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 30px !important;
    padding-right: 8px !important;
    color: #1e293b !important;
}

.general-settings .select2-container .select2-selection--multiple {
    min-height: 32px !important;
    border: 1px solid rgba(0, 160, 176, 0.25) !important;
    border-radius: 5px !important;
    background: #fff !important;
}

/* ============================================
   General Config Tab - Compact Layout
   ============================================ */
#tab-pane-general-config .gc-wrap {
    padding: 6px !important;
    direction: rtl !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

#tab-pane-general-config .gc-actions {
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 2px !important;
    direction: rtl !important;
}

#tab-pane-general-config .gc-top-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}

#tab-pane-general-config .gc-settings-box,
#tab-pane-general-config .gc-currency-box {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.18) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

#tab-pane-general-config .gc-box-head {
    background: linear-gradient(180deg, rgba(15, 35, 65, 0.93), rgba(10, 28, 55, 0.96)) !important;
    color: #fff !important;
    padding: 4px 8px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}

#tab-pane-general-config .gc-box-head i {
    color: rgba(0, 200, 220, 0.9) !important;
}

#tab-pane-general-config .gc-box-body {
    padding: 6px 8px !important;
}

#tab-pane-general-config .gc-toggle-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 0 !important;
    direction: rtl !important;
    cursor: default !important;
}

#tab-pane-general-config .gc-toggle-item[title] {
    cursor: help !important;
}

#tab-pane-general-config .gc-toggle-lbl {
    color: #334155 !important;
}

#tab-pane-general-config .gc-year-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 3px 0 !important;
    direction: rtl !important;
}

#tab-pane-general-config .gc-year-row label {
    color: #475569 !important;
    white-space: nowrap !important;
}

#tab-pane-general-config .gc-year-input {
    width: 80px !important;
    padding: 2px 6px !important;
    border: 1px solid rgba(0, 160, 176, 0.25) !important;
    border-radius: 4px !important;
    text-align: center !important;
}

#tab-pane-general-config .gc-currency-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    padding: 6px !important;
}

#tab-pane-general-config .gc-currency-item {
    background: rgba(248, 250, 252, 0.8) !important;
    border: 1px solid rgba(0, 160, 176, 0.1) !important;
    border-radius: 4px !important;
    padding: 3px 5px !important;
}

#tab-pane-general-config .gc-currency-item label {
    display: block !important;
    color: #64748b !important;
    margin-bottom: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#tab-pane-general-config .gc-currency-item select {
    width: 100% !important;
    padding: 1px 2px !important;
    border: 1px solid rgba(0, 160, 176, 0.18) !important;
    border-radius: 3px !important;
    background: #fff !important;
}

@media (max-width: 992px) {
    #tab-pane-general-config .gc-top-row {
        grid-template-columns: 1fr !important;
    }
    #tab-pane-general-config .gc-currency-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    #tab-pane-general-config .gc-currency-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   DATEPICKER - Liquid Glass RTL
   ============================================ */

/* Main Container - Liquid Glass */
.datepicker {
    padding: 0 !important;
    background: linear-gradient(135deg, rgba(15, 35, 65, 0.97), rgba(10, 28, 55, 0.98)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 160, 176, 0.35) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    direction: rtl !important;
    min-width: 260px !important;
    overflow: visible !important;
    z-index: 999999999 !important;
}

/* Dropdown Positioning - Beside Input */
.datepicker-dropdown {
    position: absolute !important;
    margin-top: 4px !important;
    right: auto;
    z-index: 999999999 !important;
}



/* Ensure parent containers don't clip datepicker */
.input-group,
.date,
[class*="date-picker"],
.form-group,
.set-table1,
.set-table2,
.general-settings .set-table1,
.general-settings .set-table2,
.general-settings table,
.general-settings .tab-content,
.general-settings .tab-pane,
.general-settings {
    overflow: visible !important;
    position: relative;
}

/* Table cells - prevent clipping */
table,
.table,
.table-responsive,
.box-body,
.panel-body {
    overflow: visible !important;
}

/* Note: .modal-body, .modal-content, .tab-content, .tab-pane removed from above
   to prevent reports modal overflow issues. These are handled per-modal now. */

/* Datepicker inside tables - ensure visibility */
.datepicker-dropdown,
.datepicker {
    position: absolute !important;
    z-index: 999999999 !important;
}

/* Hide default arrows */
.datepicker-dropdown:before,
.datepicker-dropdown:after {
    display: none !important;
}

/* Table Structure */
.datepicker table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
}

/* Header Row - Navigation */
.datepicker thead tr:first-child th,
.datepicker thead tr:nth-child(2) th {
    padding: 10px 8px !important;
    background: transparent !important;
}

/* Title (hidden by default) */
.datepicker-title {
    display: none !important;
}

/* Navigation Container */
.datepicker thead tr:nth-child(2) {
    background: rgba(0, 160, 176, 0.15) !important;
}

/* Prev/Next Buttons */
.datepicker .prev,
.datepicker .next {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
    line-height: 30px !important;
}

.datepicker .prev:hover,
.datepicker .next:hover {
    background: rgba(0, 160, 176, 0.4) !important;
    border-color: rgba(0, 160, 176, 0.6) !important;
    color: #fff !important;
    transform: scale(1.05) !important;
}

/* Month/Year Switch Button */
.datepicker .datepicker-switch {
    padding: 6px 12px !important;
    background: rgba(0, 160, 176, 0.25) !important;
    border: 1px solid rgba(0, 160, 176, 0.4) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.datepicker .datepicker-switch:hover {
    background: rgba(0, 160, 176, 0.45) !important;
    border-color: rgba(0, 160, 176, 0.6) !important;
}

/* Day Names Row */
.datepicker .dow {
    padding: 8px 4px !important;
    color: rgba(0, 200, 220, 0.9) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: rgba(0, 160, 176, 0.08) !important;
    border-bottom: 1px solid rgba(0, 160, 176, 0.2) !important;
}

/* Day Cells - Base */
.datepicker td,
.datepicker tbody td {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border: none !important;
}

/* Day Cells - Default State */
.datepicker .day {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid transparent !important;
}

/* Day Cells - Hover */
.datepicker .day:hover,
.datepicker .day.focused {
    background: rgba(0, 160, 176, 0.35) !important;
    color: #fff !important;
    border-color: rgba(0, 160, 176, 0.5) !important;
    transform: scale(1.08) !important;
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.3) !important;
}

/* Old/New Month Days (dimmed) */
.datepicker .old,
.datepicker .new {
    color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.02) !important;
}

.datepicker .old:hover,
.datepicker .new:hover {
    color: rgba(255, 255, 255, 0.7) !important;
    background: rgba(0, 160, 176, 0.2) !important;
}

/* Today */
.datepicker .today {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.5), rgba(217, 119, 6, 0.6)) !important;
    color: #fff !important;
    border: 1px solid rgba(245, 158, 11, 0.6) !important;
    font-weight: 600 !important;
}

.datepicker .today:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.7), rgba(217, 119, 6, 0.8)) !important;
    border-color: rgba(245, 158, 11, 0.8) !important;
}

/* Active/Selected Day */
.datepicker .active,
.datepicker .active.day,
.datepicker .active:hover {
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9)) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 200, 220, 0.6) !important;
    font-weight: 600 !important;
    box-shadow: 
        0 4px 12px rgba(0, 160, 176, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Range Selection */
.datepicker .range {
    background: rgba(0, 160, 176, 0.2) !important;
    color: #fff !important;
    border-radius: 0 !important;
}

.datepicker .range-start {
    border-radius: 8px 0 0 8px !important;
}

.datepicker .range-end {
    border-radius: 0 8px 8px 0 !important;
}

/* Disabled Days */
.datepicker .disabled,
.datepicker .disabled:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Footer - Today/Clear Buttons */
.datepicker tfoot th {
    padding: 8px !important;
    background: rgba(0, 160, 176, 0.1) !important;
    border-top: 1px solid rgba(0, 160, 176, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.datepicker tfoot th:hover {
    background: rgba(0, 160, 176, 0.3) !important;
    color: #fff !important;
}

.datepicker tfoot .today,
.datepicker tfoot .clear {
    display: table-cell !important;
    background: rgba(0, 160, 176, 0.15) !important;
}

/* Month/Year Picker Views */
.datepicker .datepicker-months td,
.datepicker .datepicker-years td,
.datepicker .datepicker-decades td,
.datepicker .datepicker-centuries td {
    padding: 8px !important;
}

.datepicker .datepicker-months span,
.datepicker .datepicker-years span,
.datepicker .datepicker-decades span,
.datepicker .datepicker-centuries span {
    display: inline-block !important;
    width: 54px !important;
    height: 42px !important;
    line-height: 42px !important;
    margin: 3px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 8px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.datepicker .datepicker-months span:hover,
.datepicker .datepicker-years span:hover,
.datepicker .datepicker-decades span:hover,
.datepicker .datepicker-centuries span:hover {
    background: rgba(0, 160, 176, 0.35) !important;
    border-color: rgba(0, 160, 176, 0.5) !important;
    color: #fff !important;
}

.datepicker .datepicker-months span.active,
.datepicker .datepicker-years span.active,
.datepicker .datepicker-decades span.active,
.datepicker .datepicker-centuries span.active {
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.7), rgba(0, 128, 144, 0.85)) !important;
    border-color: rgba(0, 200, 220, 0.6) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.datepicker .datepicker-months span.disabled,
.datepicker .datepicker-years span.disabled {
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(255, 255, 255, 0.2) !important;
    cursor: not-allowed !important;
}

/* Inline Datepicker */
.datepicker-inline {
    width: auto !important;
    display: inline-block !important;
}

/* Ensure datepicker stays within viewport */
@media (max-width: 576px) {
    .datepicker {
        min-width: 240px !important;
        max-width: calc(100vw - 20px) !important;
    }
    
    .datepicker td,
    .datepicker tbody td {
        width: 30px !important;
        height: 30px !important;
    }
    
    .datepicker .datepicker-months span,
    .datepicker .datepicker-years span {
        width: 48px !important;
        height: 36px !important;
        line-height: 36px !important;
    }
}

/* High contrast mode for accessibility */
@media (prefers-contrast: high) {
    .datepicker {
        border-width: 2px !important;
    }
    
    .datepicker .day {
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
    }
    
    .datepicker .active {
        border-width: 2px !important;
    }
}

/* ============================================
   GENERAL SETTINGS MODAL - Liquid Glass Header/Footer
   ============================================ */

/* Modal Content Container */
.general_settings_modal {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96)) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 160, 176, 0.2) !important;
    border-radius: 12px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    overflow: hidden !important;
}

/* Modal Header - Liquid Glass Dark */
.general_settings_modal .modal-header,
.general_settings_modal .head-set-ama {
    background: linear-gradient(135deg, rgba(15, 35, 65, 0.97), rgba(10, 28, 55, 0.98)) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(0, 160, 176, 0.3) !important;
    padding: 12px 16px !important;
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: auto !important;
}

.general_settings_modal .modal-header .modal-title,
.general_settings_modal .head-set-ama .modal-title {
    color: #fff !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.general_settings_modal .modal-header .modal-title span,
.general_settings_modal .head-set-ama .modal-title span {
    color: rgba(0, 200, 220, 0.95) !important;
}

.general_settings_modal .modal-header .close,
.general_settings_modal .head-set-ama .close {
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
    text-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.15s ease !important;
}

.general_settings_modal .modal-header .close:hover,
.general_settings_modal .head-set-ama .close:hover {
    color: #fff !important;
    background: rgba(239, 68, 68, 0.8) !important;
}

/* Modal Body */
.general_settings_modal .modal-body,
.general_settings_modal .set-public-body {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(241, 245, 249, 0.96)) !important;
    padding: 12px !important;
    direction: rtl !important;
}

/* Modal Footer - Liquid Glass */
.general_settings_modal .modal-footer {
    background: linear-gradient(180deg, rgba(241, 245, 249, 0.98), rgba(226, 232, 240, 0.96)) !important;
    border-top: 1px solid rgba(0, 160, 176, 0.15) !important;
    padding: 10px 16px !important;
    direction: rtl !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

.general_settings_modal .modal-footer .btn {
    padding: 6px 16px !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

.general_settings_modal .modal-footer .btn-secondary,
.general_settings_modal .modal-footer .general-settings-close-buttons {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.9), rgba(71, 85, 105, 0.95)) !important;
    border: 1px solid rgba(100, 116, 139, 0.5) !important;
    color: #fff !important;
}

.general_settings_modal .modal-footer .btn-secondary:hover,
.general_settings_modal .modal-footer .general-settings-close-buttons:hover {
    background: linear-gradient(135deg, rgba(71, 85, 105, 0.95), rgba(51, 65, 85, 1)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.general_settings_modal .modal-footer .btn-primary {
    background: linear-gradient(135deg, rgba(0, 160, 176, 0.9), rgba(0, 130, 145, 0.95)) !important;
    border: 1px solid rgba(0, 180, 200, 0.5) !important;
    color: #fff !important;
}

.general_settings_modal .modal-footer .btn-primary:hover {
    background: linear-gradient(135deg, rgba(0, 160, 176, 1), rgba(0, 130, 145, 1)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 160, 176, 0.3) !important;
}

/* Invoice types tables - checkboxes */
.general-settings table input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #00a0b0 !important;
    cursor: pointer !important;
}

/* Input-v2 section spacing */
.general-settings .input-v2 {
    margin-top: 12px !important;
    padding: 0 8px !important;
}

.general-settings .input-v2 select {
    width: 100% !important;
    max-width: 400px !important;
    margin-bottom: 10px !important;
}

/* Settle account section */
.general-settings .input-label-container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    direction: rtl !important;
}

.general-settings .input-label-container label {
    min-width: 80px !important;
    font-weight: 500 !important;
    color: #334155 !important;
}

.general-settings .input-label-container input {
    flex: 1 !important;
    min-width: 150px !important;
    max-width: 250px !important;
}

/* Zatca configuration */
.general-settings .zatca-configuration-body {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.15) !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-top: 10px !important;
}

.general-settings .zatca-configuration-body .row {
    margin-bottom: 8px !important;
    align-items: center !important;
}

.general-settings .zatca-configuration-body label {
    font-weight: 500 !important;
    color: #334155 !important;
}

.general-settings .zatca-configuration-body textarea {
    width: 100% !important;
    resize: vertical !important;
    min-height: 60px !important;
}

/* Invoice background section */
.general-settings .sales-attachments-body {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.15) !important;
    border-radius: 6px !important;
    padding: 8px !important;
}

/* Select dropdowns in input-v2 */
.general-settings .input-v2 > select,
.general-settings #branches-and-item-cards-select,
.general-settings #branch-payment-methods-select,
.general-settings #branch-zatca-configuration-select,
.general-settings #branches-and-invoice-background {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.25) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    color: #1e293b !important;
}

/* Tables in branches/payment methods sections */
.general-settings .branches-and-item-cards-table,
.general-settings .branch-payment-methods-table {
    background: #fff !important;
    border: 1px solid rgba(0, 160, 176, 0.15) !important;
    border-radius: 6px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
}

/* Form check alignment */
.general-settings .form-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    direction: rtl !important;
}

.general-settings .form-check-input {
    margin: 0 !important;
}

.general-settings .form-check-label {
    margin: 0 !important;
    color: #334155 !important;
}

/* ============================================
   UTILITY CLASSES - Replacement for Inline Styles
   ============================================ */

/* Hidden visibility utility */
.hidden-visibility {
    visibility: hidden !important;
}

/* Excel export button */
.excel-export-btn {
    width: 50px !important;
    padding: 0 !important;
}

.excel-icon {
    color: #3d7e4d !important;
    font-size: 22px !important;
    padding-top: 6px !important;
}

/* Modal large custom width */
.modal-lg-custom {
    width: 1200px !important;
    max-width: 95vw !important;
}

/* Zatca heading */
.zatca-heading {
    color: #fff !important;
    background-color: #dc3545 !important;
    text-align: center !important;
    margin-top: 9px !important;
    width: 100% !important;
    padding: 5px !important;
    border-radius: 4px !important;
}

/* Debug hint */
.debug-hint {
    margin-top: 10px !important;
    direction: ltr !important;
    text-align: left !important;
}

/* Payment method table columns */
.pay-method-name-col {
    width: 40% !important;
}

.pay-method-type-col {
    width: 30% !important;
}

.pay-method-vis-col {
    width: 15% !important;
    text-align: center !important;
    font-size: 11px !important;
}

.hst-def-pay-tbl td.pay-method-vis-td {
    text-align: center !important;
    vertical-align: middle !important;
}

.hst-def-pay-tbl td.pay-method-vis-td input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* Bank settings column */
.hst-def-col-bank-settings {
    grid-column: 3 / 5 !important;
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
}

/* Silver carat inputs */
.silver-carat-inputs {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Definition tab (silver carat rows) */
.hst-def-silver-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

.hst-def-silver-label {
    font-size: 12px !important;
    color: #1f2937 !important;
    min-width: 90px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.hst-def-silver-input {
    width: 88px !important;
    text-align: center !important;
}

/* Text danger utility */
.text-danger {
    color: #dc3545 !important;
}

/* ============================================
   DEFINITION TAB STYLES - Liquid Glass RTL
   ============================================ */

/* Layout wrapper */
#tab-pane-definition .hst-def-wrap{
    padding: 10px !important;
    direction: rtl !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.25fr) minmax(420px, 2fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

/* Top actions row */
#tab-pane-definition .hst-def-actions{
    display:flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
    padding: 4px 6px !important;
    grid-column: 1/-1 !important;
}

/* Buttons: reuse liquid-glass button language */
#tab-pane-definition .hst-def-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    padding: 0 12px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    color: #0a1e3c !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

#tab-pane-definition .hst-def-btn:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

#tab-pane-definition .hst-def-btn i{font-size: 14px !important;}

/* Specific button intents */
#tab-pane-definition .hst-def-btn-edit{
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.28), rgba(245, 158, 11, 0.18)) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #7c2d12 !important;
}
#tab-pane-definition .hst-def-btn-save{
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(34, 197, 94, 0.16)) !important;
    border-color: rgba(34, 197, 94, 0.35) !important;
    color: #14532d !important;
}
#tab-pane-definition .hst-def-btn-undo{
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.22), rgba(59, 130, 246, 0.14)) !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
    color: #1e3a8a !important;
}

/* Columns */
#tab-pane-definition .hst-def-col{display:flex !important;flex-direction:column !important;gap:10px !important;min-width:0 !important;}
#tab-pane-definition .hst-def-col-1{grid-column:1 !important;}
#tab-pane-definition .hst-def-col-2{grid-column:2 !important;}
#tab-pane-definition .hst-def-col-3{grid-column:3 !important;}
#tab-pane-definition .hst-def-col-5{grid-column:1 / -1 !important;min-width:0 !important;}

/* Glass cards */
#tab-pane-definition .hst-def-box{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(245, 250, 255, 0.82)) !important;
    border: 1px solid rgba(0, 160, 176, 0.18) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
}

#tab-pane-definition .hst-def-box-head{
    background: linear-gradient(135deg, rgba(15, 35, 65, 0.95), rgba(10, 28, 55, 0.97)) !important;
    color: #fff !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

#tab-pane-definition .hst-def-box-head i{color: rgba(0, 200, 220, 0.95) !important;font-size: 14px !important;}

#tab-pane-definition .hst-def-box-body{padding: 10px !important;}

/* Inputs inside the Definition tab */
#tab-pane-definition .hst-def-tbl,
#tab-pane-definition .hst-def-pay-tbl{width:100% !important;border-collapse:collapse !important;}

#tab-pane-definition .hst-def-tbl td{padding: 4px 0 !important;}

#tab-pane-definition .hst-def-tbl td,
#tab-pane-definition .hst-def-pay-tbl td{
    background: transparent !important;
    border: none !important;
}

#tab-pane-definition .hst-def-tbl input[type="text"],
#tab-pane-definition .hst-def-tbl input[type="number"],
#tab-pane-definition .hst-def-pay-tbl input[type="text"],
#tab-pane-definition .hst-def-pay-tbl select,
#tab-pane-definition select,
#tab-pane-definition input{
    width:100% !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(0, 160, 176, 0.25) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    box-sizing: border-box !important;
    text-align: right !important;
}

#tab-pane-definition input[type="number"]{
    text-align: center !important;
}

#tab-pane-definition .hst-def-silver-input{
    text-align: center !important;
}

#tab-pane-definition input:disabled,
#tab-pane-definition select:disabled{
    background: rgba(241, 245, 249, 0.9) !important;
    color: #475569 !important;
}

#tab-pane-definition .hst-def-pay-tbl th{
    background: rgba(15, 35, 65, 0.06) !important;
    color: #0f172a !important;
    padding: 8px 10px !important;
    text-align: right !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-bottom: 1px solid rgba(0, 160, 176, 0.12) !important;
}

#tab-pane-definition .hst-def-pay-tbl td{padding: 6px 8px !important;border-bottom: 1px solid rgba(0, 160, 176, 0.08) !important;}

/* Dedicated select style hook for payment type */
#tab-pane-definition .hst-def-pay-type-select{font-size: 12px !important;}

/* VAT/Currency blocks */
#tab-pane-definition .hst-def-vat,
#tab-pane-definition .hst-def-cur{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(245, 250, 255, 0.78)) !important;
    border: 1px solid rgba(0, 160, 176, 0.18) !important;
    border-radius: 14px !important;
    padding: 10px !important;
}

#tab-pane-definition .hst-def-vat-title,
#tab-pane-definition .hst-def-cur-title{font-size: 13px !important;font-weight: 800 !important;color: #0f172a !important;margin-bottom: 8px !important;display:flex !important;align-items:center !important;gap:8px !important;}

#tab-pane-definition .hst-def-tog-row{display:flex !important;align-items:center !important;gap:10px !important;padding: 6px 0 !important;}

/* Currency grid: tighter + responsive */
#tab-pane-definition .hst-def-cur-grid{display:grid !important;grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;gap: 8px !important;}
#tab-pane-definition .hst-def-cur-item{background: rgba(255, 255, 255, 0.7) !important;border: 1px solid rgba(0, 160, 176, 0.12) !important;border-radius: 12px !important;padding: 8px !important;min-width:0 !important;}
#tab-pane-definition .hst-def-cur-item label{display:block !important;font-size: 12px !important;font-weight: 600 !important;color:#0f172a !important;margin-bottom: 6px !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}

/* Responsive: stack on smaller widths */
@media (max-width: 1200px){
    #tab-pane-definition .hst-def-wrap{grid-template-columns: 1fr 1fr !important;}
    #tab-pane-definition .hst-def-col-1{grid-column:1 !important;}
    #tab-pane-definition .hst-def-col-2{grid-column:2 !important;}
    #tab-pane-definition .hst-def-col-3{grid-column:1 / -1 !important;}
    #tab-pane-definition .hst-def-col-5{grid-column:1 / -1 !important;}
}

@media (max-width: 768px){
    #tab-pane-definition .hst-def-wrap{grid-template-columns: 1fr !important;padding: 8px !important;}
    #tab-pane-definition .hst-def-actions{padding: 0 !important;}
    #tab-pane-definition .hst-def-cur-grid{grid-template-columns: repeat(2, minmax(0, 1fr)) !important;}
}

/* Definition form refactored styles */
#Definition_model.definition-form-refactored table input.input_test,
#Definition_model.definition-form-refactored table input.input-td,
#Definition_model.definition-form-refactored table input,
#Definition_model.definition-form-refactored input.input_test,
#Definition_model.definition-form-refactored input.input-td{font-size:13px !important;padding:6px 10px !important;border:1px solid rgba(0, 160, 176, 0.25) !important;border-radius:10px !important;background:rgba(255, 255, 255, 0.92) !important;height:auto !important;}
#Definition_model.definition-form-refactored table input.input_test:disabled,
#Definition_model.definition-form-refactored table input.input-td:disabled,
#Definition_model.definition-form-refactored table input:disabled{background-color:#f8fafc !important;cursor:not-allowed !important;}
#Definition_model.definition-form-refactored table select,
#Definition_model.definition-form-refactored select.form-control,
#Definition_model.definition-form-refactored table td select{font-size:12px !important;padding:6px 10px !important;border:1px solid rgba(0, 160, 176, 0.25) !important;border-radius:10px !important;background:rgba(255, 255, 255, 0.92) !important;height:auto !important;}
#Definition_model.definition-form-refactored table{font-size:13px !important;background:transparent !important;border:none !important;}
#Definition_model.definition-form-refactored table tbody td,
#Definition_model.definition-form-refactored table td,
#Definition_model.definition-form-refactored #general-settings-pay-method-a-table td,
#Definition_model.definition-form-refactored .hst-def-pay-tbl td,
#Definition_model.definition-form-refactored .hst-def-tbl td{padding:3px 4px !important;border:none !important;border-bottom:1px solid rgba(0, 160, 176, 0.08) !important;background:transparent !important;background-color:transparent !important;}
.modal-body #Definition_model.definition-form-refactored td,
.modal-body #Definition_model.definition-form-refactored table td{border:none !important;border-bottom:1px solid rgba(0, 160, 176, 0.08) !important;background:transparent !important;background-color:transparent !important;}
#Definition_model.definition-form-refactored .hst-def-pay-tbl th{border:none !important;border-bottom:1px solid #e2e8f0 !important;}
#Definition_model.definition-form-refactored .select2-container,
#Definition_model.definition-form-refactored .select2-selection{width:100% !important;}
#Definition_model.definition-form-refactored .select2-container--default .select2-selection--single{height:28px !important;border:1px solid #e2e8f0 !important;border-radius:4px !important;background:#fff !important;display:flex !important;align-items:center !important;}
#Definition_model.definition-form-refactored .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:26px !important;padding-right:8px !important;padding-left:25px !important;font-size:11px !important;}
#Definition_model.definition-form-refactored .select2-container--default .select2-selection--single .select2-selection__arrow{height:26px !important;width:20px !important;position:absolute !important;left:3px !important;right:auto !important;top:50% !important;transform:translateY(-50%) !important;}
#Definition_model.definition-form-refactored .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#666 transparent transparent transparent !important;border-width:5px 4px 0 4px !important;margin-top:2px !important;}
#bank_payment_methods + .select2-container .select2-selection--multiple{min-height:32px !important;border:1px solid rgba(0, 160, 176, 0.25) !important;border-radius:10px !important;background:rgba(255, 255, 255, 0.92) !important;display:flex !important;align-items:center !important;padding:4px 8px !important;box-sizing:border-box !important;}
#bank_payment_methods + .select2-container .select2-selection--multiple .select2-search__field{font-size:12px !important;line-height:22px !important;margin-top:0 !important;height:22px !important;}
#bank_payment_methods + .select2-container .select2-selection__placeholder{font-size:12px !important;line-height:22px !important;}
#accounts-settings-modal .select2-container--open{z-index: 99999 !important;}
#accounts-settings-modal .select2-dropdown{z-index: 99999 !important;}
body > .select2-container--open{z-index: 100000 !important;}
body > .select2-container .select2-dropdown{z-index: 100000 !important;}

/* ============================================
   HST SETTINGS PANEL - Choice Tab Styles
   ============================================ */
.hst-settings-container {padding: 1rem !important;direction: rtl !important;display: grid !important;grid-template-columns: repeat(2, 1fr) !important;gap: 1rem !important;}
.hst-card {background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;border-radius: 12px !important;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;overflow: hidden !important;border: 1px solid #e2e8f0 !important;margin: 0 !important;}
.hst-card-header {padding: 0.75rem 1rem !important;border-bottom: 1px solid #e2e8f0 !important;display: flex !important;align-items: center !important;gap: 0.5rem !important;}
.hst-card-header.hst-danger {background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;border-bottom-color: #fecaca !important;}
.hst-card-header.hst-primary {background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;border-bottom-color: #bfdbfe !important;}
.hst-card-header.hst-warning {background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;border-bottom-color: #fde68a !important;}
.hst-card-header.hst-success {background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important;border-bottom-color: #bbf7d0 !important;}
.hst-card-icon {width: 32px !important;height: 32px !important;border-radius: 8px !important;display: flex !important;align-items: center !important;justify-content: center !important;font-size: 0.9rem !important;}
.hst-card-icon.hst-danger {background: #dc2626 !important;color: #fff !important;}
.hst-card-icon.hst-primary {background: #2563eb !important;color: #fff !important;}
.hst-card-icon.hst-warning {background: #d97706 !important;color: #fff !important;}
.hst-card-icon.hst-success {background: #16a34a !important;color: #fff !important;}
.hst-card-title {font-size: 0.95rem !important;font-weight: 600 !important;color: #1e293b !important;margin: 0 !important;}
.hst-card-body {padding: 1rem !important;}
.hst-toggle-wrapper {display: flex !important;align-items: center !important;gap: 0.75rem !important;margin-bottom: 0.5rem !important;}
.hst-toggle {position: relative !important;display: inline-block !important;width: 44px !important;height: 24px !important;flex-shrink: 0 !important;}
.hst-toggle input {opacity: 0 !important;width: 0 !important;height: 0 !important;position: absolute !important;}
.hst-toggle-slider {position: absolute !important;cursor: pointer !important;top: 0 !important;left: 0 !important;right: 0 !important;bottom: 0 !important;background-color: #cbd5e1 !important;transition: 0.3s !important;border-radius: 24px !important;}
.hst-toggle-slider:before {position: absolute !important;content: "" !important;height: 18px !important;width: 18px !important;left: 3px !important;bottom: 3px !important;background-color: white !important;transition: 0.3s !important;border-radius: 50% !important;box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;}
.hst-toggle input:checked + .hst-toggle-slider {background-color: #dc2626 !important;}
.hst-toggle input:checked + .hst-toggle-slider:before {transform: translateX(20px) !important;}
.hst-toggle.hst-primary input:checked + .hst-toggle-slider {background-color: #2563eb !important;}
.hst-toggle.hst-success input:checked + .hst-toggle-slider {background-color: #16a34a !important;}
.hst-toggle-label {font-weight: 500 !important;color: #334155 !important;font-size: 0.85rem !important;}
.hst-toggle-label.hst-danger {color: #dc2626 !important;}
.hst-hint {font-size: 0.75rem !important;color: #64748b !important;margin: 0.25rem 0 0.5rem 0 !important;padding-right: 0 !important;}
.hst-form-group {margin-bottom: 0.5rem !important;}
.hst-label {display: block !important;font-size: 0.8rem !important;font-weight: 500 !important;color: #475569 !important;margin-bottom: 0.25rem !important;position: relative !important;right: auto !important;}
.hst-input {width: 100% !important;max-width: 140px !important;padding: 0.4rem 0.75rem !important;border: 2px solid #e2e8f0 !important;border-radius: 8px !important;font-size: 0.85rem !important;background: #fff !important;}
.hst-input:focus {outline: none !important;border-color: #2563eb !important;}
.hst-btn {display: inline-flex !important;align-items: center !important;gap: 0.4rem !important;padding: 0.4rem 0.85rem !important;border-radius: 8px !important;font-size: 0.8rem !important;font-weight: 500 !important;border: none !important;cursor: pointer !important;}
.hst-btn-danger {background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;color: #fff !important;}
.hst-btn-primary {background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;color: #fff !important;}
.hst-btn-success {background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;color: #fff !important;}
.hst-btn-secondary {background: #f1f5f9 !important;color: #475569 !important;border: 1px solid #e2e8f0 !important;}
.hst-danger-zone {background: #fef2f2 !important;border: 2px dashed #fecaca !important;border-radius: 10px !important;padding: 1rem !important;}
.hst-danger-zone-title {font-size: 0.8rem !important;font-weight: 600 !important;color: #dc2626 !important;margin-bottom: 0.75rem !important;display: flex !important;align-items: center !important;gap: 0.4rem !important;}
.hst-select {width: 100% !important;padding: 0.4rem 0.75rem !important;border: 2px solid #e2e8f0 !important;border-radius: 8px !important;font-size: 0.85rem !important;background: #fff !important;cursor: pointer !important;margin-bottom: 0.75rem !important;}
.hst-danger-btns {display: flex !important;flex-wrap: wrap !important;gap: 0.5rem !important;}
.hst-danger-btn {display: inline-flex !important;align-items: center !important;gap: 0.4rem !important;padding: 0.4rem 0.75rem !important;background: #fff !important;border: 2px solid #fecaca !important;border-radius: 6px !important;color: #dc2626 !important;font-size: 0.75rem !important;font-weight: 500 !important;cursor: pointer !important;transition: all 0.2s !important;}
.hst-danger-btn:hover {background: #dc2626 !important;border-color: #dc2626 !important;color: #fff !important;}
.hst-modal-overlay {background: rgba(15, 23, 42, 0.7) !important;backdrop-filter: blur(4px) !important;}
.hst-modal-content {border-radius: 12px !important;border: none !important;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;overflow: hidden !important;}
.hst-modal-header {background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;padding: 1rem !important;border-bottom: 1px solid #fecaca !important;}
.hst-modal-title {display: flex !important;align-items: center !important;gap: 0.5rem !important;font-size: 1rem !important;font-weight: 600 !important;color: #dc2626 !important;margin: 0 !important;}
.hst-modal-body {padding: 1rem !important;}
.hst-modal-footer {padding: 0.75rem 1rem !important;background: #f8fafc !important;border-top: 1px solid #e2e8f0 !important;display: flex !important;justify-content: flex-end !important;gap: 0.5rem !important;}
.hst-password-field {position: relative !important;}
.hst-password-field i {position: absolute !important;right: 0.75rem !important;top: 50% !important;transform: translateY(-50%) !important;color: #94a3b8 !important;}
.hst-password-field input {width: 100% !important;padding: 0.5rem 0.75rem !important;padding-right: 2rem !important;border: 2px solid #e2e8f0 !important;border-radius: 8px !important;font-size: 0.85rem !important;}
.hst-password-field input:focus {outline: none !important;border-color: #dc2626 !important;}
.hst-error-msg {color: #dc2626 !important;font-size: 0.8rem !important;margin-top: 0.25rem !important;}

/* ============================================
   HST INFO CARD HEADER
   ============================================ */
.hst-card-header.hst-info {background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%) !important;border-bottom-color: #bae6fd !important;}
.hst-card-icon.hst-info {background: #0ea5e9 !important;color: #fff !important;}

/* ============================================
   THEME SELECTOR STYLES
   ============================================ */
.theme-selector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}

.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
}

.theme-option:hover {
    border-color: #0ea5e9;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.15);
}

.theme-option.active,
.theme-option:has(input:checked) {
    border-color: #0ea5e9;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.theme-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-preview {
    width: 80px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-preview-header {
    height: 15px;
}

.theme-preview-body {
    height: 45px;
}

/* Liquid Glass Preview */
.theme-preview-glass .theme-preview-header {
    background: linear-gradient(135deg, #0a1e3c, #0d3a5c);
}
.theme-preview-glass .theme-preview-body {
    background: linear-gradient(135deg, #0a1628 0%, #0d2847 50%, #0a1e3c 100%);
}

/* Light Preview */
.theme-preview-light .theme-preview-header {
    background: linear-gradient(135deg, #0077b6, #005f92);
}
.theme-preview-light .theme-preview-body {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
}

/* Dark Preview */
.theme-preview-dark .theme-preview-header {
    background: linear-gradient(135deg, #1a1a1a, #252525);
}
.theme-preview-dark .theme-preview-body {
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%);
}

.theme-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.theme-name-en {
    font-size: 11px;
    color: #64748b;
}

@media (max-width: 480px) {
    .theme-selector-grid {
        grid-template-columns: 1fr;
    }
}

.modal-dialog {
    max-width: 1024px !important;
}
.dialog {
    max-width: 1024px !important;
}

/* All document modals - 1200px width */
#sales-modal .modal-dialog,
#sales-back-modal .modal-dialog,
#purchases-recieving-modal .modal-dialog,
#purchases-back-modal .modal-dialog,
#sanad-kabd-modal .modal-dialog,
#sanad-sarf-modal .modal-dialog,
#accounts-modal .modal-dialog,
#convert-modal .modal-dialog,
#convert-back-modal .modal-dialog,
#rased-efttahy-modal .modal-dialog,
#customers-modal .modal-dialog,
#mowardon-modal .modal-dialog,
#reports-modal .modal-dialog,
#buying-calibration-modal .modal-dialog,
#selling-calibration-modal .modal-dialog,
#general-settings-modal .modal-dialog,
#myzan-modal .modal-dialog{
    max-width: 1200px !important;
}

#accounts-connect-modal .modal-dialog {
    max-width: 1400px !important;
}

#accounts-connect-modal .container {
    max-width: 1400px !important;
}

/* ============================================
   FLOATING THEME ICONS - Always Visible
   ============================================ */
.floating-theme-btn {
    display: none;
}

.floating-theme-panel {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.floating-theme-panel-header {
    display: none;
}

.floating-theme-option {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.floating-theme-option:hover {
    transform: scale(1.15);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.3);
}

.floating-theme-option.active {
    transform: scale(1.1);
    border-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.5), 0 4px 15px rgba(0, 0, 0, 0.25);
}

/* Theme Icon Backgrounds */
.floating-theme-option[data-theme="liquid-glass"] {
    background: linear-gradient(135deg, #1a3a5c, #2d578c);
}

.floating-theme-option[data-theme="light"] {
    background: linear-gradient(135deg, #fef3c7, #fcd34d);
}

.floating-theme-option[data-theme="dark"] {
    background: linear-gradient(135deg, #1e1b4b, #312e81);
}

.floating-theme-option svg {
    width: 20px;
    height: 20px;
}

.floating-theme-option[data-theme="liquid-glass"] svg { 
    stroke: #00c9b7; 
}

.floating-theme-option[data-theme="light"] svg { 
    stroke: #d97706; 
}

.floating-theme-option[data-theme="dark"] svg { 
    stroke: #c4b5fd; 
}

/* Hide old elements */
.floating-theme-icon,
.floating-theme-label,
.floating-theme-check {
    display: none;
}

/* Tooltip on hover */
.floating-theme-option::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #1a3a4a;
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    margin-left: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.floating-theme-option:hover::after {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   BRANCH SETTINGS - Refactored Layout
   ============================================ */
.branch-settings-container {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 12px;
    direction: rtl;
    padding: 10px;
}

.branch-settings-container .branch-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: linear-gradient(180deg, #f8fafc, #f1f5f9);
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    min-width: 90px;
}

.branch-settings-container .branch-actions .btn {
    padding: 6px 10px;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.15s ease;
    white-space: nowrap;
    border: 1px solid transparent;
}

.branch-settings-container .branch-actions .btn-add {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border-color: #059669;
}

.branch-settings-container .branch-actions .btn-edit {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border-color: #2563eb;
}

.branch-settings-container .branch-actions .btn-save {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border-color: #16a34a;
}

.branch-settings-container .branch-actions .btn-undo {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border-color: #d97706;
}

.branch-settings-container .branch-actions .btn-delete {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    border-color: #dc2626;
}

.branch-settings-container .branch-actions .btn-secondary {
    background: linear-gradient(135deg, #64748b, #475569);
    color: #fff;
    border-color: #475569;
}

.branch-settings-container .branch-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.branch-settings-container .branch-actions .btn.is-clicked {
    animation: branchBtnClick 0.25s ease-out;
}

@keyframes branchBtnClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.96);
    }
    100% {
        transform: scale(1);
    }
}

/* Branch Table Section */
.branch-settings-container .branch-table-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.branch-settings-container .branch-table-wrap {
    background: var(--theme-bg-card, #fff);
    border: 1px solid var(--table-border, #e2e8f0);
    border-radius: 8px;
    overflow: hidden;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.branch-settings-container .branch-table-wrap table {
    width: 100%;
    border-collapse: collapse;
}

.branch-settings-container .branch-table-wrap thead th {
    background: var(--table-header-bg, linear-gradient(180deg, #1e3a5f, #0f2744));
    color: var(--table-header-text, #fff);
    padding: 8px 10px;
    font-weight: 600;
    text-align: right;
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--table-border, #e2e8f0);
}

.branch-settings-container .branch-table-wrap tbody tr {
    background: var(--table-row-bg, #fff);
    border-bottom: 1px solid var(--table-border, #e2e8f0);
    cursor: pointer;
    transition: background var(--transition-fast, 0.15s), box-shadow var(--transition-fast, 0.15s);
}

.branch-settings-container .branch-table-wrap tbody tr:nth-child(even) {
    background: var(--table-row-alt, #f8fafc);
}

.branch-settings-container .branch-table-wrap tbody tr:hover {
    background: var(--table-row-hover, #f0f9ff);
}

.branch-settings-container .branch-table-wrap tbody tr.selected,
.branch-settings-container .branch-table-wrap tbody tr.active {
    background: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.2);
    box-shadow: inset 0 0 0 1px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.35);
}

.branch-settings-container .branch-table-wrap tbody tr.selected td,
.branch-settings-container .branch-table-wrap tbody tr.active td {
    background: inherit;
}

.branch-settings-container .branch-table-wrap tbody td {
    padding: 6px 10px;
    color: var(--theme-text-primary, #1e293b);
}

/* Branch Form Fields */
.branch-settings-container .branch-form-fields {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.branch-settings-container .branch-field-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.branch-settings-container .branch-field-row label {
    min-width: 80px;
    color: #334155;
    font-weight: 500;
    text-align: right;
}

.branch-settings-container .branch-field-row input,
.branch-settings-container .branch-field-row select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.branch-settings-container .branch-field-row input:focus,
.branch-settings-container .branch-field-row select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
    outline: none;
}

.branch-settings-container .branch-field-row input:disabled,
.branch-settings-container .branch-field-row select:disabled {
    background: #f1f5f9;
    color: #64748b;
    cursor: not-allowed;
}

/* Branch Checkboxes */
.branch-settings-container .branch-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.branch-settings-container .branch-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

.branch-settings-container .branch-checkbox-row label {
    color: #334155;
    font-weight: 500;
    cursor: pointer;
}

/* Accounts Section */
.branch-settings-container .branch-accounts-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.branch-settings-container .branch-accounts-section .branch-field-row label {
    min-width: 100px;
}

/* Additional Info Section */
.branch-settings-container .branch-additional-info {
    grid-column: 1 / -1;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
}

.branch-settings-container .branch-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.branch-settings-container .branch-info-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.branch-settings-container .branch-info-field label {
    color: #475569;
    font-weight: 500;
}

.branch-settings-container .branch-info-field input {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
}

.branch-settings-container .branch-info-field input:disabled {
    background: #f1f5f9;
    color: #64748b;
}

/* Zatca Section */
.branch-settings-container .branch-zatca-section {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border: 1px solid #7dd3fc;
    border-radius: 8px;
    padding: 12px;
    margin-top: 8px;
}

.branch-settings-container .branch-zatca-title {
    color: #0369a1;
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #7dd3fc;
}

.branch-settings-container .branch-zatca-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.branch-settings-container .branch-zatca-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.branch-settings-container .branch-zatca-field label {
    color: #0c4a6e;
    font-weight: 500;
}

.branch-settings-container .branch-zatca-field input {
    padding: 6px 10px;
    border: 1px solid #7dd3fc;
    border-radius: 6px;
    background: #fff;
    color: #1e293b;
}

.branch-settings-container .branch-zatca-field input:disabled {
    background: #f0f9ff;
    color: #64748b;
}

/* Logo Section */
.branch-settings-container .branch-logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.branch-settings-container .branch-logo-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    object-fit: contain;
    background: #f8fafc;
}

.branch-settings-container .branch-logo-upload {
    flex: 1;
}

.branch-settings-container .branch-logo-upload label {
    display: block;
    color: #475569;
    font-weight: 500;
    margin-bottom: 4px;
}

/* ============================
   Bond Numbers Modal
   ============================ */
.bond-num-modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bond-num-modal-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
}
.bond-num-modal-content {
    position: relative;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    width: 850px;
    max-width: 95vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #1e293b;
}
.bond-num-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    background: rgba(10, 30, 60, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px 10px 0 0;
}
.bond-num-modal-header h3 {
    margin: 0;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.bond-num-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    padding: 0;
}
.bond-num-modal-close:hover {
    background: rgba(220, 53, 69, 0.8);
    border-color: rgba(220, 53, 69, 0.9);
    color: #fff;
}
.bond-num-modal-close i {
    color: inherit;
}
.bond-num-modal-body {
    padding: 16px 18px;
    overflow-y: auto;
    flex: 1;
}
.bond-num-branch-info {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bond-num-branch-info label {
    font-weight: 600;
    color: #475569;
}
.bond-num-branch-info span {
    color: #1e293b;
    font-weight: 500;
}
.bond-num-table {
    width: 100%;
    border-collapse: collapse;
}
.bond-num-table thead th {
    background: #f1f5f9;
    color: #334155;
    font-weight: 600;
    padding: 6px 8px;
    text-align: center;
    border-bottom: 2px solid #cbd5e1;
    border-left: 1px solid #e2e8f0;
}
.bond-num-table thead th:last-child {
    border-left: none;
}
.bond-num-th-doc {
    text-align: right !important;
    min-width: 130px;
}
.bond-num-th-group {
    border-bottom: 1px solid #cbd5e1 !important;
}
.bond-num-th-sub {
    font-weight: 500 !important;
}
.bond-num-table tbody td {
    padding: 6px 8px;
    border-bottom: 1px solid #e2e8f0;
    text-align: center;
    color: #334155;
    border-left: 1px solid #f1f5f9;
}
.bond-num-table tbody td:first-child {
    text-align: right;
}
.bond-num-table tbody td:last-child {
    border-left: none;
}
.bond-num-table tbody tr:hover {
    background: #f8fafc;
}
.bond-num-table .bond-num-no-db {
    color: #cbd5e1;
}
.bond-num-table .bond-num-input {
    width: 90px;
    padding: 3px 6px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    text-align: center;
    direction: ltr;
    background: #fff;
    color: #334155;
}
.bond-num-table .bond-num-input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.bond-num-modal-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(0, 80, 100, 0.75), rgba(10, 50, 80, 0.8));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 10px 10px;
    justify-content: flex-start;
}
.bond-num-loading {
    text-align: center;
    padding: 30px;
    color: #94a3b8;
}

/* Tablet - 1024px max-width */
@media (max-width: 1280px) {
    #sales-modal .modal-dialog,
    #sales-back-modal .modal-dialog,
    #purchases-recieving-modal .modal-dialog,
    #purchases-back-modal .modal-dialog,
    #sanad-kabd-modal .modal-dialog,
    #sanad-sarf-modal .modal-dialog,
    #accounts-modal .modal-dialog,
    #convert-modal .modal-dialog,
    #convert-back-modal .modal-dialog,
    #rased-efttahy-modal .modal-dialog,
    #customers-modal .modal-dialog,
    #mowardon-modal .modal-dialog,
    #reports-modal .modal-dialog,
    #buying-calibration-modal .modal-dialog,
    #selling-calibration-modal .modal-dialog {
        max-width: 1024px !important;
    }
}

#selected-accounts-heading {
    color: black;
    text-align: right
}


/* Toast Close Button - Replace × with FontAwesome icon */
.toast-close-button {
    font-size: 0 !important;
    width: 20px;
    height: 20px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    transition: all 0.2s ease;
}

.toast-close-button:hover {
    opacity: 1;
    transform: scale(1.1);
}

.toast-close-button::before {
    font-family: "Font Awesome 5 Pro" !important;
    font-weight: 900 !important;
    content: "\f00d";
    font-size: 14px;
}

#item-card-table {
    color: #0a3040;
}

/* ============================================
   ITEM CARD TABS - Refactored Structure
   RTL optimized, compact, theme-aware
   ============================================ */

/* Tab Navigation Container */
.item-card-tabs {
    direction: rtl;
    width: 100%;
    margin: 0;
    padding: 0;
}

.item-card-tabs .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    border: none;
    padding: 2px;
    margin: 0;
    background: var(--theme-bg-tertiary, #f1f5f9);
    border-radius: 6px 6px 0 0;
    overflow-x: auto;
    border: 1px solid var(--theme-border-light, #e2e8f0);
    border-bottom: none;
}

.item-card-tabs .nav-tabs::-webkit-scrollbar {
    height: 3px;
}

.item-card-tabs .nav-tabs::-webkit-scrollbar-thumb {
    background: var(--theme-primary, rgba(0, 160, 176, 0.4));
    border-radius: 3px;
}

.item-card-tabs .nav-item {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.item-card-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 6px 8px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-radius: 4px 4px 0 0;
    margin: 0 1px;
    background: transparent;
    color: var(--theme-text-secondary, #475569);
    font-size: 0.9rem !important;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.item-card-tabs .nav-link:hover {
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.15), rgba(0, 128, 144, 0.2)));
    color: var(--theme-primary, #00a0b0);
}

.item-card-tabs .nav-link.active {
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.9), rgba(0, 128, 144, 0.95)));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 160, 176, 0.2);
}

/* Override legacy betakat-row3 styles for item-card-tabs */
.betakat-row3.item-card-tabs {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.betakat-row3.item-card-tabs .nav-tabs {
    border: 1px solid var(--theme-border-light, #e2e8f0) !important;
    border-bottom: none !important;
    background: var(--theme-bg-tertiary, #f1f5f9) !important;
}

.betakat-row3.item-card-tabs .nav-link {
    padding: 6px 8px !important;
    margin: 0 1px !important;
}

/* Tab Content Container */
.item-card-tab-content {
    padding: 10px !important;
    background: var(--theme-bg-card, #fff) !important;
    border: 1px solid var(--theme-border-light, #e2e8f0) !important;
    border-top: none !important;
    border-radius: 0 0 6px 6px !important;
}

/* Tab Panel - Grid Layout */
.item-card-tab-panel {
    display: none;
}

.item-card-tab-panel.active {
    display: block;
}

/* Compact Data Grid */
.item-card-data-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    direction: rtl;
}

.item-card-data-row {
    display: grid;
    grid-template-columns: minmax(70px, 80px) repeat(3, 1fr);
    gap: 4px;
    align-items: center;
}

.item-card-data-row .row-label {
    font-weight: 500;
    color: var(--theme-text-primary, #1e293b);
    text-align: start;
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-card-data-row .row-label.one-line {
    line-height: 1.2;
}

.item-card-data-row input,
.item-card-data-row select {
    width: 100%;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
    text-align: center;
}

.item-card-data-row input:disabled,
.item-card-data-row select:disabled {
    background: var(--theme-bg-tertiary, #f1f5f9);
    color: var(--theme-text-secondary, #64748b);
    opacity: 0.8;
}

/* Manual Code Toggle */
.item-card-manual-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    position: relative;
    right: 40%;
    margin-top: 2px;
}

.item-card-manual-toggle input[type="checkbox"] {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: checkbox;
}

/* Checkbox Group */
.item-card-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--theme-border-light, #e2e8f0);
    margin-top: 8px;
}

.item-card-checkbox-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-card-checkbox-item input[type="checkbox"],
.item-card-checkbox-item input[type="checkbox"].form-control,
.item-card-checkbox-item input[type="checkbox"].input_test {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    flex-shrink: 0;
}

.item-card-checkbox-item label {
    margin: 0;
    color: var(--theme-text-primary, #1e293b);
    cursor: pointer;
    white-space: nowrap;
}

.item-card-checkbox-item input[type="text"] {
    width: 100px;
    padding: 4px 6px;
}

/* Discount Tab - Compact Grid */
.item-card-discount-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 8px;
}

.item-card-discount-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-card-discount-column .column-header {
    font-weight: 600;
    text-align: center;
    padding: 6px;
    background: var(--theme-bg-tertiary, #f1f5f9);
    border-radius: var(--radius-sm, 4px);
    color: var(--theme-text-primary, #1e293b);
}

.item-card-discount-column .sub-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.item-card-discount-column .sub-headers span {
    text-align: center;
    padding: 4px;
    background: var(--theme-bg-hover, #f8fafc);
    border-radius: var(--radius-sm, 4px);
    color: var(--theme-text-secondary, #64748b);
}

.item-card-discount-column .input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
}

.item-card-discount-column input {
    width: 100%;
    padding: 4px;
    text-align: center;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
}

/* Details Tab - Two Column Grid */
.item-card-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 16px;
    padding: 8px;
}

.item-card-detail-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.item-card-detail-item label {
    flex: 0 0 auto;
    min-width: 90px;
    text-align: start;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
    font-size: 13px;
    white-space: nowrap;
}

.item-card-detail-item input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
    height: 32px;
}

/* Special Settings Tab */
.item-card-special-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.item-card-special-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-card-special-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-card-special-row label {
    flex: 0 0 100px;
    text-align: start;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

.item-card-special-row input,
.item-card-special-row select {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
}

.item-card-special-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
}

.item-card-stats-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
    background: var(--theme-bg-tertiary, #f1f5f9);
    border-radius: var(--radius-md, 8px);
}

.item-card-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-card-stat-item label {
    color: var(--theme-text-secondary, #64748b);
    margin: 0;
}

.item-card-stat-item input {
    padding: 4px 6px;
    text-align: center;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
}

/* Single Row with Wider Input */
.item-card-wide-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
}

.item-card-wide-row span,
.item-card-wide-row label {
    flex: 0 0 120px;
    text-align: start;
    color: var(--theme-text-primary, #1e293b);
}

.item-card-wide-row input {
    width: 160px;
    padding: 6px 8px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
}

/* Item Card Sidebar */
.item-card-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.item-card-sidebar-content {
    text-align: center;
    color: var(--theme-text-primary, #0a3d5c);
}

.item-card-sidebar-icon {
    font-size: 48px;
    margin-bottom: 15px;
    color: var(--theme-accent, #00a0b0);
}

.item-card-sidebar-title {
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--theme-text-primary, #0a3d5c);
}

.item-card-sidebar-subtitle {
    margin: 0;
    color: var(--theme-text-secondary, #666);
}

/* Item Card Modal Footer */
.item-card-modal-footer {
    position: relative;
    margin-top: -50px;
}

/* Item Card Modal - Form Elements */
#item-card-modal .item-card-tabs input,
#item-card-modal .item-card-tabs select,
#item-card-modal .item-card-tabs label {
    height: 30px;
}

#item-card-modal .item-card-details-grid .input-label-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 10px;
}

#item-card-modal .item-card-details-grid .input-label-container label {
    position: static;
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    flex: 0 0 120px;
    max-width: 20%;
    text-align: start;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-inline-end: 20px;
}

#item-card-modal .item-card-details-grid .input-label-container input,
#item-card-modal .item-card-details-grid .input-label-container select,
#item-card-modal .item-card-details-grid .input-label-container textarea {
    width: 100%;
    margin: 0;
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

/* Item Card Special Settings Grid */
.item-card-special-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 10px;
    direction: rtl;
}

.item-card-special-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-card-special-row {
    display: flex;
    align-items: center;
    gap: 8px;
    direction: rtl;
}

.item-card-special-row label {
    flex: 0 0 100px;
    text-align: right;
    color: var(--theme-text-secondary, #64748b);
}

.item-card-special-row input,
.item-card-special-row select {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
}

/* Item Card Stats Group */
.item-card-stats-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px;
    margin-top: 8px;
    border: 1px solid var(--input-border, #e2e8f0);
    border-radius: var(--radius-sm, 4px);
    background: var(--theme-bg-secondary, #f8fafc);
    direction: rtl;
}

.item-card-stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    width: 100%;
}

.item-card-stat-item label {
    color: var(--theme-text-secondary, #64748b);
    text-align: right !important;
    width: 100%;
    white-space: nowrap;
}

.item-card-stat-item input,
.item-card-stat-item input.form-control,
.item-card-stat-item input.input_test {
    width: 100% !important;
    min-width: 60px !important;
    box-sizing: border-box !important;
    padding: 6px 8px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
    text-align: center;
}

/* Item Card Utility Classes */
.item-card-hidden {
    display: none !important;
}

.item-card-visible {
    display: flex !important;
}

/* Item Card Discount Tab Grid */
.item-card-discount-grid {
    display: flex;
    gap: 4px;
    padding: 8px;
    direction: rtl;
    overflow-x: auto;
}

.item-card-discount-col {
    flex: 1 1 0;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-card-discount-header {
    text-align: center;
    font-weight: 600;
    padding: 6px 4px;
    background: var(--theme-bg-secondary, #f1f5f9);
    border-radius: var(--radius-sm, 4px);
    color: var(--theme-text-primary, #1e293b);
    white-space: nowrap;
}

.item-card-discount-subheader {
    display: flex;
    gap: 4px;
}

.item-card-discount-subheader span {
    flex: 1;
    text-align: center;
    padding: 4px 2px;
    background: var(--theme-bg-tertiary, #e2e8f0);
    border-radius: var(--radius-sm, 4px);
    color: var(--theme-text-secondary, #64748b);
}

.item-card-discount-row {
    display: flex;
    gap: 4px;
}

.item-card-discount-row input {
    flex: 1;
    min-width: 0;
    padding: 4px 6px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 4px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
    text-align: center;
}

/* ============================================
   ACCOUNTS CONNECT TABLE - Scrollbar Refactor
   The wrapper div is the scroll container.
   The table inside has overflow visible, wrapper scrolls.
   Custom HTML arrow buttons surround the wrapper for cross-platform support.
   ============================================ */

/* Scroll container (holds arrows + wrapper) */
.accounts-connect-scroll-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 !important;
    overflow: hidden;
    max-width: 100%;
}

/* Top row: table wrapper + vertical track side by side */
.acc-scroll-top-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Vertical track: sits to the right of the table */
.acc-scroll-vertical-track {
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    width: 22px;
    background: #1a1a2e;
    border-left: 1px solid #2a2a3e;
}

.acc-scroll-vertical-track.acc-scroll-track-visible {
    display: flex;
}

.acc-scroll-vertical-track .acc-scroll-up {
    flex: 0 0 auto;
}

.acc-scroll-vertical-track .acc-scroll-down {
    flex: 0 0 auto;
}

/* Track body: the scrollable area between arrows */
.acc-scroll-track-body {
    position: relative;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* Vertical thumb */
.acc-scroll-thumb-v {
    position: absolute;
    left: 3px;
    right: 3px;
    top: 0;
    min-height: 30px;
    background: #555;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.acc-scroll-thumb-v:hover {
    background: #777;
}

.acc-scroll-thumb-v:active,
.acc-scroll-thumb-v.acc-scroll-thumb-dragging {
    background: #999;
}

/* Horizontal thumb */
.acc-scroll-thumb-h {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    min-width: 30px;
    background: #555;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.acc-scroll-thumb-h:hover {
    background: #777;
}

.acc-scroll-thumb-h:active,
.acc-scroll-thumb-h.acc-scroll-thumb-dragging {
    background: #999;
}

/* Horizontal track: sits below the table */
.acc-scroll-horizontal-track {
    display: none;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: 22px;
    flex-shrink: 0;
    background: #1a1a2e;
    border-top: 1px solid #2a2a3e;
}

.acc-scroll-horizontal-track.acc-scroll-track-visible {
    display: flex;
}

/* Arrow buttons - base (hidden by default, JS shows via .acc-scroll-visible) */
.acc-scroll-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    border: none;
    background: #2a2a3e;
    color: #cccccc;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    margin: 0;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    outline: none;
}

/* Only show when JS adds .acc-scroll-visible */
.acc-scroll-arrow.acc-scroll-visible {
    display: flex;
}

.acc-scroll-arrow:hover {
    background: #4a4a5e;
    color: #ffffff;
}

.acc-scroll-arrow:active {
    background: #5a5a6e;
}

/* Vertical arrows (full width of track, square) */
.acc-scroll-up,
.acc-scroll-down {
    width: 22px;
    height: 22px;
}

/* Horizontal arrows (square) */
.acc-scroll-left,
.acc-scroll-right {
    width: 22px;
    height: 22px;
}

/* Dim at boundary (can't scroll further) */
.acc-scroll-arrow.acc-scroll-at-edge {
    opacity: 0.25;
    pointer-events: none;
}

/* RTL: keep vertical track border on the correct side (left of track = adjacent to table) */
[dir="rtl"] .acc-scroll-vertical-track {
    border-left: none;
    border-right: 1px solid #2a2a3e;
}

.accounts-connect-table-wrapper {
    max-height: 500px;
    overflow: scroll !important;
    position: relative;
    display: block;
    flex: 1;
    min-width: 0;
    /* Hide native scrollbar - Firefox */
    scrollbar-width: none !important;
}

/* Hide native scrollbar - Webkit */
.accounts-connect-table-wrapper::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

/* Remove overflow from the table element - let wrapper scroll */
.accounts-connect-table-wrapper .accounts-connect-table {
    overflow: visible !important;
    height: auto !important;
    min-height: 450px !important;
}

#accounts-connect-table {
    width: 100%;
}

/* Item Card Additional UI Classes */
.item-card-label-compact {
    line-height: 1;
}

.item-card-excel-icon {
    color: #3d7e4d;
    font-size: 22px;
    padding-top: 6px;
}

/* Item Card Search Toolbar */
.item-card-search-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    margin-bottom: 10px;
    direction: rtl;
}

.item-card-search-input-wrapper {
    flex: 1;
    min-width: 0;
}

.item-card-search-input-wrapper input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--input-border, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    background: var(--input-bg, #fff);
    color: var(--input-text, #1e293b);
}

.item-card-nav-buttons {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: center;
}

.item-card-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: var(--btn-primary-bg, linear-gradient(135deg, rgba(0, 160, 176, 0.8), rgba(0, 128, 144, 0.9)));
    border: 1px solid var(--theme-border, rgba(0, 160, 176, 0.5));
    border-radius: var(--radius-sm, 6px);
    color: var(--theme-text-primary, #fff);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.item-card-nav-btn:hover {
    background: var(--btn-primary-hover, linear-gradient(135deg, rgba(0, 180, 196, 0.9), rgba(0, 148, 164, 1)));
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(var(--theme-primary-rgb, 0, 160, 176), 0.3);
}

.item-card-nav-btn i {
    font-size: 11px;
}

.item-card-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}

.item-card-delete-btn:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220, 38, 38, 0.3);
}

.item-card-delete-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
}

/* Item Card Breadcrumb - Parent Names */
.item-card-breadcrumb {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: var(--theme-bg-secondary, #f1f5f9);
    border: 1px solid var(--input-border, #e2e8f0);
    border-radius: 6px;
    color: var(--theme-text-primary, #1e293b);
    font-weight: 600;
    direction: rtl;
}

/* Item Card Parent Code */
.item-card-parent-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    background: var(--theme-primary, #0e7490);
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    min-width: 40px;
    max-width: 80px;
    flex: 0 0 auto;
}

.item-card-parent-code:empty {
    display: none !important;
}

.item-card-parent-code.is-hidden {
    display: none !important;
}

/* Item Card Form Sections */
#warehouse_itemcard_model {
    color: var(--theme-text-primary, #1e293b);
}

#warehouse_itemcard_model .betakat-row2-sec1,
#warehouse_itemcard_model .betakat-row2-sec2 {
    padding: 8px;
    margin-bottom: 8px;
    border: 1px solid var(--input-border, #e2e8f0);
    border-radius: 8px;
    background: var(--theme-bg-secondary, #f8fafc);
}

#warehouse_itemcard_model .group_items,
#warehouse_itemcard_model .group_items2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#warehouse_itemcard_model .modal-input-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 2px 0;
}

#warehouse_itemcard_model .modal-input-form label {
    flex: 0 0 80px;
    text-align: right;
    color: var(--theme-text-primary, #1e293b);
    margin: 0;
}

#warehouse_itemcard_model .modal-input-form input,
#warehouse_itemcard_model .modal-input-form select {
    flex: 1;
    min-width: 0;
}

#warehouse_itemcard_model .item {
    display: flex;
    align-items: center;
    gap: 4px;
}

#warehouse_itemcard_model .item label {
    flex: 0 0 70px;
    text-align: right;
    color: var(--theme-text-primary, #1e293b);
}

#warehouse_itemcard_model .col-md-6,
#warehouse_itemcard_model .col-md-12 {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    color: var(--theme-text-primary, #1e293b);
}

/* Item Card Excel Button */
.item-card-excel-icon {
    color: #217346;
}

.item-card-th-checkbox {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    text-align: center;
    overflow: hidden;
}

.item-card-th-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 auto;
    display: block;
}

.item-card-th-code {
    width: 25%;
}

#item-card-table tbody tr {
    cursor: pointer;
}

#item-card-table tbody tr:hover {
    background-color: rgba(0, 160, 176, 0.1);
}

.item-card-main-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    direction: rtl;
}

.item-card-main-row > .col-md-8 {
    flex: 0 0 66.666667% !important;
    max-width: 66.666667% !important;
}

.item-card-main-row > .col-md-4,
.item-card-main-row > .item-card-sidebar {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}

.item-card-icon-rtl {
    margin-right: 0;
}

[dir="rtl"] .item-card-icon-rtl,
html[lang="ar"] .item-card-icon-rtl {
    margin-right: inherit;
}

.item-card-icon-exit {
    color: #dc3545;
}

/* Tagme3 Modal Styles */
.tagme3-modal {
    height: 990px;
}

.tagme3-modal-content {
    width: 1209px;
    left: 17%;
    height: auto;
    position: relative;
    top: 100px;
}

.tagme3-row {
    margin-top: 20px;
}

.tagme3-table-wrapper {
    height: auto;
    overflow: auto;
    width: 213%;
}

.tagme3-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    align-items: flex-end;
}

.tagme3-total-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tagme3-total-item label {
    width: 120px;
    color: var(--theme-text-primary, #1e293b);
}

.tagme3-total-item input {
    width: 180px;
}

.tagme3-buttons {
    display: flex;
    gap: 8px;
}

.tagme3-btn {
    outline: none;
    padding: 0 20px;
}

/* ============================================================
   UPDATE ARSDT ELASNAF MODAL - Base Styles
   ============================================================ */

/* Modal Body */
#update-arsdt-elasnaf-modal .arsdt-elasnaf-body {
    background: var(--modal-body-bg);
    padding: 12px 15px 8px;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* Form Row Container */
.arsdt-elasnaf-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    direction: rtl;
}

/* Header Fields Container - wraps all fields above the table */
.arsdt-elasnaf-header-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    flex: 0 0 100%;
    padding: 10px 12px;
    background: rgba(240, 245, 250, 0.95);
    border: 1px solid rgba(0, 160, 176, 0.1);
    border-radius: 8px;
}

/* Field Groups - two per row */
.arsdt-elasnaf-field-group {
    flex: 1 1 45%;
    min-width: 280px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.arsdt-elasnaf-field-group-sm {
    flex: 0 1 35%;
}

/* Individual Fields */
.arsdt-elasnaf-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.arsdt-elasnaf-field label {
    white-space: nowrap;
    color: var(--theme-text-primary);
    font-weight: 600;
    min-width: fit-content;
}

/* Inputs */
.arsdt-elasnaf-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.arsdt-elasnaf-input:focus {
    border-color: var(--theme-primary);
    background: var(--input-bg-focus);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.15);
}

.arsdt-elasnaf-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.arsdt-elasnaf-input-wide {
    width: 70%;
}

.arsdt-elasnaf-input-full {
    width: 100%;
}

/* Selects - matches sanad-input/sanad-select pattern */
.arsdt-elasnaf-select {
    width: 70%;
    height: 30px;
    padding: 4px 8px;
    padding-left: 32px;
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    color: #0a2540;
    font-size: 16px;
    font-weight: 500;
    text-align: right;
    direction: rtl;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230a2540' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
}

.arsdt-elasnaf-select:hover {
    border-color: rgba(0, 160, 176, 0.5);
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.arsdt-elasnaf-select:focus {
    border-color: rgba(0, 160, 176, 0.7);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.15),
                0 4px 12px rgba(0, 160, 176, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Table Wrapper - extends unified-table-wrapper */
.arsdt-elasnaf-table-wrapper {
    width: 100%;
    flex: 0 0 100%;
    margin-top: 8px;
}

.arsdt-elasnaf-table-wrapper .unified-table-container {
    max-height: 450px;
}

/* Slider Navigation Bar */
/* Slider Navigation Bar - matches sanad-table-scrollbar pattern */
.arsdt-elasnaf-scrollbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #e8eef3, #dde5ec);
    border: 1px solid #c5d0db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    direction: rtl;
    width: 100%;
    flex: 0 0 100%;
    margin-top: -8px; /* counteract parent .arsdt-elasnaf-form-row gap to attach flush to table */
}

/* Remove bottom radius from table wrapper so slider attaches flush */
.arsdt-elasnaf-table-wrapper {
    border-radius: 6px 6px 0 0;
}

.arsdt-elasnaf-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    color: #5a7089;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.arsdt-elasnaf-scroll-btn:hover {
    background: linear-gradient(180deg, #00a0b0, #008090);
    color: #fff;
    border-color: #007080;
}

.arsdt-elasnaf-scroll-btn:active {
    transform: scale(0.95);
}

/* Arsdt Elasnaf Slider Mode Toggle Button */
.arsdt-elasnaf-slider-mode-toggle {
    position: relative;
    min-width: 50px;
    gap: 6px;
}

.arsdt-elasnaf-slider-mode-toggle .slider-mode-label {
    font-size: 14px;
    font-weight: bold;
    margin-left: 4px;
}

.arsdt-elasnaf-slider-mode-toggle[data-mode="nine"] {
    background: linear-gradient(180deg, #00a0b0, #008090);
    color: #fff;
    border-color: #007080;
}

.arsdt-elasnaf-slider-mode-toggle[data-mode="main"] {
    background: linear-gradient(180deg, #f0ad4e, #ec971f);
    color: #fff;
    border-color: #d58512;
}

.arsdt-elasnaf-scroll-track {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #d0d8e0, #c0c8d0);
    border-radius: 14px;
    padding: 0 10px;
    min-width: 180px;
}

.arsdt-elasnaf-scroll-position {
    font-size: 16px;
    font-weight: 600;
    color: #1a3a5c;
    white-space: nowrap;
    min-width: 50px;
    text-align: center;
}

.arsdt-elasnaf-scroll-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #a0b0c0, #90a0b0);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.arsdt-elasnaf-scroll-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #00a0b0, #007080);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    transition: transform 0.1s ease;
}

.arsdt-elasnaf-scroll-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.arsdt-elasnaf-scroll-range::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.arsdt-elasnaf-scroll-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #00a0b0, #007080);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 2px solid #fff;
}

.arsdt-elasnaf-scroll-search {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.arsdt-elasnaf-scroll-input {
    height: 28px;
    width: 120px;
    padding: 4px 8px;
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    font-size: 20px;
    background: #fff;
    direction: ltr;
    text-align: center;
}

.arsdt-elasnaf-scroll-input:focus {
    outline: none;
    border-color: #00a0b0;
}

/* Defaults Bar - uses .thinking class from shared styles */
.arsdt-elasnaf-defaults-row {
    width: 100%;
    flex: 0 0 100%;
    margin-top: 8px;
}

/* ============================================
   ARSDT ELASNAF BOTTOM SECTION - Compact Layout
   (matches sanad-bottom-section pattern)
   ============================================ */
.arsdt-elasnaf-bottom-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    background: rgba(240, 245, 250, 0.95);
    border-top: 1px solid rgba(0, 160, 176, 0.1);
    direction: rtl;
    margin-bottom: 0;
    width: 100%;
    flex: 0 0 100%;
}

.arsdt-elasnaf-totals-row {
    display: flex;
    gap: 15px;
    align-items: center;
    flex-wrap: wrap;
}

.arsdt-elasnaf-total-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.arsdt-elasnaf-total-item label {
    font-size: 16px;
    font-weight: 600;
    color: #1a3a5c;
    white-space: nowrap;
}

.arsdt-elasnaf-total-input {
    width: 90px;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    font-size: 16px;
    text-align: center;
    background: #fff;
}

.arsdt-elasnaf-gold-input {
    background: rgba(255, 215, 0, 0.08);
    border-color: rgba(255, 215, 0, 0.4);
}

.arsdt-elasnaf-gold-input:disabled {
    opacity: 0.7;
}

/* Footer */
/* Footer - matches sanad-footer pattern */
.arsdt-elasnaf-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px !important;
    background: rgba(10, 30, 60, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0 0 16px 16px;
    gap: 15px;
    direction: rtl;
}

.arsdt-elasnaf-footer-right {
    display: flex;
    align-items: center;
}

.arsdt-elasnaf-kayed-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.arsdt-elasnaf-kayed-label {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.arsdt-elasnaf-kayed-input {
    min-width: 160px;
    height: 30px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 160, 176, 0.4);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #0a2540;
    cursor: pointer;
    transition: all 0.15s ease;
}

.arsdt-elasnaf-kayed-input:hover {
    background: #fff;
    border-color: rgba(0, 160, 176, 0.6);
}

.arsdt-elasnaf-kayed-input:focus {
    outline: none;
    background: #fff;
    border-color: #00a0b0;
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.2);
}

.arsdt-elasnaf-footer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Footer Buttons */
.arsdt-elasnaf-footer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.arsdt-elasnaf-footer-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.arsdt-elasnaf-footer-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.arsdt-elasnaf-footer-btn i {
    font-size: 14px;
}

.arsdt-elasnaf-btn-danger {
    background: rgba(220, 53, 69, 0.4);
    border-color: rgba(220, 53, 69, 0.5);
}

.arsdt-elasnaf-btn-danger:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.6);
}

.arsdt-elasnaf-btn-success {
    background: rgba(40, 167, 69, 0.4);
    border-color: rgba(40, 167, 69, 0.5);
}

.arsdt-elasnaf-btn-success:hover:not(:disabled) {
    background: rgba(40, 167, 69, 0.6);
}

.arsdt-elasnaf-btn-new {
    background: rgba(0, 123, 255, 0.4);
    border-color: rgba(0, 123, 255, 0.5);
}

.arsdt-elasnaf-btn-new:hover:not(:disabled) {
    background: rgba(0, 123, 255, 0.6);
}

.arsdt-elasnaf-btn-exit {
    background: rgba(220, 53, 69, 0.4);
    border-color: rgba(220, 53, 69, 0.5);
}

.arsdt-elasnaf-btn-exit:hover:not(:disabled) {
    background: rgba(220, 53, 69, 0.6);
}

/* ===========================================================================
   RASED EFTTAHY MODAL (Opening Balance) - Header Fields
   Follows the arsdt-elasnaf pattern: namespaced classes, flex layout
   =========================================================================== */

/* Modal Body */
.rased-efttahy-body {
    background: var(--modal-body-bg);
    padding: 12px 15px 8px;
    margin-bottom: 0;
}

/* Form Row Container */
.rased-efttahy-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    direction: rtl;
}

/* Header Fields Container - wraps all fields above the table */
.rased-efttahy-header-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    flex: 0 0 100%;
    padding: 10px 12px;
    background: rgba(240, 245, 250, 0.95);
    border: 1px solid rgba(0, 160, 176, 0.1);
    border-radius: 8px;
}

/* Field Groups - two per row */
.rased-efttahy-field-group {
    flex: 1 1 45%;
    min-width: 280px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

/* Individual Fields */
.rased-efttahy-field {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.rased-efttahy-field label {
    white-space: nowrap;
    color: var(--theme-text-primary);
    font-weight: 600;
    min-width: fit-content;
}

/* Inputs */
.rased-efttahy-input {
    width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    background: var(--input-bg);
    color: var(--input-text);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.rased-efttahy-input:focus {
    border-color: var(--theme-primary);
    background: var(--input-bg-focus);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.15);
}

.rased-efttahy-input:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.rased-efttahy-input-wide {
    width: 70%;
}

/* Selects - matches sanad-input/sanad-select pattern */
.rased-efttahy-select {
    width: 70%;
    height: 30px;
    padding: 4px 8px;
    padding-left: 32px;
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.92);
    color: #0a2540;
    font-size: 16px;
    font-weight: 500;
    text-align: right;
    direction: rtl;
    cursor: pointer;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%230a2540' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 12px center;
}

.rased-efttahy-select:hover {
    border-color: rgba(0, 160, 176, 0.5);
    box-shadow: 0 4px 12px rgba(0, 160, 176, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.rased-efttahy-select:focus {
    border-color: rgba(0, 160, 176, 0.7);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 160, 176, 0.15),
                0 4px 12px rgba(0, 160, 176, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background-color: rgba(255, 255, 255, 0.95);
}

/* Slider Navigation Bar */
.rased-efttahy-scrollbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: linear-gradient(180deg, #e8eef3, #dde5ec);
    border: 1px solid #c5d0db;
    border-top: none;
    border-radius: 0 0 8px 8px;
    direction: rtl;
    width: 100%;
}

.rased-efttahy-scroll-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: linear-gradient(180deg, #fff, #f5f7fa);
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    color: #5a7089;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.rased-efttahy-scroll-btn:hover {
    background: linear-gradient(180deg, #00a0b0, #008090);
    color: #fff;
    border-color: #007080;
}

.rased-efttahy-scroll-btn:active {
    transform: scale(0.95);
}

.rased-efttahy-scroll-track {
    flex: 1;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(180deg, #d0d8e0, #c0c8d0);
    border-radius: 14px;
    padding: 0 10px;
    min-width: 180px;
}

.rased-efttahy-scroll-position {
    font-size: 16px;
    font-weight: 600;
    color: #1a3a5c;
    white-space: nowrap;
    min-width: 50px;
    text-align: center;
}

.rased-efttahy-scroll-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(90deg, #a0b0c0, #90a0b0);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.rased-efttahy-scroll-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #00a0b0, #007080);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 2px solid #fff;
    transition: transform 0.1s ease;
}

.rased-efttahy-scroll-range::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.rased-efttahy-scroll-range::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.rased-efttahy-scroll-range::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: linear-gradient(180deg, #00a0b0, #007080);
    border-radius: 50%;
    cursor: grab;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    border: 2px solid #fff;
}

.rased-efttahy-scroll-search {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.rased-efttahy-scroll-input {
    height: 28px;
    width: 120px;
    padding: 4px 8px;
    border: 1px solid #b8c5d0;
    border-radius: 4px;
    font-size: 20px;
    background: #fff;
    direction: ltr;
    text-align: center;
}

.rased-efttahy-scroll-input:focus {
    outline: none;
    border-color: #00a0b0;
}

/* Defaults Bar - uses .thinking class from shared styles */
.rased-efttahy-defaults-row {
    width: 100%;
    margin-top: 8px;
}

/* ============================================
   RASED EFTTAHY - Totals Panel (col-md-8)
   ============================================ */
.rased-efttahy-totals-panel {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    direction: rtl;
}

.rased-efttahy-totals-row {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.rased-efttahy-total-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rased-efttahy-total-item label {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text-primary, #1a3a5c);
    white-space: nowrap;
}

.rased-efttahy-total-input {
    width: 90px;
    height: 28px;
    padding: 4px 8px;
    border: 1px solid rgba(0, 160, 176, 0.3);
    border-radius: 6px;
    font-size: 14px;
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ============================================
   RASED EFTTAHY - Print Type (inside sec4)
   ============================================ */
.rased-efttahy-print-type {
    display: flex;
    align-items: center;
    gap: 5px;
}

.rased-efttahy-print-type p {
    font-size: 14px;
    white-space: nowrap;
    height: 10px;
    margin: 0;
}

.rased-efttahy-print-type select {
    width: 180px;
}

/* QR button - override global .print-qrcode width:329px */
#rased_aftata7e .rased-efttahy-print-qrcode {
    width: auto;
}

span#dif_type {
    color: #0a3040 !important
}