/* ══════════════════════════════════════════════
   CRM Имоти — Updated Design Tokens + Global CSS
   ══════════════════════════════════════════════ */

/* ── MudBlazor palette overrides ─────────────── */
:root {
    --mud-palette-primary:         #2563EB;
    --mud-palette-primary-darken:  #1d4ed8;
    --mud-palette-primary-lighten: #3b82f6;
    --mud-palette-secondary:       #7c3aed;
    --mud-palette-success:         #059669;
    --mud-palette-warning:         #d97706;
    --mud-palette-error:           #dc2626;
    --mud-palette-info:            #0ea5e9;

    /* App-level tokens */
    --crm-navy:        #090f1e;
    --crm-navy-mid:    #1e3a6e;
    --crm-surface:     #f1f5f9;
    --crm-border:      #e2e8f0;
    --crm-text:        #0f172a;
    --crm-text-muted:  #64748b;
    --crm-text-faint:  #94a3b8;
}

/* ── Base ─────────────────────────────────────── */
html, body {
    height: 100%;
    margin: 0;
    font-family: 'Inter', 'Roboto', system-ui, sans-serif;
    background-color: var(--crm-surface);
    color: var(--crm-text);
}

/* ── Sidebar (MudDrawer) ──────────────────────── */
.mud-drawer {
    background-color: var(--crm-navy) !important;
    border-right: none !important;
}

/* Nav links in drawer */
.mud-nav-link {
    color: rgba(255, 255, 255, 0.55) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-left: 3px solid transparent !important;
    border-radius: 0 !important;
    margin: 1px 0 !important;
    padding: 9px 16px !important;
    transition: background 0.15s, color 0.15s !important;
}

.mud-nav-link:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.mud-nav-link.active {
    background: rgba(37, 99, 235, 0.2) !important;
    border-left-color: #3b82f6 !important;
    color: #93c5fd !important;
    font-weight: 600 !important;
}

.mud-nav-link .mud-icon-root {
    color: inherit !important;
    opacity: 0.8;
}

/* Drawer logo header */
.mud-drawer .mud-appbar,
.mud-drawer-header {
    background-color: var(--crm-navy) !important;
}

/* Nav group title */
.mud-nav-group .mud-nav-group-title {
    color: rgba(255, 255, 255, 0.28) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    padding: 8px 16px 4px !important;
}

/* ── Top AppBar ───────────────────────────────── */
.mud-appbar {
    background-color: #ffffff !important;
    color: var(--crm-text) !important;
    box-shadow: 0 1px 0 var(--crm-border) !important;
}

.mud-appbar .mud-icon-button {
    color: var(--crm-text-muted) !important;
}

/* ── KPI Cards ────────────────────────────────── */
.kpi-card {
    background: white;
    border-radius: 10px;
    border: 1px solid var(--crm-border);
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--kpi-accent, #2563EB);
}

.kpi-card .kpi-value {
    font-size: 30px;
    font-weight: 800;
    color: var(--crm-text);
    line-height: 1;
    letter-spacing: -0.04em;
}

.kpi-card .kpi-title {
    font-size: 11.5px;
    color: var(--crm-text-muted);
    margin-top: 5px;
    line-height: 1.4;
}

/* Warning KPI variant */
.kpi-card.kpi-warning {
    border-color: #fef3c7;
}
.kpi-card.kpi-warning .kpi-value { color: #b45309; }

/* Error KPI variant */
.kpi-card.kpi-error {
    border-color: #fecaca;
}
.kpi-card.kpi-error .kpi-value { color: #b91c1c; }

/* ── Leads Table ──────────────────────────────── */
.mud-table-head .mud-table-cell {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--crm-text-faint) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    background: #f8fafc !important;
    border-bottom: 2px solid var(--crm-border) !important;
    padding: 10px 16px !important;
}

.mud-table-row:hover {
    background: #f8faff !important;
    cursor: pointer;
}

.mud-table-cell {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
}

/* Status chips — tighter and pill-shaped */
.mud-chip {
    border-radius: 20px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    height: 22px !important;
}

/* ── Risk badge ───────────────────────────────── */
.risk-badge {
    background: #fee2e2;
    color: #dc2626;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Quick action items ───────────────────────── */
.quick-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
}

.quick-action:hover { opacity: 0.85; }

/* ── Kanban board ─────────────────────────────── */
.kanban-board {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 0 0 16px;
    min-height: calc(100vh - 180px);
}

.kanban-column {
    min-width: 190px;
    max-width: 190px;
    background: #f8fafc;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid var(--crm-border);
    transition: background 0.2s, box-shadow 0.2s;
}

.kanban-column.drag-over {
    background: rgba(37, 99, 235, 0.05);
    box-shadow: inset 0 0 0 2px #2563EB;
}

.kanban-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 0 2px;
}

