/*
 * app.css — Unified shared styles (all portals)
 *
 * Contents:
 *  1. Brand variables (--bs-primary)
 *  2. Bootstrap component tweaks (card, dropdown, alert)
 *  3. Button overrides (primary, outline, xs)
 *  4. Utility classes (form-switch, avatar)
 *  5. Agent portal overrides (sidebar, breadcrumb, page-content)
 *  6. Shared components (.card-scroll, .js-row-link, .dashboard-card-link)
 *
 * Loaded by header.php, tHeader.php, cHeader.php.
 */

/* ── 1. Brand variables ──────────────────────────────────────────────────── */

:root {
    --bs-primary:          #65a845;
    --bs-primary-rgb:      101, 168, 69;
    --bs-primary-hover:    #4e8c31;
    --bs-primary-active:   #3d6e26;
    --bs-primary-light:    #9ec043;
    /* Bootstrap subtle-scale overrides (bg-primary-subtle, text-primary-emphasis, etc.) */
    --bs-primary-bg-subtle:     #e2f0db;
    --bs-primary-border-subtle: #b6d9a6;
    --bs-primary-text-emphasis: #2c471f;
    --bs-link-color:       var(--bs-primary);
    --bs-link-hover-color: var(--bs-primary-hover);
    /* DataTables selected-row colour (RGB tuple, no rgb() wrapper) */
    --dt-row-selected:     var(--bs-primary-rgb);
}

/* ── 2. Bootstrap component tweaks ──────────────────────────────────────── */

.card {
    border: 0;
    margin-bottom: 1.5rem;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.card-header {
    background-color: transparent;
    padding: 0.7rem 1rem;
}

.dropdown-menu {
    border: 0;
    border-radius: 10px;
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
}

.alert {
    box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 8%);
}

/* Modal border — matches golan pattern, uses brand primary instead of hardcoded blue */
.modal-content {
    border: 2px solid var(--bs-primary) !important;
}
/* Modal header cursor — indicates the header is the drag handle */
.modal-header {
    cursor: move;
}

/* Pagination — override hardcoded Bootstrap blue */
.pagination {
    --bs-pagination-active-bg:           var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
    --bs-pagination-focus-box-shadow:    0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Form focus ring — override hardcoded Bootstrap blue */
.form-control:focus,
.form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    box-shadow:   0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

/* ── 3. Button overrides ─────────────────────────────────────────────────── */

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), 0.25);
}

.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--bs-primary-active) !important;
    border-color: var(--bs-primary-active) !important;
    color: #fff !important;
}

.btn-outline-primary {
    --bs-btn-color:              var(--bs-primary);
    --bs-btn-border-color:       var(--bs-primary);
    --bs-btn-hover-color:        #fff;
    --bs-btn-hover-bg:           var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb:   var(--bs-primary-rgb);
    --bs-btn-active-color:       #fff;
    --bs-btn-active-bg:          var(--bs-primary-active);
    --bs-btn-active-border-color:var(--bs-primary-active);
}
.btn-outline-primary:focus-visible           { box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .5) !important; }


/* ── 4. Utility classes ──────────────────────────────────────────────────── */

/* Brand green background utility — mirrors bg-tide/bg-aqua etc. baked into bootstrap.min.css */
.bg-green { background-color: var(--bs-primary) !important; }

/* Larger Bootstrap 5 switches */
.form-switch { padding-left: 3rem; }
.form-switch .form-check-input {
    width: 2.6rem;
    height: 1.35rem;
    margin-left: -3rem;
    background-size: 1.1rem 1.1rem;
}

/* User avatar initials circle */
.user-avatar-initials {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--bs-primary);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ── 5. Agent portal overrides ───────────────────────────────────────────── */

/* Tighten page content padding */
.wrapper .page-content { padding: 1rem; }

/* Login page background */
body.login-page { background-color: #f4f6f9; }

/* Sidebar logo image sizing */
.sidebar-wrapper .sidebar-header .logo-full {
    display: block;
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

.sidebar-wrapper .sidebar-header .logo-compact {
    display: none;
    width: 26px;
    object-fit: contain;
}

.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-full {
    display: none;
}

.wrapper.toggled:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header .logo-compact {
    display: block;
}

/* Sidebar submenu — remove template purple border, tighten item spacing */
.sidebar-wrapper .metismenu ul { border: none; }
.sidebar-wrapper .metismenu li + li { margin-top: 2px; }

/* Breadcrumb separator — Font Awesome chevron instead of LineIcons */
.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    content: "\f054";
    font-size: 0.65rem;
    vertical-align: middle;
    color: #adb5bd;
}
.page-breadcrumb .breadcrumb-item.active  { color: #495057; }
.page-breadcrumb .breadcrumb li a         { font-size: 1rem; }
.page-breadcrumb .breadcrumb li.breadcrumb-item { font-size: 0.9rem; }

/* ── 6. Shared components ────────────────────────────────────────────────── */

/* Scrollable card body (used on viewProperty, viewTenant, viewContractor) */
.card-scroll {
    max-height: 420px;
    overflow-y: auto;
}

/* Clickable table row cursor */
.js-row-link { cursor: pointer; }

/* Dashboard card hover lift */
.dashboard-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.dashboard-card-link .card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    margin-bottom: 0;
}
.dashboard-card-link:hover .card,
.dashboard-card-link:focus-visible .card {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
}

/* Media thumbnail strip (photos/videos on repair pages) */
.media-thumb-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.media-thumb {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: .375rem;
    border: 2px solid #dee2e6;
    cursor: pointer;
    transition: border-color .15s;
    background: #f8f9fa;
}

.media-thumb:hover { border-color: var(--bs-primary); }

.media-thumb-video {
    width: 72px;
    height: 72px;
    border-radius: .375rem;
    border: 2px solid #dee2e6;
    cursor: pointer;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    transition: border-color .15s;
    flex-shrink: 0;
}

.media-thumb-video:hover { border-color: var(--bs-primary); }

.login-logo { padding: 0.5rem 0 0.25rem; }
.login-logo .logo-img { max-height: 60px; width: auto; }

/* ── Select2 ─────────────────────────────────────────────────────────────── */
/* select2-bootstrap5.min.css hardcodes #0d6efd / #86b7fe — override with brand primary */

/* Dropdown panel border */
.select2-container--bootstrap-5 .select2-dropdown {
    border-color: var(--bs-primary);
}
/* Focus / open state: selection box border + ring */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
/* Search field inside dropdown focus ring */
.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
/* Hovered option */
.select2-container--bootstrap-5 .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--bs-primary);
    color: #fff;
}
/* Already-selected option in the open list */
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: var(--bs-primary);
    color: #fff;
}
/* Opt-in green border — add containerCssClass: 'select2-primary-border' to the select2 init */
.select2-container--bootstrap-5.select2-primary-border .select2-selection {
    border: 1px solid var(--bs-primary);
}
/* Fix Select2 4.1.0-rc.0 multi-select layout with Bootstrap-5 theme v1.3.0:
   In 4.1.0-rc.0 the search <span> is a sibling of the tags <ul>, not a <li> inside it.
   The theme was written for the old structure, so its flex rules on <ul> never reach the search.
   Solution: flatten the <ul> with display:contents so tags and search all flex together. */
.select2-container--bootstrap-5 .select2-selection--multiple {
    display: flex !important; flex-wrap: wrap; align-items: center;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    display: contents;
}
.select2-container--bootstrap-5 .select2-selection--multiple .select2-search--inline {
    flex: 1; min-width: 3rem; width: auto !important; height: auto; display: block;
}

/* ── DataTables ─────────────────────────────────────────────────────────── */
/* Override hardcoded Bootstrap-blue (#0d6efd) with brand primary */

