/*!
Theme Name: SAM Real Estate System
Theme URI: https://www.linkedin.com/in/profsaad/
Author: SaaD Fadaly
Author URI: https://www.linkedin.com/in/profsaad/
Description: Description
Version: 26.05.24
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sam_rs_sys
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

pj_toma is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@500&display=swap');*/

/* Modern Premium Styles - Scoped */
.sam-style-modern {
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --secondary-color: #06b6d4;
    --accent-color: #f59e0b;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --warning-color: #f59e0b;

    --bg-main: #f8fafc;
    --bg-surface: rgba(255, 255, 255, 0.8);
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: rgba(226, 232, 240, 0.8);

    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: blur(12px);

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sam-style-modern, .sam-style-modern body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: var(--sam-font-family, 'Inter', system-ui, -apple-system, sans-serif) !important;
}

.sam-style-modern h1,
.sam-style-modern h2,
.sam-style-modern h3,
.sam-style-modern h4,
.sam-style-modern h5,
.sam-style-modern h6,
.sam-style-modern .card-title,
.sam-style-modern .modal-title {
    font-family: var(--sam-font-family, 'Outfit', sans-serif) !important;
    font-weight: 700 !important;
}

.sam-style-modern header.topbar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.sam-style-modern .nav-link[id="drop2"] {
    position: relative;
    padding: 10px !important;
    border-radius: var(--sam-radius);
}

.sam-style-modern .badge-number {
    border: 2px solid #fff;
    box-shadow: var(--shadow-sm);
    border-radius: 50%;
}

.sam-style-modern .card {
    background: var(--bg-surface) !important;
    /* WHY: backdrop-filter / filter / transform create a containing block for
       position:fixed descendants, which traps Bootstrap .modal inside the card.
       Background is already semi-transparent for a glass-like effect. */
    border: 1px solid var(--border-color) !important;
    border-radius: var(--sam-radius) !important;
    box-shadow: var(--shadow-md) !important;
    padding: 0 !important;
}

/* Defensive: keep modals viewport-fixed if a parent ever re-introduces
   transform/filter/backdrop-filter. */
.modal,
.modal-backdrop {
    position: fixed !important;
}

/* Dropdown Customization */
.sam-style-modern .dropdown-menu {
    border: 1px solid var(--border-color) !important;
    border-radius: var(--sam-radius) !important;
    box-shadow: var(--shadow-xl) !important;
    margin-top: 10px !important;
    padding: 0.5rem !important;
    animation: dropdownFadeIn 0.3s ease-out;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sam-style-modern .dropdown-item {
    border-radius: calc(var(--sam-radius) / 2) !important;
    padding: 0.75rem 1rem !important;
    font-weight: 500;
    transition: var(--transition-fast);
}

.sam-style-modern .dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: var(--primary-color) !important;
}

.sam-style-modern .btn {
    font-family: var(--sam-font-family, 'Inter', sans-serif);
    border-radius: var(--sam-radius) !important;
}

.sam-style-modern .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 75%, #000)) !important; /* Action / Submit */
    border: none !important;
    color: #fff !important;
}

.sam-style-modern .btn-success {
    background: linear-gradient(135deg, #10b981, #059669) !important; /* Save / Confirm */
    border: none !important;
    color: #fff !important;
}

.sam-style-modern .btn-danger {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important; /* Delete / Cancel */
    border: none !important;
    color: #fff !important;
}

.sam-style-modern .btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important; /* Pending / Warning */
    border: none !important;
    color: #fff !important;
}

.sam-style-modern .btn-info {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important; /* View / Details */
    border: none !important;
    color: #fff !important;
}

.sam-style-modern .ag-theme-balham {
    --ag-header-foreground-color: var(--primary-color) !important;
    --ag-font-family: var(--sam-font-family, 'Inter', sans-serif) !important;
    border-radius: var(--sam-radius) !important;
}

.sam-style-modern .form-control,
.sam-style-modern .form-select,
.sam-style-modern .sam-input,
.sam-style-ultra-dark .form-control,
.sam-style-ultra-dark .form-select,
.sam-style-ultra-dark .sam-input {
    border: 1.5px solid var(--border-color) !important;
    border-radius: var(--sam-radius) !important;
    padding: var(--sam-form-padding) !important;
    margin-top: var(--sam-form-margin-top) !important;
    margin-bottom: var(--sam-form-margin-bottom) !important;
}

.sam-style-modern .sam-form-group,
.sam-style-ultra-dark .sam-form-group {
    margin-top: var(--sam-form-margin-top) !important;
    margin-bottom: var(--sam-form-margin-bottom) !important;
}

div#sam-comments,
div#notes_comments,
div#viewing_comments {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 320px;
    border: 1px solid #ccc;
    border-radius: 3px;
}

.sam_form_viewing_inputs {
    border: 1px solid #ccc;
    border-radius: 3px;
    margin: 8px 0 0 0;
    padding: 4px 8px;
}

.sam-textarea {
    height: 75px; /* Set the desired height in pixels */
    resize: none; /* Prevent resizing by the user */
}

.sam-note,
.sam_viewing_item,
    /*.sam_note_item,*/
.sam_listings_rental_note,
.sam_listings_rental_viewing {
    border: 1px solid #ccc;
    padding: 4px 8px;
    margin: 4px;
    border-radius: 3px;
    background: #fff; /* eaf2fd66 */
}

.sam-note {
    background: #e1e1e12b;
}

.sam_viewing_item,
.sam_listings_rental_viewing {
    background: #03a9f41c;
}

.sam_viewing_item.viewing-successful {
    background: #13deb936;
}


.sam_viewing_item.viewing-scheduled {
    background: #ffae1f3d;
}


.sam_viewing_item.viewing-cancelled {
    background: #fa896b36;
}

#ui-datepicker-div {
    background: #efefef;
    padding: 8px;
    border-radius: 3px;
}

/* Modern Tabs Foundation */
.sam-style-modern .nav-tabs {
    border: none !important;
    background: rgba(0, 0, 0, 0.04);
    padding: 6px;
    border-radius: var(--sam-radius);
    display: inline-flex;
    gap: 4px;
}

