span.error {
    display: block;
    visibility: hidden;
    color: red;
    font-size: 90%;
}

/* === Sidebar custom improvements: logo, active styles, RTL tweaks === */
.left-sidenav {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.left-sidenav .brand .sidebar-logo {
    max-height: 40px;
    width: auto;
    display: inline-block;
}

.left-sidenav-menu li > a {
    color: #51607a;
    padding: .5rem .75rem;
    transition: background .15s, color .15s, padding .15s;
    border-radius: 6px;
}

.left-sidenav-menu li > a:hover {
    color: #2f6bf9;
    background: rgba(47,107,249,0.06);
}

.left-sidenav-menu li > a.active,
.left-sidenav-menu li.mm-active > a {
    color: #fff !important;
    background: #303e67 !important;
    box-shadow: 0 4px 14px rgba(79,70,229,0.14);
}

/* submenu spacing for RTL support */
html[dir="RTL"] .left-sidenav-menu li ul {
    padding-right: 18px;
    padding-left: 0;
}

/* arrow adjustments */
.left-sidenav-menu li .menu-arrow {
    margin-left: auto;
}
html[dir="RTL"] .left-sidenav-menu li .menu-arrow {
    margin-right: auto;
    margin-left: 0;
}

/* small tweak: highlight small active inner items */
.left-sidenav-menu li ul li.mm-active > a {
    font-weight: 600;
}

tr.error {
    background-color: rgba(255,0,0,0.35);
}

.my-toast-container .swal2-popup.swal2-toast.swal2-show {
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #fffefb;
}

.my-toast-containerMaster .swal2-popup.swal2-toast.swal2-show {
    border: 2px solid #ccc;
    border-radius: 5px;
}

@font-face {
    font-family: "Tajawal-Regular";
    src: url("../fonts/tajawal/Tajawal-Regular.ttf");
}

@font-face {
    font-family: "Tajawal-Light";
    src: url("../fonts/tajawal/Tajawal-Light.ttf");
}

@font-face {
    font-family: "Tajawal-Medium";
    src: url("../fonts/tajawal/Tajawal-Medium.ttf");
}

@font-face {
    font-family: "Tajawal-Bold";
    src: url("../fonts/tajawal/Tajawal-Bold.ttf");
}
/* Apply the font globally */
body {
    font-family: 'Tajawal-Bold', sans-serif !important;
    zoom: 1.10 !important;
}

/* Optionally, you can set specific font weights for various elements */
h1, h2, h3, h4, h5, h6 {
    font-family: "Tajawal-Bold" !important;
    font-weight: 700; /* Adjust the weight as needed */
}

p, div, a, li {
    font-family: "Tajawal-Regular" !important;
    font-weight: 500; /* Default weight for regular text */
}

span {
    font-family: "Tajawal-Regular" !important;
    font-weight: 500; /* Default weight for regular text */
}

/* Additional customizations as needed */
strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

/* Limit all Select2 dropdowns to show max 10 items with scroll */
/* 10 items * ~40px per item = 400px */
.select2-container--bootstrap4 .select2-results__options,
.select2-container--default .select2-results__options {
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 
   -----------------------------------------------------------------------------------------
   Global Table Header Styling
   Analyzed & Applied for: Standard Tables, Bootstrap (.table), DataTables, and JS-generated tables.
   -----------------------------------------------------------------------------------------
*/

table thead th,
.table thead th,
table.dataTable thead th,
.dataTables_scrollHeadInner table thead th {
    background-color: #003366 !important; /* Dark Blue */
    color: #FFFFFF !important;            /* White Text */
    vertical-align: middle !important;
    border-color: #003366 !important;     /* Optional: Clean look */
}

/* Add radius to the first and last header cells */
table thead th:first-child,
.table thead th:first-child,
table.dataTable thead th:first-child {
    border-top-left-radius: 8px !important;
}

table thead th:last-child,
.table thead th:last-child,
table.dataTable thead th:last-child {
    border-top-right-radius: 8px !important;
}

/* RTL Support for Radius */
html[dir="RTL"] table thead th:first-child,
html[dir="RTL"] .table thead th:first-child,
html[dir="RTL"] table.dataTable thead th:first-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 8px !important;
}

html[dir="RTL"] table thead th:last-child,
html[dir="RTL"] .table thead th:last-child,
html[dir="RTL"] table.dataTable thead th:last-child {
    border-top-right-radius: 0 !important;
    border-top-left-radius: 8px !important;
}

/* Ensure DataTables sorting classes don't override the color */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
    background-color: #003366 !important;
    color: #FFFFFF !important;
}