/* Custom length dropdown (Bootstrap dropdown replaces native select) */
.dt-length select                            { display: none; }  /* pre-hide before JS runs — prevents flash of native select */
.dt-length-custom { 
    display: inline-block; 
    vertical-align: middle; 
    margin-right: 0.35rem; 
}
.dt-length-toggle {
    display:          inline-flex;
    align-items:      center;
    justify-content:  space-between;
    width:            70px;
    height:           30px;
    padding:          0 0.5rem;
    font-size:        0.875rem;
    line-height:      1;
    border:           1px solid var(--bs-border-color);
    border-radius:    var(--bs-border-radius-sm);
    background-color: var(--bs-body-bg);
    color:            var(--bs-body-color);
    cursor:           pointer;
}
.dt-length-toggle:hover,
.dt-length-toggle:focus,
.dt-length-toggle:active,
.show > .dt-length-toggle {
    background-color: var(--bs-body-bg)   !important;
    border-color:     var(--bs-border-color) !important;
    color:            var(--bs-body-color) !important;
    box-shadow:       none !important;
    outline:          none;
}
.dt-length-custom .dropdown-item.active,
.dt-length-custom .dropdown-item:active,
.dt-length-custom .dropdown-item:hover,
.dt-length-custom .dropdown-item:focus {
    background-color: var(--bs-primary);
    color: #fff;
}

/* Cell focus */
table.dataTable tbody th.focus,
table.dataTable tbody td.focus {
    outline-color: var(--bs-primary);
}

