:root {
    --villa-top-dark: #427691;
    --villa-top-light: #78a9c4;
    --villa-accent: #f3d25d;
    --villa-line: #d9dee3;
    --villa-panel: #f8fbfd;
    --villa-text: #25485c;
    --villa-muted: #6c7f8d;
    --villa-highlight: #fff8bf;
    --villa-font-family: "Tahoma", "Segoe UI", "Arial", sans-serif;
    --villa-base-font-size: 16px;
    --villa-surface: rgba(255, 255, 255, 0.88);
    --villa-shadow-soft: 0 18px 45px rgba(39, 84, 110, 0.08);
    --villa-shadow-strong: 0 20px 50px rgba(23, 50, 73, 0.16);
    --villa-radius-lg: 22px;
    --villa-radius-md: 16px;
}

/* Force the font globally — not gated on `.admin-theme` class. Some pages
   (and some host environments where the body class is stripped by an
   intermediate proxy or template renderer) were inheriting the browser
   default font instead of Tahoma, making the host look noticeably
   different from local. */
html, body, button, input, select, textarea {
    font-family: "Tahoma", "Segoe UI", "Arial", sans-serif;
}

body.admin-theme {
    margin: 0;
    font-family: var(--villa-font-family);
    font-size: var(--villa-base-font-size);
    background:
        radial-gradient(circle at top left, rgba(243, 210, 93, 0.22), transparent 20%),
        radial-gradient(circle at top right, rgba(120, 169, 196, 0.18), transparent 26%),
        linear-gradient(180deg, #eef5f9 0%, #f7fafc 38%, #eef3f7 100%);
    color: #243746;
}

body.admin-theme.ltr-layout {
    font-family: var(--villa-font-family);
}

.admin-theme a {
    text-decoration: none;
}

.admin-topbar {
    background:
        linear-gradient(135deg, rgba(45, 96, 124, 0.96), rgba(67, 118, 145, 0.92)),
        var(--villa-top-dark);
    color: #fff;
    padding: 18px 28px;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 28px rgba(24, 53, 74, 0.16);
}

.admin-topbar-inner,
.admin-subbar-inner,
.admin-page-wrap {
    max-width: 1800px;
    margin: 0 auto;
}

.admin-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

.language-switcher {
    display: flex;
    gap: 8px;
}

.language-switcher a {
    color: #fff;
    font-size: 0.95rem;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    opacity: 0.95;
}

.language-switcher a.active {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.22);
}

.admin-brand {
    font-size: 2.1rem;
    color: var(--villa-accent);
    line-height: 1;
    display: none;
}

.admin-top-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.95rem;
}

.admin-top-links a,
.admin-top-links span {
    color: #fff;
    opacity: 0.96;
}

/* Gantt topbar button */
.admin-top-links .gantt-top-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    border-radius: 10px;
    font-weight: 600;
    transition: background-color 0.12s ease, transform 0.08s ease;
}
.admin-top-links .gantt-top-button:hover {
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
    transform: translateY(-1px);
}


.admin-subbar {
    background:
        linear-gradient(180deg, rgba(120, 169, 196, 0.96), rgba(106, 158, 187, 0.96)),
        var(--villa-top-light);
    color: #fff;
    padding: 14px 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-subbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.admin-breadcrumbs {
    color: #f6fbff;
    font-size: 0.98rem;
}

.admin-page-wrap {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 0;
    align-items: start;
}

.admin-sidebar {
    background: rgba(255, 255, 255, 0.72);
    border-left: 1px solid var(--villa-line);
    min-height: calc(100vh - 125px);
    backdrop-filter: blur(12px);
}

.ltr-layout .admin-sidebar {
    border-left: 0;
    border-right: 1px solid var(--villa-line);
}

.admin-sidebar-note {
    padding: 10px 16px;
    border-bottom: 1px solid var(--villa-line);
    color: #8a6d3b;
    font-size: 0.95rem;
    background: #fcfcfc;
    display: none;
}

.admin-menu-group-title {
    background: var(--villa-top-light);
    color: #fff;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 0.95rem;
    display: none;
}

.admin-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--villa-line);
    color: #2f6684;
    font-size: 1rem;
    background: transparent;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-menu-item.active {
    background: var(--villa-highlight);
    box-shadow: inset 0 0 0 1px rgba(211, 171, 37, 0.18);
}