.sam-style-modern .nav-tabs .nav-link {
    border: none !important;
    border-radius: var(--sam-radius) !important;
    padding: 0.6rem 1.25rem !important;
    font-weight: 600;
    color: var(--text-muted) !important;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.sam-style-modern .nav-tabs .nav-link:hover {
    background: rgba(255, 255, 255, 0.5);
    color: var(--primary-color) !important;
}

.sam-style-modern .nav-tabs .nav-link.active {
    background: #fff !important;
    color: var(--primary-color) !important;
    box-shadow: var(--shadow-sm) !important;
}


::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
    border-radius: 2px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar
{
    width: 8px;
    height: 8px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    border-radius: 3px;
    -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,.3);
    background-color: #555;
}


/* vendor/ui-datepicker.css */

.ui-datepicker {
    background-color: #fff;
    -webkit-box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.3);
    display: none;
    padding: 1em;
}

.ui-datepicker-calendar a {
    color: inherit;
    text-decoration: none;
}

.ui-datepicker-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 1em;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker-next {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
    background-image: url("https://cdn.rawgit.com/marcobiedermann/playground/3027274a/ui/datepicker/jquery-ui-datepicker/dist/assets/images/datepicker-arrows.svg");
    background-repeat: no-repeat;
    background-size: 300%;
    display: inline-block;
    height: 1em;
    overflow: hidden;
    text-indent: -999px;
    width: 1em;
}

.ui-datepicker-prev:hover .ui-icon-circle-triangle-w {
    background-position: -1em 0;
}

.ui-datepicker-prev.ui-state-disabled .ui-icon-circle-triangle-w {
    background-position: -2em 0;
}

.ui-datepicker-next .ui-icon-circle-triangle-e {
    background-position: 0 -1em;
}

.ui-datepicker-next:hover .ui-icon-circle-triangle-e {
    background-position: -1em -1em;
}

.ui-datepicker-nextui-state-disabled .ui-icon-circle-triangle-e {
    background-position: -2em -1em;
}

.ui-datepicker-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.ui-datepicker-calendar td,
.ui-datepicker-calendar th {
    text-align: center;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
    background-color: #f6f6f6;
    display: block;
    padding: 8px;
}

.ui-datepicker-calendar .ui-datepicker-unselectable {
    color: #c8c8ca;
}

.ui-datepicker-calendar .ui-datepicker-today a,
.ui-datepicker-calendar .ui-datepicker-today span {
    color: #F44336;
    font-weight: 700;
}

.ui-datepicker-calendar .ui-datepicker-current-day a {
    background-color: #9E9E9E;
    color: #fff;
    /*font-weight: 700;*/
}

.ui-datepicker-buttonpane {
    margin-top: 1em;
}

.ui-datepicker-buttonpane button {
    background-color: #484a4e;
    color: #fff;
    font-size: 0.75rem;
    padding: 0.25em 0.5em;
}

.ui-datepicker-buttonpane button + button {
    margin-left: 0.5em;
}

body .ui-state-highlight {
    height: auto;
    margin-bottom: inherit;
    border-radius: 0;
    border: none;
}

select.ui-datepicker-year,
select.ui-datepicker-month {
    font-size: 16px;
    margin: 0 4px;
    border-radius: 4px;
}

.ui-datepicker-title {
    font-size: unset;
}

/* Modern Rental Table Tabs */
.sam-style-modern .sam-employer-rentals .nav-tabs {
    background: var(--bg-main);
    border: 1px solid var(--border-color) !important;
}

.sam-style-modern .sam-employer-rentals .nav-item {
    border: none !important;
}


.table-responsive .top,
.table-responsive .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 8px;
}

.table-responsive .bottom {
    margin: 8px 0 0;
}

/*.table-responsive .dataTables_length,*/
/*.table-responsive .dataTables_filter {*/
/*    margin: auto;*/
/*}*/

.table-responsive .dataTables_filter,
.table-responsive .dataTables_paginate {
    margin: 0 0 0 auto !important;
}
.table-responsive .dataTables_info {
    padding: 0;
}

.sam-toggle-vis {
    display: flex;
    justify-content: flex-start;
    border: 2px solid #5d87ff;
    padding: 8px;
    border-radius: 4px;
    color: #000;
    align-items: center;
    flex-wrap: wrap;
}

.sam-toggle-vis label {
    font-weight: bold;
    font-size: 12px;
    display: flex;
    flex-basis: calc(100% / 11 - 10px);
}

.sam-toggle-vis .toggle-vis input {
    margin: 0 4px;
}

.sam-datatables .sorting select {
    display: table;
    /*width: inherit;*/
    width: max-content;
}

/*.dataTables_scrollHead .sam-datatables thead .sorting_disabled {*/
/*    position: relative;*/
/*    height: 46px;*/
/*}*/

/*.dataTables_scrollHead .sam-datatables thead .sorting_disabled select {*/
/*    position: absolute;*/
/*    top: 8px;*/
/*    left: 8px;*/
/*    right: 8px;*/
/*}*/

.sam-correct-yes {
    background: #13deb9;
    border-radius: 50%;
    padding: 0px 4px;
    color: #fff;
}

.sam-add-new-user {
    border: 4px solid #e2e5e5;
    padding: 8px;
    border-radius: 4px;
}

div.dt-button-background {
    background: rgba(0,0,0,.4);
}

.table-responsive .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0 2px;
    border: unset;
}

div.dataTables_wrapper div.dataTables_length {
    margin: 0 4px;
}

div.dataTables_wrapper div.dataTables_length select {
    width: -webkit-fill-available;
}

div.dataTables_wrapper .bottom .bottom-center {
    margin: 0 auto !important;
}

/*table.sam-users {*/
/*    width: 1376.36px !important;*/
/*}*/

thead .dashicons, thead .dashicons-before:before {
    width: 15px;
    height: 12px;
    font-size: 15px;
}

table.dataTable>tbody>tr {
    cursor: pointer;
}

/*.sam-datatables table thead tr th {*/
.dataTables_scrollHead .sam-datatables thead .sorting_disabled {
    display: inline-flex;
    flex-direction: column;
    min-width: min-content !important;
    /*width: max-content !important;*/
}

.dataTables_scrollHead .sam-datatables thead .sorting_disabled input,
.dataTables_scrollHead .sam-datatables thead .sorting_disabled select {
    height: 27px;
}

