:root {
    --crm-bg: #f5f7fb;
    --crm-surface: #ffffff;
    --crm-border: #e6ecf5;
    --crm-text: #0f172a;
    --crm-muted: #64748b;
    --crm-primary: #4f46e5;
    --crm-primary-2: #6366f1;
    --crm-danger: #dc2626;
}
body[data-theme="dark"] {
    --crm-bg: #0b1220;
    --crm-surface: #101827;
    --crm-border: #233047;
    --crm-text: #e2e8f0;
    --crm-muted: #94a3b8;
    --crm-primary: #7c83ff;
    --crm-primary-2: #5b6bff;
    --crm-danger: #ef4444;
}
body { background: var(--crm-bg); color: var(--crm-text); }
.crm-navbar { background: linear-gradient(90deg, #0f172a, #1e293b, #312e81); }
.crm-shell { min-height: calc(100vh - 56px); }
.card, .form-control, .form-select, .dropdown-menu, .list-group-item, .table, .table th, .table td {
    background-color: var(--crm-surface); color: var(--crm-text); border-color: var(--crm-border) !important;
}
.ayadi{background-color: white!important;}
.card { border: 1px solid var(--crm-border); border-radius: 1rem; }
.card-header, .card-footer { background: transparent; }
.text-muted, .small, .form-text { color: var(--crm-muted) !important; }
.btn-primary { background: linear-gradient(90deg, var(--crm-primary), var(--crm-primary-2)); border-color: var(--crm-primary); }
.table-modern thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--crm-muted); }
.metric-card { background: linear-gradient(135deg, rgba(79,70,229,.12), rgba(99,102,241,.04)); }
.metric-value { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
.badge-soft-secondary { background: #e2e8f0; color: #334155; }
.badge-soft-warning { background: #fef3c7; color: #92400e; }
.badge-soft-success { background: #dcfce7; color: #166534; }
.badge-soft-primary { background: #dbeafe; color: #1d4ed8; }
.badge-soft-danger { background: #fee2e2; color: #991b1b; }
body[data-theme="dark"] .badge-soft-secondary { background: #334155; color: #e2e8f0; }
body[data-theme="dark"] .badge-soft-warning { background: #7c5a10; color: #fde68a; }
body[data-theme="dark"] .badge-soft-success { background: #14532d; color: #bbf7d0; }
body[data-theme="dark"] .badge-soft-primary { background: #1e3a8a; color: #bfdbfe; }
body[data-theme="dark"] .badge-soft-danger { background: #7f1d1d; color: #fecaca; }
.kanban-col { min-height: 440px; }
.kanban-card { border-left: 4px solid var(--crm-primary); cursor: grab; }
.kanban-card.overdue { border-left-color: var(--crm-danger); }
.task-meta { background: rgba(148,163,184,.08); border: 1px solid var(--crm-border); border-radius: .8rem; padding: .75rem 1rem; }
.comment-item, .timeline-content { border: 1px solid var(--crm-border); border-radius: 1rem; padding: 1rem; background: var(--crm-surface); }
.timeline-item { position: relative; padding-left: 2rem; margin-bottom: 1rem; }
.timeline-item::before { content:''; position:absolute; top:0; bottom:-1rem; left:.45rem; width:2px; background: var(--crm-border); }
.timeline-item:last-child::before { bottom: .4rem; }
.timeline-dot { position: absolute; left: 0; top: .4rem; width: .95rem; height: .95rem; border-radius: 50%; background: var(--crm-primary); box-shadow: 0 0 0 4px rgba(99,102,241,.18); }
.login-wrap { min-height: 100vh; background: radial-gradient(circle at top left, #4f46e5, #0f172a 45%, #020617 100%); }
.login-hero { background: linear-gradient(135deg, #4338ca, #1d4ed8, #0f172a); color: white; }
html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
html[dir="rtl"] .timeline-item { padding-left: 0; padding-right: 2rem; }
html[dir="rtl"] .timeline-item::before { left: auto; right: .45rem; }
html[dir="rtl"] .timeline-dot { left: auto; right: 0; }
/* =========================================
   Custom navbar breakpoint: 1240px
   Collapsed below 1240px
   Expanded from 1240px and above
========================================= */

/* Default/mobile behavior */
.navbar-expand-1240 .navbar-collapse {
    display: none;
}

.navbar-expand-1240 .navbar-collapse.show {
    display: block;
}

/* Expanded behavior from 1240px and up */
@media (min-width: 1240px) {
    .navbar-expand-1240 {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-1240 .navbar-toggler {
        display: none;
    }

    .navbar-expand-1240 .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand-1240 .navbar-nav {
        flex-direction: row;
    }

    .navbar-expand-1240 .navbar-nav .nav-link {
        padding-right: .75rem;
        padding-left: .75rem;
    }

    .navbar-expand-1240 .dropdown-menu {
        position: absolute;
    }
}

/* Better collapsed layout below 1240px */
@media (max-width: 1239.98px) {
    .navbar-expand-1240 .navbar-collapse {
        margin-top: 1rem;
    }

    .navbar-expand-1240 .navbar-nav {
        margin-bottom: 1rem;
    }

    .navbar-expand-1240 .navbar-nav .nav-link {
        padding-top: .5rem;
        padding-bottom: .5rem;
    }

    .header-user-menu {
        width: 100%;
        align-items: stretch !important;
    }

    .header-user-menu > div {
        width: 100%;
        justify-content: flex-start;
    }

    .header-user-menu .btn,
    .header-user-menu .dropdown {
        max-width: 100%;
    }
}