/*
 * Construction ERP - app layer on top of the prebuilt admin theme.
 * Page header, filter bar, list tables, stat widgets, dashboard widgets and
 * the loading indicators. Uses Bootstrap CSS variables so light/dark both work.
 */

:root {
    --erp-radius: .65rem;
    --erp-gap: 1rem;
    --erp-muted: var(--theme-secondary-color, #6c757d);
    --erp-border: var(--theme-border-color, #e5e7eb);
    --erp-card: var(--theme-body-bg, #fff);
    --erp-soft: var(--theme-tertiary-bg, #f6f7fb);
    --erp-primary: var(--theme-primary, #3b5bdb);
}

/* ── Page shell ─────────────────────────────────────────────────────────── */
.content > .container-fluid { padding-top: 1rem; padding-bottom: 1.5rem; }

.erp-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin: 0 0 1rem;
}
.erp-page-head__main { min-width: 0; }
.erp-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
    list-style: none;
    padding: 0;
    margin: 0 0 .2rem;
    font-size: .75rem;
    color: var(--erp-muted);
}
.erp-breadcrumb a { color: var(--erp-muted); text-decoration: none; }
.erp-breadcrumb a:hover { color: var(--erp-primary); }
.erp-breadcrumb li + li::before { content: "/"; margin-right: .25rem; opacity: .5; }
.erp-page-title { font-size: 1.3rem; font-weight: 600; line-height: 1.25; margin: 0; }
.erp-page-sub { color: var(--erp-muted); font-size: .85rem; margin: .15rem 0 0; }
.erp-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.erp-page-actions > form { margin: 0; }

@media (max-width: 575.98px) {
    .erp-page-actions { width: 100%; }
    .erp-page-actions > .btn, .erp-page-actions > a.btn { flex: 1 1 auto; }
}

/* Cards get a consistent radius and a hairline border */
.content .card { border-radius: var(--erp-radius); border: 1px solid var(--erp-border); box-shadow: 0 1px 2px rgba(16, 24, 40, .04); margin-bottom: var(--erp-gap); }
.content .card > .card-header { background: transparent; border-bottom: 1px solid var(--erp-border); padding: .75rem 1rem; }
.content .card > .card-footer { background: transparent; border-top: 1px solid var(--erp-border); padding: .65rem 1rem; }
.card-title { font-size: .95rem; font-weight: 600; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.erp-filter-card .card-body { padding: .75rem 1rem; }
.erp-filter-card .form-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--erp-muted);
    margin-bottom: .2rem;
}
.erp-filter-card .form-control,
.erp-filter-card .form-select,
.erp-filter-card .ts-control { min-height: 36px; }
.erp-filter-actions { display: flex; gap: .35rem; align-items: flex-end; }
.erp-filter-count { font-size: .7rem; }

/* ── List tables ────────────────────────────────────────────────────────── */
.erp-list-card > .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.erp-list-meta { color: var(--erp-muted); font-size: .8rem; }
.erp-table { margin-bottom: 0; }
.erp-table > thead > tr > th {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--erp-muted);
    background: var(--erp-soft);
    border-bottom: 1px solid var(--erp-border);
    padding: .6rem .75rem;
    white-space: nowrap;
}
.erp-table > tbody > tr > td { padding: .6rem .75rem; vertical-align: middle; border-color: var(--erp-border); }
.erp-table > tbody > tr:last-child > td { border-bottom: 0; }
.erp-table > tfoot > tr > td { background: var(--erp-soft); font-weight: 600; padding: .6rem .75rem; }
.erp-table .erp-sub { display: block; font-size: .75rem; color: var(--erp-muted); }
.erp-table .erp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.erp-actions { width: 1%; white-space: nowrap; text-align: right; }
.erp-actions .btn, .erp-actions form { display: inline-block; margin: 0; }
.erp-actions .btn-icon { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.table-responsive { scrollbar-width: thin; }
.tabular { font-variant-numeric: tabular-nums; }

/* ── Stat cards / widgets ───────────────────────────────────────────────── */
.erp-stat {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
a.erp-stat:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(16, 24, 40, .08); color: inherit; }
.erp-stat__icon {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: .6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}
.erp-stat__label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--erp-muted); }
.erp-stat__value { font-size: 1.45rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.erp-stat__hint { font-size: .75rem; color: var(--erp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.erp-widget { height: 100%; margin-bottom: 0 !important; display: flex; flex-direction: column; }
.erp-widget > .card-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.erp-widget > .card-header .card-title { margin: 0; display: flex; align-items: center; gap: .4rem; }
.erp-widget > .card-header .card-title i { color: var(--erp-muted); font-size: 1.05rem; }
.erp-widget > .card-body { flex: 1 1 auto; }
.erp-widget .list-group-item { padding: .55rem 1rem; border-color: var(--erp-border); }
.erp-widget__link { font-size: .78rem; text-decoration: none; }
.erp-empty { color: var(--erp-muted); text-align: center; padding: 1.5rem .5rem; font-size: .85rem; }
.erp-empty i { display: block; font-size: 1.8rem; opacity: .35; margin-bottom: .35rem; }

.erp-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .5rem; }
.erp-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .75rem .5rem;
    border: 1px dashed var(--erp-border);
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
    font-size: .8rem;
    text-align: center;
    transition: background .12s ease, border-color .12s ease;
}
.erp-quick a:hover { background: var(--erp-soft); border-color: var(--erp-primary); }
.erp-quick i { font-size: 1.35rem; color: var(--erp-primary); }

.erp-meter { height: 6px; border-radius: 3px; background: var(--erp-soft); overflow: hidden; }
.erp-meter > span { display: block; height: 100%; border-radius: 3px; }

.erp-greeting {
    border: 0 !important;
    color: #fff;
    background: linear-gradient(120deg, #1e3a8a 0%, #2563eb 55%, #0ea5e9 100%);
}
.erp-greeting .text-muted, .erp-greeting .erp-page-sub { color: rgba(255, 255, 255, .75) !important; }

/* ── Detail lists (show pages) ──────────────────────────────────────────── */
.erp-dl { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: .45rem .75rem; margin: 0; font-size: .875rem; }
.erp-dl dt { color: var(--erp-muted); font-weight: 400; }
.erp-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
/* Sticky save bar: a solid card-coloured strip so Cancel / secondary buttons read clearly. */
.erp-form-actions {
    position: sticky;
    bottom: .5rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: .5rem;
    margin-top: 1rem;
    padding: .75rem 1rem;
    background: var(--theme-secondary-bg, #fff);
    border: 1px solid var(--erp-border);
    border-radius: .5rem;
    box-shadow: 0 -2px 12px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
}
.erp-form-actions > .btn:first-child:not(:only-child) { margin-right: auto; } /* Cancel sits left, saves right */
@media (max-width: 575.98px) {
    .erp-form-actions { bottom: 0; border-radius: .5rem .5rem 0 0; }
    .erp-form-actions > .btn { flex: 1 1 auto; }
}

/* ── Secondary buttons ──────────────────────────────────────────────────────
   The theme's btn-light is #eef2f7 with no border - almost invisible on the grey page
   and on light cards. Give it the card colour, a real border and dark text everywhere. */
.btn-light {
    --theme-btn-color: #1f2937;
    --theme-btn-bg: var(--theme-secondary-bg, #fff);
    --theme-btn-border-color: #cfd6e0;
    --theme-btn-hover-color: #111827;
    --theme-btn-hover-bg: #eef2f7;
    --theme-btn-hover-border-color: #aeb8c6;
    --theme-btn-active-color: #111827;
    --theme-btn-active-bg: #e2e8f0;
    --theme-btn-active-border-color: #9aa5b5;
    --theme-btn-disabled-color: #6b7280;
    --theme-btn-disabled-bg: var(--theme-secondary-bg, #fff);
    --theme-btn-disabled-border-color: #dde2e9;
    --theme-btn-focus-shadow-rgb: var(--theme-primary-rgb);
    outline: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    font-weight: 500;
}
.btn-light:hover, .btn-light:focus-visible { box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
/* coloured icon buttons in tables (text-primary / text-danger) keep their colour */
.btn-light[class*="text-"] { --theme-btn-hover-color: currentColor; --theme-btn-active-color: currentColor; }

[data-bs-theme=dark] .btn-light {
    --theme-btn-color: #e5e7eb;
    --theme-btn-bg: rgba(255, 255, 255, .06);
    --theme-btn-border-color: rgba(255, 255, 255, .18);
    --theme-btn-hover-color: #fff;
    --theme-btn-hover-bg: rgba(255, 255, 255, .12);
    --theme-btn-hover-border-color: rgba(255, 255, 255, .3);
    --theme-btn-active-color: #fff;
    --theme-btn-active-bg: rgba(255, 255, 255, .16);
    --theme-btn-active-border-color: rgba(255, 255, 255, .34);
    --theme-btn-disabled-color: #9ca3af;
    --theme-btn-disabled-bg: transparent;
    --theme-btn-disabled-border-color: rgba(255, 255, 255, .1);
}
[data-bs-theme=dark] .erp-form-actions { box-shadow: 0 -2px 12px rgba(0, 0, 0, .35); }

/* Modal footers get the same separation as the page save bar. */
.modal-footer { background: var(--theme-tertiary-bg, #f6f7fb); gap: .5rem; }

/* ── Loading: first-visit splash + navigation progress bar ─────────────── */
#erp-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 100000;
    background: linear-gradient(90deg, #2563eb, #0ea5e9);
    box-shadow: 0 0 8px rgba(37, 99, 235, .6);
    opacity: 0;
    transition: width .25s ease, opacity .3s ease;
    pointer-events: none;
}
#erp-progress.is-active { opacity: 1; }

#page-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--theme-body-bg, #fff);
    transition: opacity .3s ease, visibility .3s ease;
}
.erp-booted #page-preloader { display: none; }
#page-preloader.pl-hide { opacity: 0; visibility: hidden; pointer-events: none; }
#page-preloader img { max-height: 42px; max-width: 200px; animation: pl-breathe 1.4s ease-in-out infinite; }
.pl-track { width: 140px; height: 3px; border-radius: 3px; background: var(--erp-soft); overflow: hidden; }
.pl-track span { display: block; width: 40%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #2563eb, #0ea5e9); animation: pl-slide 1s ease-in-out infinite; }
@keyframes pl-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes pl-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
    #page-preloader img, .pl-track span { animation: none; }
    #erp-progress { transition: none; }
}

/* ── Tom Select: behave like a select, not a text box ─────────────────────
   The bootstrap5 theme keeps .form-select (border + arrow) on the wrapper.
   Single selects: pointer cursor and no blinking caret until the dropdown is open. */
.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control > input,
.ts-wrapper.single.input-active .ts-control { cursor: pointer; }
.ts-wrapper.single:not(.dropdown-active) .ts-control > input { caret-color: transparent; }
.ts-wrapper.single.dropdown-active .ts-control > input { cursor: text; caret-color: auto; }
.ts-wrapper.form-select.focus { border-color: var(--erp-primary); box-shadow: 0 0 0 .2rem rgba(var(--theme-primary-rgb), .15); }
.ts-dropdown .option { padding: .45rem .75rem; }
.ts-dropdown .no-results { padding: .5rem .75rem; color: var(--erp-muted); }

/* ── Row states (overdue / warning) that survive hover ─────────────────── */
.erp-table > tbody > tr.table-danger,
.erp-table > tbody > tr.table-warning,
.erp-table > tbody > tr.table-info {
    --theme-table-color: var(--theme-body-color);
    --theme-table-striped-color: var(--theme-body-color);
    --theme-table-hover-color: var(--theme-body-color);
    --theme-table-border-color: var(--erp-border);
}
.erp-table > tbody > tr.table-danger  { --theme-table-bg: rgba(var(--theme-danger-rgb), .06);  --theme-table-hover-bg: rgba(var(--theme-danger-rgb), .12); }
.erp-table > tbody > tr.table-warning { --theme-table-bg: rgba(var(--theme-warning-rgb), .08); --theme-table-hover-bg: rgba(var(--theme-warning-rgb), .15); }
.erp-table > tbody > tr.table-info    { --theme-table-bg: rgba(var(--theme-info-rgb), .06);    --theme-table-hover-bg: rgba(var(--theme-info-rgb), .12); }
.erp-table > tbody > tr.table-danger > :first-child,
.erp-table > tbody > tr.table-warning > :first-child,
.erp-table > tbody > tr.table-info > :first-child { position: relative; }
.erp-table > tbody > tr.table-danger > :first-child::before,
.erp-table > tbody > tr.table-warning > :first-child::before,
.erp-table > tbody > tr.table-info > :first-child::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}
.erp-table > tbody > tr.table-danger > :first-child::before  { background: var(--theme-danger); }
.erp-table > tbody > tr.table-warning > :first-child::before { background: var(--theme-warning); }
.erp-table > tbody > tr.table-info > :first-child::before    { background: var(--theme-info); }
.erp-table > tbody > tr.table-danger:hover > *,
.erp-table > tbody > tr.table-warning:hover > *,
.erp-table > tbody > tr.table-info:hover > * { --theme-table-bg-state: var(--theme-table-hover-bg); color: var(--theme-body-color); }

/* ── Topbar date & time ────────────────────────────────────────────────── */
.erp-clock {
    align-items: center;
    gap: .5rem;
    margin-left: .5rem;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}
.erp-clock > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    border-radius: 2rem;
    background: var(--erp-soft);
    border: 1px solid var(--erp-border);
    white-space: nowrap;
}
.erp-clock i { color: var(--erp-primary); font-size: 1rem; }
.erp-clock__time { font-weight: 600; min-width: 7.2rem; justify-content: center; }
@media (max-width: 991.98px) { .erp-clock__date { display: none !important; } }

/* ── Sidebar brand: horizontal lockup image (house mark + name rendered in).
   Transparent PNG, white-text version on the dark sidebar, navy on a light one. */
.sidenav-menu > a.logo {
    display: flex;
    align-items: center;
    height: auto;
    min-height: var(--theme-topbar-height, 70px);
    padding: .85rem 1.25rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    line-height: normal;
    text-decoration: none;
}
html[data-menu-color=light] .sidenav-menu > a.logo { border-bottom-color: var(--erp-border); }
.sidenav-menu > a.logo > .logo { width: 100%; }
.sidenav-menu .logo .erp-brand { display: block; }
.sidenav-menu .logo .erp-brand img { display: block; width: 100%; max-width: 210px; height: auto; max-height: 48px; object-fit: contain; object-position: left center; }
.sidenav-menu .logo .logo-sm img { width: 40px; height: 40px; object-fit: contain; }
html[data-sidenav-size=condensed] .sidenav-menu > a.logo { justify-content: center; padding: .6rem 0; }

/* Footer developer credit - deliberately small */
.footer .erp-credit { font-size: .72rem; opacity: .85; }
.footer .erp-credit a { color: var(--erp-muted); text-decoration: none; transition: color .15s ease; }
.footer .erp-credit a:hover { color: var(--erp-primary); }

/* ── Report export control ─────────────────────────────────────────────── */
.erp-export {
    display: inline-flex;
    align-items: stretch;
    gap: .35rem;
    padding: .3rem;
    border: 1px solid var(--erp-border);
    border-radius: .75rem;
    background: var(--erp-card);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.erp-export__label {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: 0 .5rem 0 .35rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--erp-muted);
    border-right: 1px solid var(--erp-border);
}
.erp-export__btn {
    --x: var(--theme-primary);
    --x-rgb: var(--theme-primary-rgb);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem .35rem .55rem;
    border-radius: .55rem;
    text-decoration: none;
    color: var(--theme-body-color);
    background: rgba(var(--x-rgb), .07);
    border: 1px solid rgba(var(--x-rgb), .18);
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.erp-export__btn.is-pdf { --x: var(--theme-danger); --x-rgb: var(--theme-danger-rgb); }
.erp-export__btn.is-xlsx { --x: var(--theme-success); --x-rgb: var(--theme-success-rgb); }
.erp-export__btn > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: .45rem;
    font-size: 1.15rem;
    color: #fff;
    background: var(--x);
}
.erp-export__text { display: flex; flex-direction: column; line-height: 1.1; }
.erp-export__name { font-weight: 600; font-size: .85rem; }
.erp-export__hint { font-size: .68rem; color: var(--erp-muted); }
.erp-export__btn:hover { background: rgba(var(--x-rgb), .14); border-color: rgba(var(--x-rgb), .35); color: var(--theme-body-color); transform: translateY(-1px); }
.erp-export__btn.is-busy { pointer-events: none; opacity: .75; }
.erp-export__btn.is-busy > i { animation: pl-breathe 1s ease-in-out infinite; }
.erp-export__btn.is-disabled { pointer-events: none; opacity: .45; filter: grayscale(.6); }
@media (max-width: 575.98px) {
    .erp-export { width: 100%; }
    .erp-export__label { display: none; }
    .erp-export__btn { flex: 1 1 0; justify-content: center; }
}

/* ── Mobile fixes ──────────────────────────────────────────────────────────
   Bootstrap 5 has no .min-w-0 utility, so flex children holding text could not
   shrink and pushed past their card (KPI hints overflowing on phones). */
.min-w-0 { min-width: 0 !important; }
.erp-stat > div { flex: 1 1 auto; min-width: 0; }
.erp-stat__value { overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
    .content > .container-fluid { padding-left: .75rem; padding-right: .75rem; }
    .erp-page-head { margin-bottom: .75rem; }
    .erp-page-title { font-size: 1.15rem; }

    /* KPI tiles: compact, and the hint wraps to two lines instead of running out of the card */
    .erp-stat { gap: .6rem; padding: .7rem .75rem; align-items: flex-start; }
    .erp-stat__icon { flex-basis: 36px; width: 36px; height: 36px; font-size: 1.1rem; }
    .erp-stat__label { font-size: .62rem; letter-spacing: .02em; line-height: 1.3; }
    .erp-stat__value { font-size: 1.15rem; }
    .erp-stat__hint {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .7rem;
        line-height: 1.3;
    }

    /* Greeting banner: quick actions become an even grid */
    .erp-greeting .card-body > div:last-child { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr; }
    .erp-greeting .btn { width: 100%; }

    /* Widgets / cards */
    .content .card > .card-header { padding: .65rem .8rem; }
    .erp-widget > .card-header { flex-wrap: wrap; }
    .erp-widget .list-group-item { padding: .5rem .8rem; }

    /* Tables: keep columns readable, scroll sideways inside the card */
    .erp-table > thead > tr > th, .erp-table > tbody > tr > td, .erp-table > tfoot > tr > td { padding: .5rem .6rem; }
    .erp-table { font-size: .85rem; }

    /* Filter bar: full-width Apply / Clear */
    .erp-filter-actions { width: 100%; }
    .erp-filter-actions .btn { flex: 1 1 0; }

    /* Detail lists stack label over value */
    .erp-dl { grid-template-columns: 1fr; gap: .1rem; }
    .erp-dl dd { margin-bottom: .45rem; }

    /* Modal forms use the full width */
    .modal-dialog { margin: .5rem; }
}

@media (max-width: 380px) {
    /* Very narrow phones: one KPI per row so numbers stay large */
    .row > [class*="col-6"]:has(> .card > .erp-stat),
    .row > [class*="col-6"]:has(> .erp-stat) { flex: 0 0 100%; max-width: 100%; }
}

/* Charts fill their widget and centre (donuts) */
.erp-widget [id^="w-"] { width: 100%; min-width: 0; }
.erp-widget .apexcharts-canvas { margin: 0 auto; }
.erp-widget .apexcharts-legend { justify-content: center !important; }

/* ── Projects: grid cards, cover photo, map, WhatsApp ───────────────────── */
.erp-project-card { transition: box-shadow .15s ease, transform .15s ease; }
.erp-project-card:hover { box-shadow: 0 6px 20px rgba(15, 23, 42, .10); transform: translateY(-2px); }
.erp-project-card__cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--erp-soft);
    border-bottom: 1px solid var(--erp-border);
}
.erp-project-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erp-project-card__cover.is-empty { display: flex; align-items: center; justify-content: center; }
.erp-project-card__cover--planning    { background: linear-gradient(135deg, rgba(var(--theme-info-rgb), .18), rgba(var(--theme-info-rgb), .05)); }
.erp-project-card__cover--in_progress { background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), .20), rgba(var(--theme-primary-rgb), .05)); }
.erp-project-card__cover--on_hold     { background: linear-gradient(135deg, rgba(var(--theme-warning-rgb), .22), rgba(var(--theme-warning-rgb), .06)); }
.erp-project-card__cover--completed   { background: linear-gradient(135deg, rgba(var(--theme-success-rgb), .20), rgba(var(--theme-success-rgb), .05)); }
.erp-project-card__cover--cancelled   { background: linear-gradient(135deg, rgba(var(--theme-danger-rgb), .16), rgba(var(--theme-danger-rgb), .04)); }
.erp-project-card__initials {
    display: flex; flex-direction: column; align-items: center; gap: .25rem;
    font-weight: 600; font-size: .8rem; letter-spacing: .04em; color: var(--erp-muted);
}
.erp-project-card__initials .ti { font-size: 2.25rem; opacity: .55; }
.erp-project-card__status { position: absolute; top: .6rem; left: .6rem; z-index: 2; }
.erp-project-card__status .badge { box-shadow: 0 1px 3px rgba(0, 0, 0, .15); backdrop-filter: blur(4px); }
.erp-project-card__title { font-size: 1rem; font-weight: 600; margin: .15rem 0 .5rem; line-height: 1.3; }
.erp-project-card__title a:hover { color: var(--erp-primary) !important; }
.erp-project-card__meta { display: grid; gap: .2rem; font-size: .8125rem; color: var(--erp-muted); min-width: 0; }
.erp-project-card__meta > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-project-card__meta .ti { margin-right: .35rem; opacity: .8; }
.erp-project-card__actions { display: flex; align-items: center; gap: .25rem; background: transparent; }
.erp-view-toggle .btn { min-width: 84px; }