.admin-menu-item:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.72);
}

.admin-menu-item small {
    color: #6db33f;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: 700;
}

.admin-content {
    background: transparent;
    min-height: calc(100vh - 125px);
    padding: 28px 36px 40px;
}

.admin-content-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.admin-page-title {
    color: #50697a;
    font-size: 2.15rem;
    font-weight: 400;
    margin: 0;
}

.admin-page-subtitle {
    color: var(--villa-muted);
    margin-top: 8px;
    font-size: 0.98rem;
}

.admin-quick-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-quick-stat {
    min-width: 140px;
    border: 1px solid var(--villa-line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 248, 251, 0.95) 100%);
    padding: 12px 14px;
    text-align: center;
    border-radius: var(--villa-radius-md);
    box-shadow: var(--villa-shadow-soft);
}

.admin-quick-stat strong {
    display: block;
    color: var(--villa-top-dark);
    font-size: 1.2rem;
}

.admin-quick-stat span {
    color: var(--villa-muted);
    font-size: 0.9rem;
}

.admin-panel {
    border: 1px solid var(--villa-line);
    background: var(--villa-surface);
    box-shadow: var(--villa-shadow-soft);
    border-radius: var(--villa-radius-lg);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.admin-panel-header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--villa-line);
    background: linear-gradient(180deg, #ffffff, #f8fbfd);
    color: var(--villa-text);
    font-weight: 700;
}

