/* SOVEREIGN AESTHETICS - THE ERP DESIGN SYSTEM 2026 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');

:root {
    --ms-navy: #1e293b;
    --ms-blue: #324ea0;
    --ms-gold: #c5a059;
    --ms-bg: #f1f5f9;
    --ms-border: #e2e8f0;
    --ms-sidebar: #ffffff;
}

body {
    background-color: var(--ms-bg);
    font-family: 'Cairo', sans-serif !important;
    font-weight: 400 !important; /* Elegant light default */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Universal Typography Softening & Lightening */
p, span, td, input, select, textarea, .form-control, .form-select {
    font-weight: 400 !important; /* Crisp, clean, lightweight text */
}

h1, h2, h3, h4, h5, h6, th, strong, label, .app-name, .pay-stat-label, .kpi-label {
    font-weight: 600 !important; /* Soft semi-bold for headers instead of aggressive thick bold */
}

.font-weight-800 { font-weight: 600 !important; }
.font-weight-900 { font-weight: 700 !important; }
.font-weight-950 { font-weight: 700 !important; }

.bg-soft-primary { background-color: rgba(50, 78, 160, 0.1) !important; }
.text-primary { color: var(--ms-blue) !important; }
.bg-soft-success { background-color: rgba(5, 150, 105, 0.1) !important; }
.text-success { color: #059669 !important; }

.animate__animated { animation-duration: 0.5s; }

.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: 0.3s;
}
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.text-indigo { color: #4f46e5 !important; }

/* Custom Scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ==========================================================================
   RESPONSIVE LIQUID CORE - DPI & RESOLUTION ADAPTIVE SYSTEM (2026 UPDATE)
   ========================================================================== */

/* 1. Base Rem Scaling for Global Proportional Responsiveness */
html {
    font-size: 16px; /* Base size for standard Desktop viewports (>= 1440px) */
    scroll-behavior: smooth;
}

@media (max-width: 1400px) {
    html {
        font-size: 15px; /* Slight proportional scale-down for 125% browser zoom / medium screens */
    }
}

@media (max-width: 1200px) {
    html {
        font-size: 14px; /* Proportional scale-down for 150% browser zoom / lower laptop resolutions */
    }
}

@media (max-width: 992px) {
    html {
        font-size: 13.5px; /* Tablet / remote control layout adjustment */
    }
}

@media (max-width: 768px) {
    html {
        font-size: 13px; /* Mobile viewport base adjustment */
    }
}

/* 2. Grid & Flex Telemetry Auto-Adaptation for ALL ERP Modules */
/* Targets any class containing '-telemetry-row' or '-filter-grid' using CSS wildcard selectors */
[class*="-telemetry-row"], 
.telemetry-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)) !important;
    gap: 1rem !important;
    width: 100% !important;
}

[class*="-filter-grid"], 
.filter-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
}

/* Smooth adjustments for list control cards */
.pay-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pay-tab-btn {
    padding: 10px 18px !important;
    font-size: 0.8rem !important;
}

/* 3. Universal High-Density Screen / High DPI Scaling Smoothing (e.g. AnyDesk, laptops at 125% - 150%) */
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (max-width: 1366px) {
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        letter-spacing: -0.01em;
    }
    
    /* Subtly scale down layout paddings and spaces on constrained laptops */
    .p-4 { padding: 1.25rem !important; }
    .mb-4 { margin-bottom: 1rem !important; }
    .gap-4 { gap: 1rem !important; }
}

/* 4. Strict Horizontal Overflow Shield for Data Tables */
.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
}

.table-responsive table {
    width: max-content !important; /* Forces natural widescreen width to prevent column squeezing */
    min-width: 100% !important;   /* Expands beautifully to fill large display monitors */
    margin-bottom: 0 !important;
}

.table-responsive th,
.table-responsive td {
    white-space: nowrap !important; /* Prevents ugly text wrapping and overlaps */
    padding: 12px 16px !important;  /* Elegant, consistent spatial breathing room */
    vertical-align: middle !important;
}

/* 5. Modal Adaptation for Remote Viewports */
.modal-dialog {
    max-width: 90%;
    margin: 1.75rem auto;
}

@media (min-width: 992px) {
    .modal-dialog {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-dialog {
        max-width: 950px;
    }
}

.modal-content {
    border-radius: 16px !important;
    border: none !important;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04) !important;
}

/* Modal Close Button compatibility (Bootstrap 5 styles for Bootstrap 4) */
.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z' clip-rule='evenodd'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    outline: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
.btn-close:hover {
    opacity: .8;
}
.btn-close:focus {
    outline: 0;
}
.btn-close-white {
    filter: invert(1) grayscale(1) brightness(2);
}