/* Fix for DataTables Sorting Icons (Arrows) visibility on dark background */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    font-family: "Font Awesome 5 Free" !important; /* Force FontAwesome */
    font-weight: 900 !important;                   /* Required for FA5 Solid */
    color: #ffffff !important;
    opacity: 0.5 !important;
    bottom: 8px !important;                        /* Adjust position if needed */
}

/* Override Glyphicons content with FontAwesome icons */
table.dataTable thead .sorting:after {
    content: "\f0dc" !important; /* fa-sort */
    opacity: 0.2 !important;
}
table.dataTable thead .sorting_asc:after {
    content: "\f0de" !important; /* fa-sort-up */
    opacity: 1 !important;
}
table.dataTable thead .sorting_desc:after {
    content: "\f0dd" !important; /* fa-sort-down */
    opacity: 1 !important;
}

/* 
   -----------------------------------------------------------------------------------------
   DataTable Buttons & Controls Positioning
   Goal: Center align Buttons, while keeping Length (Show entries) and Filter (Search) at corners.
   -----------------------------------------------------------------------------------------
*/

/* Create space at the top of the wrapper for our custom header layout */
.dataTables_wrapper {
    position: relative;
    padding-top: 60px !important; /* Adjust based on button height */
}

/* Center the Buttons container */
.dataTables_wrapper .dt-buttons {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    float: none !important;
    z-index: 10;
    display: flex;
    gap: 5px;
}

/* Position Length (Show entries) and Filter (Search) absolutely */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    position: absolute;
    top: 10px;
    z-index: 10;
    margin-top: 0 !important;
}

/* LTR Support (Default) */
html:not([dir="RTL"]) .dataTables_wrapper .dataTables_length {
    left: 15px;
}
html:not([dir="RTL"]) .dataTables_wrapper .dataTables_filter {
    right: 15px;
}

/* RTL Support */
html[dir="RTL"] .dataTables_wrapper .dataTables_length {
    right: 15px;
}
html[dir="RTL"] .dataTables_wrapper .dataTables_filter {
    left: 15px;
    text-align: left; /* Ensure input aligns correctly */
}

/* 
   Button Styling (Unified Design - Coral/Amber Theme)
   Color: #ff7f50 (Coral)
   Text: White
   Radius: 8px
*/

/* 1. Target all general buttons and inputs that act as buttons */
button:not(.close):not(.navbar-toggler):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-outline-light):not(.button-menu-mobile):not(.logout-icon-btn), 
.btn:not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-outline-light):not(.btn-link):not(.button-menu-mobile):not(.logout-icon-btn),
.dataTables_wrapper .dt-buttons .dt-button, 
.dataTables_wrapper .dt-buttons .btn,
input[type="submit"], 
input[type="button"], 
input[type="reset"] {
    background-color: #ff7f50 !important; /* Coral */
    color: #ffffff !important;
    border: 1px solid #ff7f50 !important;
    border-radius: 8px !important;
    padding: 0.375rem 0.75rem !important; /* Bootstrap standard padding or adjusted */
    font-family: "Tajawal-Medium", sans-serif !important;
    font-size: 0.9rem !important; /* Unified size */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

/* 2. Specific override for Bootstrap primary/secondary/etc to enforce uniformity if desired */
/* Note: This makes ALL main action buttons Coral. If you want to keep Red for Danger, remove .btn-danger from here */
.btn-primary, .btn-secondary, .btn-info, .btn-success, .btn-dark, .btn-warning {
    background-color: #ff7f50 !important;
    border-color: #ff7f50 !important;
    color: #ffffff !important;
}

/* 3. Hover Effects */
button:not(.close):not(.navbar-toggler):not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-outline-light):not(.logout-icon-btn):hover, 
.btn:not(.btn-outline-primary):not(.btn-outline-secondary):not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-dark):not(.btn-outline-light):not(.btn-link):not(.logout-icon-btn):hover,
.dataTables_wrapper .dt-buttons .dt-button:hover, 
.dataTables_wrapper .dt-buttons .btn:hover,
input[type="submit"]:hover, 
input[type="button"]:hover, 
input[type="reset"]:hover {
    background-color: #e66a3c !important; /* Darker Coral */
    border-color: #e66a3c !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

/* 4. Disabled State */
button:disabled, 
.btn:disabled,
.dataTables_wrapper .dt-buttons .dt-button.disabled,
input[type="submit"]:disabled, 
input[type="button"]:disabled, 
input[type="reset"]:disabled {
    background-color: #ffccbc !important; /* Light/Pale Coral */
    border-color: #ffccbc !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    color: #fff8f5 !important;
}

/* 5. Fix icon colors inside buttons */
button i, .btn i, .dataTables_wrapper .dt-buttons .dt-button i,
button span, .btn span, .dataTables_wrapper .dt-buttons .dt-button span {
    color: #ffffff !important;
}

/* 
   -----------------------------------------------------------------------------------------
   DataTable Custom Loading Spinner (Balls)
   -----------------------------------------------------------------------------------------
*/

/* Hide default processing background and text if not needed */
.dataTables_processing {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    z-index: 200 !important;
    font-size: 0 !important; /* Hide text */
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: none !important; /* Completely hide DataTable processing indicator */
}

/* Spinner Styles */
.dt-spinner {
  margin: 0 auto;
  width: 70px;
  text-align: center;
  display: block !important;
}

/* Global Loading Overlay */
#loadingDiv {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* No background color */
    /* Remove or comment out the background-color entirely if you want zero interaction blocker, 
       but keeping it transparent with pointer-events might be desired if you want to block clicks.
       If you want to allow clicks through (not recommended during load), use pointer-events: none; */
    background-color: rgba(255, 255, 255, 0.5); /* Optional: Very light semi-transparent or remove */
    background-color: transparent !important;    /* Force transparent as requested */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: all; /* Block clicks while loading */
}