.topbar {
    background: #1b8bc9;
}

.topbar .navbar .navbar-nav .nav-item .nav-link {
    color: #ffffff;
}

.topbar .navbar .navbar-nav.quick-links .nav-item .nav-link:hover {
    color: #000 !important;
}

/* Modern Primary Overrides */
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    background-color: #fff !important;
    color: var(--primary-color) !important;
}
.sam-employer-rentals li.nav-item {
    border: none !important;
}

.page-link.active, .active > .page-link {
    background-color: #1b8bc9;
    border-color: #1b8bc9;
}

.sam-marketing-div,
.sam-user-marketing .sam-marketing-div,
.sam-user-administrator .sam-marketing-div {
    display: none !important;
}

/*div.sam-admin-option {*/
/*    background: #539bff;*/
/*    border-radius: 4px;*/
/*    padding: 2px 4px;*/
/*}*/

/*#sam_assign_to_field {*/
/*    padding-top: 4px;*/
/*    border-radius: 4px 4px 0 0;*/
/*}*/

/*#sam_property_owner_control_field {*/
/*    padding-bottom: 4px;*/
/*    border-radius: 0 0 4px 4px ;*/
/*}*/

.body-wrapper {
    padding-top: 3rem !important;
}

/* WP admin bar fix: .topbar is position:fixed top:0 (from Bootstrap), so the
   wpadminbar covers it. When body.admin-bar is present, push the topbar down
   by the admin-bar height (32px desktop / 46px mobile) and shift content. */
.admin-bar .topbar,
.admin-bar header.topbar {
    top: 32px !important;
}
.admin-bar .body-wrapper {
    padding-top: calc(3rem + 32px) !important;
}

@media screen and (max-width: 782px) {
    .admin-bar .topbar,
    .admin-bar header.topbar {
        top: 46px !important;
    }
    .admin-bar .body-wrapper {
        padding-top: 0 !important;
    }
}

/* When admin bar position:fixed flips to absolute on small screens (WP behavior
   below 600px), only push the topbar — body padding from above still applies. */
@media screen and (max-width: 600px) {
    .admin-bar .topbar,
    .admin-bar header.topbar {
        top: 0 !important;
    }
}

.sam-properties-item {
    font-size: 12px !important;
    font-weight: 600;
}
/*
table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
    width: 0% !important;
}

table.table-bordered.dataTable td {
    padding: 0 !important;
}

 */

/* Chrome, Safari, Edge, Opera */
input.phone::-webkit-outer-spin-button,
input.phone::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input.phone[type=number] {
    -moz-appearance: textfield;
}

.tab-content #archive .dataTables_scroll tr th:nth-child(1),
.tab-content #archive .dataTables_scroll tr th:nth-child(2),
.tab-content #archive .dataTables_scroll tr td:nth-child(1),
.tab-content #archive .dataTables_scroll tr td:nth-child(2),
.tab-content #archive .dropdown-menu a:nth-child(1),
.tab-content #archive .dropdown-menu a:nth-child(2) {
    display: none
}

.ag-header, .ag-advanced-filter-header {
    background-color: #1b8bc9 !important;
}

.ag-header-cell-text {
    color: #fff;
}

.ag-picker-field.ag-labeled.ag-label-align-left.ag-select.ag-filter-select.ag-disabled {
    display:none
}

.ag-theme-balham {
    --ag-selected-row-background-color: rgb(0, 255, 0, 0.1);
}

.custom-pagination {
    /*display: flex;*/
    width: 100%;
    text-align: right;
    position: absolute;
    /*bottom: 0;*/
    bottom: -36px;
    z-index: 999;
    right: 0;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 10px;
    background-color: #f8f8f8;
    border-top: 1px solid #ddd;
}

.custom-pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

.custom-pagination button:hover {
    background-color: #e6e6e6;
}

.custom-pagination .page-info {
    margin: 0 10px;
    font-size: 12px;
}

.custom-pagination .page-size-selector {
    margin-left: 10px;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

/*.ag-paging-panel {*/
/*    display: none !important;*/
/*}*/

.ag-ltr .ag-body {
    margin-bottom: 40px !important;
}


/* Menu */
#menuToggle {
    display: flex;
    flex-direction: column;
    position: relative;
    top: 10px;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

#menuToggle input
{
    display: flex;
    width: 40px;
    height: 32px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
}

#menuToggle span
{
    display: flex;
    width: 29px;
    height: 2px;
    margin-bottom: 5px;
    position: relative;
    background: #ffffff;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 5px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 0.55s ease;
}

#menuToggle span:first-child
{
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
    opacity: 1;
    transform: rotate(45deg) translate(-3px, -1px);
    background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
    transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
    position: absolute;
    width: 180px;
    height: 650px;
    box-shadow: 0 0 10px #85888C;
    margin: -50px 0 0 -50px;
    /*padding: 50px;*/
    padding: 48px 48px 0;
    /*padding-top: 125px;*/
    background-color: #F5F6FA;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    overflow-y: auto;
}

#menu li
{
    padding: 10px 0;
    transition-delay: 2s;
}

#menuToggle input:checked ~ ul
{
    transform: none;
}
/* Notes */

.sam_listings_rental_note {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.2;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.note-content {
    /*font-weight: bold;*/
    white-space: pre-wrap;
    color: #333;
    margin: 8px 0;
    line-height: 1.3;
}

.note-meta {
    /*font-size: 12px;*/
    color: #666;
    line-height: 1.4;
}

.sam_listings_rental_note strong {
    font-weight: 600;
    color: #444;
}

.message-body {
    overflow-y: auto;
}

.notification {
    background-color: rgb(237 93 121) !important;
}

.notification.badge-number {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
    font-weight: bold;
    position: absolute;
    top: 16px;
    left: 6px;
}

.sam-h-200 {
    height: 190px;
}

.sam-show-data {
    background: transparent;
    border: 0;
    font-weight: bold;
}

.sam-show-data:hover {
    color: #5d87ff;
}

body .select2-container--classic .select2-selection--single, body .select2-container--default .select2-selection--single, body .select2-container--default .select2-selection--single .select2-selection__rendered, body .select2-container--default .select2-selection--single .select2-selection__arrow, body .select2-container--default .select2-selection--multiple, body .select2-container--classic .select2-selection--single .select2-selection__arrow, body .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #000 !important;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
}

.modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 26px;
    right: 4px;
    width: 20px;
}

