/* =========================================================================
   Patrilog — Design refresh (ADDITIVE)
   -------------------------------------------------------------------------
   Drop-in stylesheet that layers on top of your existing inc/css.php.
   It does NOT change the page layout — it only refines the look of the
   existing components, using your current accent colors:

       --pat-green-deep : #185933   (primary buttons / borders)
       --pat-green-olive: #628a1a   (titles / highlights)
       --pat-green-libre: #1b620c   (free lot)
       --pat-orange     : #e5702e   (réservé)
       --pat-yellow     : #f0e124   (en cours)
       --pat-red        : #ff3333   (vendu)

   Load it AFTER inc/css.php so these rules win. See install note at bottom.
   ========================================================================= */

:root {
    --pat-green-deep:  #185933;
    --pat-green-olive: #628a1a;
    --pat-green-libre: #1b620c;
    --pat-orange:      #e5702e;
    --pat-yellow:      #d6c815;
    --pat-red:         #ff3333;
    --pat-ink:         #21303a;
    --pat-muted:       #7b8a93;
    --pat-line:        #e7ebec;
    --pat-surface:     #ffffff;
    --pat-shadow:      0 6px 22px rgba(20, 45, 30, 0.10);
    --pat-shadow-sm:   0 2px 8px rgba(20, 45, 30, 0.08);
    --pat-radius:      12px;
    --pat-radius-sm:   9px;
    --pat-ease:        cubic-bezier(.2, .7, .3, 1);
}

/* ----------------------------------------------------------------------- */
/*  Buttons                                                                 */
/* ----------------------------------------------------------------------- */
.btn {
    border-radius: var(--pat-radius-sm) !important;
    font-weight: 500 !important;
    letter-spacing: .1px;
    border: 1px solid transparent !important;
    transition: transform .12s var(--pat-ease),
                box-shadow .18s var(--pat-ease),
                background-color .18s var(--pat-ease),
                filter .18s var(--pat-ease) !important;
    will-change: transform;
}
.btn:hover    { transform: translateY(-1px); }
.btn:active   { transform: translateY(0); filter: brightness(.97); }
.btn:focus,
.btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(24, 89, 51, 0.20) !important;
}

/* loading state: keep the accent color, just dim + show it's busy */
.btn.is-loading,
.btn:disabled {
    opacity: .72;
    cursor: not-allowed !important;
    transform: none !important;
}
.btn.is-loading { pointer-events: none; }

.btn-success {
    background-color: var(--pat-green-deep) !important;
    box-shadow: var(--pat-shadow-sm);
}
.btn-success:hover {
    background-color: #15693a !important;
    box-shadow: var(--pat-shadow);
}