/* Cover banner on the project page */
.erp-project-cover { position: relative; height: clamp(160px, 26vw, 300px); background: var(--erp-soft); }
.erp-project-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.erp-project-cover__edit { position: absolute; right: .75rem; bottom: .75rem; }

/* Cover picker preview */
.erp-cover-field__preview {
    aspect-ratio: 16 / 9; max-height: 220px; width: 100%;
    border: 1px dashed var(--erp-border); border-radius: .5rem;
    background: var(--erp-soft) center / cover no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.erp-cover-field__preview.has-image { border-style: solid; }
.erp-cover-field__preview.has-image .erp-cover-field__empty { display: none; }
.erp-cover-field__empty { color: var(--erp-muted); font-size: .875rem; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.erp-cover-field__empty .ti { font-size: 1.75rem; opacity: .6; }

/* Maps */
.erp-location-picker__map { height: 340px; border-radius: .5rem; border: 1px solid var(--erp-border); z-index: 0; cursor: crosshair; }
.erp-site-map { height: 240px; border-radius: .5rem; border: 1px solid var(--erp-border); z-index: 0; }
@media (max-width: 575.98px) { .erp-location-picker__map { height: 260px; } }
.erp-map-pin span {
    display: block; width: 30px; height: 30px;
    background: var(--erp-primary); border: 3px solid #fff;
    border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.erp-map-pin { background: none !important; border: 0 !important; }

/* WhatsApp group button */
.erp-btn-whatsapp {
    --theme-btn-color: #fff; --theme-btn-bg: #25d366; --theme-btn-border-color: #25d366;
    --theme-btn-hover-color: #fff; --theme-btn-hover-bg: #1ebe5b; --theme-btn-hover-border-color: #1ebe5b;
    --theme-btn-active-color: #fff; --theme-btn-active-bg: #1aa84f; --theme-btn-active-border-color: #1aa84f;
    font-weight: 500;
}