/* Ensijam CRM — Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
    --primary: #1a3a5c;
    --accent:  #c8a45a;
    --green:   #10b981;
    --blue:    #3b82f6;
    --orange:  #f59e0b;
    --purple:  #8b5cf6;
    --red:     #ef4444;
    --bg:      #f0f4f8;
    --card:    #ffffff;
    --border:  #e2e8f0;
    --text:    #1e293b;
    --muted:   #64748b;
    --wa:      #25d366;
}

#wpcontent { background: var(--bg); }
.kcrm-wrap * { box-sizing: border-box; font-family: 'Plus Jakarta Sans', sans-serif; }

/* Header */
.kcrm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--primary);
    padding: 0 20px;
    border-bottom: 3px solid var(--accent);
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 54px;        /* fixed height keeps it compact */
    gap: 12px;
}
/* Logo */
.kcrm-logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.kcrm-logo-icon { font-size: 24px; }
.kcrm-logo-title { display: block; color: #fff; font-size: 17px; font-weight: 700; line-height: 1; }
.kcrm-logo-sub   { color: var(--accent); font-size: 10px; letter-spacing: .5px; border-left: 1px solid rgba(255,255,255,.2); padding-left: 8px; margin-left: 2px; }

/* Nav — centred, flexible */
.kcrm-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    justify-content: center;
    overflow: visible; /* MUST be visible so dropdown panels are not clipped */
}
.kcrm-nav a {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    transition: all .18s;
    white-space: nowrap;
}
.kcrm-nav a:hover,
.kcrm-nav a.active { color: #fff; background: rgba(255,255,255,.13); }
.kcrm-btn-add {
    background: var(--accent) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    margin-left: 8px !important;
    white-space: nowrap !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    letter-spacing: 0.2px !important;
    box-shadow: 0 2px 8px rgba(200,164,90,0.35) !important;
    transition: all 0.18s !important;
    flex-shrink: 0 !important;
}
.kcrm-btn-add:hover {
    background: #d4a843 !important;
    box-shadow: 0 3px 12px rgba(200,164,90,0.5) !important;
    transform: translateY(-1px) !important;
    color: var(--primary) !important;
}

/* Page */
.kcrm-page { padding: 24px; max-width: 1400px; }

/* Cards */
.kcrm-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kcrm-card h3 { margin: 0 0 16px; font-size: 16px; font-weight: 600; color: var(--text); }

/* Stats */
.kcrm-stats-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 16px; margin-bottom: 20px; }
.kcrm-stat-card { background: var(--card); border-radius: 12px; padding: 20px; text-align: center; border-top: 4px solid; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.kcrm-stat-card.blue   { border-color: var(--blue); }
.kcrm-stat-card.green  { border-color: var(--green); }
.kcrm-stat-card.orange { border-color: var(--orange); }
.kcrm-stat-card.purple { border-color: var(--purple); }
.kcrm-stat-card.red    { border-color: var(--red); }
.kcrm-stat-icon  { font-size: 28px; margin-bottom: 8px; }
.kcrm-stat-value { font-size: 36px; font-weight: 700; color: var(--text); line-height: 1; }
.kcrm-stat-label { font-size: 12px; color: var(--muted); margin-top: 4px; font-weight: 500; }

/* Charts */
.kcrm-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }

/* Table */
.kcrm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kcrm-table thead th { background: #f8fafc; color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.kcrm-table tbody td { padding: 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; color: var(--text); }
.kcrm-table tbody tr:hover { background: #f8fafc; }
.kcrm-table tbody tr:last-child td { border-bottom: none; }
.kcrm-contact-name { color: var(--primary); font-weight: 600; text-decoration: none; }
.kcrm-contact-name:hover { color: var(--accent); }
.kcrm-unassigned { color: var(--muted); font-style: italic; font-size: 12px; }
.kcrm-empty { text-align: center; color: var(--muted); padding: 40px !important; font-size: 14px; }

/* Badges */
.kcrm-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; color: #fff; font-size: 11px; font-weight: 600; }
.kcrm-badge.large { font-size: 13px; padding: 5px 14px; }

/* Days badge */
.kcrm-days-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; background: #e2e8f0; color: var(--text); }
.kcrm-days-badge.kcrm-urgent  { background: #fee2e2; color: var(--red); }
.kcrm-days-badge.kcrm-warning { background: #fef3c7; color: #d97706; }

/* Row urgency */
tr.kcrm-urgent td  { background: #fff5f5; }
tr.kcrm-warning td { background: #fffbeb; }
td.kcrm-urgent  { color: var(--red); font-weight: 700; }
td.kcrm-warning { color: #d97706; font-weight: 600; }

/* Buttons */
.kcrm-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; border: none; background: var(--primary); color: #fff; transition: all .2s; }
.kcrm-btn:hover { background: #152f4a; color: #fff; }
.kcrm-btn.primary { background: var(--accent); color: var(--primary); }
.kcrm-btn.primary:hover { background: #d4b06a; }
.kcrm-btn-ghost { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid var(--border); background: transparent; color: var(--muted); transition: all .2s; }
.kcrm-btn-ghost:hover { border-color: var(--primary); color: var(--primary); }
.kcrm-btn-sm { display: inline-flex; padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; cursor: pointer; text-decoration: none; border: 1px solid var(--border); background: #fff; color: var(--text); transition: all .2s; }
.kcrm-btn-sm:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.kcrm-btn-sm.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.kcrm-btn-sm.danger { border-color: #fee2e2; color: var(--red); }
.kcrm-btn-sm.danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.kcrm-wa-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 6px; background: var(--wa); color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; transition: all .2s; }
.kcrm-wa-btn:hover { background: #1da851; color: #fff; }
.kcrm-wa-btn.large { padding: 8px 16px; font-size: 14px; }

/* Toolbar */
.kcrm-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.kcrm-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kcrm-filters input[type=text], .kcrm-filters select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); background: #fff; }
.kcrm-count { font-size: 12px; color: var(--muted); font-weight: 500; }

/* Notices */
.kcrm-notice { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 500; }
.kcrm-notice.success { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.kcrm-notice.warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.kcrm-notice.error   { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }

/* Forms */
.kcrm-form-card { max-width: 860px; }
.kcrm-form h2 { margin: 0 0 24px; font-size: 20px; font-weight: 700; color: var(--text); }
.kcrm-form-section { border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.kcrm-form-section h4 { margin: 0 0 16px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.kcrm-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kcrm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.kcrm-field.full { grid-column: 1/-1; }
.kcrm-field label { font-size: 13px; font-weight: 600; color: var(--text); }
.kcrm-field input, .kcrm-field select, .kcrm-field textarea { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text); font-family: inherit; transition: border .2s; }
.kcrm-field input:focus, .kcrm-field select:focus, .kcrm-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,58,92,.1); }
.kcrm-field small { font-size: 11px; color: var(--muted); }
.req { color: var(--red); }
.kcrm-form-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

/* Detail */
.kcrm-detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; }
.kcrm-detail-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.kcrm-detail-header h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.kcrm-detail-actions { display: flex; gap: 8px; }
.kcrm-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kcrm-info-item { background: #f8fafc; border-radius: 8px; padding: 12px; }
.kcrm-info-item.full { grid-column: 1/-1; }
.kcrm-info-item span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.kcrm-info-item strong { font-size: 14px; color: var(--text); font-weight: 600; }
.kcrm-info-item strong a { color: var(--blue); text-decoration: none; }

/* Activity */
.kcrm-activity-list { list-style: none; margin: 0; padding: 0; }
.kcrm-activity-list li { padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
.kcrm-activity-list li:last-child { border-bottom: none; }
.kcrm-activity-action { display: block; font-size: 13px; font-weight: 600; color: var(--text); }
.kcrm-activity-note   { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.kcrm-activity-meta   { display: block; font-size: 11px; color: #94a3b8; margin-top: 4px; }

@media(max-width:1100px){ .kcrm-stats-grid { grid-template-columns: repeat(3,1fr); } }
@media(max-width:900px) { .kcrm-charts-row,.kcrm-detail-grid { grid-template-columns: 1fr; } .kcrm-form-row { grid-template-columns: 1fr; } }
@media(max-width:768px) { .kcrm-stats-grid { grid-template-columns: repeat(2,1fr); } .kcrm-header { flex-direction: column; padding: 12px; gap: 8px; } }

/* ── Settings ── */
.kcrm-settings-tabs { display:flex; gap:4px; border-bottom:2px solid var(--border); margin-bottom:24px; padding-bottom:0; }
.kcrm-tab { padding:10px 18px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; border-radius:8px 8px 0 0; border:1px solid transparent; border-bottom:none; transition:all .2s; }
.kcrm-tab:hover { color:var(--primary); background:#f8fafc; }
.kcrm-tab.active { color:var(--primary); background:#fff; border-color:var(--border); border-bottom:2px solid #fff; margin-bottom:-2px; }
.kcrm-settings-section h3 { font-size:17px; font-weight:700; color:var(--text); margin:0 0 6px; }
.kcrm-settings-desc { font-size:13px; color:var(--muted); margin:0 0 20px; }
.kcrm-settings-section h4 { font-size:14px; font-weight:700; color:var(--text); margin:24px 0 12px; padding-top:20px; border-top:1px solid var(--border); }
.kcrm-muted { color:var(--muted); font-size:12px; }

/* ── Tag/Stage list ── */
.kcrm-tag-list { display:flex; flex-direction:column; gap:8px; max-width:600px; }
.kcrm-tag-row { display:flex; align-items:center; gap:8px; }
.kcrm-tag-input { flex:1; padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:13px; color:var(--text); font-family:inherit; }
.kcrm-tag-input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(26,58,92,.1); }
.kcrm-color-input { width:38px; height:36px; border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:2px; background:#fff; }
.kcrm-stage-preview { min-width:120px; text-align:center; transition:background .2s; }
.kcrm-btn-remove { background:none; border:1px solid #fecaca; color:var(--red); border-radius:6px; padding:4px 10px; cursor:pointer; font-size:13px; font-weight:700; transition:all .2s; }
.kcrm-btn-remove:hover { background:var(--red); color:#fff; }

/* ── Inline assign ── */
.kcrm-assign-form { margin:0; }
.kcrm-assign-row { display:flex; align-items:center; gap:4px; }
.kcrm-assign-select { padding:5px 8px; border:1px solid var(--border); border-radius:6px; font-size:12px; color:var(--text); background:#fff; max-width:140px; }
.kcrm-assign-select:focus { outline:none; border-color:var(--primary); }
.kcrm-btn-assign { background:var(--green); color:#fff; border:none; border-radius:6px; padding:5px 10px; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; }
.kcrm-btn-assign:hover { background:#059669; }

/* ── Header logo ── */
.kcrm-header-logo {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
    display: block;
}
.kcrm-logo { display:flex; align-items:center; gap:10px; padding:10px 0; }
.kcrm-logo-sub {
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-left: 1px solid rgba(255,255,255,0.2);
    padding-left: 10px;
    margin-left: 2px;
}

/* ── Header user info ── */
.kcrm-header-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    margin-left: 16px;
    border-left: 1px solid rgba(255,255,255,0.15);
    padding-left: 16px;
}
.kcrm-user-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #e9584b;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kcrm-user-info { display: flex; flex-direction: column; }
.kcrm-user-name { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.2; }
.kcrm-user-role { color: rgba(255,255,255,0.5); font-size: 11px; }
.kcrm-logout-btn {
    color: rgba(255,255,255,0.5);
    font-size: 18px;
    text-decoration: none;
    padding: 4px 6px;
    border-radius: 6px;
    transition: all .2s;
    line-height: 1;
}
.kcrm-logout-btn:hover { color: #e9584b; background: rgba(255,255,255,0.1); }

/* ── Import steps ── */
.kcrm-import-steps { display: flex; flex-direction: column; gap: 24px; max-width: 680px; }
.kcrm-import-step { display: flex; gap: 16px; align-items: flex-start; }
.kcrm-step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: #1a3a5c; color: #fff;
    font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.kcrm-import-step strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.kcrm-import-step p { font-size: 13px; color: var(--muted); line-height: 1.5; }
.kcrm-import-step code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; color: var(--primary); }

/* ── File upload ── */
.kcrm-file-upload { position: relative; }
.kcrm-file-upload input[type=file] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; z-index: 2; }
.kcrm-file-label {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all .2s;
    background: #f8fafc;
}
.kcrm-file-label:hover { border-color: var(--primary); background: #f0f4f8; }
.kcrm-file-icon { font-size: 22px; }
.kcrm-file-text { font-size: 13px; color: var(--muted); font-weight: 500; }

/* ── Info box (login URL) ── */
.kcrm-info-box {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.kcrm-info-box strong { display: block; color: #1e40af; font-size: 14px; margin-bottom: 6px; }
.kcrm-info-box p { font-size: 13px; color: #3b82f6; margin-bottom: 10px; }
.kcrm-url-display { display: flex; align-items: center; gap: 10px; }
.kcrm-url-display code { flex:1; background:#fff; border:1px solid #bfdbfe; padding:8px 12px; border-radius:8px; font-size:13px; color:#1e40af; word-break:break-all; }

/* ══════════════════════════════════════════════
   FRONTEND PAGE OVERRIDES
   When CRM runs on WordPress frontend pages
   (not WP admin), reset browser/theme defaults.
   ══════════════════════════════════════════════ */

/* Full-page body reset */
body.kcrm-frontend-body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
}

/* ── Kill the WP admin-bar margin-top bump that applies even when bar is hidden ── */
html:has(body.kcrm-frontend-body) {
    margin-top: 0 !important;
}

/* ── Hide admin bar entirely on CRM frontend pages ── */
body.kcrm-frontend-body #wpadminbar {
    display: none !important;
}

/* ── Header always sticks to very top — no gap ── */
body.kcrm-frontend-body .kcrm-header {
    position: sticky;
    top: 0 !important;
    z-index: 1000;
}

/* ── Hide any theme header/footer/sidebars that bleed through ── */
body.kcrm-frontend-body > *:not(.kcrm-wrap):not(.kcrm-app-shell):not(script):not(style):not(#wpadminbar) {
    display: none !important;
}

/* ── CRM wrap fills viewport ── */
body.kcrm-frontend-body .kcrm-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ── Remove WP admin #wpcontent override (not present on frontend) ── */
body.kcrm-frontend-body #wpcontent { background: transparent; }

/* ══ Responsive nav for mobile ══ */
@media (max-width: 900px) {
    .kcrm-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 16px;
    }
    .kcrm-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        flex-wrap: nowrap;
    }
    .kcrm-nav a {
        white-space: nowrap;
    }
    .kcrm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .kcrm-charts-row {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════
   BODY LAYOUT  (main content + right sidebar)
   ══════════════════════════════════════════════ */
.kcrm-body-layout {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-height: 0;
}

.kcrm-main {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

/* ══════════════════════════════════════════════
   RIGHT SIDEBAR
   ══════════════════════════════════════════════ */
.kcrm-sidebar {
    width: 270px;
    flex-shrink: 0;
    padding: 20px 16px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 60px;          /* sits just below the sticky header (~60px tall) */
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.kcrm-widget {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ══════════════════════════════════════════════
   CALENDAR WIDGET
   ══════════════════════════════════════════════ */
.kcrm-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.kcrm-cal-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

.kcrm-cal-nav {
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 6px;
    line-height: 1;
    transition: background .15s;
}
.kcrm-cal-nav:hover { background: var(--bg); }

/* 7-column grid */
.kcrm-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.kcrm-cal-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    padding: 4px 0;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.kcrm-cal-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: default;
    transition: background .15s;
    min-height: 30px;
}

.kcrm-cal-cell.empty { background: transparent; }

.kcrm-cal-cell:not(.empty):hover {
    background: var(--bg);
}

.kcrm-cal-day {
    font-size: 11px;
    font-weight: 500;
    color: var(--text);
    line-height: 1;
}

/* Today highlight */
.kcrm-cal-cell.today {
    background: var(--primary);
    border-radius: 6px;
}
.kcrm-cal-cell.today .kcrm-cal-day {
    color: #fff;
    font-weight: 700;
}
.kcrm-cal-cell.today:hover {
    background: #244d78;
}

/* Event cells — light red tint */
.kcrm-cal-cell.has-event {
    background: #fff0f0;
    cursor: pointer;
}
.kcrm-cal-cell.has-event:hover {
    background: #ffd6d6;
}
.kcrm-cal-cell.today.has-event {
    background: var(--primary);  /* today always primary */
    outline: 2px solid #ef4444;
    outline-offset: 1px;
}

/* Dots */
.kcrm-cal-dots {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    justify-content: center;
}
.kcrm-cal-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}
.kcrm-cal-dot.followup { background: #3b82f6; }
.kcrm-cal-dot.renewal  { background: #ef4444; }

.kcrm-cal-legend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--muted);
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════
   CALENDAR TOOLTIP  (hover popup)
   ══════════════════════════════════════════════ */
.kcrm-cal-tooltip {
    position: absolute;
    z-index: 9999;
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 200px;
    max-width: 260px;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    pointer-events: none;
    font-size: 12px;
    line-height: 1.4;
}
.kcrm-tip-row {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.kcrm-tip-row:last-child { border-bottom: none; }
.kcrm-tip-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.kcrm-tip-name {
    font-weight: 600;
    color: #fff;
    font-size: 13px;
}
.kcrm-tip-svc {
    font-size: 11px;
    color: rgba(255,255,255,.65);
}

/* ══════════════════════════════════════════════
   TO-DO WIDGET
   ══════════════════════════════════════════════ */
.kcrm-widget-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.kcrm-todo-section {
    margin-bottom: 12px;
}
.kcrm-todo-section:last-child { margin-bottom: 0; }

.kcrm-todo-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin-bottom: 6px;
}

.kcrm-todo-item {
    display: flex;
    flex-direction: column;
    padding: 7px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background .15s;
}
.kcrm-todo-item.followup {
    background: #eff6ff;
    border-left-color: #3b82f6;
}
.kcrm-todo-item.followup:hover { background: #dbeafe; }
.kcrm-todo-item.renewal {
    background: #fff0f0;
    border-left-color: #ef4444;
}
.kcrm-todo-item.renewal:hover { background: #fee2e2; }

.kcrm-todo-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kcrm-todo-svc {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kcrm-todo-date {
    font-size: 11px;
    color: var(--muted);
    margin-top: 1px;
    font-weight: 600;
}

.kcrm-todo-empty {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 8px 0;
}

.kcrm-todo-section.upcoming .kcrm-todo-item {
    opacity: .85;
}

/* ══════════════════════════════════════════════
   INLINE STAGE UPDATE  (contacts table)
   ══════════════════════════════════════════════ */
.kcrm-stage-update-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 140px;
}

.kcrm-stage-edit-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.kcrm-stage-select {
    flex: 1;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: #f8fafc;
    color: var(--text);
    cursor: pointer;
    max-width: 130px;
}
.kcrm-stage-select:focus { outline: 2px solid var(--primary); }

.kcrm-stage-save-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 4px 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
    line-height: 1.4;
}
.kcrm-stage-save-btn:hover { background: #244d78; transform: scale(1.07); }
.kcrm-stage-save-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.kcrm-stage-spinner { font-size: 12px; }

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.kcrm-footer {
    text-align: center;
    padding: 16px 24px;
    font-size: 12px;
    color: var(--muted);
    border-top: 1px solid var(--border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}
.kcrm-footer strong { color: var(--primary); font-weight: 700; }
.kcrm-footer-sep { color: var(--border); font-size: 14px; }

/* ══════════════════════════════════════════════
   RESPONSIVE  sidebar collapses on small screens
   ══════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .kcrm-sidebar { width: 230px; }
}

@media (max-width: 860px) {
    .kcrm-body-layout { flex-direction: column; }
    .kcrm-sidebar {
        width: 100%;
        position: static;
        max-height: none;
        padding: 0 16px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        overflow: visible;
    }
    .kcrm-widget {
        flex: 1;
        min-width: 240px;
    }
}

/* ══════════════════════════════════════════════
   NOTES WIDGET
   ══════════════════════════════════════════════ */
.kcrm-notes-widget {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kcrm-notes-textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.5;
    transition: border-color .2s;
    min-height: 100px;
}
.kcrm-notes-textarea:focus {
    outline: none;
    border-color: var(--primary);
}
.kcrm-notes-save-btn {
    width: 100%;
    justify-content: center;
}
.kcrm-note-status {
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
    text-align: center;
}
.kcrm-note-status.success { background: #d1fae5; color: #065f46; }
.kcrm-note-status.error   { background: #fee2e2; color: #991b1b; }

/* ══════════════════════════════════════════════
   DOCUMENTS / FILE UPLOAD SECTION
   ══════════════════════════════════════════════ */
.kcrm-files-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.kcrm-files-header h3 { margin: 0; }

.kcrm-upload-panel {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
    margin-bottom: 4px;
}
.kcrm-upload-form { margin: 0; }
.kcrm-upload-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: flex-end;
}
.kcrm-field-file input[type="file"] {
    width: 100%;
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    background: #fff;
}
.kcrm-field-action { display: flex; align-items: flex-end; }

.kcrm-files-table .kcrm-file-type-badge {
    display: inline-block;
    background: #ede9fe;
    color: #5b21b6;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.kcrm-file-icon-label {
    font-size: 13px;
    color: var(--text);
}
.kcrm-files-table td { vertical-align: middle; }

/* ══════════════════════════════════════════════
   FOLLOW-UPS PAGE — STATUS BADGE
   ══════════════════════════════════════════════ */
.kcrm-days-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    background: #e0f2fe;
    color: #075985;
}
.kcrm-days-badge.kcrm-urgent  { background: #fee2e2; color: #991b1b; }
.kcrm-days-badge.kcrm-warning { background: #fef9c3; color: #854d0e; }

/* Overdue / warning row highlights */
tr.kcrm-urgent  td { background: #fff5f5; }
tr.kcrm-warning td { background: #fffbeb; }

/* ══════════════════════════════════════════════
   RESPONSIVE — upload row on mobile
   ══════════════════════════════════════════════ */
@media (max-width: 700px) {
    .kcrm-upload-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   CONTACT CARD GRID  (replaces table view)
   ═══════════════════════════════════════════════ */

.kcrm-contacts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.kcrm-search-wrap { position: relative; display: flex; align-items: center; }
.kcrm-search-icon { position: absolute; left: 10px; font-size: 14px; pointer-events: none; }
.kcrm-contacts-toolbar input[type=text] {
    padding: 8px 10px 8px 32px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    min-width: 200px;
    color: var(--text);
}
.kcrm-contacts-toolbar select {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: #fff;
}
.kcrm-contacts-toolbar input:focus,
.kcrm-contacts-toolbar select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(26,58,92,.1); }

/* Grid layout */
.kcrm-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 18px;
}

/* Individual card */
.kcrm-contact-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: transform .2s, box-shadow .2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.kcrm-contact-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
}

/* Card header */
.kcrm-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.kcrm-card-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    letter-spacing: .5px;
}
.kcrm-card-identity { flex: 1; min-width: 0; }
.kcrm-card-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kcrm-card-name:hover { color: #e9584b; }
.kcrm-card-nationality { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.kcrm-card-stage { font-size: 10px !important; padding: 3px 8px !important; white-space: nowrap; }

/* Service tag */
.kcrm-card-service {
    padding: 8px 16px;
    border-bottom: 1px solid #f8fafc;
}
.kcrm-service-tag {
    display: inline-block;
    background: #eff6ff;
    color: #1e40af;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}

/* Info rows */
.kcrm-card-info {
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}
.kcrm-card-info-row {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--muted);
}
.kcrm-card-info-row.urgent { color: var(--red); }
.kcrm-card-info-row.warning { color: #d97706; }
.kcrm-card-info-icon { font-size: 13px; flex-shrink: 0; }
.kcrm-card-badge-urgent {
    display: inline-block;
    background: #fee2e2;
    color: var(--red);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}
.kcrm-card-badge-warning {
    display: inline-block;
    background: #fef3c7;
    color: #d97706;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 4px;
}

/* Meta row (assign + files) */
.kcrm-card-meta {
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.kcrm-card-assign { flex: 1; }
.kcrm-card-agent { font-size: 12px; color: var(--muted); }
.kcrm-card-files-badge {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* Action buttons row */
.kcrm-card-actions {
    display: flex;
    gap: 6px;
    padding: 10px 16px 14px;
    flex-wrap: wrap;
}
.kcrm-card-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all .15s;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
}
.kcrm-card-action-btn:hover { background: #f8fafc; color: var(--primary); border-color: var(--primary); }
.kcrm-card-action-btn.view    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.kcrm-card-action-btn.edit    { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }
.kcrm-card-action-btn.whatsapp { background: #f0fdf4; color: #16a34a; border-color: #bbf7d0; }
.kcrm-card-action-btn.download { background: #fffbeb; color: #d97706; border-color: #fde68a; }
.kcrm-card-action-btn.delete  { background: #fef2f2; color: var(--red); border-color: #fecaca; }
.kcrm-card-action-btn:hover.view    { background: #dbeafe; }
.kcrm-card-action-btn:hover.delete  { background: #fee2e2; }

/* Empty state */
.kcrm-empty-state {
    text-align: center;
    padding: 60px 20px;
}
.kcrm-empty-icon { font-size: 48px; margin-bottom: 12px; }
.kcrm-empty-state p { color: var(--muted); font-size: 15px; margin-bottom: 16px; }

/* ═══════════════════════════════════════════════
   INLINE FILE UPLOAD in contact form
   ═══════════════════════════════════════════════ */
.kcrm-form-hint { font-size: 13px; color: var(--muted); margin: -8px 0 12px; }

.kcrm-file-upload-inline { position: relative; }
.kcrm-file-upload-inline input[type=file] {
    position: absolute; opacity: 0; width: 100%; height: 100%;
    cursor: pointer; z-index: 2; top: 0; left: 0;
}
.kcrm-file-label-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1.5px dashed var(--border);
    border-radius: 8px;
    cursor: pointer;
    background: #f8fafc;
    transition: all .2s;
}
.kcrm-file-label-inline:hover { border-color: var(--primary); background: #f0f4f8; }
.kcrm-file-name-display { font-size: 13px; color: var(--muted); }

/* Existing files in edit form */
.kcrm-existing-files { margin-top: 14px; }
.kcrm-existing-files label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; }
.kcrm-files-list { display: flex; flex-direction: column; gap: 6px; }
.kcrm-file-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
}
.kcrm-file-badge {
    background: #eff6ff;
    color: #1e40af;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    white-space: nowrap;
}
.kcrm-file-row-name { flex: 1; color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kcrm-file-row-date { color: var(--muted); white-space: nowrap; font-size: 11px; }

@media (max-width: 768px) {
    .kcrm-contact-grid { grid-template-columns: 1fr; }
    .kcrm-contacts-toolbar { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════
   REPORTS — progress bars & labels
   ═══════════════════════════════════ */
.kcrm-report-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    margin-left: 6px;
}
.kcrm-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}
.kcrm-progress-bar {
    height: 8px;
    border-radius: 4px;
    min-width: 4px;
    transition: width .3s;
    flex-shrink: 0;
}
.kcrm-progress-wrap span {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    font-weight: 600;
}

/* Dashboard followup card tweak */
.kcrm-followup-card { border-left: 3px solid #8b5cf6; }

/* ══════════════════════════════════════════════
   HEADER — COMPANY NAME + RIGHT GROUP
   ══════════════════════════════════════════════ */

/* Wrap company chip + user block together on the right */
.kcrm-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Company chip */
.kcrm-header-company {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;
    padding: 4px 12px 4px 8px;
    max-width: 180px;
    overflow: hidden;
}

.kcrm-company-icon {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.kcrm-company-name {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .1px;
}

/* Divider between company chip and user block */
.kcrm-header-right .kcrm-header-user {
    border-left: 1px solid rgba(255,255,255,.15);
    padding-left: 8px;
    gap: 7px;
}

/* ══════════════════════════════════════════════
   SETTINGS — COMPANY TAB
   ══════════════════════════════════════════════ */

/* Section sub-label inside the form */
.kcrm-company-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--muted);
    margin: 20px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.kcrm-company-section-label:first-of-type {
    margin-top: 4px;
}

/* Preview card shown after saving */
.kcrm-company-preview {
    margin-top: 28px;
}
.kcrm-company-preview-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
}
.kcrm-company-preview-card {
    background: linear-gradient(135deg, var(--primary) 0%, #244d78 100%);
    border-radius: 12px;
    padding: 20px 24px;
    color: #fff;
    max-width: 480px;
}
.kcrm-co-preview-name {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 3px;
}
.kcrm-co-preview-tag {
    font-size: 12px;
    color: var(--accent);
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: .2px;
}
.kcrm-co-preview-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.kcrm-co-preview-details span {
    font-size: 12px;
    color: rgba(255,255,255,.80);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* Responsive — collapse company chip on smaller screens */
@media (max-width: 1100px) {
    .kcrm-header-company { max-width: 160px; }
}
@media (max-width: 860px) {
    .kcrm-header-company { display: none; }
}

/* ══════════════════════════════════════════════
   DASHBOARD — KPI CARDS  (replaces stat-grid)
   ══════════════════════════════════════════════ */
.kcrm-dashboard { padding: 20px 24px; }

.kcrm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.kcrm-kpi-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px 14px;
    border-top: 3px solid var(--kpi-color, #3b82f6);
    box-shadow: 0 1px 4px rgba(0,0,0,.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: box-shadow .2s, transform .2s;
}
.kcrm-kpi-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.11);
    transform: translateY(-2px);
}

.kcrm-kpi-left { flex: 1; min-width: 0; }

.kcrm-kpi-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--kpi-color, #1a3a5c);
    line-height: 1;
    margin-bottom: 4px;
}

.kcrm-kpi-label {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.kcrm-kpi-sub {
    font-size: 10px;
    color: var(--muted);
    margin-top: 3px;
}
.kcrm-kpi-alert {
    color: #ef4444 !important;
    font-weight: 600;
}

.kcrm-kpi-icon {
    font-size: 22px;
    opacity: .75;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════
   DASHBOARD — 4-CHART GRID
   ══════════════════════════════════════════════ */
.kcrm-charts-4grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

.kcrm-chart-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    transition: box-shadow .2s;
}
.kcrm-chart-card:hover {
    box-shadow: 0 4px 18px rgba(0,0,0,.10);
}

.kcrm-chart-header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.kcrm-chart-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary);
}

.kcrm-chart-subtitle {
    font-size: 11px;
    color: var(--muted);
}

.kcrm-chart-body {
    padding: 12px 14px 14px;
    /* Fixed height so all 4 charts are the same size */
    height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.kcrm-chart-body canvas {
    max-height: 166px !important;
}

/* ══════════════════════════════════════════════
   DASHBOARD — FOLLOW-UPS TODAY CARD
   ══════════════════════════════════════════════ */
.kcrm-followup-today-card { padding: 16px 20px; }

.kcrm-card-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.kcrm-card-title-row h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}
.kcrm-title-sub {
    font-size: 11px;
    color: var(--muted);
    font-weight: 400;
    background: var(--bg);
    padding: 2px 8px;
    border-radius: 20px;
}

/* Tight contact card grid */
.kcrm-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
}

.kcrm-contact-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow .15s, transform .15s;
}
.kcrm-contact-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    transform: translateY(-1px);
}

.kcrm-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 8px;
}

.kcrm-card-avatar {
    width: 34px; height: 34px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kcrm-card-identity { flex: 1; min-width: 0; }

.kcrm-card-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kcrm-card-name:hover { color: var(--primary); text-decoration: underline; }

.kcrm-card-nationality {
    font-size: 10px;
    color: var(--muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kcrm-card-stage {
    font-size: 9px !important;
    padding: 3px 7px !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.kcrm-card-actions {
    display: flex;
    gap: 5px;
    padding: 8px 12px 10px;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    background: #fff;
}

.kcrm-card-action-btn {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity .15s;
}
.kcrm-card-action-btn:hover { opacity: .80; }
.kcrm-card-action-btn.call     { background: #eff6ff; color: #3b82f6; }
.kcrm-card-action-btn.whatsapp { background: #f0fdf4; color: #16a34a; }
.kcrm-card-action-btn.view     { background: #f5f3ff; color: #7c3aed; }
.kcrm-card-agent { font-size: 10px; color: var(--muted); align-self: center; }

/* ══════════════════════════════════════════════
   RESPONSIVE — dashboard
   ══════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .kcrm-kpi-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .kcrm-kpi-grid     { grid-template-columns: repeat(2, 1fr); }
    .kcrm-charts-4grid { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
    .kcrm-kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════
   VIEW TOGGLE BUTTONS  (card ⊞ / list ≡)
   ══════════════════════════════════════════════ */
.kcrm-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.kcrm-view-toggle {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}

.kcrm-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--muted);
    transition: background .15s, color .15s;
    padding: 0;
}
.kcrm-view-btn:hover {
    background: #e2e8f0;
    color: var(--primary);
}
.kcrm-view-btn.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* ══ List view avatar cell ══ */
.kcrm-list-contact-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.kcrm-list-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* Icon button styles moved to nav dropdown system */

/* ── Notification dropdown ── */
.kcrm-notif-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.kcrm-notif-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}
.kcrm-notif-list { max-height: 320px; overflow-y: auto; }
.kcrm-notif-empty {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}
.kcrm-notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.12s;
}
.kcrm-notif-item:hover { background: #f8fafc; }
.kcrm-notif-title { font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.kcrm-notif-sub   { font-size: 12px; color: #64748b; margin-bottom: 2px; }
.kcrm-notif-time  { font-size: 11px; color: #94a3b8; }

/* ════════════════════════════════════════════════════════════
   TEAM CHAT PANEL (WhatsApp-style)
   ════════════════════════════════════════════════════════════ */
.kcrm-tchat-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9990;
}
.kcrm-tchat-panel {
    position: fixed;
    bottom: 0; right: 0;
    width: min(780px, 100vw);
    height: min(560px, 92vh);
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 40px rgba(0,0,0,0.2);
    z-index: 9991;
    display: flex;
    overflow: hidden;
}

/* ── Sidebar (user list) ── */
.kcrm-tchat-sidebar {
    width: 240px;
    min-width: 240px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    background: #f8fafc;
}
.kcrm-tchat-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    font-weight: 600;
    font-size: 14px;
    color: #1e293b;
}
.kcrm-tchat-close {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #94a3b8;
    padding: 4px 6px;
    border-radius: 6px;
    line-height: 1;
}
.kcrm-tchat-close:hover { background: #e2e8f0; }
.kcrm-tchat-userlist { flex: 1; overflow-y: auto; padding: 8px 0; }
.kcrm-tchat-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.12s;
    border-radius: 8px;
    margin: 2px 6px;
    position: relative;
}
.kcrm-tchat-user:hover  { background: #e8f0fe; }
.kcrm-tchat-user.active { background: #dbeafe; }
.kcrm-tchat-user-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.kcrm-tchat-user-name { font-size: 13px; font-weight: 500; color: #1e293b; flex: 1; }
.kcrm-tchat-unread-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: #ef4444;
    flex-shrink: 0;
}

/* ── Main chat area ── */
.kcrm-tchat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kcrm-tchat-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    gap: 8px;
}
.kcrm-tchat-empty span { font-size: 40px; }
.kcrm-tchat-empty p   { font-size: 14px; margin: 0; }
.kcrm-tchat-conv { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.kcrm-tchat-conv-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    flex-shrink: 0;
}
.kcrm-tchat-conv-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.kcrm-tchat-conv-name { font-weight: 600; font-size: 14px; color: #1e293b; }
.kcrm-tchat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f0f4f8;
}
.kcrm-tchat-msg { display: flex; flex-direction: column; max-width: 72%; }
.kcrm-tchat-msg.mine    { align-self: flex-end; align-items: flex-end; }
.kcrm-tchat-msg.theirs  { align-self: flex-start; align-items: flex-start; }
.kcrm-tchat-bubble {
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    word-break: break-word;
    max-width: 100%;
}
.kcrm-tchat-msg.mine .kcrm-tchat-bubble {
    background: #1a3a5c;
    color: #fff;
    border-bottom-right-radius: 4px;
}
.kcrm-tchat-msg.theirs .kcrm-tchat-bubble {
    background: #fff;
    color: #1e293b;
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.kcrm-tchat-time { font-size: 10px; color: #94a3b8; margin-top: 2px; padding: 0 4px; }
.kcrm-tchat-input-row {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
    align-items: flex-end;
}
.kcrm-tchat-input-row textarea {
    flex: 1;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 13px;
    resize: none;
    outline: none;
    font-family: inherit;
    max-height: 100px;
    line-height: 1.4;
}
.kcrm-tchat-input-row textarea:focus { border-color: #1a3a5c; }
.kcrm-tchat-send-btn {
    background: #1a3a5c;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 38px; height: 38px;
    cursor: pointer;
    font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.kcrm-tchat-send-btn:hover { background: #2a4f7c; }

/* ════════════════════════════════════════════════════════════
   24-HOUR WINDOW BANNER + TEMPLATE MODAL
   ════════════════════════════════════════════════════════════ */
.kaa-24hr-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: #fff7ed;
    border-top: 2px solid #f97316;
    font-size: 12.5px;
    color: #9a3412;
    flex-shrink: 0;
}
.kaa-24hr-banner span { flex: 1; }

.kaa-tpl-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9995;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.kaa-tpl-modal-box {
    background: #fff;
    border-radius: 14px;
    width: min(520px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.kaa-tpl-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
}
.kaa-tpl-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    flex: 1;
}
.kaa-tpl-list { display: flex; flex-direction: column; gap: 10px; }
.kaa-tpl-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.kaa-tpl-name {
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
}
.kaa-tpl-body {
    font-size: 12.5px;
    color: #64748b;
    white-space: pre-wrap;
    word-break: break-word;
}



/* ── Mobile: hide chat panel sidebar on small screens ── */
@media (max-width: 600px) {
    .kcrm-tchat-panel { width: 100vw; height: 92vh; border-radius: 16px 16px 0 0; }
    .kcrm-tchat-sidebar { display: none; }
    .kcrm-tchat-conv { display: flex !important; }
}

/* ════════════════════════════════════════════════════════════
   NAV DROPDOWN SYSTEM — Notifications, Chat, More (⋯)
   ════════════════════════════════════════════════════════════ */

/* Wrapper for any nav item that has a dropdown */
.kcrm-nav-dropdown-wrap {
    position: relative;
}

/* Utility nav link style (Notifications, Chat) — same as regular nav links */
.kcrm-nav-util {
    color: rgba(255,255,255,.72);
    text-decoration: none;
    padding: 6px 11px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    transition: all .18s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.kcrm-nav-util:hover,
.kcrm-nav-util.active { color: #fff; background: rgba(255,255,255,.13); }

/* Badge on Notifications / Chat nav items */
.kcrm-notif-badge,
.kcrm-chat-badge {
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Base dropdown panel */
.kcrm-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    z-index: 9999;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

/* ── Notification dropdown ── */
.kcrm-notif-header,
.kcrm-chat-menu-header {
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 14px;
}
.kcrm-notif-list { max-height: 320px; overflow-y: auto; }
.kcrm-notif-empty {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}
.kcrm-notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.12s;
    cursor: default;
}
.kcrm-notif-item:hover { background: #f8fafc; }
.kcrm-notif-title { font-size: 13px; color: #1e293b; margin-bottom: 2px; }
.kcrm-notif-sub   { font-size: 12px; color: #64748b; margin-bottom: 2px; }
.kcrm-notif-time  { font-size: 11px; color: #94a3b8; }

/* ── Chat menu dropdown ── */
.kcrm-chat-menu { min-width: 220px; }
.kcrm-chat-menu-users { max-height: 280px; overflow-y: auto; padding: 6px 0; }
/* Reuse .kcrm-tchat-user styles from team chat panel */

/* ── More (⋯) dropdown ── */
.kcrm-more-dropdown { min-width: 160px; padding: 6px 0; }
.kcrm-more-item {
    display: block;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1e293b;
    text-decoration: none;
    transition: background 0.12s;
}
.kcrm-more-item:hover  { background: #f1f5f9; color: #1e293b; }
.kcrm-more-item.active { background: #dbeafe; color: #1a3a5c; font-weight: 600; }

/* ⋯ button styling */
#kcrm-more-btn {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 10px;
}


/* ===== Premium SaaS Layout Upgrade ===== */
:root {
  --kcrm-sidebar-bg:#0b1f3a;
  --kcrm-sidebar-bg-2:#10284b;
  --kcrm-sidebar-text:#e7eef9;
  --kcrm-sidebar-muted:rgba(231,238,249,.58);
  --kcrm-sidebar-active:#173766;
  --kcrm-sidebar-border:rgba(255,255,255,.08);
  --kcrm-header-bg:#eef3f9;
  --kcrm-header-border:#d9e4ef;
  --kcrm-header-chip:#ffffff;
  --kcrm-app-bg:#f3f7fb;
  --kcrm-content-max:calc(100vw - 290px);
}
body.kcrm-frontend-body{background:var(--kcrm-app-bg)!important;color:#0f172a;}
body.kcrm-frontend-body .kcrm-wrap{margin-top:0!important;padding-top:0!important;}
.kcrm-app-shell{display:flex;min-height:100vh;background:var(--kcrm-app-bg);}
.kcrm-app-sidebar{position:fixed;left:0;top:0;bottom:0;width:266px;background:linear-gradient(180deg,var(--kcrm-sidebar-bg) 0%, #0d2444 100%);color:var(--kcrm-sidebar-text);z-index:1000;border-right:1px solid var(--kcrm-sidebar-border);box-shadow:0 10px 30px rgba(2,12,27,.22);display:flex;flex-direction:column;transition:transform .25s ease,width .25s ease;}
.kcrm-sidebar-brand{padding:22px 22px 18px;border-bottom:1px solid var(--kcrm-sidebar-border);}
.kcrm-sidebar-brand-logo-wrap{display:flex;align-items:center;gap:12px;min-height:34px;}
.kcrm-sidebar-brand-logo{height:28px;width:auto;filter:brightness(0) invert(1);display:block;}
.kcrm-sidebar-brand-divider{width:1px;height:22px;background:rgba(255,255,255,.22);}
.kcrm-sidebar-brand-text{font-size:12px;letter-spacing:2px;font-weight:800;color:#fff;text-transform:uppercase;}
.kcrm-sidebar-scroll{padding:18px 14px 24px;overflow:auto;}
.kcrm-side-group + .kcrm-side-group{margin-top:16px;}
.kcrm-side-title{padding:0 10px 8px;font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--kcrm-sidebar-muted);}
.kcrm-side-links{display:flex;flex-direction:column;gap:4px;}
.kcrm-side-link{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;color:var(--kcrm-sidebar-text);text-decoration:none;font-weight:600;font-size:14px;transition:background .18s ease,transform .18s ease,box-shadow .18s ease;position:relative;}
.kcrm-side-link:hover{background:rgba(255,255,255,.08);transform:translateX(2px);color:#fff;}
.kcrm-side-link.active{background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(42,93,170,.28));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;}
.kcrm-side-link.active:before{content:'';position:absolute;left:-2px;top:10px;bottom:10px;width:4px;border-radius:12px;background:#dce9ff;}
.kcrm-side-icon{width:22px;text-align:center;font-size:15px;flex:0 0 22px;}
.kcrm-side-chat-dot{width:8px;height:8px;border-radius:999px;background:#22c55e;margin-left:auto;box-shadow:0 0 0 6px rgba(34,197,94,.12);}
.kcrm-mobile-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:999;backdrop-filter:blur(2px);}
.kcrm-content-shell{margin-left:266px;min-width:0;flex:1;display:flex;flex-direction:column;}
.kcrm-topbar{position:sticky;top:0;z-index:980;height:78px;display:grid;grid-template-columns:auto minmax(260px,1fr) auto;gap:18px;align-items:center;padding:16px 24px;background:rgba(238,243,249,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--kcrm-header-border);}
.kcrm-topbar-left,.kcrm-topbar-right{display:flex;align-items:center;gap:14px;min-width:0;}
.kcrm-topbar-center{min-width:0;}
.kcrm-topbar-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#0f172a;font-weight:800;}
.kcrm-topbar-brand .kcrm-header-logo{height:28px;width:auto;display:block;filter:none;}
.kcrm-brand-divider{width:1px;height:20px;background:#b6c5d7;}
.kcrm-topbar-brand-text{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#1e3a5f;}
.kcrm-topbar-toggle{width:42px;height:42px;border:none;border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.06);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer;}
.kcrm-topbar-toggle span{width:18px;height:2px;background:#183153;border-radius:4px;display:block;}
.kcrm-global-search-form{position:relative;display:flex;align-items:center;}
.kcrm-global-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.7;pointer-events:none;}
.kcrm-global-search{width:100%;height:46px;border-radius:14px;border:1px solid #d7e2ed;background:#fff;padding:0 16px 0 42px;font-size:14px;color:#0f172a;box-shadow:0 1px 2px rgba(15,23,42,.03);}
.kcrm-global-search:focus{outline:none;border-color:#91b1d5;box-shadow:0 0 0 4px rgba(37,99,235,.08);}
.kcrm-header-add-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:12px;background:#173766;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 10px 20px rgba(23,55,102,.15);white-space:nowrap;}
.kcrm-header-add-btn:hover{background:#102d56;color:#fff;}
.kcrm-header-icon-wrap{position:relative;}
.kcrm-header-icon-btn{position:relative;width:44px;height:44px;border:1px solid #d7e2ed;background:#fff;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.kcrm-header-icon{font-size:17px;line-height:1;}
.kcrm-header-company-pill{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;background:var(--kcrm-header-chip);border:1px solid #d7e2ed;color:#183153;max-width:220px;}
.kcrm-company-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;}
.kcrm-profile-dropdown{position:relative;}
.kcrm-profile-trigger{height:48px;border:none;background:#fff;border-radius:14px;padding:6px 10px 6px 8px;display:flex;align-items:center;gap:10px;cursor:pointer;border:1px solid #d7e2ed;box-shadow:0 1px 2px rgba(15,23,42,.04);}
.kcrm-profile-meta{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0;}
.kcrm-profile-caret{font-size:12px;color:#64748b;}
.kcrm-user-avatar{width:34px;height:34px;border-radius:12px;background:#173766;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;box-shadow:none;}
.kcrm-user-name{font-size:13px;font-weight:700;color:#0f172a;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kcrm-user-role{font-size:11px;color:#64748b;}
.kcrm-profile-menu{position:absolute;right:0;top:56px;min-width:220px;background:#fff;border:1px solid #dbe4ee;border-radius:16px;box-shadow:0 20px 30px rgba(15,23,42,.12);padding:10px;z-index:1005;}
.kcrm-profile-menu-head{padding:8px 10px 10px;border-bottom:1px solid #edf2f7;margin-bottom:6px;display:flex;flex-direction:column;gap:4px;}
.kcrm-profile-menu-head span{font-size:12px;color:#64748b;word-break:break-word;}
.kcrm-profile-menu a{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;color:#0f172a;text-decoration:none;font-weight:600;}
.kcrm-profile-menu a:hover{background:#f5f8fb;}
.kcrm-main-content-area{padding:24px;min-width:0;}
.kcrm-page{max-width:none;}
.kcrm-footer{margin-top:auto;margin-left:0;background:transparent;border-top:1px solid #dbe4ee;padding:16px 24px 22px;color:#64748b;}
.kcrm-notif-badge,.kcrm-chat-badge{position:absolute;top:7px;right:7px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;}
.kcrm-nav-dropdown{position:absolute;right:0;top:54px;background:#fff;border:1px solid #dbe4ee;border-radius:16px;box-shadow:0 20px 30px rgba(15,23,42,.14);overflow:hidden;z-index:1004;}
.kcrm-notif-dropdown{width:320px;}
.kcrm-notif-header{padding:14px 16px;border-bottom:1px solid #edf2f7;background:#f9fbfd;color:#0f172a;}
.kcrm-notif-list{max-height:360px;overflow:auto;}
.kcrm-notif-empty,.kcrm-notif-item{padding:14px 16px;font-size:13px;color:#475569;}
.kcrm-notif-item + .kcrm-notif-item{border-top:1px solid #f1f5f9;}
.kcrm-notif-item.unread{background:#eff6ff;}
body.kcrm-sidebar-collapsed .kcrm-app-sidebar{width:88px;}
body.kcrm-sidebar-collapsed .kcrm-content-shell{margin-left:88px;}
body.kcrm-sidebar-collapsed .kcrm-side-title,body.kcrm-sidebar-collapsed .kcrm-sidebar-brand-text,body.kcrm-sidebar-collapsed .kcrm-sidebar-brand-divider,body.kcrm-sidebar-collapsed .kcrm-side-label{display:none;}
body.kcrm-sidebar-collapsed .kcrm-side-link{justify-content:center;padding-left:10px;padding-right:10px;}
body.kcrm-sidebar-collapsed .kcrm-sidebar-brand-logo-wrap{justify-content:center;}
body.kcrm-sidebar-collapsed .kcrm-side-chat-dot{position:absolute;right:10px;top:12px;}
.kaa-inbox-layout{padding:24px;}
@media(max-width:1180px){.kcrm-topbar{grid-template-columns:auto 1fr auto;}.kcrm-header-company-pill{display:none;}}
@media(max-width:1024px){.kcrm-app-sidebar{transform:translateX(-100%);}.kcrm-content-shell{margin-left:0;}.kcrm-mobile-sidebar-backdrop.active{display:block;}body.kcrm-mobile-sidebar-open .kcrm-app-sidebar{transform:translateX(0);}body.kcrm-sidebar-collapsed .kcrm-app-sidebar{width:266px;}body.kcrm-sidebar-collapsed .kcrm-content-shell{margin-left:0;}}
@media(max-width:820px){.kcrm-topbar{grid-template-columns:auto 1fr;gap:12px;height:auto;padding:14px 16px;}.kcrm-topbar-center{grid-column:1 / -1;order:3;}.kcrm-topbar-right{gap:10px;justify-content:flex-end;}.kcrm-profile-meta,.kcrm-topbar-brand{display:none;}.kcrm-header-add-btn{padding:0 12px;height:40px;font-size:13px;}.kcrm-main-content-area,.kaa-inbox-layout{padding:16px;}}
@media(max-width:640px){.kcrm-header-add-btn{display:none;}.kcrm-topbar-right{gap:8px;}.kcrm-profile-trigger{padding-right:8px;}.kcrm-profile-caret{display:none;}.kcrm-notif-dropdown{width:min(320px,calc(100vw - 32px));right:-84px;}.kcrm-main-content-area,.kaa-inbox-layout{padding:14px;}}


/* === Fine tune premium shell + right widgets === */
.kcrm-app-sidebar{width:238px;}
.kcrm-content-shell{margin-left:238px;}
.kcrm-sidebar-brand{padding:22px 16px 14px;}
.kcrm-sidebar-brand-text{font-size:12px;letter-spacing:.3px;}
.kcrm-side-title{font-size:10px;letter-spacing:1.3px;margin-bottom:8px;}
.kcrm-side-links{gap:3px;}
.kcrm-side-link{gap:10px;padding:9px 10px;border-radius:10px;font-size:12px;}
.kcrm-side-icon{font-size:13px;}
.kcrm-side-label{font-size:12px;}
.body.kcrm-sidebar-collapsed .kcrm-app-sidebar{width:78px;}
body.kcrm-sidebar-collapsed .kcrm-content-shell{margin-left:78px;}

.kcrm-topbar{height:70px;padding:12px 20px;grid-template-columns:auto minmax(220px,1fr) auto;}
.kcrm-topbar-brand-text{font-size:11px;}
.kcrm-header-add-btn{height:34px;padding:0 11px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.2px;box-shadow:0 6px 14px rgba(23,55,102,.12);}
.kcrm-header-icon-btn{width:34px;height:34px;border-radius:10px;}
.kcrm-header-icon{font-size:14px;}
.kcrm-header-company-pill{height:34px;padding:0 10px;border-radius:10px;font-size:11px;}
.kcrm-company-name{max-width:140px;font-size:11px;}
.kcrm-profile-trigger{padding:4px 8px 4px 4px;border-radius:12px;gap:8px;}
.kcrm-user-avatar{width:30px;height:30px;font-size:12px;}
.kcrm-profile-meta{gap:1px;}
.kcrm-user-name{font-size:11px;}
.kcrm-user-role{font-size:10px;}
.kcrm-profile-caret{font-size:10px;}
.kcrm-profile-menu{top:46px;min-width:184px;border-radius:12px;padding:7px;}
.kcrm-profile-menu-head{padding:6px 8px 8px;margin-bottom:4px;gap:3px;}
.kcrm-profile-menu-head strong{font-size:12px;}
.kcrm-profile-menu-head span{font-size:10px;}
.kcrm-profile-menu a{padding:8px 9px;border-radius:9px;font-size:11px;gap:7px;}

.kcrm-main-content-area{padding:18px 18px 18px 20px;}
.kcrm-right-widgets{width:248px;padding:18px 14px 18px 0;top:78px;max-height:calc(100vh - 78px);}
.kcrm-widget{border-radius:14px;padding:14px;}
.kcrm-widget-title,.kcrm-cal-title{font-size:12px;}
.kcrm-todo-name{font-size:11px;}
.kcrm-todo-svc,.kcrm-todo-date,.kcrm-todo-empty{font-size:10px;}
.kcrm-todo-item{padding:6px 9px;border-radius:7px;}
.kcrm-cal-day{font-size:10px;}
.kcrm-cal-cell{min-height:28px;}

@media(max-width:1180px){.kcrm-right-widgets{width:228px;}}
@media(max-width:1024px){.kcrm-app-sidebar{width:238px;}body.kcrm-sidebar-collapsed .kcrm-app-sidebar{width:238px;}.kcrm-right-widgets{width:100%;position:static;max-height:none;padding:0 18px 18px;}}
@media(max-width:820px){.kcrm-topbar{padding:12px 14px;}.kcrm-header-add-btn{font-size:10px;height:32px;padding:0 10px;}.kcrm-main-content-area{padding:14px;}.kcrm-right-widgets{padding:0 14px 14px;}}


/* === Header full-width + sidebar below header === */
:root{
  --kcrm-topbar-h:64px;
  --kcrm-sidebar-w:220px;
  --kcrm-sidebar-w-collapsed:72px;
}
.kcrm-app-shell{display:flex;min-height:100vh;background:var(--kcrm-app-bg);}
.kcrm-topbar{
  position:fixed !important;
  top:0;
  left:0;
  right:0;
  z-index:1200;
  height:var(--kcrm-topbar-h);
  min-height:var(--kcrm-topbar-h);
  padding:10px 16px;
  grid-template-columns:auto minmax(220px,1fr) auto;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
}
.kcrm-app-sidebar{
  top:var(--kcrm-topbar-h);
  width:var(--kcrm-sidebar-w);
  z-index:1000;
}
.kcrm-content-shell{
  margin-left:var(--kcrm-sidebar-w);
  min-height:100vh;
  padding-top:var(--kcrm-topbar-h);
}
.kcrm-sidebar-brand{padding:14px 14px 10px;}
.kcrm-sidebar-brand-logo-wrap{min-height:26px;}
.kcrm-sidebar-brand-text{font-size:11px;letter-spacing:.25px;}
.kcrm-sidebar-scroll{padding:12px 10px 18px;}
.kcrm-side-group + .kcrm-side-group{margin-top:12px;}
.kcrm-side-title{padding:0 8px 6px;font-size:9.5px;letter-spacing:1px;}
.kcrm-side-link{gap:8px;padding:8px 9px;border-radius:9px;font-size:11px;}
.kcrm-side-icon{width:18px;flex:0 0 18px;font-size:12px;}
.kcrm-side-label{font-size:11px;}
.kcrm-topbar-brand-text{font-size:10px;letter-spacing:1.5px;}
.kcrm-topbar-toggle{width:34px;height:34px;border-radius:10px;}
.kcrm-topbar-toggle span{width:15px;}
.kcrm-global-search{height:38px;border-radius:12px;font-size:13px;}
.kcrm-global-search-icon{left:12px;font-size:13px;}
.kcrm-header-add-btn{height:30px;padding:0 10px;border-radius:9px;font-size:10px;font-weight:700;}
.kcrm-header-icon-btn{width:30px;height:30px;border-radius:9px;}
.kcrm-header-icon{font-size:13px;}
.kcrm-header-company-pill{height:30px;padding:0 9px;border-radius:9px;}
.kcrm-company-name{font-size:10px;max-width:120px;}
.kcrm-profile-trigger{height:32px;padding:3px 7px 3px 3px;border-radius:10px;gap:6px;}
.kcrm-user-avatar{width:26px;height:26px;border-radius:9px;font-size:11px;}
.kcrm-user-name{font-size:10px;max-width:92px;}
.kcrm-user-role{font-size:9px;}
.kcrm-profile-caret{font-size:9px;}
.kcrm-profile-menu{top:38px;min-width:168px;padding:6px;border-radius:10px;}
.kcrm-profile-menu-head strong{font-size:11px;}
.kcrm-profile-menu-head span{font-size:9px;}
.kcrm-profile-menu a{padding:7px 8px;font-size:10px;border-radius:8px;}
.kcrm-body-layout{align-items:flex-start;}
.kcrm-main-content-area{padding:16px 16px 16px 18px;}
.kcrm-right-widgets{
  top:calc(var(--kcrm-topbar-h) + 8px);
  max-height:calc(100vh - var(--kcrm-topbar-h) - 8px);
  padding:16px 12px 16px 0;
}
body.kcrm-sidebar-collapsed .kcrm-app-sidebar{width:var(--kcrm-sidebar-w-collapsed);}
body.kcrm-sidebar-collapsed .kcrm-content-shell{margin-left:var(--kcrm-sidebar-w-collapsed);}
@media(max-width:1024px){
  .kcrm-topbar{padding:10px 12px;}
  .kcrm-app-sidebar{width:var(--kcrm-sidebar-w);top:var(--kcrm-topbar-h);transform:translateX(-100%);} 
  .kcrm-content-shell{margin-left:0;padding-top:var(--kcrm-topbar-h);} 
  body.kcrm-sidebar-collapsed .kcrm-app-sidebar{width:var(--kcrm-sidebar-w);} 
  body.kcrm-sidebar-collapsed .kcrm-content-shell{margin-left:0;} 
  .kcrm-right-widgets{width:100%;position:static;max-height:none;padding:0 14px 14px;} 
}
@media(max-width:820px){
  :root{--kcrm-topbar-h:58px;}
  .kcrm-topbar{gap:10px;grid-template-columns:auto 1fr auto;} 
  .kcrm-topbar-brand-text,.kcrm-profile-meta,.kcrm-header-company-pill{display:none;} 
  .kcrm-header-add-btn{font-size:10px;height:28px;padding:0 8px;} 
  .kcrm-main-content-area{padding:14px;} 
}


/* Dashboard-only widgets layout */
.kcrm-body-layout--plain{display:block;}
.kcrm-body-layout--plain .kcrm-main-content-area{padding-right:18px;}
.kcrm-body-layout--dashboard{display:flex;align-items:flex-start;}
.kcrm-body-layout--dashboard .kcrm-main{flex:1;min-width:0;}
.kcrm-body-layout--dashboard .kcrm-right-widgets{width:248px;flex:0 0 248px;position:sticky;right:auto;}
.kcrm-body-layout--dashboard .kcrm-charts-4grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.kcrm-body-layout--dashboard .kcrm-chart-card{min-width:0;}
@media(max-width:1280px){.kcrm-body-layout--dashboard .kcrm-right-widgets{width:228px;flex-basis:228px;}}
@media(max-width:1024px){.kcrm-body-layout--plain .kcrm-main-content-area,.kcrm-body-layout--dashboard .kcrm-main-content-area{padding-right:14px;}.kcrm-body-layout--dashboard{display:block;}.kcrm-body-layout--dashboard .kcrm-right-widgets{width:100%;flex-basis:auto;position:static;max-height:none;padding:0 14px 14px;}}


/* Sidebar in campaigns/entities/inbox + no brand block */
.kcrm-app-sidebar{padding-top:0;}
.kcrm-sidebar-scroll{padding-top:14px!important;}
.kcrm-sidebar-brand{display:none!important;}
@media(max-width:1024px){.kcrm-sidebar-scroll{padding-top:14px!important;}}


/* Sidebar accordion */
.kcrm-side-group--accordion .kcrm-side-links{display:none;overflow:hidden;}
.kcrm-side-group--accordion.is-open .kcrm-side-links{display:flex;}
.kcrm-side-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:transparent;
  border:0;
  color:var(--kcrm-sidebar-muted);
  text-align:left;
  cursor:pointer;
  transition:color .18s ease, background .18s ease;
}
.kcrm-side-toggle:hover,
.kcrm-side-group--accordion.is-open .kcrm-side-toggle,
.kcrm-side-toggle.is-active{color:#f8fbff;}
.kcrm-side-caret{
  font-size:10px;
  line-height:1;
  transition:transform .18s ease;
  opacity:.85;
}
.kcrm-side-group--accordion.is-open .kcrm-side-caret{transform:rotate(180deg);}
body.kcrm-sidebar-collapsed .kcrm-side-group--accordion .kcrm-side-links{display:none!important;}
body.kcrm-sidebar-collapsed .kcrm-side-caret{display:none;}


/* Zoho / HubSpot style sidebar behaviour */
body.kcrm-sidebar-collapsed .kcrm-app-sidebar{width:72px;}
body.kcrm-sidebar-collapsed .kcrm-content-shell{margin-left:72px;}
body.kcrm-sidebar-collapsed .kcrm-side-link{justify-content:center;padding-left:10px;padding-right:10px;}
body.kcrm-sidebar-collapsed .kcrm-side-icon{width:auto;flex:0 0 auto;font-size:15px;}
body.kcrm-sidebar-collapsed .kcrm-side-label,
body.kcrm-sidebar-collapsed .kcrm-side-title span:first-child,
body.kcrm-sidebar-collapsed .kcrm-side-caret{display:none;}
body.kcrm-sidebar-collapsed .kcrm-side-title{justify-content:center;padding:0 4px 6px;}
body.kcrm-sidebar-collapsed .kcrm-side-group--accordion .kcrm-side-links{display:none!important;}

body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-app-sidebar{width:220px;box-shadow:18px 0 36px rgba(15,23,42,.18);}
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-content-shell{margin-left:72px;}
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-side-label,
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-side-title span:first-child,
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-side-caret{display:inline;}
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-side-title{justify-content:space-between;padding:0 8px 6px;}
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-side-link{justify-content:flex-start;padding-left:9px;padding-right:9px;}
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-side-icon{width:18px;flex:0 0 18px;}
body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-side-group--accordion.is-open .kcrm-side-links{display:flex!important;}

@media(max-width:1024px){
  body.kcrm-sidebar-collapsed .kcrm-app-sidebar,
  body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-app-sidebar{width:220px;}
  body.kcrm-sidebar-collapsed .kcrm-content-shell,
  body.kcrm-sidebar-collapsed.kcrm-sidebar-hovered .kcrm-content-shell{margin-left:0;}
}


/* ═══════════════════════════════════════════════════════════════
   KASALOMA CRM — FULL MOBILE APP EXPERIENCE
   Breakpoint: ≤ 768px behaves like a native mobile app
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1. ROOT / BODY ── */
  :root {
    --kcrm-topbar-h: 56px;
    --kcrm-bottom-nav-h: 62px;
    --kcrm-safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  html, body.kcrm-frontend-body {
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.kcrm-frontend-body {
    background: #f1f5f9;
  }

  /* ── 2. HIDE left sidebar — replaced by bottom tab bar ── */
  .kcrm-app-sidebar,
  .kcrm-mobile-sidebar-backdrop { display: none !important; }

  /* ── 3. APP SHELL ── */
  .kcrm-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100vh;
  }

  .kcrm-content-shell {
    margin-left: 0 !important;
    padding-top: var(--kcrm-topbar-h);
    padding-bottom: calc(var(--kcrm-bottom-nav-h) + var(--kcrm-safe-bottom));
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-x: hidden;
  }

  /* ── 4. TOPBAR — compact mobile header ── */
  .kcrm-topbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1200;
    height: var(--kcrm-topbar-h) !important;
    min-height: var(--kcrm-topbar-h) !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px !important;
    gap: 0 !important;
    background: #0f2440 !important;
    border-bottom: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.22) !important;
    backdrop-filter: none !important;
  }

  /* Kill the grid layout on mobile topbar */
  .kcrm-topbar-left  { flex: 1; gap: 0 !important; }
  .kcrm-topbar-center { display: none !important; }
  .kcrm-topbar-right  { gap: 4px !important; }

  /* Hamburger → becomes visible on mobile, opens slide-in drawer */
  .kcrm-topbar-toggle {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    width: 38px !important; height: 38px !important;
    margin-right: 10px;
  }
  .kcrm-topbar-toggle span { background: #fff !important; width: 16px !important; }

  /* Brand in header */
  .kcrm-topbar-brand {
    display: flex !important;
    align-items: center;
    gap: 6px;
  }
  .kcrm-topbar-brand-text {
    color: #fff !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
  }
  .kcrm-brand-divider {
    width: 1px; height: 14px;
    background: rgba(255,255,255,0.3);
    display: block !important;
  }

  /* Right-side header icons — white on dark */
  .kcrm-header-add-btn { display: none !important; }

  .kcrm-header-icon-btn {
    width: 36px !important; height: 36px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.1) !important;
    border: none !important;
  }
  .kcrm-header-icon { font-size: 16px !important; }

  .kcrm-notif-badge, .kcrm-chat-badge {
    top: 4px !important; right: 4px !important;
    width: 16px !important; height: 16px !important;
    font-size: 9px !important;
  }

  .kcrm-header-company-pill { display: none !important; }
  .kcrm-profile-meta, .kcrm-profile-caret { display: none !important; }

  .kcrm-profile-trigger {
    background: rgba(255,255,255,0.1) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    height: 36px !important; width: 36px !important;
  }
  .kcrm-user-avatar {
    width: 28px !important; height: 28px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
  }

  /* Dropdowns — full-width on mobile */
  .kcrm-notif-dropdown,
  .kcrm-chat-menu {
    position: fixed !important;
    top: var(--kcrm-topbar-h) !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 0 0 20px 20px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
    z-index: 1300 !important;
  }
  .kcrm-profile-menu {
    position: fixed !important;
    top: var(--kcrm-topbar-h) !important;
    right: 10px !important;
    left: auto !important;
    width: min(260px, calc(100vw - 20px)) !important;
    border-radius: 16px !important;
    z-index: 1300 !important;
  }

  /* ── 5. MOBILE DRAWER — full slide-in sidebar ── */
  /* The existing sidebar becomes a full-height drawer from left */
  .kcrm-app-sidebar {
    display: flex !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 280px !important;
    z-index: 1400 !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: linear-gradient(180deg, #0f2440 0%, #0d2444 100%) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,0.28) !important;
  }
  body.kcrm-mobile-sidebar-open .kcrm-app-sidebar {
    transform: translateX(0) !important;
  }
  .kcrm-mobile-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1399;
    backdrop-filter: blur(2px);
  }
  .kcrm-mobile-sidebar-backdrop.active {
    display: block !important;
  }
  .kcrm-sidebar-scroll { padding: 56px 12px 100px !important; }

  /* Close X in drawer */
  .kcrm-drawer-close-btn {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; z-index: 1;
  }

  /* Drawer logo */
  .kcrm-sidebar-brand { display: flex !important; padding: 18px 14px 10px !important; }

  /* ── 6. BOTTOM TAB BAR ── */
  .kcrm-mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(var(--kcrm-bottom-nav-h) + var(--kcrm-safe-bottom));
    padding-bottom: var(--kcrm-safe-bottom);
    background: #fff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 20px rgba(15,23,42,0.1);
    z-index: 1100;
    align-items: flex-start;
    justify-content: space-around;
    padding-top: 8px;
  }

  .kcrm-mobile-bottom-nav a,
  .kcrm-mobile-bottom-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    height: 48px;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease;
  }
  .kcrm-mobile-bottom-nav a:active,
  .kcrm-mobile-bottom-nav button:active {
    transform: scale(0.88);
  }

  .kcrm-mobile-tab-icon {
    font-size: 20px;
    line-height: 1;
    transition: transform 0.15s ease;
  }
  .kcrm-mobile-tab-label {
    font-size: 10px;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.2px;
    font-family: inherit;
    transition: color 0.15s;
  }
  .kcrm-mobile-bottom-nav a.active .kcrm-mobile-tab-label,
  .kcrm-mobile-bottom-nav button.active .kcrm-mobile-tab-label {
    color: #1a3a5c;
  }
  .kcrm-mobile-bottom-nav a.active .kcrm-mobile-tab-icon {
    transform: translateY(-2px);
  }

  /* Active indicator pill */
  .kcrm-mobile-tab-active-dot {
    position: absolute;
    top: -1px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 3px;
    background: #1a3a5c;
    border-radius: 2px;
    display: none;
  }
  .kcrm-mobile-bottom-nav a.active .kcrm-mobile-tab-active-dot,
  .kcrm-mobile-bottom-nav button.active .kcrm-mobile-tab-active-dot {
    display: block;
  }

  /* Badge on bottom tab */
  .kcrm-tab-badge {
    position: absolute;
    top: 2px; right: 50%;
    transform: translateX(calc(50% + 8px));
    min-width: 16px; height: 16px;
    background: #ef4444;
    color: #fff;
    font-size: 9px; font-weight: 700;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 3px;
    border: 1.5px solid #fff;
  }

  /* ── 7. MAIN CONTENT ── */
  .kcrm-main-content-area,
  .kaa-inbox-layout {
    padding: 14px 12px !important;
  }

  .kcrm-body-layout,
  .kcrm-body-layout--dashboard,
  .kcrm-body-layout--plain {
    display: block !important;
  }

  /* Hide desktop right sidebar (calendar/todo widget) on mobile */
  .kcrm-right-widgets,
  .kcrm-sidebar.kcrm-right-widgets {
    display: none !important;
  }

  /* ── 8. CARDS ── */
  .kcrm-card {
    border-radius: 16px !important;
    padding: 14px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,0.06) !important;
    margin-bottom: 12px;
  }

  .kcrm-page { padding: 0 !important; }

  /* ── 9. STAT CARDS ── */
  .kcrm-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .kcrm-stat-card {
    border-radius: 14px !important;
    padding: 14px 12px !important;
  }
  .kcrm-stat-val { font-size: 26px !important; }
  .kcrm-stat-label { font-size: 11px !important; }

  /* ── 10. CHARTS ── */
  .kcrm-charts-row,
  .kcrm-charts-4grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .kcrm-chart-card { min-height: 200px; }

  /* ── 11. TABLES → card list on mobile ── */
  .kcrm-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .kcrm-table { font-size: 12px !important; }
  .kcrm-table td, .kcrm-table th { padding: 10px 10px !important; white-space: nowrap; }

  /* ── 12. FORMS ── */
  .kcrm-form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .kcrm-field input,
  .kcrm-field select,
  .kcrm-field textarea {
    font-size: 16px !important; /* prevent iOS zoom */
    border-radius: 12px !important;
    height: auto !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
  }
  .kcrm-field label { font-size: 13px !important; margin-bottom: 6px !important; }
  .kcrm-form-card { max-width: 100% !important; }

  /* ── 13. BUTTONS ── */
  .kcrm-btn, .kcrm-btn-ghost {
    min-height: 44px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    padding: 10px 16px !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* ── 14. PAGE HEADERS ── */
  .kcrm-header {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    padding: 0 0 12px !important;
    gap: 8px !important;
    align-items: center !important;
  }
  .kcrm-header h1, .kcrm-header h2 { font-size: 18px !important; }

  /* ── 15. CONTACT DETAIL ── */
  .kcrm-detail-grid { grid-template-columns: 1fr !important; }
  .kcrm-info-grid { grid-template-columns: 1fr 1fr !important; }

  /* ── 16. TEAM CHAT PANEL — full screen on mobile ── */
  .kcrm-tchat-overlay {
    z-index: 1500 !important;
  }
  .kcrm-tchat-panel {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    z-index: 1600 !important;
    flex-direction: column !important;
  }
  .kcrm-tchat-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }
  /* When a conversation is active, hide user list and show full chat */
  .kcrm-tchat-panel.kcrm-tchat-conv-active .kcrm-tchat-sidebar { display: none !important; }
  .kcrm-tchat-panel.kcrm-tchat-conv-active .kcrm-tchat-main { flex: 1 !important; display: flex !important; flex-direction: column !important; }
  .kcrm-tchat-messages { flex: 1 !important; overflow-y: auto !important; }
  .kcrm-tchat-input-row { padding: 10px 12px !important; padding-bottom: max(10px, env(safe-area-inset-bottom, 10px)) !important; }
  .kcrm-tchat-input-row textarea { font-size: 16px !important; border-radius: 20px !important; }
  .kcrm-tchat-send-btn { width: 44px !important; height: 44px !important; border-radius: 22px !important; }
  .kcrm-tchat-conv-header { padding: 12px 14px !important; }
  /* Back button in chat conv header */
  .kcrm-tchat-back-btn {
    display: flex !important;
    align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    background: #f1f5f9;
    cursor: pointer; font-size: 16px;
    margin-right: 8px;
  }

  /* ── 17. AI INBOX — full-screen on mobile ── */
  .kaa-inbox-layout {
    padding: 0 !important;
  }
  .kaa-inbox-shell {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
  }
  .kaa-conv-list {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
  }
  .kaa-chat-area { min-height: 55vh !important; }
  .kaa-msg-input-row { padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important; }
  .kaa-msg-input-row textarea, .kaa-msg-input { font-size: 16px !important; }

  /* ── 18. ENTITY / EMPLOYEE VIEWS ── */
  .kce-entity-grid,
  .kce-emp-grid { grid-template-columns: 1fr !important; }

  /* ── 19. CAMPAIGNS ── */
  .ktc-layout { flex-direction: column !important; }
  .ktc-sidebar { width: 100% !important; border-right: none !important; border-bottom: 1px solid #e2e8f0 !important; }

  /* ── 20. FOOTER ── */
  .kcrm-footer {
    display: none !important; /* bottom nav replaces footer nav on mobile */
  }

  /* ── 21. MODALS ── */
  .kcrm-modal-wrap,
  .kcrm-overlay + .kcrm-modal {
    padding: 10px !important;
  }
  .kcrm-modal {
    border-radius: 20px !important;
    padding: 20px 16px !important;
    max-height: 90dvh !important;
    overflow-y: auto !important;
  }

  /* ── 22. SETTINGS TABS ── */
  .kcrm-tabs { overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .kcrm-tab { flex-shrink: 0; min-height: 44px; }

  /* ── 23. FOLLOW-UPS / RENEWALS ── */
  .kcrm-filter-row { flex-wrap: wrap; gap: 8px; }
  .kcrm-filter-row select,
  .kcrm-filter-row input { font-size: 16px !important; height: 44px; border-radius: 10px; }

  /* ── 24. SEARCH BAR — shown below topbar on mobile ── */
  .kcrm-mobile-search-bar {
    display: flex !important;
    padding: 8px 12px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: var(--kcrm-topbar-h);
    z-index: 100;
  }
  .kcrm-mobile-search-bar form { width: 100%; }
  .kcrm-mobile-search-bar .kcrm-global-search-form { width: 100%; }
  .kcrm-mobile-search-bar input {
    width: 100%;
    height: 40px;
    font-size: 16px !important;
    border-radius: 20px;
    border: 1px solid #dbe4f1;
    padding: 0 16px 0 40px;
    background: #fff;
  }

  /* ── 25. PULL-TO-REFRESH feel — smooth scrolling ── */
  .kcrm-main { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ── 26. Touch-friendly tap targets ── */
  .kcrm-side-link,
  .kcrm-profile-menu a,
  .kcrm-notif-item,
  .kcrm-chat-menu-user-row {
    min-height: 48px !important;
  }

  /* ── 27. Dashboard welcome ── */
  .kcrm-dash-welcome { font-size: 18px !important; }
  .kcrm-dash-sub { font-size: 13px !important; }

} /* end @media ≤ 768px */


/* ═══ BOTTOM NAV — hidden on desktop, shown on mobile ═══ */
.kcrm-mobile-bottom-nav { display: none; }


/* ═══ DRAWER CLOSE BUTTON — only meaningful on mobile ═══ */
.kcrm-drawer-close-btn { display: none; }
@media (max-width: 768px) {
  .kcrm-drawer-close-btn { display: flex; }
}


/* ══════════════════════════════════════════════════
   KASALOMA AI AGENT — SIDEBAR BRAND STRIP
══════════════════════════════════════════════════ */
.kcrm-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 6px;
}
.kcrm-sidebar-logo {
    height: 26px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}
.kcrm-sidebar-brand-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #818cf8, #a78bfa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}