/* Reusing the dt-spinner styles for global loader */
#loadingDiv .dt-spinner {
    transform: scale(1.5); /* Make it slightly larger for full screen */
}

.dt-spinner > div {
  width: 18px;
  height: 18px;
  background-color: #003366; /* Match theme color */
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.dt-spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.dt-spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

/* 
   -----------------------------------------------------------------------------------------
   Full Width Page Layout Fixes
   -----------------------------------------------------------------------------------------
*/

/* Ensure body and html take full width */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important; /* Prevent horizontal scrollbar */
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix main page container to be fluid */
.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* 
   Fix Dashboard/Admin Template Layout 
   The template often uses .page-content or .page-wrapper with restrictions
*/
.page-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    /* margin-left: 230px; Keep left sidebar space if needed, otherwise adjust */
}

/* ---------------------------------------------------------------------------
     Layout language switch (scoped to .layout-lang-switch)
     - Keeps styles local so Login page switch is NOT affected
     - Selected side shows orange text, other side shows white text
     - Adds spacing above/below so it's not flush against header
     --------------------------------------------------------------------------- */
.layout-lang-switch { 
        margin-top: 6px;
        margin-bottom: 6px;
}
.layout-lang-switch .switch {
    position: relative;
    display: inline-block;
    margin: 0 5px;
}

.layout-lang-switch .switch > span {
    position: absolute;
    top: 8px;
    pointer-events: none;
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    width: 50%;
    text-align: center;
}

.layout-lang-switch input.check-toggle-round-flat:checked ~ .off {
    color: #F36F25; /* selected -> orange */
}

.layout-lang-switch input.check-toggle-round-flat:checked ~ .on {
    color: #fff; /* unselected -> white */
}

.layout-lang-switch .switch > span.on {
    left: 0;
    padding-left: 2px;
    color: #F36F25; /* default selected (unchecked) */
}

.layout-lang-switch .switch > span.off {
    right: 0;
    padding-right: 4px;
    color: #fff; /* default unselected */
}