/* ── Status filter cards (.status-card) ─────────────────────────────────── */
.status-card {
    position: relative;
    border-radius: .5rem;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    line-height: 1;
    transition: box-shadow .2s, transform .2s;
}
.status-card--off {
    box-shadow: none;
}
/* Always outline + faint tint — active state handled by border, not fill */
.status-card.btn-tide      { --bs-btn-bg: rgba(var(--bs-tide-rgb), .1);      --bs-btn-active-bg: rgba(var(--bs-tide-rgb), .1);      --bs-btn-hover-bg: rgba(var(--bs-tide-rgb), .18);      --bs-btn-hover-color: var(--bs-tide);      --bs-btn-border-color: var(--bs-tide);      --bs-btn-active-border-color: var(--bs-tide);      --bs-btn-color: var(--bs-tide);      --bs-btn-active-color: var(--bs-tide); }
.status-card.btn-aqua      { --bs-btn-bg: rgba(var(--bs-aqua-rgb), .15);     --bs-btn-active-bg: rgba(var(--bs-aqua-rgb), .15);     --bs-btn-hover-bg: rgba(var(--bs-aqua-rgb), .22);      --bs-btn-hover-color: #2d6e6b;      --bs-btn-border-color: var(--bs-aqua);      --bs-btn-active-border-color: var(--bs-aqua);      --bs-btn-color: #2d6e6b;             --bs-btn-active-color: #2d6e6b; }
.status-card.btn-lime      { --bs-btn-bg: rgba(var(--bs-lime-rgb), .15);     --bs-btn-active-bg: rgba(var(--bs-lime-rgb), .15);     --bs-btn-hover-bg: rgba(var(--bs-lime-rgb), .22);      --bs-btn-hover-color: #5a6000;      --bs-btn-border-color: var(--bs-lime);      --bs-btn-active-border-color: var(--bs-lime);      --bs-btn-color: #5a6000;             --bs-btn-active-color: #5a6000; }
.status-card.btn-amber     { --bs-btn-bg: rgba(var(--bs-amber-rgb), .1);     --bs-btn-active-bg: rgba(var(--bs-amber-rgb), .1);     --bs-btn-hover-bg: rgba(var(--bs-amber-rgb), .18);     --bs-btn-hover-color: var(--bs-amber);     --bs-btn-border-color: var(--bs-amber);     --bs-btn-active-border-color: var(--bs-amber);     --bs-btn-color: var(--bs-amber);     --bs-btn-active-color: var(--bs-amber); }
.status-card.btn-crimson   { --bs-btn-bg: rgba(var(--bs-crimson-rgb), .1);   --bs-btn-active-bg: rgba(var(--bs-crimson-rgb), .1);   --bs-btn-hover-bg: rgba(var(--bs-crimson-rgb), .18);   --bs-btn-hover-color: var(--bs-crimson);   --bs-btn-border-color: var(--bs-crimson);   --bs-btn-active-border-color: var(--bs-crimson);   --bs-btn-color: var(--bs-crimson);   --bs-btn-active-color: var(--bs-crimson); }
.status-card.btn-indie     { --bs-btn-bg: rgba(var(--bs-indie-rgb), .1);     --bs-btn-active-bg: rgba(var(--bs-indie-rgb), .1);     --bs-btn-hover-bg: rgba(var(--bs-indie-rgb), .18);     --bs-btn-hover-color: var(--bs-indie);     --bs-btn-border-color: var(--bs-indie);     --bs-btn-active-border-color: var(--bs-indie);     --bs-btn-color: var(--bs-indie);     --bs-btn-active-color: var(--bs-indie); }
.status-card.btn-gold      { --bs-btn-bg: rgba(var(--bs-gold-rgb), .1);      --bs-btn-active-bg: rgba(var(--bs-gold-rgb), .1);      --bs-btn-hover-bg: rgba(var(--bs-gold-rgb), .18);      --bs-btn-hover-color: var(--bs-gold);      --bs-btn-border-color: var(--bs-gold);      --bs-btn-active-border-color: var(--bs-gold);      --bs-btn-color: var(--bs-gold);      --bs-btn-active-color: var(--bs-gold); }
.status-card.btn-green     { --bs-btn-bg: rgba(var(--bs-primary-rgb), .1);   --bs-btn-active-bg: rgba(var(--bs-primary-rgb), .1);   --bs-btn-hover-bg: rgba(var(--bs-primary-rgb), .18);   --bs-btn-hover-color: var(--bs-primary);   --bs-btn-border-color: var(--bs-primary);   --bs-btn-active-border-color: var(--bs-primary);   --bs-btn-color: var(--bs-primary);   --bs-btn-active-color: var(--bs-primary); }
.status-card.btn-secondary { --bs-btn-bg: rgba(var(--bs-secondary-rgb), .1); --bs-btn-active-bg: rgba(var(--bs-secondary-rgb), .1); --bs-btn-hover-bg: rgba(var(--bs-secondary-rgb), .18); --bs-btn-hover-color: var(--bs-secondary); --bs-btn-border-color: var(--bs-secondary); --bs-btn-active-border-color: var(--bs-secondary); --bs-btn-color: var(--bs-secondary); --bs-btn-active-color: var(--bs-secondary); }
.status-card.active {
    border-width: 2.5px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
    transform: translateY(-3px);
}
.status-card__check {
    display: inline-flex;
    align-items: center;
    margin-left: .3em;
    font-size: .75rem;
    line-height: 1;
    opacity: 0;
    transform: scale(0.3);
    transition: opacity .15s, transform .22s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}
.status-card.active .status-card__check {
    opacity: 1;
    transform: scale(1);
}
.status-card__label {
    font-size: .73rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.status-card__count {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Priority / status pill badge (.priority-badge) ─────────────────────── */
.priority-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 30px;
    font-size: .8rem;
    font-weight: 700;
    border-radius: 50rem;
}

/* ── Impersonation bar ──────────────────────────────────── */
#impersonation-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #d97706;
    color: #fff;
    text-align: center;
    padding: 6px 16px;
    font-size: .85rem;
}
body.is-impersonating { padding-top: 36px; }

/* Fullscreen modals: shift below impersonation bar so the header/close button is reachable */
body.is-impersonating .modal-fullscreen {
    margin-top: 36px !important;
    height: calc(100% - 36px) !important;
}
@media (max-width: 575.98px) {
    body.is-impersonating .modal-fullscreen-sm-down {
        margin-top: 36px !important;
        height: calc(100% - 36px) !important;
    }
}
@media (max-width: 767.98px) {
    body.is-impersonating .modal-fullscreen-md-down {
        margin-top: 36px !important;
        height: calc(100% - 36px) !important;
    }
}