/* 6. Layout Width Correction for Imported Modules (Fluid Full-Width Page Layout) */
.page-content-tab .page-content,
.page-content-fluid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    margin-top: 0 !important;
    min-height: auto !important;
}

.page-content-tab > .container-fluid {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* ==========================================================================
   BOOTSTRAP 5 DIRECTIONAL UTILITIES MAPPINGS FOR BOOTSTRAP 4 (RTL/LTR SUPPORT)
   ========================================================================== */

/* LTR Direction */
html[dir="ltr"] .text-start, html:not([dir="rtl"]) .text-start { text-align: left !important; }
html[dir="ltr"] .text-end, html:not([dir="rtl"]) .text-end { text-align: right !important; }
html[dir="ltr"] .float-start, html:not([dir="rtl"]) .float-start { float: left !important; }
html[dir="ltr"] .float-end, html:not([dir="rtl"]) .float-end { float: right !important; }

html[dir="ltr"] .ms-1, html:not([dir="rtl"]) .ms-1 { margin-left: 0.25rem !important; }
html[dir="ltr"] .ms-2, html:not([dir="rtl"]) .ms-2 { margin-left: 0.5rem !important; }
html[dir="ltr"] .ms-3, html:not([dir="rtl"]) .ms-3 { margin-left: 1rem !important; }
html[dir="ltr"] .ms-4, html:not([dir="rtl"]) .ms-4 { margin-left: 1.5rem !important; }
html[dir="ltr"] .ms-5, html:not([dir="rtl"]) .ms-5 { margin-left: 3rem !important; }

html[dir="ltr"] .me-1, html:not([dir="rtl"]) .me-1 { margin-right: 0.25rem !important; }
html[dir="ltr"] .me-2, html:not([dir="rtl"]) .me-2 { margin-right: 0.5rem !important; }
html[dir="ltr"] .me-3, html:not([dir="rtl"]) .me-3 { margin-right: 1rem !important; }
html[dir="ltr"] .me-4, html:not([dir="rtl"]) .me-4 { margin-right: 1.5rem !important; }
html[dir="ltr"] .me-5, html:not([dir="rtl"]) .me-5 { margin-right: 3rem !important; }

html[dir="ltr"] .ps-1, html:not([dir="rtl"]) .ps-1 { padding-left: 0.25rem !important; }
html[dir="ltr"] .ps-2, html:not([dir="rtl"]) .ps-2 { padding-left: 0.5rem !important; }
html[dir="ltr"] .ps-3, html:not([dir="rtl"]) .ps-3 { padding-left: 1rem !important; }
html[dir="ltr"] .ps-4, html:not([dir="rtl"]) .ps-4 { padding-left: 1.5rem !important; }
html[dir="ltr"] .ps-5, html:not([dir="rtl"]) .ps-5 { padding-left: 3rem !important; }

html[dir="ltr"] .pe-1, html:not([dir="rtl"]) .pe-1 { padding-right: 0.25rem !important; }
html[dir="ltr"] .pe-2, html:not([dir="rtl"]) .pe-2 { padding-right: 0.5rem !important; }
html[dir="ltr"] .pe-3, html:not([dir="rtl"]) .pe-3 { padding-right: 1rem !important; }
html[dir="ltr"] .pe-4, html:not([dir="rtl"]) .pe-4 { padding-right: 1.5rem !important; }
html[dir="ltr"] .pe-5, html:not([dir="rtl"]) .pe-5 { padding-right: 3rem !important; }

/* RTL Direction */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end { text-align: left !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }

html[dir="rtl"] .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
html[dir="rtl"] .ms-5 { margin-right: 3rem !important; margin-left: 0 !important; }

html[dir="rtl"] .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-4 { margin-left: 1.5rem !important; margin-right: 0 !important; }
html[dir="rtl"] .me-5 { margin-left: 3rem !important; margin-right: 0 !important; }

html[dir="rtl"] .ps-1 { padding-right: 0.25rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-2 { padding-right: 0.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-3 { padding-right: 1rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-4 { padding-right: 1.5rem !important; padding-left: 0 !important; }
html[dir="rtl"] .ps-5 { padding-right: 3rem !important; padding-left: 0 !important; }

html[dir="rtl"] .pe-1 { padding-left: 0.25rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-2 { padding-left: 0.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-3 { padding-left: 1rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-4 { padding-left: 1.5rem !important; padding-right: 0 !important; }
html[dir="rtl"] .pe-5 { padding-left: 3rem !important; padding-right: 0 !important; }

/* Flex and Grid Gaps */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }

/* Grid columns & Layouts */
.d-grid { display: grid !important; }

/* Row Gutter utilities */
.row.g-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
.row.g-1 > [class*="col-"] { padding-left: 0.25rem; padding-right: 0.25rem; }
.row.g-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.row.g-2 > [class*="col-"] { padding-left: 0.5rem; padding-right: 0.5rem; }
.row.g-3 { margin-left: -1rem; margin-right: -1rem; }
.row.g-3 > [class*="col-"] { padding-left: 1rem; padding-right: 1rem; }
.row.g-4 { margin-left: -1.5rem; margin-right: -1.5rem; }
.row.g-4 > [class*="col-"] { padding-left: 1.5rem; padding-right: 1.5rem; }
.row.g-5 { margin-left: -3rem; margin-right: -3rem; }
.row.g-5 > [class*="col-"] { padding-left: 3rem; padding-right: 3rem; }

/* Assets Module Design System styles */
:root {
    --ast-main:     #2563eb;
    --ast-gradient: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
    --ast-warn:     #f59e0b;
    --ast-success:  #10b981;
    --ast-danger:   #ef4444;
    
    --ast-premium-blue:   #2563eb;
    --ast-premium-green:  #10b981;
    --ast-premium-red:    #ef4444;
    --ast-premium-orange: #f59e0b;
}

.ast-tabs-nav { display:flex; gap:.35rem; flex-wrap:wrap; border-bottom:2px solid #e2e8f0; padding-bottom:.5rem; }
.ast-tab-btn {
    background:transparent; border:1px solid #e2e8f0; border-radius:8px;
    padding:.45rem 1rem; font-size:.78rem; font-weight:700; color:#64748b;
    cursor:pointer; transition:.2s; text-decoration:none !important;
}
.ast-tab-btn:hover  { background:#f1f5f9; color:var(--ast-main); }
.ast-tab-btn.active { background:var(--ast-main); color:white; border-color:var(--ast-main); }

.ast-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.ast-kpi-card { background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.05); border: 1px solid #f1f5f9; }
.ast-kpi-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }

.ast-glass-card { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.05); border:1px solid #f1f5f9; }
.card-header-bar { padding:.75rem 1rem; border-bottom:1px solid #f1f5f9; }
.card-body-pad { padding:1.25rem; }

.ast-badge { font-size:.68rem; font-weight:700; border-radius:6px; padding:.2rem .55rem; display:inline-block; }
.ast-badge-blue { background:#eff6ff; color:#2563eb; }
.ast-badge-green { background:#f0fdf4; color:#16a34a; }
.ast-badge-red { background:#fef2f2; color:#dc2626; }
.ast-badge-gray { background:#f8fafc; color:#64748b; border:1px solid #e2e8f0; }
.ast-badge-amber { background:#fffbeb; color:#d97706; }

.ast-table { width:100%; border-collapse:collapse; }
.ast-table th { background:#f8fafc; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; padding:.75rem 1rem; color:#64748b; border-bottom:2px solid #e2e8f0; }
.ast-table td { padding:.75rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }

.bg-light-soft { background:#f8fafc; }
.bg-blue-soft { background:rgba(37,99,235,0.08); }
.bg-green-soft { background:rgba(16,185,129,0.08); }
.bg-red-soft { background:rgba(239,68,68,0.08); }
.bg-amber-soft { background:rgba(245,158,11,0.08); }
.bg-red-light-soft { background:rgba(239,68,68,0.03); }

.font-weight-950 { font-weight:950 !important; }
.font-weight-850 { font-weight:850 !important; }
.font-weight-700 { font-weight:700 !important; }
.xx-small { font-size:.72rem; }
.uppercase { text-transform:uppercase; letter-spacing:.04em; }
.text-navy { color:#1e3a5f !important; }

/* Premium Soft Action Buttons */
.btn-action-soft {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #64748b !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    cursor: pointer !important;
    text-decoration: none !important;
}
.btn-action-soft i {
    font-size: 1.05rem !important;
    line-height: 1 !important;
}
.btn-action-soft.action-view:hover {
    background-color: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}
.btn-action-soft.action-edit:hover {
    background-color: #fffbeb !important;
    color: #d97706 !important;
    border-color: #fde68a !important;
}
.btn-action-soft.action-delete:hover {
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   NESTED MODAL Z-INDEX FIX
   When a search/lookup dialog opens on top of another modal (e.g. the account
   search inside the Add Customer modal), Bootstrap stacks them at the same
   z-index. We auto-elevate modals beyond the first one and their backdrops.
   ───────────────────────────────────────────────────────────────────────────── */

/* The second modal always above the first */
body.modal-open .modal.show + .modal.show,
body.modal-open .modal.show ~ .modal.show {
    z-index: 1060 !important;
}

/* Its backdrop above the first modal */
body.modal-open .modal-backdrop + .modal-backdrop,
body.modal-open .modal-backdrop ~ .modal-backdrop {
    z-index: 1055 !important;
}

/* jQuery-UI autocomplete and any absolute positioned search results */
.ui-autocomplete,
.ui-menu {
    z-index: 99999 !important;
}