/*.modal .select2-container {*/
/*    top: 240px;*/
/*}*/

.ag-theme-alpine .ag-row-selected {
    background-color: #b3d7ff !important; /* Light blue - adjust as needed */
    transition: background-color 0.2s ease; /* Smooth transition */
}

/* Ensure no override by other states */
.ag-theme-alpine .ag-row-selected.ag-row-hover {
    background-color: #b3d7ff !important;
}

/* Prevent loss during filtering/pagination */
.ag-theme-alpine .ag-row.ag-row-selected {
    background-color: #b3d7ff !important;
}

#sam_post_marketing_msg {
    height: 140px;
}

.select2-results__option {
    color: #111;
}

/*.select2-container--default .select2-results>.select2-results__options {*/
/*    width: max-content;*/
/*    background: #fff;*/
/*}*/

.city-rows-container {
    transition: all 0.5s ease;
    padding: 0.30em;
    /* font-size: inherit; */
    border-radius: 3px;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    width: 100%;
    border: 1px solid #E2E5E5;
    margin: 8px 0 !important;
    font-size: 14px;
    display: block;
    background: #efefef;
}

.sam-delete-rows-no,
.sam-assign-to-rows-no,
.sam-quick-edit-rows-no,
.sam-delete-rows-item .alert,
.sam-assign-to-rows-item .alert,
.sam-quick-edit-rows-item .alert {
    padding: 4px !important;
}

.nav-pills {
    background: #ebf3fe;
    border-radius: 4px 4px 0 0;
    border: 1px solid #E2E5E5;
    margin: 0 -8px 8px;
    padding: 2px 8px;
}

.page-id-22838 .sam-generate-new-form {
    display: none !important
}

.samNoReplyButton,
.samRequestsButton,
.samManagementButton,
.samAllowRequestsButton {
    height: 30px;
}

.topbar {
    background: #f7f7f7;
    border-bottom: 2px solid #a1a1a1;
}

.topbar .navbar .navbar-nav .nav-item .nav-link {
    color: #000;
}

.topbar .dark-logo {
    width: 120px !important;
}

/**
 * تنسيقات CSS لتنبيهات العقارات المتاحة حسب الفترات الزمنية
 * يدعم ثلاث فترات: اليوم، الأسبوع القادم، الشهر القادم
 */

/* الحاوية الرئيسية لجميع التنبيهات */
.sam-availability-alerts-container {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* الحاوية الرئيسية للتنبيه */
.sam-today-available-alert {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border: 2px solid #ffc107;
    border-radius: 4px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
    animation: slideDown 0.5s ease-out;
    transition: all 0.3s ease;
}

/* تنسيق خاص لتنبيه اليوم - أصفر (افتراضي) */
.sam-today-available-alert.sam-period-today {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    border-color: #ffc107;
}

/* تنسيق خاص لتنبيه الأسبوع - أزرق */
.sam-today-available-alert.sam-period-week {
    background: linear-gradient(135deg, #cfe2ff 0%, #b6d4fe 100%);
    border-color: #0d6efd;
}

.sam-today-available-alert.sam-period-week .sam-alert-title {
    color: #084298;
}

.sam-today-available-alert.sam-period-week .sam-ref-badge {
    border-color: #0d6efd;
    color: #084298;
}

.sam-today-available-alert.sam-period-week .sam-ref-badge:hover {
    background: #0d6efd;
    color: #fff;
}

/* تنسيق خاص لتنبيه الشهر - أخضر */
.sam-today-available-alert.sam-period-month {
    background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
    border-color: #198754;
}

.sam-today-available-alert.sam-period-month .sam-alert-title {
    color: #0f5132;
}

.sam-today-available-alert.sam-period-month .sam-ref-badge {
    border-color: #198754;
    color: #0f5132;
}

.sam-today-available-alert.sam-period-month .sam-ref-badge:hover {
    background: #198754;
    color: #fff;
}

/* رأس التنبيه */
.sam-alert-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* أيقونة التنبيه */
.sam-alert-icon {
    font-size: 22px;
    animation: pulse 2s infinite;
    flex-shrink: 0;
}

/* عنوان التنبيه */
.sam-alert-title {
    font-size: 15px;
    font-weight: bold;
    color: #856404;
    white-space: nowrap;
    flex-shrink: 0;
}

/* حاوية الأرقام المرجعية */
.sam-alert-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

/* شارات الأرقام المرجعية - النمط الأساسي */
.sam-ref-badge {
    display: inline-block;
    background: #fff;
    color: #856404;
    padding: 6px 12px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 13px;
    border: 1px solid #ffc107;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

/* تنسيق الأزرار (للصفحات التي تستخدم AJAX) */
.sam-ref-badge.sam-show-data {
    background: #fff;
    outline: none;
    font-family: inherit;
}

.sam-ref-badge.sam-show-data:focus {
    outline: 2px solid #ffc107;
    outline-offset: 2px;
}

/* تنسيق الروابط (للصفحات العادية) */
.sam-ref-badge.sam-ref-link {
    display: inline-block;
}

.sam-ref-badge.sam-ref-link:visited {
    color: #856404;
}

/* حالة التمرير (Hover) */
.sam-ref-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
    background: #ffc107;
    color: #fff;
}

/* حالة النقر (Active) */
.sam-ref-badge:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(255, 193, 7, 0.2);
}

/* الرسوم المتحركة */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* التجاوب مع الأجهزة المحمولة */
@media (max-width: 768px) {
    .sam-availability-alerts-container {
        gap: 10px;
    }

    .sam-today-available-alert {
        padding: 10px;
    }

    .sam-alert-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .sam-alert-title {
        font-size: 14px;
        white-space: normal;
    }

    .sam-ref-badge {
        padding: 5px 10px;
        font-size: 12px;
    }

    .sam-alert-icon {
        font-size: 20px;
    }

    .sam-alert-refs {
        width: 100%;
    }
}

/* تحسين الطباعة */
@media print {
    .sam-availability-alerts-container {
        page-break-inside: avoid;
    }

    .sam-today-available-alert {
        box-shadow: none;
        border: 2px solid #000;
        page-break-inside: avoid;
        margin-bottom: 10px;
    }

    .sam-ref-badge {
        border: 1px solid #000;
        box-shadow: none;
    }
}

/* تأثير عند التمرير على التنبيه بالكامل */
.sam-today-available-alert:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* تنسيقات إضافية للوضوح */
.sam-period-today .sam-alert-icon {
    filter: drop-shadow(0 0 3px rgba(255, 193, 7, 0.5));
}

.sam-period-week .sam-alert-icon {
    filter: drop-shadow(0 0 3px rgba(13, 110, 253, 0.5));
}

.sam-period-month .sam-alert-icon {
    filter: drop-shadow(0 0 3px rgba(25, 135, 84, 0.5));
}

/* حالة التحميل */
.sam-ref-badge.loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.sam-ref-badge.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid #ffc107;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* تحسين إمكانية الوصول */
.sam-ref-badge:focus-visible {
    outline: 3px solid #ffc107;
    outline-offset: 3px;
}

/* تأثير الظل المتحرك */
.sam-today-available-alert {
    position: relative;
    overflow: hidden;
}

.sam-today-available-alert::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            45deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent
    );
    transform: rotate(45deg);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

