@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');

/* ========================================
   CSS Variables (Root)
   ======================================== */
:root {
    --main-btn-bg: #1C4E4F;
    --main-btn-color: #FFF;
    --main-body-bg: #F3F4F5;
    --main-card-bg: #FFF;
    --main-input-bg: #F3F4F5;
    --main-hover-btn-bg: #0f3a38;
}

/* ========================================
   Global Reset & Base Styles
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--main-body-bg);
    font-family: 'Almarai', sans-serif;
}

/* ========================================
   Typography - Headers
   ======================================== */
h1, h2, h3, h4, h5, h6,
.pageHeader,
.sectionHeader,
.allUsers_header,
.delivery-type-title,
.modal-title,
.card-header {
    font-family: 'Almarai', sans-serif !important;
}

.pageHeader {
    font-size: 27px;
    font-weight: 700;
}

.sectionHeader {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.allUsers_header {
    font-size: 30px;
    font-weight: 700;
}

.delivery-type-title {
    font-size: 16px;
    font-weight: 600;
    color: #165b59;
    margin-bottom: 15px;
}

/* ========================================
   Table Styles
   ======================================== */
/* Table headers */
.styled-table thead th,
#assetsTable thead th,
.assets-table thead th {
    font-family: 'Almarai', sans-serif !important;
    font-weight: 600;
}

/* Table text alignment for RTL */
.styled-table th,
.styled-table td {
    text-align: right;
}

    .styled-table th:last-child,
    .styled-table td:last-child {
        text-align: center;
    }

/* ========================================
   Form Elements - Inputs & Selects
   ======================================== */
input, select {
    background-color: var(--main-input-bg);
    height: 48px;
    font-family: 'Almarai', sans-serif;
}

    input::placeholder,
    select::placeholder,
    textarea::placeholder {
        font-family: 'Almarai', sans-serif;
    }

label {
    font-size: 14px;
    font-family: 'Almarai', sans-serif;
}

/* ========================================
   Buttons
   ======================================== */
button, .btn, .btn-submit, .btn-cancel {
    font-family: 'Almarai', sans-serif !important;
}

/* Custom Button */
.custom-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    color: var(--main-btn-color);
    background-color: var(--main-btn-bg);
    padding: 8px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .custom-btn:hover {
        background-color: var(--main-hover-btn-bg);
    }

    .custom-btn:active {
        transform: scale(0.98);
    }

/* Submit Button */
.btn-submit {
    background-color: #165b59;
    color: white;
    padding: 10px 30px;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-submit:hover {
        background-color: #0f4846;
    }

    .btn-submit:active {
        transform: scale(0.98);
    }

/* Cancel Button */
.btn-cancel {
    border: 1px solid #ced4da;
    background-color: #f8f9fa;
    color: #333;
    padding: 10px 30px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-cancel:hover {
        background-color: #e2e6ea;
        border-color: #adb5bd;
    }

    .btn-cancel:active {
        transform: scale(0.98);
    }

    /* Disabled Button State */
    .custom-btn:disabled,
    .btn-submit:disabled,
    .btn-cancel:disabled {
        background-color: #cccccc;
        color: #666666;
        cursor: not-allowed;
        opacity: 0.6;
    }

        .custom-btn:disabled:hover,
        .btn-submit:disabled:hover,
        .btn-cancel:disabled:hover {
            background-color: #cccccc;
            transform: none;
        }

/* ========================================
   Container & Layout
   ======================================== */
.custom-container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

/* ========================================
   Pagination
   ======================================== */
.pagination {
    margin-top: 20px;
    text-align: center;
    font-family: 'Almarai', sans-serif;
}

    .pagination a,
    .pagination .current-page,
    .pagination .dots {
        display: inline-block;
        margin: 0 4px;
        padding: 8px 12px;
        border-radius: 5px;
        font-weight: bold;
        text-decoration: none;
        color: #333;
        border: 1px solid #ccc;
        transition: all 0.3s;
        font-family: 'Almarai', sans-serif;
    }

        .pagination a:hover {
            background-color: #007BFF;
            color: white;
            border-color: #007BFF;
        }

    .pagination .current-page {
        background-color: #165b59;
        color: white;
        cursor: default;
    }

    .pagination .dots {
        border: none;
        background: transparent;
        cursor: default;
        color: #888;
        padding: 8px 5px;
    }

/* ========================================
   Select2 Styles
   ======================================== */
.select2-selection__rendered {
    font-size: 14px !important;
    font-family: 'Almarai', sans-serif !important;
}

.select2-container--default .select2-results__option {
    font-family: 'Almarai', sans-serif !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-family: 'Almarai', sans-serif !important;
}

/* Select2 RTL Support */
.select2-container--default .select2-selection--multiple {
    direction: rtl !important;
    text-align: right !important;
}

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        direction: rtl !important;
        text-align: right !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        direction: rtl !important;
        float: right !important;
        margin-left: 5px !important;
        margin-right: 0 !important;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
        float: left !important;
        margin-right: 0 !important;
        margin-left: 4px !important;
        border-left: 1px solid #aaa !important;
        border-right: none !important;
    }

.select2-container--default .select2-search--inline .select2-search__field {
    direction: rtl !important;
    text-align: right !important;
}

.select2-results__options {
    direction: rtl !important;
    text-align: right !important;
}

.select2-results__option {
    direction: rtl !important;
    text-align: right !important;
}

.select2-selection__placeholder {
    direction: rtl !important;
    text-align: right !important;
}

/* ========================================
   RTL Support
   ======================================== */
[dir="rtl"] .pagination a,
[dir="rtl"] .pagination .current-page {
    display: inline-block;
}
/* Force prevent blue color and underline on hover for ALL elements */
a:hover,
a:focus,
a:active,
button:hover,
button:focus,
.custom-btn:hover,
.custom-btn:focus,
.btn:hover,
.btn:focus,
.btn-submit:hover,
.btn-cancel:hover,
.currentPage:hover,
.pageLinks a:hover,
[href]:hover,
[type="submit"]:hover {
    text-decoration: none !important;
    text-decoration-line: none !important;
    -webkit-text-decoration: none !important;
}

.custom-btn:hover {
    color: #FFFFFF !important;
    background-color: var(--main-hover-btn-bg) !important;
    text-decoration: none !important;
}

.currentPage {
    color: var(--main-btn-bg) !important;
    text-decoration: none !important;
}

    .currentPage:hover {
        color: var(--main-btn-bg) !important;
        text-decoration: none !important;
    }

a {
    text-decoration: none !important;
}

    a:hover {
        color: inherit !important;
        text-decoration: none !important;
        background-color: transparent !important;
    }

/* For any element that might get blue color */
*:hover {
    text-decoration: none !important;
}

/* Override browser default link colors */
:any-link {
    text-decoration: none !important;
}

:-webkit-any-link {
    text-decoration: none !important;
}
/* ========================================
   Responsive Breakpoints
   ======================================== */
@media (min-width: 576px) {
    .custom-container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .custom-container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .custom-container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .custom-container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .custom-container {
        max-width: 1320px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .pageHeader {
        font-size: 22px;
    }

    .sectionHeader {
        font-size: 18px;
    }

    .allUsers_header {
        font-size: 24px;
    }

    .custom-btn,
    .btn-submit,
    .btn-cancel {
        padding: 6px 16px;
        font-size: 14px;
    }
}

/* ========================================
   Utility Classes
   ======================================== */
.text-center {
    text-align: center;
}

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

.text-left {
    text-align: left;
}