.admin-panel-body {
    padding: 18px;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.admin-stat-card {
    border: 1px solid var(--villa-line);
    background: linear-gradient(180deg, #ffffff 0%, #f6fafc 100%);
    padding: 18px;
    border-radius: var(--villa-radius-md);
    box-shadow: var(--villa-shadow-soft);
}

.admin-stat-card .label {
    color: var(--villa-muted);
    font-size: 0.9rem;
}

.admin-stat-card .value {
    color: var(--villa-top-dark);
    font-size: 2rem;
    margin-top: 8px;
}

.admin-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.admin-form-grid .full {
    grid-column: 1 / -1;
}

.admin-theme .form-control,
.admin-theme .form-select {
    border-radius: 12px;
    border-color: #c8d0d8;
    min-height: 46px;
    box-shadow: none !important;
}

.admin-theme textarea.form-control {
    min-height: 110px;
}

.admin-table {
    width: 100%;
}

.admin-table th {
    background: #f5f9fc;
    color: var(--villa-text);
    white-space: nowrap;
    font-size: 0.92rem;
}

.admin-table td,
.admin-table th {
    border-color: var(--villa-line);
    vertical-align: top;
}

.admin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.admin-note {
    color: var(--villa-muted);
    font-size: 0.92rem;
}

.workspace-mode-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid var(--villa-line);
    background: linear-gradient(135deg, #f7fbfe 0%, #edf5fa 100%);
    border-radius: var(--villa-radius-md);
    box-shadow: var(--villa-shadow-soft);
}

.workspace-mode-title {
    color: #31566b;
    font-weight: 700;
    margin: 0;
}

.workspace-mode-note {
    color: var(--villa-muted);
    font-size: 0.92rem;
    margin-top: 4px;
}

.workspace-mode-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.workspace-mode-btn {
    border: 1px solid #bfd0db;
    background: #fff;
    color: #32576d;
    padding: 9px 14px;
    min-width: 120px;
    font-weight: 700;
}

.workspace-mode-btn.active {
    background: var(--villa-top-dark);
    border-color: var(--villa-top-dark);
    color: #fff;
}

body.workspace-mobile .admin-page-wrap {
    grid-template-columns: 1fr;
}

body.workspace-mobile .admin-sidebar {
    display: none;
}

body.workspace-mobile .admin-content {
    min-height: auto;
    padding: 18px 14px 26px;
}

body.workspace-mobile .admin-topbar-inner,
body.workspace-mobile .admin-subbar-inner,
body.workspace-mobile .admin-content-header,
body.workspace-mobile .workspace-mode-bar {
    flex-direction: column;
    align-items: stretch;
}

body.workspace-mobile .admin-quick-stats,
body.workspace-mobile .admin-stats-grid,
body.workspace-mobile .admin-form-grid {
    grid-template-columns: 1fr;
}

@media (max-width: 1199.98px) {
    .admin-page-wrap {
        grid-template-columns: 1fr;
    }

    .admin-sidebar {
        min-height: auto;
        border-left: 0;
        border-bottom: 1px solid var(--villa-line);
        padding: 12px 14px 6px;
        background: transparent;
        backdrop-filter: none;
    }

    .admin-menu-group {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
    }

    .admin-menu-group-title,
    .admin-sidebar-note {
        display: none;
    }

    .admin-menu-item {
        min-width: max-content;
        border: 1px solid #dbe5ed;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 10px 24px rgba(39, 84, 110, 0.08);
    }

    .admin-menu-item small {
        display: none;
    }

    .admin-content {
        min-height: auto;
    }

    .admin-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .admin-topbar-inner,
    .admin-subbar-inner,
    .admin-content-header,
    .workspace-mode-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-topbar {
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    .admin-quick-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .admin-content {
        padding: 18px 14px 28px;
    }

    .admin-topbar,
    .admin-subbar {
        padding-right: 16px;
        padding-left: 16px;
    }

    .admin-page-title {
        font-size: 1.55rem;
        line-height: 1.25;
    }

    .admin-form-grid,
    .admin-stats-grid {
        grid-template-columns: 1fr;
    }

    .workspace-mode-actions {
        width: 100%;
    }

    .workspace-mode-btn {
        flex: 1 1 0;
    }

    .admin-topbar-inner {
        gap: 14px;
    }

    .language-switcher {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .language-switcher a {
        flex: 1 1 auto;
        text-align: center;
        min-width: 92px;
    }

    .admin-top-links {
        justify-content: center;
        text-align: center;
    }

    .admin-subbar {
        margin-top: -10px;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        box-shadow: 0 12px 25px rgba(69, 111, 138, 0.14);
    }

    .admin-breadcrumbs {
        text-align: center;
        font-size: 0.92rem;
    }

    .admin-quick-stats {
        grid-template-columns: 1fr;
    }

    .admin-quick-stat,
    .admin-stat-card,
    .workspace-mode-bar,
    .admin-panel {
        border-radius: 18px;
    }

    .admin-panel-body {
        padding: 16px 14px;
    }

    .admin-theme .btn,
    .admin-theme .form-control,
    .admin-theme .form-select {
        min-height: 48px;
    }

    .admin-theme .table-responsive {
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: inset 0 0 0 1px rgba(217, 222, 227, 0.9);
        padding: 6px;
    }
}

@media (max-width: 575.98px) {
    body.admin-theme {
        font-size: calc(var(--villa-base-font-size) - 1px);
    }

    .admin-content {
        padding: 14px 12px 24px;
    }

    .admin-page-title {
        font-size: 1.4rem;
    }

    .admin-page-subtitle,
    .admin-note,
    .workspace-mode-note {
        font-size: 0.9rem;
        line-height: 1.7;
    }

    .admin-menu-group {
        gap: 8px;
    }

    .admin-menu-item {
        padding: 10px 14px;
        font-size: 0.92rem;
    }
}


.hero-card {
    border: 1px solid var(--villa-line);
    border-radius: calc(var(--villa-radius-lg) + 2px);
    background: linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(242,248,252,0.96) 100%);
    box-shadow: var(--villa-shadow-soft);
    padding: 22px;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 16px;
}

.hero-copy h2,
.hero-copy h1 {
    margin: 0;
    color: var(--villa-text);
}

.hero-copy p {
    color: var(--villa-muted);
    margin: 10px 0 0;
    line-height: 1.8;
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

/* Hero KPI grids fall back to 2×2 — wider tiles so monetary values like
   "200,000.00" sit comfortably without truncation. Other .kpi-grid uses
   (outside .hero-card) keep their 4-column layout. */
.hero-card .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 768px) {
    .hero-card .kpi-grid {
        grid-template-columns: 1fr;
    }
}

.kpi-card {
    border: 1px solid var(--villa-line);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 10px 24px rgba(39, 84, 110, 0.06);
}

.kpi-card .label {
    display: block;
    color: var(--villa-muted);
    font-size: 0.82rem;
    margin-bottom: 8px;
}

.kpi-card .value {
    color: var(--villa-top-dark);
    font-size: 1.3rem;
    font-weight: 700;
}

.progress-soft {
    height: 10px;
    background: #eaf1f6;
    border-radius: 999px;
    overflow: hidden;
}

.progress-soft > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--villa-top-dark), var(--villa-top-light));
}