.layout-lang-switch .check-toggle {
    position: absolute;
    margin-left: -9999px;
    visibility: hidden;
}
.layout-lang-switch .check-toggle + label {
    display: block;
    position: relative;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.layout-lang-switch input.check-toggle-round-flat + label {
    padding: 2px;
    width: 97px;
    height: 35px;
    background-color: #F36F25; /* overall track color (keeps contrast) */
    border-radius: 60px;
}
.layout-lang-switch input.check-toggle-round-flat + label:before,
.layout-lang-switch input.check-toggle-round-flat + label:after {
    display: block;
    position: absolute;
    content: "";
}

.layout-lang-switch input.check-toggle-round-flat + label:before {
    /* small inner inset to create breathing room for the knob */
    top: 3px;
    left: 3px;
    bottom: 3px;
    right: 3px;
    background-color: #F36F25;
    border-radius: 60px;
}
.layout-lang-switch input.check-toggle-round-flat + label:after {
    top: 5px;
    left: 5px;
    bottom: 5px;
    width: 44px; /* slightly smaller so it doesn't touch the track */
    background-color: #fff;
    border-radius: 52px;
    transition: margin 0.18s ease;
    /* subtle border/shadow so it's visually separated from the track */
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);
    border: 1px solid rgba(0,0,0,0.06);
}

.layout-lang-switch input.check-toggle-round-flat:checked + label:after {
    margin-left: 40px; /* leave a small gap from the right edge */
}

/* small responsive tweak */
@media (max-width: 640px) {
    .layout-lang-switch .switch > span { top: 9px; font-size: 11px; }
    .layout-lang-switch input.check-toggle-round-flat + label { width: 86px; height: 34px; }
    .layout-lang-switch input.check-toggle-round-flat + label:after { width: 40px; }
    .layout-lang-switch input.check-toggle-round-flat:checked + label:after { margin-left: 36px; }
}

/* If RTL is active, adjust margins if needed (usually handled by app-rtl.css but good to force if buggy) */
html[dir="RTL"] .page-wrapper {
    /* margin-right: 230px; */
    /* margin-left: 0; */
}

.page-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px !important; /* Unified padding */
}

/* Remove excessive margins from cards or internal containers */
.card {
    margin-bottom: 1.5rem !important;
    width: 100% !important;
    border: none !important; /* Remove default border if shadow is used */
    border-radius: 8px !important; /* Unified radius */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important; /* Soft, elegant shadow - Increased visibility */
    transition: box-shadow 0.3s ease-in-out !important;
}

.card:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important; /* Slightly deeper shadow on hover */
}

.row {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

/* Ensure data tables take full width */
.dataTables_wrapper {
    width: 100% !important;
}

table {
    width: 100% !important;
}

/* 
   -----------------------------------------------------------------------------------------
   Application Header Unified Styling
   Theme Color: #003366 (Dark Blue)
   Text/Icons: #FFFFFF (White)
   -----------------------------------------------------------------------------------------
*/

/* 1. Main Navbar Background */
.navbar-custom, 
.topbar, 
.topbar .brand {
    background-color: #003366 !important; /* Dark Blue */
    border-bottom: 1px solid #001f3f !important; /* Slightly darker border */
    color: #ffffff !important;
}

/* 2. Topbar Navigation Links & Items */
.navbar-custom .nav-link,
.navbar-custom .topbar-nav li .nav-link,
.navbar-custom .dropdown-toggle,
.topbar .nav-link,
.topbar .button-menu-mobile {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* 3. Icons within the Header */
.navbar-custom .nav-link i,
.navbar-custom .nav-link svg,
.topbar .nav-link i,
.topbar .nav-link svg,
.topbar-icon,
.button-menu-mobile svg,
.button-menu-mobile i {
    color: #ffffff !important;
    stroke: #ffffff !important; /* For Feather icons */
    fill: none !important;
}

/* 4. Hover & Active States */
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link:focus,
.navbar-custom .nav-link:active,
.topbar .button-menu-mobile:hover {
    background-color: rgba(255, 255, 255, 0.1) !important; /* Light transparent overlay */
    color: #ffffff !important;
}

/* 5. Dropdown Menus (User Menu, Notifications, Language) */
/* Ensure the dropdowns themselves keep a clean white background for readability, 
   but the triggers in the header remain white text on blue bg. */
.dropdown-menu {
    background-color: #ffffff !important;
    border: 1px solid #e3ebf6 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

.dropdown-item {
    color: #303e67 !important; /* Dark text for dropdown items */
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: #f1f5fa !important;
    color: #003366 !important;
}

/* 6. Notifications Badge */
.notification-list .noti-icon-badge {
    background-color: #ff7f50 !important; /* Coral to match buttons */
    border: 2px solid #003366 !important; /* Match header bg for seamless look */
    color: #ffffff !important;
}

/* 7. Search Bar inside Header (if applicable) */
.app-search-topbar .form-control,
.app-search-topbar input {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    color: #ffffff !important;
}

.app-search-topbar .form-control::placeholder,
.app-search-topbar input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

.app-search-topbar button {
    color: #ffffff !important;
}

/* 8. User Name & Avatar */
.nav-user .nav-user-name {
    color: #ffffff !important;
}

/* 
   -----------------------------------------------------------------------------------------
   EXCEPTIONS FOR GLOBAL BUTTON STYLES
   -----------------------------------------------------------------------------------------
*/

/* 1. Mobile Menu Button (Top Bar) - Reset to Transparent/White Icon */
.button-menu-mobile {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important; /* White Icon */
    padding: 0 15px !important;
    transform: none !important;
}

.button-menu-mobile:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.button-menu-mobile svg,
.button-menu-mobile i {
    stroke: #ffffff !important;
    color: #ffffff !important;
}

/* 2. Language Switcher Button */
#form__submit .btn.dropdown-toggle {
    background-color: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border-radius: 20px !important; /* Pill shape */
    padding: 5px 15px !important;
    font-family: "Tajawal-Medium", sans-serif !important;
    font-size: 0.85rem !important;
    margin-top: 0.5rem !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

#form__submit .btn.dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #ffffff !important;
}

/* Optional: Add a globe icon before text via CSS if not in HTML */
#form__submit .btn.dropdown-toggle::before {
    content: "\f0ac"; /* FontAwesome Globe */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 5px;
}

/* RTL Support for Globe Icon */
html[dir="RTL"] #form__submit .btn.dropdown-toggle::before {
    margin-right: 0;
    margin-left: 5px;
}

