:root {
    font-family: "Segoe UI", Arial, sans-serif;
    color: #17233c;
    background: #f3f6fb;
    font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #0758d6; text-decoration: none; }
a:hover { text-decoration: underline; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px max(20px, calc((100% - 1180px) / 2)); color: #fff; background: #0a3278; }
.brand { color: #fff; font-size: 19px; font-weight: 700; }
.topbar nav { display: flex; align-items: center; gap: 18px; }
.topbar nav a, .nav-button { color: #fff; font: inherit; }
.topbar form { margin: 0; }
.nav-button { padding: 0; border: 0; background: none; cursor: pointer; }
.user-label { color: #cfe0ff; font-size: 13px; }
.container { width: min(1180px, calc(100% - 32px)); margin: 28px auto 60px; }
.page-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
h1 { margin: 0 0 6px; font-size: 28px; }
h2 { margin: 0 0 16px; font-size: 18px; }
p { line-height: 1.55; }
.eyebrow { margin: 0 0 6px; color: #557095; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.muted { color: #687891; font-size: 13px; }
.panel, .auth-card { margin-top: 20px; padding: 22px; border: 1px solid #dfe6f0; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px #163c7110; }
.lead-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
label { display: grid; gap: 6px; color: #3a4b67; font-size: 13px; font-weight: 600; }
input, select, textarea { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid #cbd6e5; border-radius: 7px; color: #17233c; background: #fff; font: inherit; font-size: 14px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #8ab3ff; border-color: #3977df; }
textarea { resize: vertical; }
.wide { grid-column: 1 / -1; }
button { min-height: 40px; padding: 9px 16px; border: 0; border-radius: 7px; color: #fff; background: #0758d6; font: inherit; font-weight: 600; cursor: pointer; }
button:hover { background: #0649b1; }
button.secondary { color: #174079; background: #eaf1fb; }
.small-button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
.notice { padding: 11px 14px; border-radius: 8px; }
.notice.success { color: #075b38; background: #e8f7ef; }
.notice.error { color: #8d2924; background: #fff0ef; }
.notice ul { margin-bottom: 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters input { width: 210px; }
.filters select { width: 150px; }
.two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.two-column .panel { margin-top: 20px; }
.report-filters { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.report-filters label { min-width: 140px; flex: 1; }
.filter-actions { display: flex; gap: 8px; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.metric-card { display: grid; gap: 10px; padding: 18px; border: 1px solid #dfe6f0; border-radius: 10px; background: #fff; }
.metric-card span { color: #687891; font-size: 13px; }
.metric-card strong { color: #0a3278; font-size: 27px; }
.table-wrap { overflow-x: auto; margin-top: 16px; }
table { width: 100%; border-collapse: collapse; text-align: left; }
th, td { padding: 12px 10px; border-bottom: 1px solid #e8edf4; vertical-align: top; font-size: 13px; }
th { color: #63748c; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.empty { padding: 28px; color: #687891; text-align: center; }
.preserve-lines { white-space: pre-line; }
.stack-form { display: grid; gap: 16px; margin-top: 18px; }
.stack-form button { justify-self: start; }
.checkbox-label { display: flex; align-items: center; gap: 8px; }
.checkbox-label input { width: 16px; min-height: 16px; }
.auth-card { width: min(420px, 100%); margin: 8vh auto; padding: 28px; }
.import-panel { max-width: 760px; }
.import-panel h1 { margin-bottom: 12px; }
.import-panel code { padding: 2px 5px; border-radius: 4px; background: #eef2f8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
nav[aria-label="Pagination Navigation"] { display: flex; justify-content: center; gap: 10px; padding-top: 18px; }
@media (max-width: 800px) {
    .topbar { align-items: flex-start; flex-direction: column; padding: 14px 18px; }
    .topbar nav { flex-wrap: wrap; gap: 14px; }
    .lead-form { grid-template-columns: 1fr; }
    .wide { grid-column: auto; }
    .section-heading { align-items: stretch; flex-direction: column; }
    .filters input, .filters select { width: 100%; }
    .two-column { grid-template-columns: 1fr; gap: 0; }
    .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-filters { align-items: stretch; flex-direction: column; }
    .filter-actions { flex-wrap: wrap; }
}

/* AdminLTE integration: keep CRM forms and tables within the responsive shell. */
body { font-family: "Segoe UI", Arial, sans-serif; background: #f3f6fb; color: #17233c; }
.app-main { min-width: 0; background: #f3f6fb; }
.crm-content { width: 100%; max-width: 1500px; margin: 0 auto; padding: 28px 20px 48px; }
.app-header { min-height: 70px; border-bottom: 1px solid #e1e7ef; }
.app-header .container-fluid { gap: 16px; }
.sidebar-toggle { padding: 5px 12px; color: #52627b; background: transparent; font-size: 23px; }
.sidebar-toggle:hover { color: #0758d6; background: #edf3fc; }
.header-title { font-size: 15px; font-weight: 600; }
.header-user { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; }
.header-user small { display: block; color: #687891; font-size: 11px; }
.user-avatar, .brand-mark { display: inline-flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 9px; background: #e8efff; color: #0758d6; font-weight: 700; }
.app-sidebar { --bs-dark-rgb: 20, 32, 54; }
.sidebar-brand { min-height: 70px; justify-content: flex-start; padding-left: 20px; border-color: #ffffff15; }
.sidebar-brand .brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { flex-shrink: 0; background: #3478f6; color: white; font-size: 13px; }
.brand-text { color: white; font-size: 16px; font-weight: 650; }
.sidebar-caption { display: block; margin: 24px 14px 12px; color: #93a4be; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.sidebar-menu .nav-link { gap: 12px; margin-bottom: 6px; padding: 12px 16px; border-radius: 7px; color: #c6d0e0; }
.sidebar-menu .nav-link:hover { background: #ffffff0d; text-decoration: none; color: white; }
.sidebar-menu .nav-link.active { color: #fff; background: #2563eb; }
.sidebar-menu .nav-icon { display: inline-flex; width: 22px; justify-content: center; font-style: normal; font-size: 20px; }
.sidebar-account { margin-top: 36px; padding: 0 14px 20px; border-top: 1px solid #ffffff15; }
.sidebar-account .sidebar-caption { margin-left: 0; }
.sidebar-account p { color: #b5c3d7; overflow-wrap: anywhere; font-size: 12px; }
.signout-button { width: 100%; text-align: left; background: #ffffff0d; color: #d7e1f0; font-size: 13px; }
.signout-button:hover { background: #ffffff1a; }
.app-footer { font-size: 12px; color: #687891; padding: 16px 24px; }
.guest-header { padding: 20px 28px; background: #142036; }
.crm-guest .app-wrapper { display: block; }
.crm-guest .crm-content { max-width: 1180px; }
.panel { border-radius: 9px; }
button:focus-visible, a:focus-visible { outline: 3px solid #8ab3ff; outline-offset: 3px; }
@media (max-width: 991.98px) { .crm-content { padding: 22px 12px 36px; } }
@media (max-width: 480px) { .header-user small { display: none; } .header-title { display: none; } .panel { padding: 16px; } .page-heading { align-items: flex-start; flex-wrap: wrap; } }

/* Fixed navigation and a brighter sales workspace. */
:root { --lte-sidebar-width: 260px; }
body.layout-fixed .app-sidebar { position: fixed; inset: 0 auto 0 0; height: 100dvh; max-height: 100dvh; background: linear-gradient(165deg, #24266a 0%, #34308c 50%, #174b81 100%) !important; }
body.layout-fixed .app-sidebar .sidebar-wrapper { height: calc(100dvh - 70px); overflow-x: hidden; overflow-y: auto; padding-bottom: 20px; }
body.layout-fixed .app-header { position: sticky; top: 0; background: #fff !important; box-shadow: 0 3px 18px #3b36900a; }
@media (min-width: 992px) {
    body.layout-fixed .app-wrapper { grid-template-columns: var(--lte-sidebar-width) minmax(0, 1fr); transition: grid-template-columns .3s ease; }
    body.layout-fixed.sidebar-collapse .app-wrapper { grid-template-columns: 0 minmax(0, 1fr); }
}
.app-main { background: radial-gradient(ellipse at top right, #dceeff 0%, transparent 50%), linear-gradient(135deg, #f3f0ff, #f0f9fc); }
.sidebar-brand { background: #ffffff08; }
.brand-mark { background: linear-gradient(135deg, #ffbd59, #ff8066); color: #32225d; box-shadow: 0 4px 14px #0002; }
.sidebar-caption { color: #bec7f5; }
.sidebar-menu .nav-link { color: #e0e5ff; }
.sidebar-menu .nav-link.active { background: linear-gradient(110deg, #7762ed, #467fe7); box-shadow: 0 5px 16px #12134540; }
.sidebar-menu .nav-icon { width: 32px; height: 32px; align-items: center; border-radius: 9px; background: #ffffff12; color: #bfcaff; }
.sidebar-menu .nav-item:nth-child(2) .nav-icon { color: #75efd9; background: #2dd4bf22; }
.sidebar-menu .nav-item:nth-child(3) .nav-icon { color: #ffd98a; background: #fbbf2422; }
.sidebar-menu .nav-item:nth-child(4) .nav-icon { color: #ffb5d9; background: #f472b622; }
.sidebar-menu .nav-item:nth-child(5) .nav-icon { color: #a7e6ff; background: #38bdf822; }
.sidebar-menu .nav-link.active .nav-icon { color: white; background: #ffffff22; }
.user-avatar { color: #6d3dc1; background: #eee4ff; }
.page-heading { padding: 24px; border: 1px solid #ffffffb3; border-radius: 16px; background: linear-gradient(110deg, #ece4ff, #e1f2ff 65%, #d9f8f0); box-shadow: 0 6px 24px #55489708; }
.page-heading h1 { color: #34276e; font-weight: 750; }
.page-heading .eyebrow { color: #6753a5; }
.page-heading .muted { margin-bottom: 0; }
.panel { border-color: #e3e2f4; border-top: 3px solid #8672e8; box-shadow: 0 6px 24px #4b39800a; border-radius: 12px; }
.panel:nth-of-type(even) { border-top-color: #28b8ac; }
.panel h2 { color: #49357c; }
button { background: #7152d6; box-shadow: 0 3px 8px #7152d61a; }
button:hover { background: #5b3cbd; }
button.secondary { background: #e5f6f2; color: #08796b; box-shadow: none; }
input:focus, select:focus, textarea:focus { outline-color: #c8b5fb; border-color: #9370e5; }
.table-wrap { border: 1px solid #e9e5f5; border-radius: 9px; }
th { background: #f0ecfb; color: #65518e; }
tbody tr:nth-child(even) { background: #faf9ff; }
tbody tr:hover { background: #edf7fc; }
.metric-card { --metric-accent: #7251ce; --metric-bg: #f0eaff; border: 1px solid #e7e0f6; border-top: 4px solid var(--metric-accent); background: linear-gradient(135deg, #fff, var(--metric-bg)); box-shadow: 0 5px 18px #52398a08; }
.metric-card span { color: #47536b; font-weight: 600; }
.metric-card strong { color: var(--metric-accent); }
.metric-card:nth-child(2) { --metric-accent: #2169c4; --metric-bg: #e4f0ff; }
.metric-card:nth-child(3) { --metric-accent: #b0630d; --metric-bg: #fff3d9; }
.metric-card:nth-child(4) { --metric-accent: #087f8b; --metric-bg: #ddf7f8; }
.metric-card:nth-child(5) { --metric-accent: #16794d; --metric-bg: #e0f6e9; }
.metric-card:nth-child(6) { --metric-accent: #c04065; --metric-bg: #ffe7ef; }
.guest-header { background: linear-gradient(110deg, #29266d, #225689); }
.auth-card { border-top: 4px solid #8672e8; }
@media (max-width: 575.98px) { .page-heading { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { body.layout-fixed .app-wrapper { transition: none; } }
.button-link { display: inline-block; padding: 11px 18px; border-radius: 8px; background: #7152d6; color: white; font-weight: 600; }
.button-link:hover { color: white; background: #5b3cbd; text-decoration: none; }
.chart-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 18px 0; font-size: 13px; }
.chart-row progress { grid-column: 1 / -1; width: 100%; height: 10px; accent-color: #7959d6; border: none; border-radius: 20px; overflow: hidden; }
.chart-row progress::-webkit-progress-bar { background: #eeeafa; }
.chart-row progress::-webkit-progress-value { background: linear-gradient(90deg, #7959d6, #4e9ae8); border-radius: 20px; }
.status-badge { display: inline-block; padding: 4px 9px; border-radius: 20px; font-size: 11px; color: #56388c; background: #efe8ff; font-weight: 600; }
.record-details { padding: 16px 0; border-bottom: 1px solid #eeeafa; }
.record-details summary { cursor: pointer; margin-bottom: 12px; }
.audit-json { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 600px; font-size: 12px; }
@media(min-width:801px) and (max-width:1200px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.badge-overdue { background: #ffe2e8; color: #ac2449; }
.timeline-entry { padding: 14px 18px; border-left: 3px solid #8b6ada; margin: 12px 0; background: #f7f4fd; border-radius: 0 8px 8px 0; }
[x-cloak] { display: none !important; }
.global-search { position: relative; flex: 1; max-width: 420px; margin-left: 12px; }
.global-search input { border-radius: 20px; background: #f5f3fb; border-color: #ede8f7; }
.global-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: white; padding: 8px; box-shadow: 0 12px 32px #20204b22; border: 1px solid #e3dcf2; border-radius: 12px; max-height: 420px; overflow-y: auto; z-index: 1050; }
.global-search-results a { display: block; padding: 10px; border-radius: 7px; color: #34276e; }
.global-search-results a:hover { background: #f3edff; text-decoration: none; }
.global-search-results small { display: block; color: #687891; }
.notification-link { margin-left: auto; white-space: nowrap; color: #6745b1; }
.header-user { margin-left: 0; }
@media(max-width: 650px) { .header-title, .header-user > span:last-child { display: none; } .app-header .container-fluid { gap: 6px; } .global-search { margin-left: 0; } }
/* Override AdminLTE's desktop sticky rule with a viewport-fixed sidebar. */
body.layout-fixed.sidebar-expand-lg .app-sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: 100dvh; }
.calendar-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 16px; align-items: start; }
.calendar-grid .panel { min-height: 200px; padding: 16px; }
.brand-mark img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; }
.brand-text { max-width: 175px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }