:root {
    --sidebar-bg: #0f172a;
    --sidebar-width: 228px;
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-active-bg: rgba(255,255,255,0.12);
    --sidebar-text: #cbd5e1;
    --sidebar-text-active: #ffffff;
    --topbar-height: 60px;

    --bg-main: #f1f5f9;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;

    --primary: #2563eb;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --purple: #8b5cf6;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --radius: 10px;
    --shadow: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
    --shadow-md: 0 4px 12px rgba(0,0,0,.08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14);

    --scrollbar-size: 8px;
    --scrollbar-track: #e8eef5;
    --scrollbar-thumb: #94a3b8;
    --scrollbar-thumb-hover: #64748b;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow-x: clip; max-width: 100%; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 14px;
}

/* Cross-browser scrollbars (Firefox + Chrome/Edge/Safari) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track);
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* =========================================
   Sidebar
   ========================================= */
.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px;
    padding: 22px 19px 16px;
    height: auto;
    flex-shrink: 0;
}

.sidebar-brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2f6bed;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    box-shadow: 0 5px 13px rgba(37,99,235,.23);
}

.sidebar-brand-copy strong,
.sidebar-brand-copy small { display: block; }
.sidebar-brand-copy strong { color: #fff; font-size: 15px; line-height: 1.15; }
.sidebar-brand-copy small { color: #94a3b8; font-size: 9px; letter-spacing: .105em; margin-top: 4px; }

.brand-icon {
    font-size: 22px;
    color: var(--primary);
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 3px 11px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

.nav-section-label {
    color: #64748b;
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 14px 10px 6px;
}

.nav-section-label:first-child {
    padding-top: 6px;
}

.sidebar .nav-link-item,
.sidebar .nav-link-item:visited {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    min-height: 34px;
    margin-bottom: 1px;
    border-radius: 7px;
    text-decoration: none;
    color: var(--sidebar-text);
    font-size: 12.5px;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
}

.sidebar .nav-link-item:hover,
.sidebar .nav-link-item:focus {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

.sidebar .nav-link-item.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-active);
}

.sidebar .nav-link-item .nav-icon {
    color: inherit;
}

.nav-icon {
    font-size: 13px;
    width: 15px;
    text-align: center;
    flex-shrink: 0;
}

.nav-sub {
    padding: 0 0 4px 12px;
}

.nav-sub .nav-link-item {
    min-height: 30px;
    padding: 6px 10px;
    font-size: 12px;
}

.nav-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 10px 0;
}

.sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 18px 12px;
    flex-shrink: 0;
    color: #64748b;
    font-size: 9px;
}
.sidebar-footer strong { color: inherit; background: none; padding: 0; font-size: inherit; font-weight: inherit; }

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.user-name {
    font-size: 13px;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.2;
}

.user-role {
    font-size: 11px;
    color: var(--sidebar-text);
}