/* 
   -----------------------------------------------------------------------------------------
   GLOBAL SELECT2 - ZOOM FIX & STYLING
   Issue: Page zoom (1.10) causes dropdown positioning offset
   Solution: JS handles dynamic positioning, CSS provides z-index, styling, and text color fixes
   -----------------------------------------------------------------------------------------
*/

/* Essential z-index for modals */
.select2-container--bootstrap4 .select2-dropdown,
.select2-container--default .select2-dropdown {
    z-index: 1055 !important; /* Higher than Bootstrap modals (1050) */
}

/* Modal overflow fix */
.modal-body {
    overflow-y: auto !important;
}

/* Results list styling */
.select2-results__options {
    max-height: 300px !important;
    overflow-y: auto !important;
}

/* Dropdown container styling with rounded corners */
.select2-dropdown {
    border: 1px solid #aaa !important;
    border-radius: 8px !important; /* Rounded corners for the entire dropdown */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    background-color: #ffffff !important;
    padding: 4px 0 !important; /* Add padding for better appearance */
}

/* Fix text color in dropdown items - ensure dark text on white background */
.select2-results__option {
    color: #333333 !important; /* Dark text color */
    padding: 8px 12px !important;
    font-family: "Tajawal-Regular", sans-serif !important;
}

/* Selected/highlighted option styling */
.select2-results__option--highlighted {
    background-color: #f1f5fa !important;
    color: #003366 !important; /* Dark blue text when highlighted */
}

/* Selected option styling */
.select2-results__option[aria-selected="true"] {
    background-color: #e3ebf6 !important;
    color: #003366 !important;
}

/* Search input inside dropdown */
.select2-search__field {
    color: #333333 !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
}

/* Placeholder text in search */
.select2-search__field::placeholder {
    color: #999999 !important;
}

/* 1. Modal Positioning (Center Screen) */
/* Override Bootstrap default top positioning */
.modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important; /* Full height minus margins */
    margin: 1.75rem auto !important; /* Centered horizontally */
    justify-content: center !important;
}

/* Ensure modal content doesn't stretch weirdly */
.modal-content {
    width: 100% !important;
    max-height: 90vh !important; /* Prevent overflowing screen */
    overflow-y: auto !important; /* Scroll inside modal if content is long */
    border: none !important;
    border-radius: 8px !important; /* Soft corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important; /* Deep shadow for depth */
    animation: fadeInScale 0.3s ease-out !important; /* Custom animation */
}

/* Animation for entering from center (Scale Up) instead of sliding from top */
@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 2. Text Color Standardization (Fix White Text Issue) */
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.modal-title,
.modal-body p,
.modal-body span,
.modal-body div,
.modal-body label {
    color: #333333 !important; /* Dark text for readability */
}