/* Tabs Container */
.sam-availability-tabs {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 4px;
    overflow: hidden;
}

/* Tabs Header */
.sam-tabs-header {
    display: flex;
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.sam-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 4px 16px;
    background: transparent;
    border: none;
    border-right: 1px solid #dee2e6;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 12px;
    font-weight: 500;
}

.sam-tab-btn:last-child {
    border-right: none;
}

.sam-tab-btn:hover {
    background: #e9ecef;
}

.sam-tab-btn.active {
    background: #fff;
    border-bottom: 3px solid;
    position: relative;
    bottom: -2px;
}

.sam-tab-btn.active[data-tab="today"] {
    border-bottom-color: #ffc107;
}

.sam-tab-btn.active[data-tab="week"] {
    border-bottom-color: #0d6efd;
}

.sam-tab-btn.active[data-tab="month"] {
    border-bottom-color: #198754;
}

.tab-icon {
    font-size: 18px;
}

.tab-label {
    color: #495057;
    font-weight: 600;
}

.sam-tab-btn.active .tab-label {
    color: #212529;
}

.tab-count {
    background: #6c757d;
    color: #fff;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.sam-tab-btn.active[data-tab="today"] .tab-count {
    background: #ffc107;
    color: #333;
}

.sam-tab-btn.active[data-tab="week"] .tab-count {
    background: #0d6efd;
}

.sam-tab-btn.active[data-tab="month"] .tab-count {
    background: #198754;
}

/* Tabs Content */
.sam-tabs-content {
    padding: 4px;
}

.sam-tab-panel {
    display: none;
}

.sam-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Refs Grid */
.sam-refs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sam-ref-badge {
    display: inline-block;
    background: #fff;
    color: #495057;
    padding: 6px 12px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #ced4da;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

.sam-ref-badge.sam-show-data {
    background: #fff;
    outline: none;
    font-family: inherit;
}

.sam-ref-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
    background: #0d6efd;
    color: #fff;
    border-color: #0d6efd;
}

.sam-ref-badge:active {
    transform: translateY(0);
}

/* Mobile */
@media (max-width: 768px) {
    .sam-tabs-header {
        flex-direction: column;
    }

    .sam-tab-btn {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .sam-tab-btn.active {
        border-bottom: none;
        border-left: 3px solid;
        bottom: 0;
    }

    .tab-label {
        font-size: 13px;
    }

    .sam-refs-grid {
        gap: 6px;
    }

    .sam-ref-badge {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* Print */
@media print {
    .sam-availability-tabs {
        border: 1px solid #000;
        page-break-inside: avoid;
    }

    .sam-tabs-header {
        display: none;
    }

    .sam-tab-panel {
        display: block !important;
    }
}

/* Icon Button */
.sam-availability-icon {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
}

.sam-icon-btn {
    position: relative;
    width: 56px;
    height: 56px;
    background: #1b8bc9;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(27, 139, 201, 0.4);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sam-icon-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 5px 18px rgba(27, 139, 201, 0.6);
    background: #1575ad;
}

.sam-icon-btn .icon {
    font-size: 26px;
}

.sam-icon-btn .badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: white;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 7px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Popup Overlay */
.sam-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

/* Popup Content */
.sam-popup-content {
    background: white;
    border-radius: 10px;
    width: 100%;
    max-width: 750px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.3s ease-out;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-15px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Popup Header */
.sam-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: #1b8bc9;
    color: white;
}

.sam-popup-header h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
}

.sam-popup-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    line-height: 1;
}

.sam-popup-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

/* Filters Section */
.sam-popup-filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 14px 18px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    min-width: 80px;
}

.sam-filter-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 13px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
}

.sam-filter-select:focus {
    outline: none;
    border-color: #1b8bc9;
    box-shadow: 0 0 0 2px rgba(27, 139, 201, 0.1);
}

.sam-filter-reset {
    grid-column: 1 / -1;
    padding: 8px 16px;
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.sam-filter-reset:hover {
    background: #bb2d3b;
    transform: translateY(-1px);
}

/* Popup Body */
.sam-popup-body {
    padding: 18px;
    max-height: calc(85vh - 56px);
    overflow-y: auto;
}

.sam-popup-body::-webkit-scrollbar {
    width: 8px;
}

.sam-popup-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.sam-popup-body::-webkit-scrollbar-thumb {
    background: #1b8bc9;
    border-radius: 4px;
}

.sam-popup-body::-webkit-scrollbar-thumb:hover {
    background: #1575ad;
}

/* Period Section */
.sam-period-section {
    margin-bottom: 18px;
}

.sam-period-section:last-child {
    margin-bottom: 0;
}

.period-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-radius: 6px;
    margin-bottom: 12px;
    border-left: 3px solid #1b8bc9;
}

.period-icon {
    font-size: 20px;
}

.period-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    flex: 1;
}

