:root {
    --orderst-min-width: 130px;
    --txtcolor: red;
}

body {
    
}

#Body {
    min-height: 100vh;
}

form {
    min-height: 100vh;
    margin: 0;
}


#AccPanel {
    min-height: 100%;
    display: flex;
}

#AccContentPanel {
    padding-top: 64px;
    min-height: 100dvh;
    position: relative;
    width: 100%;
}

#AccL,
#AccR {
    z-index: 9101;
    flex: 1;
}

#AccOuterHeaderPanel {
    height: 64px;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

* {
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent
}



.sidenavchild {
    position: sticky;
    top: 64px;
    left: 0;
}

.side-nav {
    padding-top: 64px;
    height: 100vh;
    width: 280px;
    max-width: 100vw;
    position: absolute;
    z-index: 9100;
    top: 0;
    inset-inline-start: -280px;
    background-color: #f8f9fa;
    transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    overflow-y: auto;
}

    .side-nav.active {
        inset-inline-start: 0;
        opacity: 1;
    }

.nav-section {
    background-color: #ececec !important;
}



.navbar-nav .nav-link {
    text-align: start;
    justify-content: flex-start;
}

.side-nav .nav-link .toggle-arrow {
    transition: transform 0.3s ease;
}

.side-nav .nav-link.collapsed .toggle-arrow {
    transform: rotate(90deg); /* لو القائمة عربي RTL السهم هيشاور للشمال */
}

[data-bs-theme="dark"] .side-nav{
    background: #212529;
}

[data-bs-theme="dark"] .nav-section {
    background: #2b2f35 !important;
}



#overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    backdrop-filter: blur(0px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, backdrop-filter .3s ease, visibility .3s ease;
    z-index: 9099;
}

    #overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        backdrop-filter: blur(2px);
    }





#alertpanelparent {
    position: fixed;
    top: 0px;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 999999;
    height: auto;
}

#alertpanel {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    transition: all .15s ease;
    height: auto;
}

    #alertpanel > div {
        width: 100%;
        min-height: 42px;
        color: white;
        display: flex;
        transition: all .15s ease;
    }

        #alertpanel > div > span {
            flex: 1;
            height: 100%;
            line-height: 40px;
            text-align: center;
            text-shadow: 0 0 1px #666;
            font-weight: bold;
            font-size: 18px;
            cursor: pointer;
        }

        #alertpanel > div > a {
            display: block;
            width: 40px;
            height: 40px;
            padding: 4px;
            line-height: 40px;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            /* background-image: url('https://www.jumia.com.eg/assets_he/images/i-icons.e70b7734.svg#close')*/
            background-image: url('/images/res/svg/close.svg');
            background-size: 32px 32px;
            background-repeat: no-repeat;
            background-position: center;
        }

/* Use the variable in your class */
.orderst {
    min-width: var(--orderst-min-width);
}

[data-bs-theme="dark"] {
    scrollbar-color: #444 #222;
}

/* Hover effect موحد لزراير التعديل/الحذف/الترس في الكروت */
.card-action-btn {
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

    .card-action-btn:hover {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .card-action-btn.btn-edit:hover {
        background-color: rgba(var(--bs-primary-rgb), 0.12) !important;
        color: var(--bs-primary) !important;
    }

    .card-action-btn.btn-delete:hover {
        background-color: rgba(var(--bs-danger-rgb), 0.12) !important;
        color: var(--bs-danger) !important;
    }

    .card-action-btn.btn-gear:hover {
        background-color: var(--bs-secondary-bg) !important;
        color: var(--bs-secondary) !important;
    }

.xcard {
    background-color: var(--bs-body-bg);
    /*background-color: rgba(var(--bs-tertiary-bg-rgb),var(--bs-bg-opacity)) !important ;*/
    transition: background-color 0.3s ease, border-color 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05) !important;
}

[data-bs-theme="light"] .xcard {
    background-color: #F8F9FA;
}

/* في الوضع الداكن (Dark Mode) */
[data-bs-theme="dark"] .xcard {
    background-color: var(--bs-secondary-bg);
    background-color: #31363C;
  
    /* حدود واضحة عشان تفصل الكارت عن الخلفية */
    border-color: var(--bs-border-color);
    /* في الدارك مود بنلغي الحدود السوداء الصريحة ونخليها أغمق بسيط */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

    /* تحسين إضافي (اختياري) عشان الكارت يبقى عليه ظل خفيف في الدارك مود */
    [data-bs-theme="dark"] .xcard.shadow-sm {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
    }

[data-bs-theme="dark"] #AccOuterHeaderPanel {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important;
    border-bottom: 1px solid #333 !important;
}
[data-bs-theme="dark"] .table {
    --bs-table-border-color: #444; /* لون حدود أغمق قليلاً للدارك مود */
}
[data-bs-theme="dark"] .table-hover {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}







   







.round-start {
    border-start-start-radius: 0.375rem !important;
    border-end-start-radius: 0.375rem !important;
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

.round-end {
    border-start-end-radius: 0.375rem !important;
    border-end-end-radius: 0.375rem !important;
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}





.input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
}

.col-12 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

#deptListGroup {
   padding:0 !important
}