/* Header Specifics */
.modal-header {
    background-color: #ffffff !important; /* Clean white header */
    border-bottom: 1px solid #e3ebf6 !important;
    color: #1d2c48 !important; /* Darker navy for title */
}

.modal-title {
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    color: #1d2c48 !important;
}

/* Close Button Fix */
.modal-header .close,
.modal-header .btn-close {
    color: #333333 !important;
    opacity: 0.5 !important;
    text-shadow: none !important;
    background: transparent !important; /* Remove any weird backgrounds */
}

.modal-header .close:hover,
.modal-header .btn-close:hover {
    opacity: 1 !important;
    color: #000000 !important;
}

/* Footer Specifics */
.modal-footer {
    background-color: #f8f9fa !important; /* Light gray footer for separation */
    border-top: 1px solid #e3ebf6 !important;
}

/* 3. SweetAlert2 Specific Overrides (If used as popups) */
.swal2-popup {
    display: flex !important; /* Ensure flex behavior */
    align-self: center !important; /* Center in container */
    margin: auto !important;
}

.swal2-container {
    display: flex !important;
    align-items: center !important; /* Vertical center */
    justify-content: center !important; /* Horizontal center */
}

.swal2-title,
.swal2-html-container, 
.swal2-content {
    color: #333333 !important;
}

/* 
   -----------------------------------------------------------------------------------------
   GLOBAL PAGE TITLE REMOVAL & OPTIMIZATION
.page-title,
.page-title-box .breadcrumb,
.page-header .page-title,
h2.page-title,
h4.page-title {
    display: none !important;
}

/* 2. Reset Container Styles (Make invisible but keep structure for buttons) */
.page-title-box,
.page-header {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important; /* Removed completely */
    min-height: 0 !important;
}

/* 5. Reduce spacing for content immediately following the header */
.page-header + .container,
.page-header + .container-fluid,
.page-header + .container-xl,
.page-header + .container-lg,
.page-header + .px-4,
.page-header + div[class*="mt-"] {
    margin-top: 0.5rem !important; /* Override mt-4 (1.5rem) to something smaller */
}

/* 6. Ensure any remaining content (Buttons) is aligned and visible */
.page-title-box .row {
    align-items: center;
}

/* 4. If buttons are inside a col-auto, ensure they don't get squashed or hidden */
.page-title-box .col-auto {
    display: block !important;
}

/* 5. Reduce spacing for sections that were following the page header */
/* Targeting common wrapper classes if possible, otherwise rely on removal of header height */


/* 
   -----------------------------------------------------------------------------------------
   SELECT2 RESPONSIVENESS & STYLE FIXES
   -----------------------------------------------------------------------------------------
*/

/* 1. Make the container take full width of its parent, overriding inline styles from JS */
.select2-container {
    width: 100% !important; 
}

/* 2. Style the main selection box to match .form-control */
.select2-container--bootstrap4 .select2-selection--single,
.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    height: calc(1.5em + 0.75rem + 2px) !important; /* Bootstrap's default form-control height */
    padding: 0.375rem 0.75rem !important;
    border-radius: 0.25rem !important;
    background-color: #fff !important;
}

/* Ensure placeholder and selected text are vertically centered */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5 !important;
    color: #495057 !important;
    padding: 0 !important;
}

/* Style the arrow */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(1.5em + 0.75rem) !important;
}

/* Focus style to match other inputs */
.select2-container--bootstrap4.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #ff6b35 !important;
    box-shadow: 0 0 0 0.25rem rgba(255, 107, 53, 0.25) !important;
}


/* Disabled state */
.select2-container--bootstrap4.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #e9ecef !important;
    cursor: not-allowed !important;
}

/* 3. Style the dropdown panel */
.select2-dropdown {
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 4. Style the search field inside the dropdown */
.select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* 5. Highlight/selected option styling */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: #ff6b35 !important;
    color: white !important;
}

/* تكبير حجم اللوجو */
.left-sidenav .brand .sidebar-logo {
    max-height: 60px;
}

/* تغميق لون الهوفر على أزرار المنيو */
.left-sidenav-menu li > a:hover {
    background: rgba(47,107,249,0.15);
}

/* تنسيق responsive لزر تبديل اللغات واسم اليوزر */
@media (max-width: 768px) {
    .topbar-nav.float-end {
        flex-direction: column;
        align-items: flex-end;
    }
    .nav-user-name {
        font-size: 12px;
    }
    .layout-lang-switch {
        margin-top: 10px;
    }
}