.period-count {
    background: #1b8bc9;
    color: white;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

/* Property Cards */
.period-properties {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.property-card {
    position: relative;
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    transition: all 0.3s;
    overflow: hidden;
}

.property-card:hover {
    border-color: #1b8bc9;
    box-shadow: 0 3px 10px rgba(27, 139, 201, 0.2);
    transform: translateY(-2px);
}

.property-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 4px 4px 0 0;
}

.property-ref {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: all 0.3s;
    width: 100%;
    font-family: inherit;
    margin-top: 2px;
}

.property-ref:hover {
    background: #1b8bc9;
    color: white;
}

.property-date {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #e9ecef;
    font-size: 11px;
    color: #6c757d;
    font-weight: 500;
}

.property-employee {
    margin-top: 4px;
    font-size: 11px;
    color: #495057;
    font-weight: 600;
    background: #f8f9fa;
    padding: 4px 6px;
    border-radius: 3px;
}

.property-status-select {
    width: 100%;
    margin-top: 6px;
    padding: 5px 8px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 11px;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 600;
}

.property-status-select:focus {
    outline: none;
    border-color: #1b8bc9;
    box-shadow: 0 0 0 2px rgba(27, 139, 201, 0.1);
}

.property-status-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Status Messages */
.sam-status-message {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.sam-status-message.show {
    opacity: 1;
    transform: translateX(0);
}

.sam-status-message.sam-status-success {
    background: #28a745;
    color: white;
}

.sam-status-message.sam-status-error {
    background: #dc3545;
    color: white;
}

/* Mobile */
@media (max-width: 768px) {
    .sam-availability-icon {
        right: 12px;
        bottom: 70px;
        top: auto;
        transform: none;
    }

    .sam-icon-btn {
        width: 52px;
        height: 52px;
    }

    .sam-icon-btn .icon {
        font-size: 24px;
    }

    .sam-icon-btn .badge {
        top: -3px;
        right: -3px;
        font-size: 10px;
        padding: 2px 6px;
        min-width: 20px;
    }

    .sam-popup-overlay {
        padding: 10px;
    }

    .sam-popup-content {
        width: 100%;
        max-height: 90vh;
        border-radius: 8px;
    }

    .sam-popup-header {
        padding: 14px 16px;
    }

    .sam-popup-header h3 {
        font-size: 17px;
    }

    .sam-popup-close {
        width: 32px;
        height: 32px;
        font-size: 26px;
    }

    .sam-popup-filters {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .filter-group {
        flex-direction: column;
        align-items: stretch;
        gap: 5px;
    }

    .filter-group label {
        font-size: 12px;
        min-width: auto;
    }

    .sam-filter-select {
        width: 100%;
        font-size: 12px;
    }

    .sam-filter-reset {
        width: 100%;
        padding: 8px;
    }

    .sam-popup-body {
        padding: 14px;
        max-height: calc(90vh - 150px);
    }

    .period-header {
        padding: 8px 12px;
        margin-bottom: 10px;
    }

    .period-icon {
        font-size: 18px;
    }

    .period-title {
        font-size: 14px;
    }

    .period-count {
        padding: 2px 8px;
        font-size: 11px;
    }

    .period-properties {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 8px;
    }

    .property-card {
        padding: 8px;
    }

    .property-ref {
        font-size: 13px;
        padding: 5px;
    }

    .property-date {
        margin-top: 5px;
        padding-top: 5px;
        font-size: 10px;
    }

    .property-employee {
        font-size: 10px;
        padding: 3px 5px;
    }

    .property-status-select {
        font-size: 10px;
        padding: 4px 6px;
    }

    .sam-status-message {
        top: 10px;
        right: 10px;
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* Very Small Mobile */
@media (max-width: 480px) {
    .sam-icon-btn {
        width: 48px;
        height: 48px;
    }

    .sam-icon-btn .icon {
        font-size: 22px;
    }

    .period-properties {
        grid-template-columns: repeat(2, 1fr);
    }

    .sam-popup-header h3 {
        font-size: 16px;
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .sam-popup-content {
        max-height: 95vh;
    }

    .sam-popup-body {
        max-height: calc(95vh - 48px);
    }
}

/* Print */
@media print {
    .sam-availability-icon {
        display: none;
    }

    .sam-popup-overlay {
        display: none !important;
    }
}

/* * * * * */
/* ===== Compact AG-Grid: samAGTableArchive ===== */
.ag-theme-balham {
    --ag-row-height: 28px;
    --ag-header-height: 32px;
    --ag-font-size: 12px;
    --ag-cell-horizontal-padding: 8px;
    --ag-grid-size: 3px;
    --ag-icon-size: 14px;
    --ag-list-item-height: 24px;
}

/* صف الـ Floating Filters (الفلاتر تحت الهيدر) */
.ag-header-row.ag-header-row-filter {
    height: 24px !important;
    top: 29px !important;
}

/* إجمالي ارتفاع منطقة الهيدر */
.ag-header {
    min-height: 60px !important;
    height: 60px !important;
}

/* حجم الخط في الخلايا */
.ag-cell {
    font-size: 12px;
    line-height: 28px;
}

/* حجم الخط في الهيدر */
.ag-header-cell-text {
    font-size: 12px;
}

/* تصغير حقول الفلتر */
.ag-text-field-input {
    font-size: 14px;
    height: 20px;
    padding: 0 6px;
    font-weight: bold;
}

/* تصغير أيقونات الفلتر */
.ag-floating-filter-button {
    margin-top: 2px;
}

.ag-ltr .ag-body {
    margin-bottom: 0 !important;
}

.ag-input-wrapper:before {
    right: 14px;
    margin-right: 8px !important;
}

/* Style 3: Ultra Dark Premium Theme */
.sam-style-ultra-dark {
    --primary-color: #7c4dff;
    --bg-main: #0a0a0c;
    --bg-surface: #121214;
    --text-main: #e0e0e0;
    --text-muted: #88888b;
    --border-color: #2a2a2d;
    --glass-bg: rgba(18, 18, 20, 0.9);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-blur: blur(20px);
}

.sam-style-ultra-dark, .sam-style-ultra-dark body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: var(--sam-font-family, 'Inter', sans-serif) !important;
}

.sam-style-ultra-dark .card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--sam-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

.sam-style-ultra-dark header.topbar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.sam-style-ultra-dark .form-control,
.sam-style-ultra-dark .form-select,
.sam-style-ultra-dark .sam-input {
    background-color: #1a1a1d !important;
    border-color: #333336 !important;
    color: #fff !important;
}

.sam-style-ultra-dark .btn-primary {
    background: var(--primary-color) !important;
    border: none !important;
    box-shadow: 0 4px 15px color-mix(in srgb, var(--primary-color) 30%, transparent) !important;
}

.sam-style-ultra-dark .nav-tabs {
    background: #1a1a1d !important;
    border-radius: var(--sam-radius) !important;
}

.sam-style-ultra-dark .nav-tabs .nav-link.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

.samNoReplyButton {
    background: linear-gradient(135deg, #aaa, #444) !important;
}

.samRequestsButton,
.samAllowRequestsButton {
    background: linear-gradient(135deg, #2a3547, #2271b1) !important;
    border: none !important;
    color: #fff !important;
}

/* =========================================================
   Sam Customizer — image grid + extra style presets
   Image-grid uses --sam-thumb-size from the customizer (defaults below).
   ========================================================= */

:root {
    --sam-thumb-gap: 10px;
    --sam-thumb-radius: 8px;
}

.sam-media-files {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--sam-thumb-gap);
    align-items: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px; /* room for the scrollbar so it doesn't overlap the images */
    scrollbar-width: thin;
}

.sam-media-files::-webkit-scrollbar {
    height: 8px;
}
.sam-media-files::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}
.sam-media-files::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}
.sam-media-files::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
}

.sam-media-files .sam-file.sam-file-preview {
    width: var(--sam-thumb-size, 200px);
    height: var(--sam-thumb-size, 200px);
    flex: 0 0 var(--sam-thumb-size, 200px); /* prevent flex from shrinking the items */
    position: relative;
    overflow: hidden;
    border-radius: var(--sam-thumb-radius);
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #f7f7f7;
    display: inline-block;
    vertical-align: top;
}

.sam-media-files .sam-file.sam-file-preview > a {
    display: block;
    width: 100%;
    height: 100%;
}

.sam-media-files img.sam-image,
.sam-media-files img.sam-image.img-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}

.sam-media-files .fa-window-close.sam-del-media-file {
    position: absolute;
    top: 4px;
    inset-inline-start: 4px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 4px;
}

/* =========================================================
   Style 4: Classic — light, conservative
   ========================================================= */
.sam-style-classic {
    --primary-color: #1e3a8a;
    --primary-hover: #1e40af;
    --secondary-color: #64748b;
    --accent-color: #d97706;
    --bg-main: #fafafa;
    --bg-surface: #ffffff;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.sam-style-classic, .sam-style-classic body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: var(--sam-font-family, 'Georgia', serif) !important;
}

.sam-style-classic .card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--sam-radius) !important;
    box-shadow: var(--shadow-md) !important;
}