/* Tinted column backgrounds per status */
.kanban-col-new      { background: #f8fafc; border-color: #e2e8f0; }
.kanban-col-contact  { background: #f0f9ff; border-color: #bae6fd; }
.kanban-col-linked   { background: #eff6ff; border-color: #bfdbfe; }
.kanban-col-meeting  { background: #f5f3ff; border-color: #ddd6fe; }
.kanban-col-met      { background: #fffbeb; border-color: #fde68a; }
.kanban-col-reserve  { background: #f0fdf4; border-color: #bbf7d0; }
.kanban-col-sale     { background: #dcfce7; border-color: #86efac; }
.kanban-col-refused  { background: #fff1f2; border-color: #fecdd3; }

.kanban-card {
    background: white;
    border-radius: 8px;
    padding: 10px 11px;
    border: 1px solid var(--crm-border);
    cursor: grab;
    transition: box-shadow 0.15s, transform 0.15s;
    user-select: none;
}

.kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    transform: translateY(-1px);
}

.kanban-card.risk {
    border-left: 3px solid #dc2626;
}

.kanban-card.dragging {
    opacity: 0.4;
    transform: rotate(1.5deg) scale(1.02);
}

@keyframes cardSlideIn {
    from { opacity: 0; transform: translateY(-10px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}

.kanban-card.card-new {
    animation: cardSlideIn 0.3s ease forwards;
}

.kanban-slot {
    height: 4px;
    border-radius: 2px;
    transition: height 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
}

.kanban-slot.slot-active {
    height: 24px;
    background: linear-gradient(90deg, #2563EB, #3b82f6);
    border-radius: 4px;
}

.kanban-empty-zone {
    flex: 1;
    min-height: 60px;
    border: 2px dashed var(--crm-border);
    border-radius: 8px;
    transition: border-color 0.2s, background 0.2s;
}

.kanban-empty-zone.active {
    border-color: #2563EB;
    background: rgba(37, 99, 235, 0.04);
}

/* ── Priority labels ──────────────────────────── */
.priority-urgent { color: #b91c1c; font-weight: 700; }
.priority-high   { color: #c2410c; font-weight: 700; }
.priority-normal { color: #1d4ed8; font-weight: 600; }
.priority-low    { color: #64748b; font-weight: 500; }

/* ── Notification badge ───────────────────────── */
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.notif-pulse { animation: pulse 1.5s infinite; }

/* ── Audit timeline ───────────────────────────── */
.timeline-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
}

.timeline-line {
    flex: 1;
    width: 1.5px;
    background: var(--crm-border);
    margin-top: 4px;
}

/* ── Status chip custom colours ───────────────── */
.status-chip-new      { background: #f1f5f9 !important; color: #475569 !important; }
.status-chip-contact  { background: #e0f2fe !important; color: #0369a1 !important; }
.status-chip-linked   { background: #dbeafe !important; color: #1d4ed8 !important; }
.status-chip-meeting  { background: #ede9fe !important; color: #6d28d9 !important; }
.status-chip-met      { background: #fef3c7 !important; color: #92400e !important; }
.status-chip-reserve  { background: #d1fae5 !important; color: #065f46 !important; }
.status-chip-sale     { background: #dcfce7 !important; color: #15803d !important; }
.status-chip-refused  { background: #fee2e2 !important; color: #b91c1c !important; }

/* ── Login page ────────────────────────────────── */
.login-page {
    min-height: 100vh;
    background: var(--crm-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.login-card {
    display: flex;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(9,15,30,.25);
    max-width: 840px;
    width: 100%;
}
.login-left {
    width: 380px;
    flex-shrink: 0;
    background: linear-gradient(160deg,#090f1e 60%,#152d58);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.login-right {
    flex: 1;
    background: white;
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ── Responsive ───────────────────────────────── */
@media (max-width: 960px) {
    .kanban-board {
        flex-direction: column;
    }
    .kanban-column {
        min-width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 700px) {
    .login-page {
        padding: 0;
        align-items: flex-start;
    }
    .login-card {
        flex-direction: column;
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
    }
    .login-left {
        width: 100%;
        padding: 28px 24px;
    }
    .login-right {
        padding: 32px 24px;
    }
}

/* ── Lead reminder alerts (bottom right, above the page) ─────────────────── */
.reminder-alerts {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.reminder-alert {
    background: white;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #f59e0b;
    border-radius: 10px;
    padding: 12px 12px 12px 14px;
    box-shadow: 0 10px 25px rgba(15, 23, 42, .18);
    animation: reminder-in .25s ease-out;
}

@keyframes reminder-in {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}