.page-title-box {
    display: none !important;
}

input,
select,
textarea {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.select2-container--bootstrap4 .select2-selection--single {
    border: 1px solid #ced4da !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}
/*
   -----------------------------------------------------------------------------------------
   Revised Dashboard Report Cards (v4 - Impressive Icons)
   -----------------------------------------------------------------------------------------
*/
.report-card {
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    background-color: #fff;
    border: 1px solid #e9ecef !important;
}

.report-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1) !important;
}

.report-card .card-body {
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* --- Icon Styling --- */
.report-card .report-main-icon {
    position: absolute;
    right: -15px;
    top: -15px;
    opacity: 0.15;
}

.report-card .report-main-icon i {
    font-size: 90px;
    line-height: 1;
    transform: rotate(-15deg);
}

/* --- Card-Specific Colors --- */

/* Card 1: Sessions - Professional Blue */
.row.justify-content-center > .col-lg-3:nth-child(1) .report-card .report-main-icon i {
    color: #0d6efd !important;
}
.row.justify-content-center > .col-lg-3:nth-child(1) .report-card h3 {
     color: #0d6efd !important;
}


/* Card 2: Avg. Sessions - Calm Green */
.row.justify-content-center > .col-lg-3:nth-child(2) .report-card .report-main-icon i {
    color: #198754 !important;
}
.row.justify-content-center > .col-lg-3:nth-child(2) .report-card h3 {
     color: #198754 !important;
}

/* Card 3: Bounce Rate - Muted Orange */
.row.justify-content-center > .col-lg-3:nth-child(3) .report-card .report-main-icon i {
    color: #fd7e14 !important;
}
.row.justify-content-center > .col-lg-3:nth-child(3) .report-card h3 {
     color: #fd7e14 !important;
}


/* Card 4: Goal Completions - Soft Indigo */
.row.justify-content-center > .col-lg-3:nth-child(4) .report-card .report-main-icon i {
    color: #6610f2 !important;
}
.row.justify-content-center > .col-lg-3:nth-child(4) .report-card h3 {
     color: #6610f2 !important;
}


/* --- General Text Styling for Report Cards --- */
.report-card p.text-dark {
    color: #343a40 !important;
    font-weight: 600 !important;
}
.report-card p.text-muted {
    color: #6c757d !important;
}
.report-card h3 {
    font-weight: 700 !important;
    font-size: 2.25rem;
}
/* Logout Button Styling */
.logout-icon-btn.nav-link {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.logout-icon-btn.nav-link:hover,
.logout-icon-btn.nav-link:focus,
.logout-icon-btn.nav-link:active {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.logout-icon-btn .topbar-icon {
    font-size: 1.5rem !important;
}

.logout-icon-btn:hover .topbar-icon {
    opacity: 0.7;
}

/* Fine-tune logout icon vertical centering */
.navbar-custom .topbar-nav .logout-icon-btn.nav-link {
    display: inline-flex;
    align-items: center;
    height: 70px;            /* match topbar height */
    padding: 0 0.75rem;      /* match nav-link spacing */
}

.navbar-custom .topbar-nav .logout-icon-btn .topbar-icon {
    position: relative;
    top: 1px;                /* slight nudge for visual centering */
    line-height: 1;
}

/* ===========================
   Button Spinner Styles
   =========================== */

/* Spinner animation */
@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Button spinner container */
.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spinner-rotate 0.6s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

/* RTL support for spinner */
html[dir="RTL"] .btn-spinner {
    margin-right: 0;
    margin-left: 8px;
}

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

/* Hide button text during loading (optional) */
.btn-loading.btn-loading-hide-text .btn-text {
    visibility: hidden;
}

/* Spinner for different button sizes */
.btn-lg .btn-spinner {
    width: 18px;
    height: 18px;
    border-width: 3px;
}

.btn-sm .btn-spinner {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

/* Spinner color variations for different button types */
.btn-primary .btn-spinner,
.btn-success .btn-spinner,
.btn-danger .btn-spinner,
.btn-warning .btn-spinner,
.btn-info .btn-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

.btn-light .btn-spinner,
.btn-secondary .btn-spinner,
.btn-outline-primary .btn-spinner,
.btn-outline-secondary .btn-spinner {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: #333;
}

/* Custom gradient button spinner */
button[style*="gradient"] .btn-spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}