.btn-danger {
    background-color: #d8442f !important;
    box-shadow: var(--pat-shadow-sm);
}
.btn-danger:hover { background-color: #c23a28 !important; }

.btn-dark {
    background-color: var(--pat-ink) !important;
    box-shadow: var(--pat-shadow-sm);
}
.btn-dark:hover { background-color: #18242c !important; }

.btn-light {
    background-color: #f3f5f4 !important;
    color: var(--pat-ink) !important;
    border-color: var(--pat-line) !important;
}
.btn-light:hover { background-color: #e9edeb !important; }

/* ----------------------------------------------------------------------- */
/*  Floating sidebars (lot details + search results)                        */
/* ----------------------------------------------------------------------- */
.lot_sidebar,
.searchResults_sidebar {
    border-radius: var(--pat-radius) !important;
    box-shadow: var(--pat-shadow) !important;
    border: 1px solid var(--pat-line) !important;
    backdrop-filter: saturate(1.05);
}

/* very subtle background tint based on the lot state */
.lot_sidebar.etat-libre                { background-color: #eef6e9 !important; }
.lot_sidebar.etat-en_cours_reservation { background-color: #fbf9e6 !important; }
.lot_sidebar.etat-reserve              { background-color: #fbede4 !important; }
.lot_sidebar.etat-vendu                { background-color: #fbe9e9 !important; }

.lot-span-num {
    font-weight: 600;
    color: var(--pat-green-deep);
    font-size: 18px;
}
.lot-span-property { color: var(--pat-muted); }
.lot-span-value    { color: var(--pat-ink); font-weight: 600; }
.lot-span-unite    { color: var(--pat-muted); }

/* the small icons in the lot detail rows */
.lot-span-property i { color: var(--pat-green-olive); }

/* ----------------------------------------------------------------------- */
/*  Lot state badge                                                         */
/* ----------------------------------------------------------------------- */
.lot_etat_badg {
    border-radius: 6px !important;
    box-shadow: 0 1px 3px rgba(20, 45, 30, 0.06) !important;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
    padding: 3px 9px !important;
    text-align: center !important;
    height: auto !important;
    min-height: 0 !important;
    white-space: nowrap !important;
    display: inline-block !important;
    width: auto !important;
    left: 16px !important;
    right: auto !important;
}
.lot_etat_badg span { display: inline; white-space: nowrap; }
.lot_etat_badg.libre               { background: var(--pat-green-libre) !important; color:#fff !important; }
.lot_etat_badg.en_cours_reservation{ background: var(--pat-yellow)      !important; color:#5b5300 !important; }
.lot_etat_badg.reserve             { background: var(--pat-orange)      !important; color:#fff !important; }
.lot_etat_badg.vendu               { background: var(--pat-red)         !important; color:#fff !important; }

/* ----------------------------------------------------------------------- */
/*  Search result rows -> cards                                             */
/* ----------------------------------------------------------------------- */
.searchResultRow {
    border: 1px solid var(--pat-line) !important;
    border-left: 4px solid var(--pat-muted) !important;
    border-radius: var(--pat-radius-sm) !important;
    margin: 8px 10px !important;
    padding: 8px 10px !important;
    background: var(--pat-surface);
    box-shadow: var(--pat-shadow-sm);
    transition: transform .12s var(--pat-ease), box-shadow .18s var(--pat-ease);
    cursor: pointer;
    list-style: none;
}
.searchResultRow:hover {
    transform: translateY(-1px);
    box-shadow: var(--pat-shadow);
}
.searchResultRow.libre                { border-left-color: var(--pat-green-libre) !important; }
.searchResultRow.en_cours_reservation { border-left-color: var(--pat-yellow)      !important; }
.searchResultRow.reserve              { border-left-color: var(--pat-orange)      !important; }
.searchResultRow.vendu                { border-left-color: var(--pat-red)         !important; }

/* ----------------------------------------------------------------------- */
/*  Filters bar + titles                                                    */
/* ----------------------------------------------------------------------- */
.filters {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.filters .filters-body > .row { align-items: flex-end !important; }

/* the title tab (narrower, sits on top) */
.filters .filters-tab {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 11px !important;
    background: #ffffff !important;
    border: 1px solid #13541c !important;
    border-bottom: none !important;
    border-radius: var(--pat-radius) var(--pat-radius) 0 0 !important;
    box-shadow: 0 -3px 14px rgba(20, 45, 30, 0.06) !important;
    padding: 10px 26px !important;
    position: relative;
    margin-bottom: -1px !important;
    z-index: 2;
}
.filters .filters-tab .filter-title-icon {
    width: 30px; height: 30px; flex: 0 0 30px;
    border-radius: 9px;
    background: #eaf3e3;
    color: var(--pat-green-deep);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.filters .filters-tab .filter-title-text {
    display: flex; flex-direction: column; line-height: 1.15; text-align: left;
}
.filters .filters-tab .filter-span {
    color: var(--pat-green-deep) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 1.2;
}
.filters .filters-tab .filter-subtitle {
    font-size: 11px;
    color: var(--pat-muted);
    letter-spacing: .2px;
}

/* the body card (wider, holds the inputs) */
.filters .filters-body {
    width: 100%;
    background: #ffffff !important;
    border: 1px solid #13541c !important;
    border-radius: var(--pat-radius) !important;
    box-shadow: var(--pat-shadow) !important;
    padding: 16px 18px 16px !important;
    position: relative;
    z-index: 1;
}
/* small uppercase field labels */
.filters label[for="surfaceSlider"],
.filters label.mr-2 {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--pat-muted) !important;
    margin-bottom: 6px !important;
    display: block;
}
.filters #surfaceSliderValue {
    color: var(--pat-muted) !important;
    font-size: 12px !important;
}
/* select2 boxes -> rounded, clean */
.filters .select2-container .select2-selection--single {
    height: 40px !important;
    border: 1px solid var(--pat-line) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    transition: border-color .15s var(--pat-ease), box-shadow .15s var(--pat-ease);
}
.filters .select2-container .select2-selection--single .select2-selection__rendered {
    color: var(--pat-ink) !important;
    font-size: 14px;
    line-height: 38px !important;
    padding-left: 12px !important;
}
.filters .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px !important;
}
.filters .select2-container--open .select2-selection--single,
.filters .select2-selection--single:hover {
    border-color: var(--pat-green-deep) !important;
    box-shadow: 0 0 0 3px rgba(24, 89, 51, 0.12) !important;
}
.select2-dropdown {
    border-radius: 10px !important;
    border: 1px solid var(--pat-line) !important;
    box-shadow: var(--pat-shadow) !important;
    overflow: hidden;
}
.select2-results__option--highlighted[aria-selected] {
    background: var(--pat-green-deep) !important;
}
/* bootstrap-slider in brand green */
.filters .slider-selection {
    background: var(--pat-green-deep) !important;
}
.filters .slider-track {
    background: #e7ebec !important;
    border-radius: 99px !important;
    box-shadow: none !important;
    height: 6px !important;
}
.filters .slider-handle {
    background: #ffffff !important;
    border: 3px solid var(--pat-green-deep) !important;
    box-shadow: 0 1px 4px rgba(20, 45, 30, 0.25) !important;
    width: 17px !important;
    height: 17px !important;
    top: -1px;
}
.filters .tooltip-inner {
    background: var(--pat-green-deep) !important;
    border-radius: 6px !important;
    font-size: 11px;
}
.filters .tooltip.top .tooltip-arrow { border-top-color: var(--pat-green-deep) !important; }
/* search button: brand green instead of red, modern */
#filters_searchBtn {
    background-color: var(--pat-green-deep) !important;
    border-radius: 10px !important;
    height: 40px;
    box-shadow: 0 2px 10px rgba(24, 89, 51, 0.22) !important;
    margin-top: 0 !important;
}
#filters_searchBtn:hover { background-color: #15693a !important; }

.projet-description-container-title {
    color: var(--pat-green-deep) !important;
    font-weight: 600 !important;
}
.projet-description-container {
    border-radius: var(--pat-radius) !important;
    box-shadow: var(--pat-shadow) !important;
    border: 1px solid var(--pat-line) !important;
}

/* ----------------------------------------------------------------------- */
/*  Top-floating action buttons (Réservations / Blacklist / Audit)          */
/* ----------------------------------------------------------------------- */
#showDemandesBtn,
#showBlacklistBtn,
#showAuditLogBtn,
#showResCountsBtn {
    border-radius: 999px !important;
    box-shadow: var(--pat-shadow) !important;
    background-color: #ffffff !important;
    border: 1px solid var(--pat-line) !important;
    font-weight: 600 !important;
    width: 190px !important;
    text-align: left !important;
}
/* Réservations -> green */
#showDemandesBtn { color: var(--pat-green-deep) !important; }
#showDemandesBtn:hover { background-color: #f4f8f5 !important; }
/* Blacklist -> red */
#showBlacklistBtn { color: #d8442f !important; }
#showBlacklistBtn:hover { background-color: #fdf4f2 !important; }
/* Journal d'audit -> blue */
#showAuditLogBtn { color: #2563a8 !important; }
#showAuditLogBtn:hover { background-color: #f1f6fc !important; }
/* Compteurs -> teal */
#showResCountsBtn { color: #0f8a8a !important; }
#showResCountsBtn:hover { background-color: #f0f9f9 !important; }

/* ----------------------------------------------------------------------- */
/*  Pills: phone & profile chips                                            */
/* ----------------------------------------------------------------------- */
.phone-btn,
.profile-btn {
    border-radius: 999px !important;
    box-shadow: var(--pat-shadow) !important;
}

/* redesigned profile chip: avatar + name/role + caret */
.bg .profile-btn,
.profile-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 5px 16px 5px 5px !important;
    height: auto !important;
    min-height: 0 !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
    max-width: calc(100vw - 32px) !important;
    white-space: nowrap !important;
    cursor: pointer;
}
.profile-btn .profile-meta { min-width: 0; overflow: hidden; }
.profile-btn .profile-avatar {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--pat-orange, #e5702e);
    font-weight: 600;
    font-size: 12.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.profile-btn .profile-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}
.profile-btn .profile-name {
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-btn .profile-role {
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.profile-btn .profile-caret {
    color: rgba(255, 255, 255, 0.85);
    font-size: 11px;
    margin-left: 2px;
    transition: transform .2s var(--pat-ease);
}
.profile-btn-dropdown.active ~ .profile-btn .profile-caret,
.profile-btn:hover .profile-caret { transform: translateY(1px); }

.profile-btn-dropdown {
    border-radius: var(--pat-radius-sm) !important;
    box-shadow: var(--pat-shadow) !important;
    border: 1px solid var(--pat-line) !important;
    overflow: hidden;
}
.profile-btn-dropdown a { color: var(--pat-ink); }
.profile-btn-dropdown li {
    border-radius: 6px;
    transition: background .15s var(--pat-ease);
    list-style: none;
}
.profile-btn-dropdown li:hover { background: #f1f5f2; }

/* ----------------------------------------------------------------------- */
/*  Forms / inputs                                                          */
/* ----------------------------------------------------------------------- */
.form-control,
.input-group-text,
.dropify-wrapper {
    border-radius: var(--pat-radius-sm) !important;
    border-color: var(--pat-line) !important;
    transition: border-color .15s var(--pat-ease), box-shadow .15s var(--pat-ease);
}
.form-control:focus {
    border-color: var(--pat-green-deep) !important;
    box-shadow: 0 0 0 3px rgba(24, 89, 51, 0.15) !important;
}
.form-label { font-weight: 600; color: var(--pat-ink); font-size: 13px; }
.input-group-text {
    background: #f3f5f4 !important;
    color: var(--pat-ink) !important;
    font-weight: 500;
}
/* right-side unit appends (Dhs, %, Heures, mois): no fill, grey text */
.modal .input-group .input-group-append .input-group-text,
.input-group-append span.input-group-text {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: var(--pat-muted) !important;
    font-weight: 500 !important;
    padding-left: 8px !important;
}

/* ----------------------------------------------------------------------- */
/*  Modals                                                                  */
/* ----------------------------------------------------------------------- */
.modal-content {
    border: none !important;
    border-radius: var(--pat-radius) !important;
    box-shadow: 0 18px 50px rgba(20, 45, 30, 0.22) !important;
    overflow: hidden;
}
.modal-header {
    background: var(--pat-green-deep);
    border-bottom: none !important;
    padding: 8px 16px !important;
}
.modal-header .modal-title { color: #fff !important; font-weight: 600; font-size: 15px; }
.modal-header .close {
    padding: 4px 10px !important;
    margin: -4px -8px -4px auto !important;
}
.modal-header .close,
.modal-header .close span { color: #ffffff !important; opacity: .85; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }
.modal-body { padding: 18px !important; }

/* nav tabs inside the réservations modal */
.nav-tabs .nav-link.active {
    color: var(--pat-green-deep) !important;
    border-color: transparent transparent var(--pat-green-deep) !important;
    border-bottom-width: 2px !important;
    font-weight: 600;
}
.nav-tabs .nav-link { color: var(--pat-muted); }

/* ----------------------------------------------------------------------- */
/*  Captcha + verification niceties                                         */
/* ----------------------------------------------------------------------- */
#contactModal_captcha_img { box-shadow: var(--pat-shadow-sm); }
#contactModal_captcha_reload { transition: transform .3s var(--pat-ease); }
#contactModal_captcha_reload:hover { transform: rotate(90deg); }

/* ----------------------------------------------------------------------- */
/*  DataTables polish                                                       */
/* ----------------------------------------------------------------------- */
table.dataTable thead th {
    color: var(--pat-ink);
    border-bottom: 2px solid var(--pat-line) !important;
    font-weight: 600;
}
table.dataTable tbody tr:hover { background: #f6f9f7 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--pat-green-deep) !important;
    border-radius: 6px !important;
    border: none !important;
    color: #fff !important;
}

/* ----------------------------------------------------------------------- */
/*  intl-tel-input: match input styling                                     */
/* ----------------------------------------------------------------------- */
.iti { width: 100%; }
.iti__dropdown-content { z-index: 2000; border-radius: var(--pat-radius-sm); box-shadow: var(--pat-shadow); }
.iti__search-input { border-radius: var(--pat-radius-sm); }

/* ----------------------------------------------------------------------- */
/*  Preloader spinner tint                                                  */
/* ----------------------------------------------------------------------- */
.loader { border-top-color: var(--pat-green-deep) !important; }

/* ----------------------------------------------------------------------- */
/*  Mobile: hide the desktop filters shape (tab + body) on small screens    */
/*  (the .filters-mob "Rechercher" button is used instead)                  */
/* ----------------------------------------------------------------------- */
@media screen and (max-width: 800px) {
    .filters {
        display: none !important;
    }
}