.stepper-shell {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.step-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--villa-line);
    border-radius: 16px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 10px 20px rgba(39,84,110,0.05);
}

.step-chip .step-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--villa-top-dark), var(--villa-top-light));
    color: #fff;
    font-weight: 700;
    flex: 0 0 auto;
}

.step-chip strong {
    display: block;
    color: var(--villa-text);
    font-size: 0.95rem;
}

.step-chip span:last-child {
    color: var(--villa-muted);
    font-size: 0.82rem;
}

.dashboard-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr);
    gap: 16px;
}

.chip-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #eef5fa;
    color: #2f6684;
    font-size: 0.84rem;
    font-weight: 700;
}

.info-list {
    display: grid;
    gap: 10px;
}

.info-list .item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(217, 222, 227, 0.7);
}

.info-list .item:last-child {
    border-bottom: 0;
}

.info-list .label {
    color: var(--villa-muted);
}

.info-list .value {
    color: var(--villa-text);
    font-weight: 700;
    text-align: end;
}

.alert-soft {
    border: 1px solid var(--villa-line);
    background: rgba(255,255,255,0.9);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 8px 20px rgba(39,84,110,0.05);
}

@media (max-width: 991.98px) {
    .hero-grid,
    .kpi-grid,
    .stepper-shell,
    .dashboard-grid-2 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767.98px) {
    .hero-grid,
    .kpi-grid,
    .stepper-shell,
    .dashboard-grid-2 {
        grid-template-columns: 1fr;
    }
}


.project-context-nav {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 18px;
    padding:12px;
    border:1px solid var(--villa-line);
    border-radius:16px;
    background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(243,248,251,.96));
    box-shadow:0 10px 24px rgba(31, 88, 116, .07);
}
.project-context-link {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:10px 14px;
    border-radius:12px;
    border:1px solid rgba(31,88,116,.12);
    color:var(--villa-top-dark);
    text-decoration:none;
    font-weight:700;
    background:#fff;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.project-context-link:hover {
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(31,88,116,.10);
    border-color:rgba(31,88,116,.25);
}
.project-context-link.active {
    color:#fff;
    border-color:transparent;
    background:linear-gradient(135deg, var(--villa-top-dark), #3b82a6);
    box-shadow:0 14px 30px rgba(31,88,116,.22);
}
.project-context-link small {
    color:inherit;
    opacity:.74;
    font-weight:600;
}
.filter-toolbar {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    margin:14px 0 18px;
    padding:12px 14px;
    border:1px solid var(--villa-line);
    border-radius:14px;
    background:rgba(255,255,255,.84);
}
.filter-toolbar .form-control,
.filter-toolbar .form-select {
    max-width:260px;
}
.inline-kpi-strip {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin:0 0 18px;
}
.inline-kpi-card {
    padding:14px 16px;
    border-radius:14px;
    border:1px solid var(--villa-line);
    background:linear-gradient(135deg, rgba(255,255,255,.97), rgba(245,249,252,.95));
}
.inline-kpi-card span {
    display:block;
    color:var(--villa-muted);
    font-size:.82rem;
    font-weight:700;
}
.inline-kpi-card strong {
    display:block;
    margin-top:8px;
    color:var(--villa-top-dark);
    font-size:1.28rem;
}
.soft-section-note {
    padding:12px 14px;
    border-radius:12px;
    background:rgba(59,130,166,.08);
    color:var(--villa-top-dark);
    border:1px solid rgba(59,130,166,.16);
}
@media (max-width: 991.98px) {
    .inline-kpi-strip { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .project-context-nav { padding:10px; }
    .project-context-link { flex:1 1 calc(50% - 10px); }
    .inline-kpi-strip { grid-template-columns:1fr; }
    .filter-toolbar .form-control, .filter-toolbar .form-select { max-width:none; width:100%; }
}

/* Phase 4 design system additions */
.wizard-anchor-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.wizard-anchor-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: rgba(30, 58, 95, 0.08);
    color: #1E3A5F;
    text-decoration: none;
    font-weight: 700;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.wizard-anchor-link:hover,
.wizard-anchor-link.active {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.95), rgba(59, 130, 166, 0.88));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(30, 58, 95, 0.18);
}

