:root {
    /* Brand palette: teal is the primary action color, blue is the accent/link color */
    --pc-teal: #0d9488;
    --pc-teal-dark: #0f766e;
    --pc-teal-darker: #134e4a;
    --pc-teal-light: #ccfbf1;
    --pc-blue: #2563eb;
    --pc-blue-dark: #1d4ed8;
    --pc-blue-light: #dbeafe;

    /* Override Bootstrap's own theme variables so built-in utility
       classes (.btn-primary, .text-primary, .bg-primary, .border-primary,
       form focus rings, etc.) pick up the brand colors automatically. */
    --bs-primary: var(--pc-teal);
    --bs-primary-rgb: 13, 148, 136;
    --bs-link-color: var(--pc-blue);
    --bs-link-color-rgb: 37, 99, 235;
    --bs-link-hover-color: var(--pc-blue-dark);
    --bs-link-hover-color-rgb: 29, 78, 216;
}

body { background: #f4f7f7; }
#app-shell { min-height: 100vh; }

/* ---- Sidebar: deep teal instead of Bootstrap's default dark navy ---- */
.sidebar {
    width: 250px;
    min-width: 250px;
    background: linear-gradient(180deg, var(--pc-teal-darker) 0%, var(--pc-teal-dark) 100%) !important;
    min-height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    max-height: 100vh;
    overflow-y: auto;
}
.sidebar-brand { border-bottom-color: rgba(255,255,255,.15) !important; }
.sidebar .nav-link { padding: .5rem .75rem; border-radius: .375rem; font-size: .92rem; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background: rgba(255,255,255,.14); }
.nav-section-title { font-size: .72rem; text-transform: uppercase; color: rgba(255,255,255,.45); padding: .75rem .75rem .15rem; letter-spacing: .05em; }
.main-content { min-width: 0; }

/* ---- Buttons ---- */
.btn-primary {
    --bs-btn-bg: var(--pc-teal);
    --bs-btn-border-color: var(--pc-teal);
    --bs-btn-hover-bg: var(--pc-teal-dark);
    --bs-btn-hover-border-color: var(--pc-teal-dark);
    --bs-btn-active-bg: var(--pc-teal-dark);
    --bs-btn-active-border-color: var(--pc-teal-darker);
    --bs-btn-disabled-bg: var(--pc-teal);
    --bs-btn-disabled-border-color: var(--pc-teal);
}
.btn-outline-primary {
    --bs-btn-color: var(--pc-teal);
    --bs-btn-border-color: var(--pc-teal);
    --bs-btn-hover-bg: var(--pc-teal);
    --bs-btn-hover-border-color: var(--pc-teal);
    --bs-btn-active-bg: var(--pc-teal-dark);
    --bs-btn-active-border-color: var(--pc-teal-dark);
}
.btn-outline-secondary {
    --bs-btn-color: var(--pc-blue);
    --bs-btn-border-color: var(--pc-blue);
    --bs-btn-hover-bg: var(--pc-blue);
    --bs-btn-hover-border-color: var(--pc-blue);
    --bs-btn-active-bg: var(--pc-blue-dark);
    --bs-btn-active-border-color: var(--pc-blue-dark);
}

/* ---- Links, badges, nav-pills, progress bars, form focus ---- */
a { color: var(--pc-blue); }
a:hover { color: var(--pc-blue-dark); }
.badge.bg-primary, .bg-primary { background-color: var(--pc-teal) !important; }
.badge.bg-secondary { background-color: var(--pc-blue) !important; }
.text-primary { color: var(--pc-teal) !important; }
.nav-pills .nav-link.active, .nav-tabs .nav-link.active { color: #fff; background-color: var(--pc-teal) !important; border-color: var(--pc-teal); }
.page-item.active .page-link { background-color: var(--pc-teal); border-color: var(--pc-teal); }
.page-link { color: var(--pc-blue); }
.progress-bar { background-color: var(--pc-teal); }
.form-control:focus, .form-select:focus {
    border-color: var(--pc-teal);
    box-shadow: 0 0 0 .25rem rgba(13, 148, 136, .2);
}
.form-check-input:checked { background-color: var(--pc-teal); border-color: var(--pc-teal); }
.form-check-input:focus { box-shadow: 0 0 0 .25rem rgba(13, 148, 136, .2); }

/* ---- Cards ---- */
.kpi-card { border: none; border-radius: .75rem; box-shadow: 0 2px 10px rgba(15,118,110,.08); border-top: 3px solid var(--pc-teal); }
.kpi-card .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--pc-teal-dark); }
.kpi-card .kpi-label { font-size: .8rem; color: #6c757d; text-transform: uppercase; letter-spacing: .03em; }
.table-card { border: none; border-radius: .75rem; box-shadow: 0 2px 10px rgba(15,118,110,.06); }
.funnel-stage { padding: .5rem 1rem; margin-bottom: 4px; border-radius: .375rem; background: var(--pc-teal-light); color: var(--pc-teal-darker); }

/* ---- Table header + hover tint ---- */
.table thead th { color: var(--pc-teal-darker); border-bottom-width: 2px; }
.table-hover > tbody > tr:hover > * { background-color: var(--pc-blue-light); }

@media print {
    .sidebar, nav.navbar, .no-print { display: none !important; }
    .main-content { width: 100% !important; }
}
@media (max-width: 767.98px) {
    .sidebar { position: fixed; z-index: 1040; left: -260px; transition: left .2s; }
    .sidebar.show { left: 0; }
}