.sam-style-classic .btn {
    border-radius: var(--sam-radius) !important;
}

.sam-style-classic .btn-primary {
    background: var(--primary-color) !important;
    border: 1px solid var(--primary-hover) !important;
    color: #fff !important;
}

.sam-style-classic .nav-tabs .nav-link {
    color: var(--text-muted) !important;
    border-radius: 0 !important;
}

.sam-style-classic .nav-tabs .nav-link:hover,
.sam-style-classic .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

/* =========================================================
   Style 5: Minimal — flat, no gradients, light borders
   ========================================================= */
.sam-style-minimal {
    --primary-color: #111827;
    --primary-hover: #000000;
    --secondary-color: #6b7280;
    --accent-color: #10b981;
    --bg-main: #ffffff;
    --bg-surface: #ffffff;
    --text-main: #111827;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
}

.sam-style-minimal, .sam-style-minimal body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: var(--sam-font-family, 'Inter', sans-serif) !important;
}

.sam-style-minimal .card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--sam-radius) !important;
    box-shadow: none !important;
}

.sam-style-minimal .btn {
    border-radius: var(--sam-radius) !important;
    box-shadow: none !important;
}

.sam-style-minimal .btn-primary {
    background: var(--primary-color) !important;
    border: none !important;
    color: #fff !important;
}

.sam-style-minimal .btn-primary:hover {
    background: var(--primary-hover) !important;
}

.sam-style-minimal .nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
}

.sam-style-minimal .nav-tabs .nav-link {
    border: none !important;
    color: var(--text-muted) !important;
}

.sam-style-minimal .nav-tabs .nav-link.active {
    color: var(--primary-color) !important;
    border-bottom: 2px solid var(--primary-color) !important;
    background: transparent !important;
}

/* =========================================================
   Style 6: Corporate — professional blue/gray
   ========================================================= */
.sam-style-corporate {
    --primary-color: #0369a1;
    --primary-hover: #075985;
    --secondary-color: #0891b2;
    --accent-color: #ea580c;
    --bg-main: #f8fafc;
    --bg-surface: #ffffff;
    --text-main: #0f172a;
    --text-muted: #475569;
    --border-color: #cbd5e1;
    --shadow-md: 0 2px 4px rgba(15, 23, 42, 0.06);
}

.sam-style-corporate, .sam-style-corporate body {
    background-color: var(--bg-main) !important;
    color: var(--text-main) !important;
    font-family: var(--sam-font-family, 'Roboto', sans-serif) !important;
}

.sam-style-corporate .card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--sam-radius) !important;
    box-shadow: var(--shadow-md) !important;
}

.sam-style-corporate .btn {
    border-radius: var(--sam-radius) !important;
}

.sam-style-corporate .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    border: none !important;
    color: #fff !important;
}

.sam-style-corporate header.topbar {
    background: var(--bg-surface) !important;
    border-bottom: 2px solid var(--primary-color) !important;
}

.sam-style-corporate .nav-tabs .nav-link {
    color: var(--text-muted) !important;
}

.sam-style-corporate .nav-tabs .nav-link.active {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-radius: var(--sam-radius) var(--sam-radius) 0 0 !important;
}

/* =========================================================
   Mobile responsive improvements (global)
   Targets common admin-page elements that don't fit on phones.
   ========================================================= */