.soft-list {
    display: grid;
    gap: 0.75rem;
}

.soft-list-item {
    display: block;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: rgba(248, 250, 252, 0.94);
    border: 1px solid rgba(226, 232, 240, 0.95);
    color: #0F172A;
    text-decoration: none;
}

.soft-list-item strong,
.soft-list-item span {
    display: block;
}

.soft-list-item span {
    color: #64748B;
    margin-top: 0.25rem;
}

.soft-list-item.linked:hover {
    border-color: rgba(59, 130, 166, 0.45);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
}

.governance-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
}

.governance-card {
    padding: 1rem;
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
}

.governance-card span {
    display: block;
    color: #64748B;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
}

.governance-card strong {
    display: block;
    color: #1E3A5F;
    font-size: 1.8rem;
    line-height: 1.2;
}

.governance-card small {
    display: block;
    margin-top: 0.4rem;
    color: #64748B;
}

.compact-single-column {
    display: block;
}

.module-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.module-summary-card {
    padding: 1rem;
    border-radius: 18px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.module-summary-card span {
    display: block;
    color: #64748B;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
}

.module-summary-card strong {
    color: #1E3A5F;
    font-size: 1.35rem;
    line-height: 1.2;
}

.module-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.module-status {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1px solid transparent;
    background: #eef2ff;
    color: #1e3a5f;
}

.module-status.status-draft,
.module-status.status-open {
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.18);
}

.module-status.status-submitted,
.module-status.status-in_review {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.18);
}

.module-status.status-approved,
.module-status.status-closed {
    background: rgba(22, 163, 74, 0.12);
    color: #15803d;
    border-color: rgba(22, 163, 74, 0.18);
}

.module-status.status-rejected,
.module-status.severity-high {
    background: rgba(220, 38, 38, 0.12);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.18);
}

.module-status.severity-medium {
    background: rgba(245, 158, 11, 0.14);
    color: #b45309;
    border-color: rgba(245, 158, 11, 0.18);
}

.module-status.severity-low {
    background: rgba(14, 165, 233, 0.14);
    color: #0369a1;
    border-color: rgba(14, 165, 233, 0.18);
}


.planning-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.planning-card {
    border: 1px solid var(--villa-line);
    background: linear-gradient(135deg, #ffffff 0%, #f6fafc 100%);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 14px 28px rgba(66, 118, 145, 0.08);
}

.planning-card span {
    display: block;
    color: var(--villa-muted);
    margin-bottom: 8px;
    font-weight: 700;
}

.planning-card strong {
    color: var(--villa-top-dark);
    font-size: 1.25rem;
}

.checkbox-chip input {
    margin-inline-end: 6px;
}

.certificate-status-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}


.phase7-kpi-strip {display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:1rem}
.phase7-kpi-strip .inline-kpi-card,.timeline-shell{background:rgba(255,255,255,.88);border:1px solid rgba(148,163,184,.2);border-radius:20px}
.timeline-shell{padding:18px}
.resource-type-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .65rem;border-radius:999px;background:rgba(59,130,166,.12);color:#1e3a5f;font-size:.82rem;font-weight:700}


/* Phase 8 */
.alerts-stack, .search-results-stack, .timeline-stack { display:grid; gap:14px; }
.alert-center-card, .search-result-card, .timeline-item-card {
  display:block; background:rgba(255,255,255,0.82); border:1px solid rgba(148,163,184,0.18); border-radius:18px; padding:16px 18px; text-decoration:none; color:inherit; box-shadow:0 14px 30px rgba(15,23,42,0.08); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.alert-center-card strong, .search-result-card strong, .timeline-item-card strong { display:block; font-size:1rem; margin-bottom:6px; }
.alert-center-card p, .search-result-card small, .timeline-item-card p { margin:0; color:#475569; }
.alert-center-card.severity-danger { border-inline-start:4px solid #dc2626; }
.alert-center-card.severity-warning { border-inline-start:4px solid #f59e0b; }
.alert-center-card.severity-success { border-inline-start:4px solid #16a34a; }
.alert-center-card.severity-info { border-inline-start:4px solid #3b82f6; }
.search-shell { background:rgba(255,255,255,0.68); border:1px solid rgba(148,163,184,0.18); border-radius:18px; padding:14px; }
.search-result-card span { display:block; font-size:.83rem; color:#0f766e; margin-bottom:4px; }
.search-result-card:hover, .timeline-item-card:hover { transform:translateY(-2px); box-shadow:0 18px 34px rgba(15,23,42,0.12); border-color:rgba(59,130,246,0.35); }
.timeline-item-card { display:grid; grid-template-columns:18px 1fr; align-items:start; gap:14px; }
.timeline-dot { width:12px; height:12px; border-radius:999px; margin-top:8px; background:linear-gradient(135deg,#1e3a5f,#3b82a6); box-shadow:0 0 0 6px rgba(59,130,246,0.14); }
.timeline-item-card.type-payment .timeline-dot { background:linear-gradient(135deg,#14532d,#22c55e); }
.timeline-item-card.type-variation .timeline-dot { background:linear-gradient(135deg,#92400e,#f59e0b); }
.timeline-item-card.type-snag .timeline-dot { background:linear-gradient(135deg,#7f1d1d,#ef4444); }
.timeline-item-card.type-report .timeline-dot { background:linear-gradient(135deg,#312e81,#6366f1); }
.project-tool-grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.project-tool-card { background:rgba(255,255,255,0.82); border:1px solid rgba(148,163,184,0.18); border-radius:20px; padding:18px; text-decoration:none; color:inherit; box-shadow:0 14px 28px rgba(15,23,42,0.08); }
.project-tool-card strong { display:block; margin-bottom:6px; }
.project-tool-card small { color:#64748b; }

.delete-project-warning-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(3, 7, 18, 0.75);
    z-index: 1300;
}

.delete-project-warning-overlay.is-visible {
    display: flex;
}

.delete-project-warning-panel {
    width: min(460px, 100%);
    background: #fff;
    border-radius: 22px;
    padding: 18px 22px;
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.35);
    border: 1px solid rgba(31, 88, 116, 0.18);
}

.delete-project-warning-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.delete-project-warning-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--villa-top-dark);
}

.delete-project-warning-body {
    margin-bottom: 18px;
    color: #475569;
    line-height: 1.5;
}

.delete-project-warning-target {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: #1e293b;
}

.delete-project-warning-name {
    font-size: 1rem;
    color: var(--villa-top-dark);
    font-weight: 700;
}

.delete-project-warning-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

body.delete-project-warning-active {
    overflow: hidden;
}

/* ============================================================================
 * Design refresh 2026-05-19
 *
 * Brings every page using `.hero-card`, `.kpi-card`, `.project-context-nav`,
 * `.inline-kpi-card`, and standard tables up to the same visual language as
 * the polished dashboards and the schedule report. Pure CSS — no markup
 * changes required. Each rule preserves the existing layout (grid + spacing)
 * but updates colors, typography, and accent borders.
 * ========================================================================*/

/* Hero card → dark gradient header matching project_dashboard.php. */
.hero-card {
    background: linear-gradient(135deg, #1f405f 0%, #3b82a6 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    padding: 24px 28px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
    position: relative;
}
.hero-card .hero-copy h1,
.hero-card .hero-copy h2,
.hero-card .hero-title {
    color: #fff;
    font-weight: 800;
}
.hero-card .hero-copy p,
.hero-card .hero-text {
    color: rgba(255, 255, 255, 0.85);
    margin: 8px 0 0;
}
.hero-card .eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.hero-card .hero-badges {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.hero-card .chip-badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* KPI cards floating on top of the hero gradient stay white for contrast. */
.hero-card .kpi-card,
.kpi-card {
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    min-width: 0;         /* allow shrinking inside grid */
    overflow: hidden;     /* protect against value overflow */
}
.kpi-card .label {
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-card .value {
    color: #0f172a;
    /* Outside hero, tiles share 4 columns so keep value compact (max 19px).
       Hero KPIs use 2×2 layout (see .hero-card .kpi-card .value below)
       and can afford a larger value font. */
    font-size: clamp(15px, 1.3vw, 19px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

/* Hero tiles have ~2× the width of standard kpi-card tiles, so the value
   can be larger and more visually impactful. */
.hero-card .kpi-card .value {
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.15;
}
.hero-card .kpi-card {
    padding: 14px 18px;
}
.hero-card .kpi-card .label {
    font-size: 12px;
    margin-bottom: 6px;
}
/* Semantic-color variants. Add `data-tone="critical"` etc. on existing
   .kpi-card elements without touching layout. */
.kpi-card[data-tone="critical"]  .value { color: #b91c1c; }
.kpi-card[data-tone="delayed"]   .value { color: #b45309; }
.kpi-card[data-tone="completed"] .value { color: #15803d; }
.kpi-card[data-tone="progress"]  .value { color: #1d4ed8; }
.kpi-card[data-tone="purple"]    .value { color: #5b21b6; }

/* Inline KPI strips below alerts — match the new look. */
.inline-kpi-card {
    border: 1px solid var(--villa-line, #e2e8f0);
    background: #f8fafc;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.inline-kpi-card span {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inline-kpi-card strong {
    font-size: clamp(13px, 1.05vw, 16px);
    color: #0f172a;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

/* Project context navigation — convert into the segmented-button bar
   the dashboards use. */
.project-context-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-top: 14px;
}
.project-context-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 6px 12px;
    background: #fff;
    color: #1f405f;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.15s;
    min-width: auto;
}
.project-context-link:hover {
    background: #1f405f;
    color: #fff;
    border-color: #1f405f;
    text-decoration: none;
}
.project-context-link:hover small { color: rgba(255, 255, 255, 0.75); }
.project-context-link.active {
    background: linear-gradient(135deg, #1f405f, #3b82a6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(31, 64, 95, 0.25);
}
.project-context-link.active small { color: rgba(255, 255, 255, 0.7); }
.project-context-link small {
    font-size: 10px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-top: 1px;
}

/* Section headings — gold accent border matching the dashboards. */
.section-card h2,
.admin-card h2,
.card-body > h2:not(.modal-title) {
    border-inline-start: 4px solid #d4a017;
    padding-inline-start: 10px;
    color: #1f405f;
    font-weight: 800;
}

/* Bootstrap card frame upgrade for project pages. */
.card.shadow-sm,
.card.section-card {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05) !important;
}

/* Tables in project pages — themed header matching the dashboards. */
.table.project-table thead th,
.card .table-bordered thead th,
.card .table thead th {
    background: #1f405f;
    color: #fff;
    font-weight: 700;
    border-color: #1f405f;
}
.card .table tbody tr:nth-child(even) td { background: #f8fafc; }

/* Page hero stats block used by manage_project_tasks.php */
.task-page-hero,
.task-page-hero-copy {
    color: #fff;
}
.task-page-hero {
    background: linear-gradient(135deg, #1f405f 0%, #3b82a6 100%);
    border-radius: 10px;
    padding: 22px 28px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
}
.task-page-hero-title { color: #fff; font-weight: 800; }
.task-page-hero-text  { color: rgba(255, 255, 255, 0.85); }
.task-page-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.task-page-stat {
    background: rgba(255, 255, 255, 0.97);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: hidden;
}
.task-page-stat span {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-page-stat strong {
    font-size: clamp(14px, 1.15vw, 18px);
    color: #0f172a;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

/* Status pills — make Bootstrap badges respect the new palette. */
.badge.text-bg-danger,
.badge.bg-danger { background-color: #fee2e2 !important; color: #b91c1c !important; font-weight: 700; }
.badge.text-bg-warning,
.badge.bg-warning { background-color: #fef3c7 !important; color: #b45309 !important; font-weight: 700; }
.badge.text-bg-success,
.badge.bg-success { background-color: #dcfce7 !important; color: #15803d !important; font-weight: 700; }
.badge.text-bg-info,
.badge.bg-info { background-color: #dbeafe !important; color: #1d4ed8 !important; font-weight: 700; }
.badge.text-bg-secondary,
.badge.bg-secondary { background-color: #e5e7eb !important; color: #475569 !important; font-weight: 700; }

/* Bootstrap alerts repainted with the new tones. */
.alert-success { background: #dcfce7; color: #15803d; border-color: #86efac; }
.alert-danger  { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.alert-warning { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.alert-info    { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; }

/* Primary buttons reflect the new gradient. */
.btn-primary {
    background: linear-gradient(135deg, #1f405f, #3b82a6);
    border-color: transparent;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #142a40, #2563eb);
    border-color: transparent;
}
.btn-outline-primary {
    color: #1f405f;
    border-color: #1f405f;
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: #1f405f;
    color: #fff;
}