/* =========================================================
   VGP Layout - Bootstrap 5.3 Custom Theme
   ========================================================= */

:root {
    --vgp-orange: #FFAC1C;
    --vgp-orange-dark: #D98B00;
    --vgp-orange-light: #FFF3D6;
    --vgp-orange-soft: #FFF9ED;

    --vgp-text: #333333;
    --vgp-muted: #6C757D;
    --vgp-border: #DEE2E6;
}


/* =========================================================
   GENERAL
   ========================================================= */

body {
    color: var(--vgp-text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--vgp-text);
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navbar {
    border-bottom: 3px solid var(--vgp-orange) !important;
}

.navbar-brand {
    color: var(--vgp-orange-dark) !important;
}

.nav-link {
    color: var(--vgp-text);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--vgp-orange-dark);
}

.nav-link.active {
    color: var(--vgp-orange-dark) !important;
    font-weight: 600;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.btn-primary {
    background-color: var(--vgp-orange);
    border-color: var(--vgp-orange);
    color: #FFFFFF;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--vgp-orange-dark);
    border-color: var(--vgp-orange-dark);
    color: #FFFFFF;
}

.btn-outline-primary {
    color: var(--vgp-orange-dark);
    border-color: var(--vgp-orange);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--vgp-orange);
    border-color: var(--vgp-orange);
    color: #FFFFFF;
}


/* =========================================================
   TABLES
   ========================================================= */

.table thead th {
    background-color: var(--vgp-orange);
    color: #FFFFFF;
    border-color: var(--vgp-orange);
    font-weight: 700;
}

.table tbody tr:hover {
    background-color: var(--vgp-orange-soft);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--vgp-orange-soft);
}


/* =========================================================
   Table Header Sort Links
   ========================================================= */

.table thead th a,
.table thead th a:visited {
    color: #FFFFFF !important;
    font-weight: 700;
    text-decoration: none;
}

.table thead th a:hover,
.table thead th a:focus {
    color: #FFFFFF !important;
    text-decoration: underline;
}


/* =========================================================
   LINKS
   ========================================================= */

a {
    color: var(--vgp-orange-dark);
}

a:hover {
    color: var(--vgp-orange-dark);
}


/* =========================================================
   FORMS
   ========================================================= */

.form-control:focus,
.form-select:focus {
    border-color: var(--vgp-orange);
    box-shadow: 0 0 0 0.2rem rgba(255, 172, 28, 0.20);
}

.form-check-input:checked {
    background-color: var(--vgp-orange);
    border-color: var(--vgp-orange);
}

.form-check-input:focus {
    border-color: var(--vgp-orange);
    box-shadow: 0 0 0 0.2rem rgba(255, 172, 28, 0.20);
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-header {
    border-bottom: 2px solid var(--vgp-orange);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.dashboard h2 {
    border-left: 5px solid var(--vgp-orange);
    padding-left: 0.75rem;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}


/* =========================================================
   COLLAPSIBLE SECTIONS
   ========================================================= */

details {
    border: 1px solid var(--vgp-border);
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
    background-color: #FFFFFF;
}

details summary {
    cursor: pointer;
    padding: 0.65rem 0.85rem;
    background-color: var(--vgp-orange-light);
    color: var(--vgp-text);
}

details summary:hover {
    background-color: var(--vgp-orange-soft);
}

details[open] summary {
    border-bottom: 1px solid var(--vgp-border);
}


/* =========================================================
   DASHBOARD ACTION BAR
   ========================================================= */

.dashboard-actions {
    background-color: var(--vgp-orange-soft);
    border: 1px solid #F5D28A;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 1rem;
}


/* =========================================================
   RELATED SECTIONS
   ========================================================= */

.related {
    margin-bottom: 1rem;
}

.related h4 {
    border-bottom: 2px solid var(--vgp-orange);
    padding-bottom: 0.35rem;
}


/* =========================================================
   BADGES / STATUS
   ========================================================= */

.badge.bg-primary {
    background-color: var(--vgp-orange) !important;
    color: #FFFFFF;
}


/* =========================================================
   ALERTS / FLASH MESSAGES
   ========================================================= */

.alert {
    border-left: 4px solid var(--vgp-orange);
}


/* =========================================================
   SMALL ACTION LINKS
   ========================================================= */

.actions a:not(.btn) {
    margin-right: 0.5rem;
}



/* =========================================================
   VGP Pagination Theme
   ========================================================= */

.pagination {
    --bs-pagination-color: #FFAC1C;
    --bs-pagination-bg: #FFFFFF;
    --bs-pagination-border-color: #DEE2E6;

    --bs-pagination-hover-color: #FFFFFF;
    --bs-pagination-hover-bg: #D98B00;
    --bs-pagination-hover-border-color: #D98B00;

    --bs-pagination-active-color: #FFFFFF;
    --bs-pagination-active-bg: #FFAC1C;
    --bs-pagination-active-border-color: #FFAC1C;

    --bs-pagination-disabled-color: #ADB5BD;
    --bs-pagination-disabled-bg: #F8F9FA;
    --bs-pagination-disabled-border-color: #DEE2E6;
}

.pagination .page-link {
    color: #FFAC1C !important;
    font-weight: 600;
    min-width: 34px;
    text-align: center;
}

.pagination .page-link:hover {
    color: #FFFFFF !important;
    background-color: #D98B00 !important;
    border-color: #D98B00 !important;
}

.pagination .active .page-link,
.pagination .current,
.pagination .active {
    color: #FFFFFF !important;
    background-color: #FFAC1C !important;
    border-color: #FFAC1C !important;
    font-weight: 700;
}




    .plot-status-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        width: 280px;
        height: 42px;
        background: #f1f3f5;
        border: 1px solid #dee2e6;
        border-radius: 999px;
        overflow: hidden;
    }

    .plot-status-switch input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .plot-status-switch label {
        position: relative;
        z-index: 2;
        width: 50%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: 0.875rem;
        font-weight: 600;
        color: #6c757d;
        transition: color 0.2s ease;
    }

    .plot-status-switch .slider {
        position: absolute;
        top: 3px;
        bottom: 3px;
        left: 3px;
        width: calc(50% - 3px);
        background: #198754;
        border-radius: 999px;
        transition: transform 0.2s ease;
    }

    .plot-status-switch input[value="Sold"]:checked ~ .slider {
        background: #6c757d;
        transform: translateX(100%);
    }

    .plot-status-switch input[value="Available"]:checked ~ label[for="status-available"],
    .plot-status-switch input[value="Sold"]:checked ~ label[for="status-sold"] {
        color: #fff;
    }