.user-info { min-width: 0; }
.user-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logout-button { border: 0; background: transparent; color: var(--sidebar-text); padding: 5px; font-size: 17px; }
.logout-button:hover { color: #fff; }
.topbar-actions form { margin: 0; }

/* Authentication */
.auth-body { background: #050d24; }
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 72px 24px 40px;
    position: relative;
    background: radial-gradient(ellipse 90% 70% at 50% 42%, #0b1f4d 0%, #071433 48%, #030817 100%);
}
.auth-reset-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 16px 24px;
    text-align: center;
    color: rgba(226, 232, 240, .68);
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: .01em;
}
.auth-intro { color: #fff; display: flex; align-items: center; padding: clamp(48px, 8vw, 120px); position: relative; overflow: hidden; }
.auth-intro::after { content: ''; position: absolute; width: 420px; height: 420px; border: 1px solid rgba(59,130,246,.22); border-radius: 50%; right: -180px; bottom: -170px; box-shadow: 0 0 0 80px rgba(37,99,235,.04), 0 0 0 160px rgba(37,99,235,.025); }
.auth-intro-content { position: relative; z-index: 1; max-width: 650px; }
.auth-kicker { color: #60a5fa; font-weight: 800; letter-spacing: .14em; font-size: 12px; }
.auth-intro h1 { font-size: clamp(38px, 5vw, 68px); line-height: 1.05; margin: 20px 0 24px; font-weight: 800; letter-spacing: -.04em; }
.auth-intro h1 span { color: #3b82f6; }
.auth-intro p { color: #cbd5e1; font-size: 18px; line-height: 1.7; max-width: 590px; }
.auth-feature-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.auth-feature-list span { padding: 10px 14px; border: 1px solid rgba(148,163,184,.22); background: rgba(15,23,42,.38); border-radius: 9px; color: #e2e8f0; }
.auth-feature-list i { color: #60a5fa; margin-right: 7px; }
.auth-panel { display: flex; align-items: center; justify-content: center; width: 100%; }
.auth-card {
    width: min(100%, 420px);
    background: #fff;
    padding: 36px 36px 30px;
    border: 0;
    border-radius: 28px;
    box-shadow: 0 24px 60px rgba(2, 8, 23, .32);
}
.auth-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand strong { font-size: 13px; letter-spacing: .04em; font-weight: 700; }
.auth-brand small { color: #94a3b8; margin-top: 2px; font-size: 12px; }
.auth-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: #2563eb;
    font-size: 16px;
    box-shadow: 0 8px 16px rgba(37, 99, 235, .28);
}
.auth-otp {
    letter-spacing: .18em;
    font-weight: 600;
    text-align: center;
    font-size: 18px;
}
.auth-qr-img {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #e8eef6;
}
.auth-remember {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    color: #475569;
    margin: 0;
}
.auth-card h2 { font-size: 26px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.03em; color: #0f172a; }
.auth-subtitle { color: #64748b; line-height: 1.5; margin-bottom: 22px; font-size: 13px; }
.auth-form { display: grid; gap: 14px; }
.auth-form .form-label { font-weight: 500; margin-bottom: 7px; color: #334155; font-size: 13px; }
.auth-form .form-control {
    min-height: 46px;
    border-radius: 999px;
    border-color: #e8eef6;
    background: #f8fafc;
    padding: 10px 16px;
}
.auth-form .form-control:focus { border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.password-field { position: relative; }
.password-field .form-control { padding-right: 46px; }
.password-field button { position: absolute; right: 4px; top: 3px; width: 40px; height: 40px; border: 0; background: transparent; color: var(--text-secondary); }
.auth-remember { display: flex; gap: 8px; align-items: center; color: var(--text-secondary); cursor: pointer; }
.auth-submit {
    min-height: 46px;
    margin-top: 4px;
    background: #2563eb;
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-submit:hover { background: #1d4ed8; color: #fff; }
.auth-validation { color: var(--danger); }
.auth-validation:empty { display: none; }
.auth-sso { margin-top: 16px; display: grid; gap: 8px; }
.auth-sso > span { text-align: center; color: #94a3b8; font-size: 12px; }
.auth-sso-btn {
    width: 100%;
    min-height: 42px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    color: #0f172a;
}
.auth-sso-btn:hover { background: #f8fafc; color: #0f172a; }
.auth-sso-hint { margin: 4px 0 0; color: #94a3b8; font-size: 12px; line-height: 1.45; }
.auth-pwa { margin-top: 14px; }
.demo-accounts { margin-top: 22px; padding-top: 18px; border-top: 1px dashed #e2e8f0; }
.demo-accounts > span { display: block; color: #94a3b8; margin-bottom: 12px; font-size: 13px; }
.demo-buttons { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }
.demo-buttons button {
    flex: 0 0 auto;
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.demo-buttons button:hover { border-color: #cbd5e1; color: #0f172a; background: #f8fafc; }
.demo-accounts small { display: block; color: #94a3b8; margin-top: 10px; }
.auth-shell-centered { display: flex; align-items: center; justify-content: center; padding: 30px; }
.access-denied-card { text-align: center; }
.access-denied-card .auth-logo { margin: 0 auto 20px; }
.access-denied-card .auth-submit { text-decoration: none; }

@media (max-width: 900px) {
    .auth-shell { padding: 68px 16px 28px; }
    .auth-card { padding: 28px 22px 24px; border-radius: 24px; }
}

/* Overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

.sidebar-overlay.active { display: block; }

/* =========================================
   Main Wrapper & Topbar
   ========================================= */
.main-wrapper {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    display: flex;
    flex-direction: column;
    transition: margin-left 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.topbar {
    height: var(--topbar-height);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 14px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--shadow);
}

.sidebar-toggle {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--text-secondary);
    cursor: pointer;
    display: none;
    padding: 4px;
    line-height: 1;
}

.topbar-breadcrumb {
    min-width: 150px;
}

.crm-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1;
}

.crm-breadcrumb-muted {
    color: var(--text-muted);
    font-weight: 500;
}

.crm-breadcrumb-separator {
    color: #cbd5e1;
    font-weight: 500;
}

.crm-breadcrumb-active {
    color: var(--text-primary);
    font-weight: 600;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.global-search { position: relative; flex: 1; max-width: 430px; margin: 0 auto; }
.global-search > input { width: 100%; height: 38px; padding: 0 38px; border: 1px solid var(--border-color); border-radius: 8px; background: #f8fafc; color: var(--text-primary); outline: none; font-size: 12.5px; transition: border-color .15s, box-shadow .15s, background .15s; }
.global-search > input:focus { background: #fff; border-color: #93b4ff; box-shadow: 0 0 0 3px rgba(37,99,235,.09); }
.global-search-icon { position: absolute; left: 13px; top: 10px; color: #94a3b8; z-index: 2; }
.global-search-clear { display: none; position: absolute; right: 7px; top: 6px; width: 27px; height: 27px; border: 0; border-radius: 6px; background: transparent; color: #94a3b8; z-index: 2; }
.global-search-clear.is-visible { display: block; }
.global-search-results { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); max-height: min(65vh, 530px); overflow-y: auto; background: #fff; border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 18px 45px rgba(15,23,42,.18); padding: 7px; z-index: 1100; }
.global-search.is-open .global-search-results { display: block; }
.search-result-group + .search-result-group { border-top: 1px solid #eef2f7; margin-top: 5px; padding-top: 5px; }
.search-result-heading { display: flex; align-items: center; gap: 7px; padding: 7px 9px 4px; color: #64748b; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.search-result-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 7px; color: var(--text-primary); text-decoration: none; }
.search-result-item:hover, .search-result-item:focus { background: #eff6ff; color: #1d4ed8; }
.search-result-item span { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-result-item small { color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-empty, .search-loading { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 28px 12px; color: #64748b; font-size: 12px; }
.quick-create-button { height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 6px; background: #2f6bed; color: #fff; border: 0; border-radius: 7px; font-size: 12px; font-weight: 650; }
.quick-create-button:hover, .quick-create-button:focus, .quick-create-button.show { background: #2459ce; color: #fff; }
.quick-create-menu { width: 250px; padding: 7px; border-color: var(--border-color); border-radius: 10px; box-shadow: 0 15px 35px rgba(15,23,42,.16); }
.quick-create-menu .dropdown-item { display: flex; align-items: center; gap: 11px; padding: 9px; border-radius: 7px; }
.quick-create-menu .dropdown-item > i { width: 31px; height: 31px; display: flex; align-items: center; justify-content: center; border-radius: 7px; color: #2563eb; background: #eff6ff; }
.quick-create-menu strong, .quick-create-menu small { display: block; }
.quick-create-menu strong { color: #1e293b; font-size: 12px; }
.quick-create-menu small { color: #94a3b8; font-size: 10px; margin-top: 1px; }

.dashboard-quick-actions { padding: 13px 15px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius); box-shadow: var(--shadow); }
.dashboard-quick-actions h6 { margin: 0 0 9px; color: var(--text-primary); font-size: 13px; font-weight: 700; }
.dashboard-quick-action-list { display: flex; flex-wrap: wrap; gap: 7px; }
.dashboard-quick-action { min-height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid #8db1ff; border-radius: 6px; background: #fff; color: #2563eb; font-size: 11.5px; font-weight: 550; text-decoration: none; transition: background .15s, border-color .15s, transform .15s; }
.dashboard-quick-action:hover { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; transform: translateY(-1px); }
.dashboard-quick-action.primary { background: #2f6bed; border-color: #2f6bed; color: #fff; }
.dashboard-quick-action.primary:hover { background: #2459ce; }
.dashboard-quick-action.secondary { border-color: #8db1ff; background: #eff6ff; color: #2563eb; }
.dashboard-quick-action.secondary:hover { border-color: #2563eb; background: #dbeafe; color: #1d4ed8; }
.dashboard-quick-action.muted { border-color: #cbd5e1; color: #64748b; }
.dashboard-quick-action.muted:hover { border-color: #94a3b8; background: #f8fafc; color: #334155; }
.dashboard-quick-action:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(37, 99, 235, 0.35);
}
.dashboard-quick-action.primary:focus-visible {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(47, 107, 237, 0.45);
}
.dashboard-quick-action[aria-current="page"] {
    font-weight: 650;
}

.dashboard-section-title { color: var(--text-primary); font-size: 13px; font-weight: 750; }
.dashboard-section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dashboard-section-header small { display: block; color: #94a3b8; font-size: 10px; margin-top: 2px; }
.dashboard-section-link { color: #64748b; text-decoration: none; font-size: 11px; font-weight: 600; }
.dashboard-section-link:hover { color: #2563eb; }
.dashboard-work-panel { min-height: 235px; }
.dashboard-work-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; }
.dashboard-work-header .panel-title { font-size: 12px; }
.work-count { min-width: 23px; height: 21px; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: #eff6ff; color: #2563eb; font-size: 10px; font-weight: 750; }
.work-tone-red .work-count { background: #fef2f2; color: #dc2626; }
.work-tone-green .work-count { background: #ecfdf5; color: #059669; }
.work-tone-orange .work-count { background: #fff7ed; color: #ea580c; }
.work-tone-purple .work-count { background: #f5f3ff; color: #7c3aed; }
.work-list { list-style: none; padding: 0; margin: 0; }
.work-list li { border-bottom: 1px solid #eef2f7; }
.work-list li:last-child { border-bottom: 0; }
.work-list a { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 12px; color: inherit; text-decoration: none; }
.work-list a:hover { background: #f8fafc; }
.work-more-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid #eef2f7;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.work-more-link:hover { background: #f8fafc; color: #0f172a; }
.work-item-icon { width: 29px; height: 29px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 7px; background: #eff6ff; color: #2563eb; }
.work-tone-red .work-item-icon { background: #fef2f2; color: #dc2626; }
.work-tone-green .work-item-icon { background: #ecfdf5; color: #059669; }
.work-tone-orange .work-item-icon { background: #fff7ed; color: #ea580c; }
.work-tone-purple .work-item-icon { background: #f5f3ff; color: #7c3aed; }
.work-item-copy { min-width: 0; flex: 1; }
.work-item-copy strong, .work-item-copy small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-item-copy strong { color: #334155; font-size: 11px; font-weight: 650; }
.work-item-copy small { color: #94a3b8; font-size: 9.5px; margin-top: 2px; }
.work-arrow { color: #cbd5e1; font-size: 10px; }
.work-empty { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 20px; color: #94a3b8; text-align: center; font-size: 10.5px; }
.work-empty > i { color: #86c7a8; font-size: 25px; }
.work-empty a { color: #2563eb; font-weight: 650; text-decoration: none; }

.role-viewer [data-write-action],
.role-viewer a[href*="/Create"],
.role-viewer a[href*="/Edit"],
.role-viewer a[href*="/Delete"],
.role-viewer form[action*="/Complete"],
.role-viewer form[action*="/Delete"] { display: none !important; }

.topbar-user { display: flex; align-items: center; gap: 8px; padding: 3px 8px 3px 3px; border-radius: 8px; background: #f8fafc; }
.topbar-user .user-avatar { width: 30px; height: 30px; }
.topbar-user-copy strong, .topbar-user-copy small { display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-user-copy strong { color: var(--text-primary); font-size: 11px; }
.topbar-user-copy small { color: var(--text-secondary); font-size: 9px; }

.topbar-btn {
    position: relative;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.topbar-btn:hover {
    background: var(--bg-main);
    color: var(--text-primary);
}

.notif-dot {
    position: absolute;
    top: 5px; right: 5px;
    width: 7px; height: 7px;
    background: var(--danger);
    border-radius: 50%;
    border: 1.5px solid #fff;
}

.topbar-notifications { position: relative; }
.topbar-notifications .dropdown-toggle::after { display: none; }
.notif-dropdown {
    width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 440px);
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16);
    overflow-y: auto;
}
.notif-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f7;
    background: #f8fafc;
}
.notif-dropdown-header strong {
    font-size: 12px;
    color: var(--text-primary);
}
.notif-mark-all {
    border: 0;
    background: none;
    color: #2563eb;
    font-size: 11px;
    font-weight: 600;
    padding: 0;
    cursor: pointer;
}
.notif-mark-all:hover { text-decoration: underline; }
.notif-empty {
    padding: 28px 16px;
    text-align: center;
    color: #64748b;
    font-size: 12px;
}
.notif-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid #f1f5f9;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: #eff6ff; color: #1d4ed8; }
.notif-item strong {
    font-size: 12.5px;
    font-weight: 650;
}
.notif-item span {
    font-size: 12px;
    color: #475569;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notif-item small { color: #94a3b8; font-size: 10.5px; }
.notif-item.is-unread { background: #f8fbff; }
.notif-item.is-unread strong { color: #0f172a; }

.content-area {
    flex: 1;
    padding: 20px;
}

/* =========================================
   Page Header
   ========================================= */
.page-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.page-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-shrink: 0; }
.page-header-actions .btn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; }

/* Shared page / KPI / filter polish */
.crm-kpi-grid {
    display: grid;
    gap: 12px;
}

.crm-kpi-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crm-kpi-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.crm-kpi-grid .kpi-card {
    height: 100%;
    min-width: 0;
}

.crm-labeled-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 0.85fr)) auto;
    gap: 10px 12px;
    align-items: end;
    padding: 14px 16px;
}

.crm-invoice-filter-form {
    grid-template-columns: minmax(220px, 1.6fr) repeat(5, minmax(110px, 0.85fr)) auto;
}

.crm-labeled-filter-field {
    min-width: 0;
}

.crm-labeled-filter-field .form-label {
    display: block;
    margin-bottom: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
}

.crm-labeled-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 1px;
    flex-wrap: wrap;
}

.crm-filter-date {
    height: 38px;
    font-size: 12.5px;
}

.source-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
}

.source-badge.source-manual { background: #f8fafc; color: #475569; }
.source-badge.source-demo { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.source-badge.source-external { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }

@media (max-width: 991.98px) {
    .crm-kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .crm-kpi-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .crm-labeled-filter-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .crm-labeled-filter-search,
    .crm-labeled-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .crm-kpi-grid-3 { grid-template-columns: 1fr; }
    .crm-kpi-grid-5 { grid-template-columns: 1fr; }
    .crm-labeled-filter-form { grid-template-columns: 1fr; }
}

.report-kpi-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.report-kpi-grid > * { width: auto; max-width: none; padding: 0; }
.report-kpi-grid .kpi-card { height: 100%; min-width: 0; padding: 16px; }
.report-kpi-grid .kpi-icon { width: 44px; height: 44px; }
.report-kpi-grid .kpi-value { font-size: 19px; white-space: nowrap; }

.reports-sticky-stack {
    position: sticky;
    top: 0;
    z-index: 30;
    background: var(--bg-body, #f1f5f9);
    padding-bottom: 4px;
}

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

.reports-summary-grid.reports-summary-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.reports-summary-grid .kpi-card {
    min-width: 0;
    overflow: hidden;
    padding: 14px 16px;
}

.reports-summary-grid .kpi-body {
    min-width: 0;
}

.reports-summary-grid .kpi-value {
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reports-summary-grid .kpi-delta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.reports-summary-grid .kpi-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.report-summary-card .kpi-delta {
    font-size: 10.5px;
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.35;
}

.reports-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.reports-view-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.reports-view-nav .nav-link {
    border: 0;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    text-decoration: none;
}

.reports-view-nav .nav-link:hover {
    color: #2563eb;
    background: #f8fafc;
}

.reports-view-nav .nav-link.active {
    color: #1d4ed8;
    background: #eff6ff;
}

.reports-tab-nav .nav-link {
    border: 0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 650;
    color: #64748b;
    background: transparent;
}

.reports-tab-nav .nav-link:hover {
    color: #2563eb;
    background: #f8fafc;
}

.reports-tab-nav .nav-link.active {
    color: #2563eb;
    background: #eff6ff;
}

.reports-tab-meta {
    padding: 0 2px;
}

@media (max-width: 1399.98px) {
    .reports-summary-grid,
    .reports-summary-grid.reports-summary-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .reports-summary-grid,
    .reports-summary-grid.reports-summary-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .reports-sticky-stack { position: static; }
}

@media (max-width: 575.98px) {
    .reports-summary-grid,
    .reports-summary-grid.reports-summary-grid-5 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1399.98px) {
    .report-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .report-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}

.date-filter-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.dashboard-period-form { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 9px; border: 1px solid var(--border-color); border-radius: 18px; background: #fff; color: #64748b; box-shadow: 0 1px 2px rgba(15,23,42,.03); }
.dashboard-period-form select { border: 0; outline: 0; background: transparent; color: #475569; font-size: 12px; font-weight: 600; cursor: pointer; }

/* =========================================
   KPI Cards
   ========================================= */
.kpi-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    border: 1px solid var(--border-color);
    transition: transform 0.15s, box-shadow 0.15s;
}

.kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}
.kpi-card-link { position: relative; color: inherit; text-decoration: none; height: 100%; }
.kpi-card-link:hover { color: inherit; border-color: #bfd2fb; }
.kpi-card-selected { border-color: #93b4fa; box-shadow: 0 0 0 2px rgba(37, 99, 235, .08); }
.kpi-link-arrow { position: absolute; right: 12px; top: 12px; color: #cbd5e1; font-size: 12px; transition: color .15s, transform .15s; }
.kpi-card-link:hover .kpi-link-arrow { color: #2563eb; transform: translate(1px, -1px); }

.kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.kpi-icon-blue   { background: #eff6ff; color: var(--primary); }
.kpi-icon-orange { background: #fffbeb; color: var(--warning); }
.kpi-icon-green  { background: #ecfdf5; color: var(--success); }
.kpi-icon-purple { background: #f5f3ff; color: var(--purple); }
.kpi-icon-teal   { background: #ecfdf5; color: #14b8a6; }
.kpi-icon-red    { background: #fef2f2; color: #dc2626; }

.kpi-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.kpi-value {
    font-size: 21px;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.05;
}

.kpi-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 500;
}

/* =========================================
   Panels (Cards)
   ========================================= */
.card-panel {
    background: var(--bg-card);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}

.panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
}

.panel-title {
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.panel-body {
    padding: 18px;
}

/* =========================================
   Funnel
   ========================================= */
.funnel-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0;
}

.funnel-layout {
    display: flex;
    align-items: stretch;
    gap: 26px;
}

.funnel-visual {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 0;
}

.funnel-layer {
    width: var(--stage-width);
    display: flex;
    justify-content: center;
}

.funnel-layer-shape {
    width: 100%;
    height: 36px;
    background: var(--stage-color);
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 6px;
    overflow: hidden;
    clip-path: polygon(4% 0, 96% 0, 90% 100%, 10% 100%);
}

.funnel-legend {
    width: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.funnel-legend-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 36px;
}

.funnel-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--legend-color);
}

.funnel-legend-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 0;
}

.funnel-legend-count {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: right;
}

.funnel-empty-state {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* =========================================
   Chart
   ========================================= */
.chart-wrapper {
    height: 210px;
    position: relative;
}

/* =========================================
   Activity List
   ========================================= */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.12s;
}

.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: #fafbfc; }

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #eff6ff;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.activity-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.activity-meta {
    display: flex;
    gap: 10px;
    align-items: center;
}

.activity-type {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--text-secondary);
}

.activity-date {
    font-size: 11px;
    color: var(--text-muted);
}

/* =========================================
   Top Customer List
   ========================================= */
.top-customer-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-customer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.12s;
}

.top-customer-item:last-child { border-bottom: none; }
.top-customer-item:hover { background: #fafbfc; }

.customer-rank {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.customer-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.customer-name {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
}

.customer-info { flex: 1; }

.customer-revenue {
    font-size: 13px;
    font-weight: 700;
    color: var(--success);
    white-space: nowrap;
}

/* =========================================
   Empty State
   ========================================= */
.empty-state {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-muted);
}

.empty-state i {
    font-size: 32px;
    display: block;
    margin-bottom: 8px;
    opacity: 0.4;
}

.empty-state p {
    margin: 0;
    font-size: 13px;
}

/* =========================================
   Alerts
   ========================================= */
.crm-alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 13.5px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
}

.alert-success.crm-alert {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #065f46;
}

.alert-danger.crm-alert {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

.alert-warning.crm-alert {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* =========================================
   Customers Module
   ========================================= */
.panel-header-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 16px;
    background: #fbfdff;
}

.customer-search-form {
    flex: 1;
    min-width: 220px;
    max-width: 420px;
}

.search-input-wrapper {
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 14px;
    pointer-events: none;
}

.search-input {
    padding-left: 36px;
    border-radius: 8px;
    border-color: var(--border-color);
    font-size: 13px;
    height: 38px;
}

.search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.result-count {
    white-space: nowrap;
}

.crm-table {
    font-size: 13.5px;
}

.crm-table thead th {
    background: #f8fafc;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 1px solid var(--border-color);
    padding: 12px 20px;
    white-space: nowrap;
}

.crm-table tbody td {
    padding: 14px 20px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.crm-table tbody tr:last-child td {
    border-bottom: none;
}

.crm-table tbody tr:hover {
    background: #fafbfc;
}

.customer-name-link {
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
}

.customer-name-link:hover {
    color: var(--primary);
}

.table-actions {
    display: inline-flex;
    gap: 4px;
}

.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    border-radius: 8px;
}

.action-btn:hover {
    background: var(--bg-main);
    color: var(--primary);
    border-color: #cbd5e1;
}

/* Shared list index (Potansiyel / Müşteri / Fırsat / Teklif / Görev) */
.lead-toolbar,
.crm-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: #fbfdff; }
.lead-filter-form,
.crm-filter-form { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(260px, 1fr) 170px 170px 38px; gap: 8px; align-items: center; }
.crm-filter-form.filters-0 { grid-template-columns: minmax(260px, 1fr) 38px; }
.crm-filter-form.filters-1 { grid-template-columns: minmax(260px, 1fr) 170px 38px; }
.crm-filter-form.filters-2 { grid-template-columns: minmax(260px, 1fr) 170px 170px 38px; }
.crm-filter-form.filters-3 { grid-template-columns: minmax(220px, 1fr) 150px 150px 150px 38px; }
.crm-filter-form.filters-4 { grid-template-columns: minmax(200px, 1fr) 140px 140px 140px 140px 38px; }
.lead-filter-form .search-input,
.lead-filter-select,
.crm-filter-form .search-input,
.crm-filter-select { height: 38px; font-size: 12.5px; }
.lead-search-button,
.crm-search-button { width: 38px; height: 38px; padding: 0; }
.lead-toolbar-meta,
.crm-list-toolbar-meta { display: flex; align-items: center; gap: 13px; flex-shrink: 0; color: #64748b; font-size: 11.5px; }
.lead-clear-filters,
.crm-clear-filters { color: #2563eb; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lead-clear-filters:hover,
.crm-clear-filters:hover { color: #1d4ed8; }
.lead-list-panel .crm-table tbody tr,
.crm-list-panel .crm-table tbody tr { transition: background .12s, box-shadow .12s; }
.lead-company-cell,
.crm-entity-cell { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.lead-company-cell:hover strong,
.crm-entity-cell:hover strong { color: var(--primary); }
.lead-company-avatar,
.crm-entity-avatar { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 9px; background: #eff6ff; color: #2563eb; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.lead-company-cell strong, .lead-company-cell small,
.crm-entity-cell strong, .crm-entity-cell small { display: block; }
.lead-company-cell strong,
.crm-entity-cell strong { color: var(--text-primary); font-size: 13px; }
.lead-company-cell small,
.crm-entity-cell small { margin-top: 2px; color: #94a3b8; font-size: 10px; font-weight: 500; }
.lead-score { display: flex; align-items: center; gap: 8px; min-width: 82px; font-weight: 700; }
.lead-score > span:first-child { width: 22px; }
.lead-score-track { width: 44px; height: 5px; overflow: hidden; border-radius: 5px; background: #e2e8f0; }
.lead-score-track > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #60a5fa, #2563eb); }
.lead-next-action { display: flex; align-items: center; gap: 8px; color: #475569; }
.lead-next-action > i { color: #94a3b8; }
.lead-next-action strong, .lead-next-action small { display: block; white-space: nowrap; }
.lead-next-action strong { font-size: 12.5px; font-weight: 650; }
.lead-next-action small { max-width: 180px; overflow: hidden; margin-top: 1px; color: #94a3b8; font-size: 10px; text-overflow: ellipsis; }
.lead-next-action.is-overdue strong, .lead-next-action.is-overdue > i { color: #dc2626; }
.lead-next-action.is-today strong, .lead-next-action.is-today > i { color: #d97706; }
.lead-action-missing { color: #94a3b8; font-size: 11.5px; }
.lead-detail-button { border: 1px solid #dbe3ee; color: #475569; font-weight: 600; white-space: nowrap; }
.lead-detail-button:hover, .lead-detail-button:focus { border-color: #93b4ff; background: #eff6ff; color: #2563eb; }

@media (max-width: 1199.98px) {
    .lead-toolbar,
    .crm-list-toolbar { align-items: stretch; flex-direction: column; }
    .lead-toolbar-meta,
    .crm-list-toolbar-meta { justify-content: space-between; }
}

@media (max-width: 767.98px) {
    .lead-filter-form,
    .crm-filter-form,
    .crm-filter-form.filters-1,
    .crm-filter-form.filters-2,
    .crm-filter-form.filters-3 { grid-template-columns: 1fr 1fr 38px; }
    .lead-filter-form .search-input-wrapper,
    .crm-filter-form .search-input-wrapper { grid-column: 1 / -1; }
    .lead-toolbar-meta,
    .crm-list-toolbar-meta { flex-wrap: wrap; }
}

@media (max-width: 575.98px) {
    .lead-filter-form,
    .crm-filter-form { display: flex; flex-direction: column; align-items: stretch; }
    .lead-search-button,
    .crm-search-button { width: 100%; }
}

.action-btn-danger:hover {
    color: var(--danger);
    border-color: #fecaca;
    background: #fef2f2;
}

.customer-sales-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.customer-sales-action,
.customer-more-action {
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #fff;
    color: #475569;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}

.customer-sales-actions .customer-sales-action,
.customer-sales-actions .customer-more-action {
    opacity: .76;
}

.crm-table tbody tr:hover .customer-sales-action,
.crm-table tbody tr:hover .customer-more-action,
.customer-sales-action:focus-visible,
.customer-more-action:focus-visible {
    opacity: 1;
}

.customer-sales-action:hover,
.customer-more-action:hover {
    border-color: #8db1ff;
    background: #eff6ff;
    color: #2563eb;
}

.customer-sales-action.primary {
    border-color: #2f6bed;
    background: #2f6bed;
    color: #fff;
}

.customer-sales-action.primary:hover {
    border-color: #2459ce;
    background: #2459ce;
}

.customer-more-action {
    width: 30px;
    padding: 0;
}

.customer-action-menu {
    min-width: 150px;
    padding: 5px;
    border-color: var(--border-color);
    box-shadow: var(--shadow-lg);
    z-index: 1080;
}

.customer-action-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 6px;
    font-size: 12px;
}

.customer-detail-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

.customer-mine-filter {
    height: 38px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.customer-owner-filter-form {
    flex: 0 0 190px;
}

.customer-owner-filter-form .form-select {
    height: 38px;
    border-radius: 8px;
    border-color: var(--border-color);
    font-size: 12px;
}

.responsible-user-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 12px;
    white-space: nowrap;
}

.responsible-user-avatar {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: #dbeafe;
    color: #2563eb;
    font-size: 10px;
    font-weight: 750;
}

.customer-phone-cell,
.customer-created-cell {
    white-space: nowrap;
}

.customer-summary-body {
    display: flex;
    align-items: flex-start;
    gap: 22px;
}

.customer-kpi-link {
    width: 100%;
    border: 1px solid var(--border-color);
    text-align: left;
    cursor: pointer;
}

.customer-kpi-link:hover,
.customer-kpi-link:focus-visible {
    border-color: #93b4fb;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(15, 23, 42, .08);
}

.customer-avatar-large {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(145deg, #3b82f6, #4f46e5);
    color: #fff;
    font-size: 23px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(59, 130, 246, .2);
}

.customer-summary-list {
    flex: 1;
}

.customer-summary-list .detail-row:first-child {
    padding-top: 0;
}

.customer-next-action {
    overflow: hidden;
}

.customer-next-empty {
    min-height: auto;
    padding: 8px 0;
}

.customer-next-empty i {
    font-size: 1.5rem;
}

.customer-overdue-alert {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    padding: 8px 10px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    background: #fff7f7;
    color: #dc2626;
    font-size: 11.5px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.customer-overdue-alert span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.customer-overdue-alert:hover {
    border-color: #fca5a5;
    background: #fef2f2;
}

.next-action-status {
    display: inline-flex;
    margin-bottom: 9px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.next-action-status.is-overdue {
    background: #fef2f2;
    color: #dc2626;
}

.next-action-title {
    display: block;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.next-action-title:hover {
    color: #2563eb;
}

.next-action-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 12px;
}

.next-action-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.next-action-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.next-action-buttons form {
    margin: 0;
}

.customer-360-tabs {
    overflow: hidden;
}

.customer-tabs {
    display: flex;
    gap: 4px;
    padding: 10px 12px 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--border-color);
}

.customer-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.customer-tab > span {
    min-width: 19px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f1f5f9;
    font-size: 10px;
    text-align: center;
}

.customer-tab:hover,
.customer-tab.active {
    color: #2563eb;
}

.customer-tab.active {
    border-bottom-color: #2563eb;
}

.customer-tab.active > span {
    background: #dbeafe;
}

.customer-summary-link {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    color: inherit;
}

.customer-summary-link:hover {
    background: #f8fafc;
}

.customer-tab-empty {
    padding: 16px;
}

.customer-tab-empty i {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.customer-tab-empty p {
    margin-bottom: 8px;
}

.tab-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px;
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
}

.tab-callout-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    font-size: 16px;
    border: 1px solid #e2e8f0;
}

.tab-callout-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tab-callout-copy strong {
    font-size: 13px;
    color: var(--text-primary);
}

.tab-callout-copy span {
    font-size: 12px;
    color: var(--text-muted);
}

.tab-callout-action {
    flex-shrink: 0;
    white-space: nowrap;
}

.tab-upload-zone {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px;
    padding: 12px 14px;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    background: #f8fafc;
}

.tab-upload-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 18px;
}

.tab-upload-copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tab-upload-copy strong {
    font-size: 13px;
    color: var(--text-primary);
}

.tab-upload-copy span {
    font-size: 12px;
    color: var(--text-muted);
}

.tab-upload-picker {
    display: inline-flex;
    align-items: center;
    max-width: 160px;
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tab-upload-input {
    display: none;
}

.tab-upload-zone-compact {
    margin-bottom: 0;
    border-style: solid;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}

.customer-detail-sidebar {
    position: sticky;
    top: 16px;
}

.customer-contacts-form {
    margin: 12px 16px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
}

.customer-tab-form {
    padding: 12px 16px 0;
}

.customer-tab-panel .customer-tab-form + .empty-state,
.customer-tab-panel .customer-tab-form + .table-responsive,
.customer-tab-panel .customer-tab-form + .customer-timeline,
.customer-tab-panel .customer-tab-form + .d-flex {
    margin-top: 0;
}

.customer-tab-panel {
    display: none;
    padding: 0;
}

.customer-tab-panel.active {
    display: block;
}

.customer-tab-panel .table-responsive,
.customer-tab-panel .customer-timeline,
.customer-tab-panel > .d-flex,
.customer-tab-panel > .empty-state:not(.customer-tab-form + *) {
    padding: 0;
}

.customer-tab-panel .customer-timeline {
    padding: 8px 0;
}

.customer-tab-panel .empty-state.customer-tab-empty {
    margin: 0;
}

.customer-timeline {
    padding: 8px 18px 14px;
}

.customer-timeline-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid var(--border-color);
    color: inherit;
    text-decoration: none;
}

.customer-timeline-item:last-child {
    border-bottom: 0;
}

.customer-timeline-item:hover strong {
    color: #2563eb;
}

.timeline-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #eff6ff;
    color: #2563eb;
}

.timeline-content strong,
.timeline-content small {
    display: block;
}

.timeline-content strong {
    color: var(--text-primary);
    font-size: 12.5px;
}

.timeline-content small,
.customer-timeline-item time {
    color: var(--text-muted);
    font-size: 11px;
}

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

.card-panel .form-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.card-panel .form-control {
    border-radius: 8px;
    border-color: var(--border-color);
    font-size: 13.5px;
}

.card-panel .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.detail-list {
    margin: 0;
}

.detail-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child {
    border-bottom: none;
}

.detail-row dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.detail-row dd {
    font-size: 13.5px;
    color: var(--text-primary);
    margin: 0;
}

.detail-row dd a {
    color: var(--primary);
    text-decoration: none;
}

.detail-row dd a:hover {
    text-decoration: underline;
}

.delete-confirm-box {
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px 0;
}

.delete-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fef2f2;
    color: var(--danger);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 16px;
}

.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

/* =========================================
   Opportunity Stage Badges
   ========================================= */
.stage-badge,
.status-badge,
.quote-badge,
.direction-badge,
.outcome-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.stage-new       { background: #eff6ff; color: #2563eb; }
.stage-contacted { background: #f0fdfa; color: #0d9488; }
.stage-proposal  { background: #fffbeb; color: #d97706; }
.stage-negotiation { background: #fff7ed; color: #ea580c; }
.stage-won       { background: #ecfdf5; color: #059669; }
.stage-lost      { background: #f8fafc; color: #64748b; }

.lead-status-form {
    margin: 0;
    display: inline-flex;
}

.lead-status-select {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 20px;
    padding: 3px 26px 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%2364748b' d='M4.6 6.2a.75.75 0 0 1 1.06 0L8 8.54l2.34-2.34a.75.75 0 1 1 1.06 1.06l-2.87 2.87a.75.75 0 0 1-1.06 0L4.6 7.26a.75.75 0 0 1 0-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    max-width: 200px;
}

.lead-status-select:focus {
    outline: 2px solid rgba(37, 99, 235, 0.25);
    outline-offset: 1px;
}

.opportunity-filter-form,
.activity-filter-form,
.quote-filter-form,
.interaction-filter-form {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.opportunity-filter-form .search-input-wrapper,
.activity-filter-form .search-input-wrapper,
.quote-filter-form .search-input-wrapper,
.interaction-filter-form .search-input-wrapper {
    flex: 1;
    min-width: 180px;
}

.opportunity-filter-form .search-input-wrapper {
    min-width: 0;
}

.opportunity-period-filter {
    display: flex;
    align-items: center;
    position: relative;
    color: var(--text-muted);
    flex-shrink: 0;
}

.opportunity-period-filter > i {
    position: absolute;
    left: 11px;
    z-index: 1;
    pointer-events: none;
    font-size: 13px;
}

.opportunity-period-filter .form-select {
    width: 155px;
    height: 38px;
    padding-left: 32px;
    border-radius: 8px;
    border-color: var(--border-color);
    font-size: 13px;
}

.stage-filter-select,
.activity-filter-select,
.quote-filter-select,
.interaction-filter-select {
    flex-shrink: 0;
    border-radius: 8px;
    border-color: var(--border-color);
    font-size: 13px;
    height: 38px;
}

.stage-filter-select,
.quote-filter-select {
    width: 160px;
}

.activity-filter-select,
.interaction-filter-select {
    width: 150px;
}

.activity-filter-form,
.interaction-filter-form {
    flex-wrap: wrap;
}

.activity-type-cell {
    font-size: 13px;
    color: var(--text-secondary);
}

.status-pending {
    background: #eff6ff;
    color: #2563eb;
}

.status-completed {
    background: #ecfdf5;
    color: #059669;
}

/* =========================================
   Calendar Module
   ========================================= */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.calendar-view-toggle {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: #f8fafc;
}

.calendar-view-btn {
    min-width: 54px;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 650;
    color: var(--text-secondary);
    text-decoration: none;
    text-align: center;
}

.calendar-view-btn.is-active {
    background: #fff;
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.calendar-nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.calendar-rep-filter {
    min-width: 200px;
}

.calendar-rep-filter .form-select {
    font-size: 12.5px;
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.calendar-nav-btn {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.calendar-nav-btn:hover {
    color: var(--primary);
}

.calendar-empty-note {
    padding: 10px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    width: 100%;
}

.calendar-grid-week .calendar-day-cell {
    min-height: 320px;
}

.calendar-grid-day {
    grid-template-columns: 1fr;
}

.calendar-grid-day .calendar-day-cell {
    min-height: 280px;
    border-right: none;
    padding: 14px 16px;
}

.calendar-grid-day .calendar-events {
    gap: 6px;
}

.calendar-grid-day .calendar-event-rich {
    padding: 10px 12px;
    font-size: 13px;
}

.calendar-grid-day .calendar-event-sub {
    padding-left: 18px;
    font-size: 12px;
    white-space: normal;
}

.calendar-jump-today {
    font-size: 12px;
    font-weight: 650;
    color: var(--primary);
    text-decoration: none;
}

.calendar-jump-today:hover {
    text-decoration: underline;
}

.calendar-header-cell {
    min-width: 0;
    padding: 10px 8px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--border-color);
}

.calendar-day-cell {
    min-width: 0;
    min-height: 100px;
    padding: 6px;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-card);
    vertical-align: top;
    overflow: hidden;
}

.calendar-day-cell:nth-child(7n) {
    border-right: none;
}

.calendar-grid-week .calendar-day-cell:nth-child(7n) {
    border-right: none;
}

.calendar-day-outside {
    background: #fafbfc;
}

.calendar-day-outside .calendar-day-number {
    color: var(--text-muted);
    opacity: 0.6;
}

.calendar-day-today {
    background: #eff6ff;
    box-shadow: inset 0 0 0 2px rgba(37, 99, 235, 0.25);
}

.calendar-day-number {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    padding: 0 2px;
}

.calendar-grid-week .calendar-day-number {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
    font-size: 13px;
}

.calendar-weekday {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.calendar-events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
}

.calendar-event {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.3;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: opacity 0.15s;
}

.calendar-event-rich {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 6px 7px;
    white-space: normal;
}

.calendar-event-main {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.calendar-event-sub {
    padding-left: 16px;
    font-size: 10.5px;
    opacity: 0.85;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event:hover {
    opacity: 0.85;
}

.calendar-event-time {
    font-weight: 700;
    flex-shrink: 0;
}

.calendar-event-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-completed {
    opacity: 0.55;
}

.calendar-event-completed .calendar-event-title {
    text-decoration: line-through;
}

.calendar-more {
    font-size: 10.5px;
    color: var(--text-muted);
    padding: 0 4px;
}

.cal-event-meeting  { background: #eff6ff; color: #2563eb; }
.cal-event-phone    { background: #f0fdfa; color: #0d9488; }
.cal-event-email    { background: #f5f3ff; color: #7c3aed; }
.cal-event-task     { background: #fff7ed; color: #ea580c; }
.cal-event-followup { background: #fffbeb; color: #d97706; }
.cal-event-other    { background: #f1f5f9; color: #64748b; }
.cal-event-lead     { background: #f5f3ff; color: #7c3aed; }
.cal-event-opportunity { background: #ecfdf5; color: #059669; }

/* =========================================
   Quotes Module
   ========================================= */
.quote-draft     { background: #f1f5f9; color: #64748b; }
.quote-sent      { background: #eff6ff; color: #2563eb; }
.quote-accepted  { background: #ecfdf5; color: #059669; }
.quote-rejected  { background: #fef2f2; color: #dc2626; }
.quote-expired   { background: #fff7ed; color: #ea580c; }
.quote-cancelled { background: #e2e8f0; color: #475569; }

.direction-incoming { background: #eff6ff; color: #2563eb; }
.direction-outgoing { background: #f5f3ff; color: #7c3aed; }

.outcome-positive  { background: #ecfdf5; color: #059669; }
.outcome-neutral   { background: #f1f5f9; color: #64748b; }
.outcome-negative  { background: #fef2f2; color: #dc2626; }
.outcome-awaiting  { background: #fff7ed; color: #ea580c; }

.quote-items-table input.form-control-sm {
    font-size: 13px;
}

.quote-summary {
    max-width: 320px;
    margin-left: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 14px 16px;
    background: #f8fafc;
}

.quote-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.quote-summary-total {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}

/* =========================================
   Sales Orders form
   ========================================= */
.order-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 16px;
    align-items: start;
}

.order-form-section-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text-primary);
}

.order-form-section .panel-header {
    background: #fff;
}

.order-form-section-secondary {
    background: #fafbfc;
}

.order-form-section-secondary .panel-header {
    background: #fafbfc;
}

.order-form-section .panel-body {
    padding: 16px 18px;
}

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

.order-items-table {
    table-layout: fixed;
    width: 100%;
}

.order-col-product { width: 34%; }
.order-col-qty { width: 12%; }
.order-col-price { width: 16%; }
.order-col-discount { width: 14%; }
.order-col-total { width: 16%; }
.order-col-actions { width: 8%; }

.order-items-table .order-line-total {
    font-size: 13px;
    white-space: nowrap;
}

.order-summary {
    position: sticky;
    top: 16px;
}

.order-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.order-summary-total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    font-weight: 700;
    color: var(--text-primary);
    font-size: 14px;
}

.order-summary-field .form-label {
    font-size: 12px;
    margin-bottom: 4px;
}

.empty-state-compact {
    text-align: center;
    padding: 18px 16px;
    color: var(--text-muted);
}

.empty-state-compact p {
    margin: 0 0 10px;
    font-size: 13px;
}

@media (max-width: 992px) {
    .order-form-layout {
        grid-template-columns: 1fr;
    }

    .order-summary {
        position: static;
        max-width: 360px;
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .order-col-product,
    .order-col-qty,
    .order-col-price,
    .order-col-discount,
    .order-col-total,
    .order-col-actions {
        width: auto;
    }

    .order-summary {
        max-width: none;
        margin-left: 0;
    }
}

/* =========================================
   Reports Module
   ========================================= */
.reports-date-filter {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 16px;
}

.reports-filter-card { width: 100%; }
.reports-filter-panel { padding: 13px 16px; }
.reports-filter-group { display: flex; flex-direction: column; gap: 6px; }
.reports-filter-title { color: #64748b; font-size: 10px; font-weight: 750; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; }
.reports-filter-divider { align-self: stretch; width: 1px; background: #e2e8f0; }
.reports-custom-controls { display: flex; align-items: center; gap: 8px; }

.reports-period-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.reports-period-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: #fff;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    cursor: pointer;
}

button.reports-period-chip { font-family: inherit; }

.reports-period-chip:hover {
    border-color: #bfdbfe;
    color: var(--primary);
    background: #eff6ff;
}

.reports-period-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.reports-date-field {
    min-width: 160px;
}

.reports-date-range-field {
    width: 280px;
    min-width: 240px;
    flex: 0 0 280px;
}

.reports-date-input-wrap {
    position: relative;
}

.reports-date-input-wrap > i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
    font-size: 14px;
}

.reports-date-input-wrap .form-control {
    padding-left: 32px;
    cursor: pointer;
    background: #fff;
}

.reports-date-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.reports-date-actions .btn { height: 34px; }

@media (max-width: 1599.98px) {
    .reports-date-filter { flex-wrap: wrap; }
}

/* Flatpickr – CRM theme */
.flatpickr-calendar {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-md) !important;
    font-family: inherit;
}

input.flatpickr-input[readonly],
.flatpickr-input.form-control {
    background-color: #fff;
    cursor: pointer;
}

.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday {
    color: var(--text-primary);
    fill: var(--text-primary);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
}

.flatpickr-day.inRange {
    background: #dbeafe !important;
    border-color: #dbeafe !important;
    box-shadow: none !important;
}

.flatpickr-day:hover {
    background: #eff6ff;
    border-color: #eff6ff;
}

.flatpickr-day.today {
    border-color: var(--primary);
}

.chart-wrapper-lg {
    height: 280px;
}

.chart-wrapper-donut {
    height: 220px;
}

.chart-wrapper-bar {
    height: 240px;
}

.report-legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.report-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
}

.report-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.report-legend-label {
    font-weight: 500;
    color: var(--text-primary);
    min-width: 90px;
}

.report-legend-meta {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: auto;
    text-align: right;
}

.report-mini-stat {
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
}

.settings-info-note {
    padding: 10px 14px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    font-size: 13px;
    color: #1e40af;
}

/* =========================================
   Responsive – Mobile
   ========================================= */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }

    .main-wrapper {
        margin-left: 0;
    }

    .sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .topbar {
        height: 56px;
        padding: 0 10px 0 6px;
        gap: 6px;
    }

    .topbar-breadcrumb {
        min-width: 0;
        flex: 1;
        overflow: hidden;
    }

    .crm-breadcrumb {
        max-width: 100%;
        min-width: 0;
        gap: 0;
    }

    .crm-breadcrumb-muted,
    .crm-breadcrumb-separator {
        display: none;
    }

    .crm-breadcrumb-active {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        font-weight: 650;
    }

    .topbar-user-copy {
        display: none;
    }

    .topbar-user {
        padding: 0;
        background: transparent;
        gap: 0;
    }

    .topbar-user .user-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .topbar-actions {
        gap: 4px;
        flex-shrink: 0;
        margin-left: auto;
    }

    .topbar-btn-optional {
        display: none;
    }

    .topbar-btn {
        width: 40px;
        height: 40px;
    }

    .global-search {
        flex: 0 0 40px;
        width: 40px;
        max-width: 40px;
        margin: 0;
    }

    .global-search > input {
        width: 40px;
        height: 40px;
        padding: 0;
        font-size: 16px;
        color: transparent;
        caret-color: transparent;
        border-radius: 10px;
        cursor: pointer;
    }

    .global-search .global-search-icon {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .global-search:focus-within,
    .global-search.is-open {
        position: absolute;
        left: 48px;
        right: 10px;
        top: 8px;
        width: auto;
        max-width: none;
        z-index: 120;
    }

    .global-search:focus-within > input,
    .global-search.is-open > input {
        width: 100%;
        padding: 0 38px;
        font-size: 16px;
        color: var(--text-primary);
        caret-color: auto;
        background: #fff;
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
        cursor: text;
    }

    .global-search:focus-within .global-search-icon,
    .global-search.is-open .global-search-icon {
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media (max-width: 575.98px) {
    .content-area { padding: 16px 12px; }
    .kpi-value { font-size: 18px; }
    .date-filter-badge { font-size: 11.5px; padding: 5px 10px; }
    .funnel-layout { gap: 16px; }
    .funnel-legend { width: 130px; }
    .funnel-layer-shape { height: 34px; }
    .funnel-legend-label { font-size: 12px; }
    .panel-header-actions { flex-direction: column; align-items: stretch; }
    .customer-search-form { max-width: none; }
    .detail-row { grid-template-columns: 1fr; gap: 4px; }
    .page-header .d-flex.gap-2 { flex-direction: column; width: 100%; }
    .page-header .d-flex.gap-2 .btn { width: 100%; }
    .page-header { align-items: stretch !important; flex-direction: column; }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { flex: 1; }
    .opportunity-filter-form,
    .activity-filter-form,
    .quote-filter-form,
    .interaction-filter-form { flex-direction: column; align-items: stretch; }
    .stage-filter-select,
    .activity-filter-select,
    .quote-filter-select,
    .interaction-filter-select { width: 100%; }
    .opportunity-period-filter,
    .opportunity-period-filter .form-select { width: 100%; }
    .quote-summary { max-width: none; }
    .calendar-day-cell { min-height: 72px; padding: 4px; }
    .calendar-grid-week .calendar-day-cell { min-height: 180px; }
    .calendar-event-title { display: none; }
    .calendar-event-rich .calendar-event-title { display: inline; }
    .calendar-event-sub { display: none; }
    .calendar-nav { flex-wrap: wrap; justify-content: center; }
    .calendar-nav-btn { font-size: 12px; }
    .calendar-view-toggle { order: -1; width: 100%; justify-content: center; }
    .reports-date-filter { flex-direction: column; align-items: stretch; }
    .reports-filter-card { width: 100%; }
    .reports-filter-divider { display: none; }
    .reports-custom-controls { align-items: stretch; flex-direction: column; }
    .reports-date-actions .btn { flex: 1; }
    .reports-date-field { min-width: 0; width: 100%; }
    .reports-date-range-field { max-width: none; }
    .reports-period-chips { width: 100%; }
    .report-legend-meta { margin-left: 0; text-align: left; display: block; width: 100%; padding-left: 18px; }
}

@media (max-width: 1199.98px) {
    .customer-created-cell,
    .customer-created-header { display: none; }
}

/* SynapIntelligence Zaman Çizelgesi */
.synap-timeline {
    position: relative;
    margin: 0;
    padding: 0 0 0 4px;
}

.synap-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 12px;
    padding-bottom: 18px;
}

.synap-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 0;
    width: 2px;
    background: var(--border-color, #e5e7eb);
}

.synap-timeline-marker {
    width: 12px;
    height: 12px;
    margin-top: 4px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    z-index: 1;
}

.synap-timeline-card {
    min-width: 0;
}

.synap-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin-bottom: 2px;
}

.synap-timeline-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
}

.synap-timeline-caption {
    font-size: 0.75rem;
    color: #6b7280;
}

.synap-timeline-type {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 2px;
}

.synap-timeline-context {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.synap-timeline-context-link {
    color: inherit;
    text-decoration: none;
}

.synap-timeline-context-link:hover {
    text-decoration: underline;
}

.synap-timeline-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

/* Email Intelligence / Meeting follow-up draft generation loading */
.ei-draft-busy {
    pointer-events: none;
}

.ei-draft-busy .panel-body {
    opacity: 0.55;
}

.ei-draft-busy-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(248, 250, 252, 0.72);
    border-radius: inherit;
    z-index: 2;
}

.ei-draft-busy-message {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.65rem 0.9rem;
    border-radius: 0.5rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    font-size: 0.92rem;
    color: #1e293b;
}

.view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: #f8fafc;
}
.view-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border-radius: 7px;
    color: #64748b;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
}
.view-toggle-btn:hover { color: #1d4ed8; background: #eff6ff; }
.view-toggle-btn.active { color: #1d4ed8; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); }
.kanban-feedback { margin: 0 16px 12px; }
.kanban-board {
    display: flex;
    gap: 12px;
    padding: 14px 16px 18px;
    overflow-x: auto;
    align-items: stretch;
    min-height: 420px;
}
.kanban-column {
    flex: 0 0 280px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
    border: 1px solid #e8eef5;
    border-radius: 12px;
    min-height: 380px;
    max-height: min(70vh, 720px);
}
.kanban-column.is-drop-target { border-color: #93b4ff; background: #eff6ff; }
.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e8eef5;
}
.kanban-column-header > div { display: flex; align-items: center; gap: 8px; }
.kanban-column-count {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kanban-column-total { font-size: 11.5px; color: #334155; }
.kanban-column-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.kanban-empty { margin: 18px 8px; text-align: center; color: #94a3b8; font-size: 12px; }
.kanban-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 11px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kanban-card.is-draggable { cursor: grab; }
.kanban-card.is-dragging { opacity: 0.45; }
.kanban-card-title {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 4px;
}
.kanban-card-title:hover { color: #1d4ed8; }
.kanban-card-customer { color: #64748b; font-size: 12px; margin-bottom: 8px; }
.kanban-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #334155;
    font-size: 12px;
    font-weight: 650;
}
.kanban-card-owner {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #64748b;
    font-size: 11.5px;
}
.kanban-card.is-rotting { border-color: #fdba74; }
.rotting-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: #9a3412;
    background: #ffedd5;
    border-radius: 999px;
    padding: 1px 7px;
    line-height: 1.4;
}
.bulk-check-col { width: 36px; vertical-align: middle; }
.bulk-bar {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
}
.bulk-bar[hidden] { display: none !important; }
.bulk-bar-count { font-size: 13px; color: #334155; }
.bulk-bar-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.bulk-bar-form .form-select,
.bulk-bar-form .form-control { min-width: 140px; max-width: 220px; }
@media (max-width: 575.98px) {
    .view-toggle { width: 100%; }
    .view-toggle-btn { flex: 1; justify-content: center; }
    .kanban-column { flex-basis: min(260px, 82vw); max-width: min(260px, 82vw); }
    .bulk-bar-form { width: 100%; }
    .bulk-bar-form .form-select,
    .bulk-bar-form .form-control { max-width: none; flex: 1; }
}