/* ===== Brand palette =====
   Deep navy (trust, real estate) + amber accent (premium/gold).
   Overriding Bootstrap's own CSS variables means every existing
   btn-primary / bg-primary / text-primary / border-primary usage
   across the app repaints automatically - no view markup changes. */

:root {
    --brand-navy: #0f2942;
    --brand-navy-dark: #0a1c2e;
    --brand-navy-light: #16406b;
    --brand-amber: #d99a2b;
    --brand-amber-dark: #b57e1c;

    --bs-primary: var(--brand-navy);
    --bs-primary-rgb: 15, 41, 66;
    --bs-primary-text-emphasis: var(--brand-navy-dark);
    --bs-primary-bg-subtle: #e7edf2;
    --bs-primary-border-subtle: #b9c8d6;
    --bs-link-color: var(--brand-navy-light);
    --bs-link-color-rgb: 22, 64, 107;
    --bs-link-hover-color: var(--brand-navy);
}

.btn-primary {
    --bs-btn-bg: var(--brand-navy);
    --bs-btn-border-color: var(--brand-navy);
    --bs-btn-hover-bg: var(--brand-navy-light);
    --bs-btn-hover-border-color: var(--brand-navy-light);
    --bs-btn-active-bg: var(--brand-navy-dark);
    --bs-btn-active-border-color: var(--brand-navy-dark);
    --bs-btn-focus-shadow-rgb: 15, 41, 66;
    box-shadow: 0 1px 2px rgba(15, 41, 66, 0.25);
}

.btn, .form-control, .form-select {
    border-radius: 0.5rem;
}

.btn {
    transition: transform 0.08s ease, box-shadow 0.15s ease;
}

.btn:active {
    transform: scale(0.98);
}

/* ===== Responsive app shell =====
   Mobile-first: below the lg breakpoint the sidebar is an offcanvas
   drawer (see _Layout.cshtml). From lg upward it becomes a fixed
   left column. No JS breakpoint logic needed - Bootstrap's
   `offcanvas-lg` class handles the switch. */

html, body {
    height: 100%;
    background-color: #f4f6f9;
}

.top-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-navy-light) 100%) !important;
    border-bottom: 3px solid var(--brand-amber);
}

.top-navbar .navbar-brand {
    font-weight: 600;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 0.5rem;
    background: var(--brand-amber);
    color: var(--brand-navy-dark);
    font-size: 1rem;
    flex-shrink: 0;
}

.app-body {
    display: flex;
    min-height: calc(100vh - 56px);
}

.sidebar {
    width: 260px;
    background-color: #fff !important;
    border-right: 1px solid #e5e9ee;
    box-shadow: 1px 0 3px rgba(15, 41, 66, 0.04);
}

.sidebar-nav {
    padding: 0.75rem 0.6rem;
}

.sidebar-nav .nav-link {
    color: #35404b;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    border-left: 3px solid transparent;
    font-size: 0.925rem;
    margin-bottom: 2px;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.sidebar-nav .nav-link i {
    color: #7c8894;
    transition: color 0.12s ease;
}

.sidebar-nav .nav-link:hover {
    background-color: #eef3f8;
    color: var(--brand-navy);
}

.sidebar-nav .nav-link:hover i {
    color: var(--brand-navy);
}

.sidebar-nav .nav-link.active {
    background-color: #e7edf2;
    color: var(--brand-navy);
    border-left-color: var(--brand-amber);
    font-weight: 500;
}

.sidebar-nav .nav-link.active i {
    color: var(--brand-amber-dark);
}

.app-content {
    flex: 1 1 auto;
    min-width: 0; /* lets tables/cards shrink instead of overflowing on phones */
}

/* Cards and tables scroll horizontally on narrow screens instead of
   breaking the layout - wrap any wide table in <div class="table-responsive"> */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

.card {
    border: 1px solid #e5e9ee;
    border-radius: 0.75rem;
}

/* ===== KPI cards used on the Dashboard ===== */
.kpi-card {
    border-radius: 0.85rem;
    border: 1px solid #e5e9ee;
    background: #fff;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--kpi-accent, var(--brand-navy));
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 41, 66, 0.08);
}

.kpi-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: color-mix(in srgb, var(--kpi-accent, var(--brand-navy)) 14%, white);
    color: var(--kpi-accent, var(--brand-navy));
    margin-bottom: 0.5rem;
}

.kpi-card .kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1c2733;
    line-height: 1.2;
}

.kpi-card .kpi-label {
    font-size: 0.8rem;
    color: #6b7684;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Category accents for KPI cards - set via inline style="--kpi-accent:#.." */
.kpi-navy   { --kpi-accent: var(--brand-navy); }
.kpi-amber  { --kpi-accent: #d99a2b; }
.kpi-green  { --kpi-accent: #1c9d6b; }
.kpi-red    { --kpi-accent: #d64545; }
.kpi-blue   { --kpi-accent: #2f7bd6; }
.kpi-purple { --kpi-accent: #7952b3; }

/* ===== Status badges - one look shared by Lead status, Booking status,
   Plot status etc. so the whole app reads consistently. ===== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    font-size: 0.775rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.status-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-neutral  { background: #eef1f4; color: #55606b; }
.status-info     { background: #e7f0fc; color: #2f6fca; }
.status-progress { background: #fbeee0; color: #b5701a; }
.status-success  { background: #e5f6ee; color: #1a8c5b; }
.status-danger   { background: #fbe9e9; color: #c53d3d; }
.status-purple   { background: #f0ebf8; color: #6c46b3; }

/* Plot inventory colour coding (matches spec: Available/Reserved/Booked/Sold/Blocked) */
.plot-Available { background-color: #e5f6ee; }
.plot-Reserved  { background-color: #fbeee0; }
.plot-Booked    { background-color: #e7f0fc; }
.plot-Sold      { background-color: #fbe9e9; }
.plot-Blocked   { background-color: #eef1f2; }

.table thead th {
    background-color: #f7f9fb;
    color: #4a5560;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid #e5e9ee;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f4f7fa;
}

@media (max-width: 991.98px) {
    .sidebar {
        width: 80vw;
        max-width: 300px;
    }
}