/* Tablet & small laptop */
@media (max-width: 991.98px) {
    .body-wrapper {
        padding-inline: 0 !important;
    }

    .body-wrapper .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .card {
        padding: calc(var(--sam-card-padding, 16px) * 0.7);
    }

    .card-body {
        padding: 0.85rem !important;
    }

    /* Modals: take more screen on tablet */
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg {
        max-width: 95% !important;
        margin: 0.75rem auto !important;
    }
}

/* Phone */
@media (max-width: 767.98px) {

    /* Inputs at >=16px to prevent iOS auto-zoom on focus */
    .form-control,
    .form-select,
    .sam-input,
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="search"],
    input[type="date"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Reduce wrapper paddings */
    .body-wrapper,
    .body-wrapper .py-4,
    .body-wrapper .px-2 {
        padding-inline: 8px !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }

    .container,
    .container-fluid {
        padding-inline: 8px !important;
    }

    /* Cards / surfaces */
    .card {
        padding: 10px !important;
        margin-bottom: 0.75rem !important;
        border-radius: calc(var(--sam-radius, 8px) * 0.85) !important;
    }
    .card-body { padding: 4px !important; }
    .card-header,
    .card-footer { padding: 8px 10px !important; }

    /* Headings */
    h1, .h1 { font-size: 1.4rem !important; }
    h2, .h2 { font-size: 1.2rem !important; }
    h3, .h3 { font-size: 1.05rem !important; }
    h4, .h4 { font-size: 1rem !important; }
    .modal-title { font-size: 1.05rem !important; }

    /* Buttons: shrink padding & wrap groups */
    .btn {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 14px !important;
    }
    .btn-group,
    .btn-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .btn-group > .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Tables: ensure horizontal scroll */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table.table,
    table.dataTable,
    .sam-datatables {
        font-size: 13px !important;
    }
    .table th,
    .table td {
        padding: 8px 6px !important;
        white-space: nowrap;
    }

    /* DataTables toolbar (filter, length, info, paginate) — stack vertically */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: start !important;
        width: 100% !important;
        margin-bottom: 6px !important;
    }
    .dataTables_filter input,
    .dataTables_length select {
        width: 100% !important;
        max-width: 100%;
    }

    /* ag-Grid */
    .ag-theme-balham,
    .ag-theme-alpine {
        font-size: 12px !important;
    }
    .ag-theme-balham .ag-header-cell,
    .ag-theme-alpine .ag-header-cell,
    .ag-theme-balham .ag-cell,
    .ag-theme-alpine .ag-cell {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* Modals: full-width on phone */
    .modal-dialog,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-md,
    .modal-dialog.modal-sm {
        max-width: 100% !important;
        margin: 0 !important;
        min-height: 100vh;
    }
    .modal-content {
        border-radius: 0 !important;
        min-height: 100vh;
    }
    .modal-header,
    .modal-footer {
        padding: 10px !important;
    }
    .modal-body {
        padding: 12px !important;
    }
    .modal-footer {
        flex-wrap: wrap;
        gap: 6px;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }

    /* Forms: stack rows on phones */
    .row.g-3 > [class*="col-"],
    .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    .sam-form-group,
    .form-group {
        margin-bottom: 0.6rem !important;
    }

    /* Nav tabs: horizontal scroll instead of wrapping awkwardly */
    .nav-tabs,
    .nav-pills {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        height: 4px;
    }
    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex: 0 0 auto;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    /* Topbar/header: shrink padding & logo */
    header.topbar {
        padding: 6px 8px !important;
    }
    .topbar .navbar {
        padding: 0 !important;
    }
    .topbar .dark-logo,
    .topbar .light-logo {
        max-height: 32px;
    }

    /* Dropdown menus: full width on the right side, easier tap targets */
    .dropdown-menu {
        max-width: calc(100vw - 16px);
    }
    .dropdown-item {
        padding: 10px 12px !important;
    }

    /* Long text inputs / textareas */
    textarea {
        min-height: 90px;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
    }
    .page-link {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }

    /* Tabs/badges row */
    .badge {
        font-size: 11px !important;
    }
}

/* Very small phones */
@media (max-width: 380px) {
    .btn {
        font-size: 13px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    h1, .h1 { font-size: 1.25rem !important; }
}

/* =========================================================
   Customizer-driven font family — applies across all UI elements
   so changing the font in the Customizer is visible everywhere
   (overriding preset classes that hard-code 'Inter' etc.).
   Specificity body[class*="sam-style-"] (0,1,1) beats
   .sam-style-modern (0,1,0) so it wins even if both have !important.
   ========================================================= */
body[class*="sam-style-"],
body[class*="sam-style-"] .btn,
body[class*="sam-style-"] .form-control,
body[class*="sam-style-"] .form-select,
body[class*="sam-style-"] .sam-input,
body[class*="sam-style-"] input,
body[class*="sam-style-"] textarea,
body[class*="sam-style-"] select,
body[class*="sam-style-"] .nav-link,
body[class*="sam-style-"] .dropdown-item,
body[class*="sam-style-"] .modal-title,
body[class*="sam-style-"] .card-title {
    font-family: var(--sam-font-family, 'Inter', system-ui, -apple-system, sans-serif) !important;
}

body[class*="sam-style-"] .ag-theme-balham,
body[class*="sam-style-"] .ag-theme-alpine {
    --ag-font-family: var(--sam-font-family, 'Inter', sans-serif) !important;
}

.sam-style-modern .ag-theme-balham {
    border: 0 !important;
}

.ag-theme-buttonStyle-1.ag-theme-columnDropStyle-2.ag-theme-batchEditStyle-3.ag-theme-checkboxStyle-4.ag-theme-iconSet-5.ag-theme-tabStyle-6.ag-theme-inputStyle-7.ag-theme-columnDropStyle-2.ag-theme-params-1 {
    border: none !important;
    border-style: none !important;
}

.ag-header-cell {
    border: 0;
}

/* Fullscreen toggle button */
.sam-fullscreen-toggle {
    cursor: pointer;
}

.sam-fullscreen-toggle .sam-fs-compress {
    display: none;
}

body.sam-is-fullscreen .sam-fullscreen-toggle .sam-fs-expand {
    display: none;
}

body.sam-is-fullscreen .sam-fullscreen-toggle .sam-fs-compress {
    display: inline-block;
}