@media (max-width: 600px) {

    .servmain {
        flex-direction:column;
    }

    .dept-col-wrapper {
        width: 100% !important;
        min-width: 100% !important;
    }

    /* جعل حاوية الأقسام في الموبايل شريطاً أفقياً */
    #deptListGroup {
        flex-direction: row !important;
        overflow-x: auto;
        white-space: nowrap;
        width: 100vw; /* عرض الشاشة بالكامل */
        justify-content:space-between;
    }

        #deptListGroup > a {
            width: 90px !important;
        }

        /* ضمان عرض مناسب للكروت في الموبايل */
        #deptListGroup .card {
            flex: 0 0 auto; /* منع الكروت من الانضغاط */
        }

    /* جعل منطقة الخدمات تأخذ طولاً ثابتاً وتسمح بالسكرول (إذا لزم الأمر) */
    #categoriesContainer {
        overflow-y: auto;
    }
}


/* Shipping operations buttons (used for both drivers and vehicles cards) */
.shipping-op-btn {
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.shipping-op-warning {
    color: var(--bs-warning-text-emphasis) !important;
    border-color: var(--bs-secondary-border-subtle) !important;
    background-color: transparent !important;
}

    .shipping-op-warning:hover {
        background-color: var(--bs-warning-bg-subtle) !important;
        border-color: var(--bs-warning-border-subtle) !important;
        color: var(--bs-warning-text-emphasis) !important;
    }

.shipping-op-info {
    color: var(--bs-info-text-emphasis) !important;
    border-color: var(--bs-secondary-border-subtle) !important;
    background-color: transparent !important;
}

    .shipping-op-info:hover {
        background-color: var(--bs-info-bg-subtle) !important;
        border-color: var(--bs-info-border-subtle) !important;
        color: var(--bs-info-text-emphasis) !important;
    }


/* تهدئة الألوان فى الوضع الغامق - نفس الفكرة بس بشفافية منخفضة بدل القيم الافتراضية الصارخة */
[data-bs-theme="dark"] .shipping-op-warning:hover {
    background-color: rgba(255, 193, 7, 0.12) !important;
    border-color: rgba(255, 193, 7, 0.35) !important;
    color: #ffda6a !important;
}

[data-bs-theme="dark"] .shipping-op-info:hover {
    background-color: rgba(13, 202, 240, 0.12) !important;
    border-color: rgba(13, 202, 240, 0.35) !important;
    color: #6edff6 !important;
}


.parked-inv-card.active-parked {
    border-color: var(--bs-primary) !important;
    background-color: var(--bs-primary-bg-subtle) !important;
}

    .parked-inv-card.active-parked .fw-bold {
        color: var(--bs-primary) !important;
    }


/* Orders tab — max 2 columns regardless of Bootstrap col classes */
.wa-orders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    align-content: start;
}

    /* Override Bootstrap col widths inside the wa grid */
    .wa-orders-grid > [class*="col-"] {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

/* Single column on narrow panels / mobile */
@media (max-width: 900px) {
    .wa-orders-grid {
        grid-template-columns: 1fr;
    }
}