:root {
    --mg-primary: #6d28d9;
    --mg-primary-rgb: 109, 40, 217;
    --mg-primary-dark: #5b21b6;
    --mg-accent: #ec4899;
    --mg-sidebar-bg: #14151c;
    --mg-sidebar-hover: rgba(255, 255, 255, .07);
    --mg-content-bg: #f6f7fb;
    --bs-body-bg: var(--mg-content-bg);
    --bs-body-color: #1f2433;

    /* Harmonised semantic palette (softer, modern tones) used across the UI. */
    --bs-success: #10b981;  --bs-success-rgb: 16, 185, 129;
    --bs-danger:  #f43f5e;  --bs-danger-rgb: 244, 63, 94;
    --bs-warning: #f59e0b;  --bs-warning-rgb: 245, 158, 11;
    --bs-info:    #0ea5e9;  --bs-info-rgb: 14, 165, 233;
}

* {
    scrollbar-width: thin;
}

body {
    background: var(--mg-content-bg);
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Brand colour helpers ---------- */
/* Fills use --mg-primary with contrast-safe --mg-primary-ink text;
   text/links on white use the auto-darkened --mg-primary-readable. */
.btn-primary {
    --bs-btn-bg: var(--mg-primary);
    --bs-btn-border-color: var(--mg-primary);
    --bs-btn-color: var(--mg-primary-ink);
    --bs-btn-hover-bg: var(--mg-primary-dark);
    --bs-btn-hover-border-color: var(--mg-primary-dark);
    --bs-btn-hover-color: var(--mg-primary-ink);
    --bs-btn-active-bg: var(--mg-primary-dark);
    --bs-btn-active-border-color: var(--mg-primary-dark);
    --bs-btn-active-color: var(--mg-primary-ink);
    --bs-btn-disabled-bg: var(--mg-primary);
    --bs-btn-disabled-border-color: var(--mg-primary);
    --bs-btn-disabled-color: var(--mg-primary-ink);
}

.btn-outline-primary {
    --bs-btn-color: var(--mg-primary-readable);
    --bs-btn-border-color: var(--mg-primary);
    --bs-btn-hover-bg: var(--mg-primary);
    --bs-btn-hover-border-color: var(--mg-primary);
    --bs-btn-hover-color: var(--mg-primary-ink);
    --bs-btn-active-bg: var(--mg-primary);
    --bs-btn-active-border-color: var(--mg-primary);
    --bs-btn-active-color: var(--mg-primary-ink);
}

.text-primary { color: var(--mg-primary-readable) !important; }
.bg-primary { background-color: var(--mg-primary) !important; color: var(--mg-primary-ink) !important; }
.link-primary { color: var(--mg-primary-readable) !important; }
a { color: var(--mg-primary-readable); text-decoration: none; }
a:hover { color: var(--mg-primary-readable); text-decoration: underline; }
.form-control:focus, .form-select:focus {
    border-color: rgba(var(--mg-primary-rgb), .5);
    box-shadow: 0 0 0 .2rem rgba(var(--mg-primary-rgb), .15);
}
.page-link { color: var(--mg-primary-readable); }
.active > .page-link, .page-link.active { background-color: var(--mg-primary); border-color: var(--mg-primary); color: var(--mg-primary-ink); }

/* ---------- Layout shell ---------- */
.app-shell { min-height: 100vh; }

.app-sidebar {
    width: 264px;
    background: var(--mg-sidebar-bg);
    color: #cbd2e0;
}

@media (min-width: 992px) {
    .app-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
    }
}

.app-main { min-width: 0; }
.app-content { padding: 1.25rem; }
@media (min-width: 992px) { .app-content { padding: 1.75rem 2rem; } }

/* ---------- Sidebar brand & nav ---------- */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.15rem 1.25rem;
    color: #fff;
    font-weight: 700;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.sidebar-brand .logo-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--mg-primary), var(--mg-accent));
    color: #fff; font-size: 1.15rem; flex-shrink: 0;
}

/* Text wordmark recreation of the Motigraph logo (white text, gold divider). */
.mg-wordmark {
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    display: inline-block;
    font-family: "Cairo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mg-wordmark .mg-wordmark-bar {
    color: #ffc107;
    font-weight: 700;
    margin: 0 .015em;
}
.mg-plaque {
    display: inline-block;
    background: #14151c;
    padding: .6rem 1.05rem;
    border-radius: 13px;
    border: 1px solid rgba(255, 255, 255, .08);
}
.sidebar-heading {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #6b7390;
    padding: 1.1rem 1.4rem .35rem;
    margin: 0;
}
.sidebar-nav { padding: .35rem .75rem 1.5rem; }
.sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: #c2c9d8;
    border-radius: 9px;
    padding: .6rem .85rem;
    margin-bottom: .15rem;
    font-weight: 500;
    font-size: .95rem;
    transition: background .15s, color .15s;
}
.sidebar-nav .nav-link i { font-size: 1.1rem; width: 1.3rem; text-align: center; }
.sidebar-nav .nav-link:hover { background: var(--mg-sidebar-hover); color: #fff; }
.sidebar-nav .nav-link.active {
    background: linear-gradient(135deg, var(--mg-primary), var(--mg-primary-dark));
    color: var(--mg-primary-ink);
    box-shadow: 0 6px 16px -6px rgba(var(--mg-primary-rgb), .8);
}
.sidebar-nav .nav-link.active i { color: var(--mg-primary-ink); }
.sidebar-nav .nav-link .badge { margin-inline-start: auto; }

/* ---------- Top navbar ---------- */
.app-navbar {
    background: #fff;
    border-bottom: 1px solid #e7e9f3;
    padding: .65rem 1.25rem;
    position: sticky; top: 0; z-index: 20;
}
.app-navbar .page-title { font-weight: 700; font-size: 1.15rem; margin: 0; }
.avatar {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--mg-primary), var(--mg-accent));
    color: var(--mg-primary-ink); font-weight: 700; font-size: .85rem;
    text-transform: uppercase; flex-shrink: 0;
}
.avatar-sm { width: 30px; height: 30px; font-size: .72rem; }

/* ---------- Cards & stats ---------- */
.card {
    border: 1px solid #ebedf6;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(20, 25, 60, .04);
}
.card-header { background: #fff; border-bottom: 1px solid #eef0f7; font-weight: 600; }

.stat-card { position: relative; overflow: hidden; }
.stat-card .stat-icon {
    width: 50px; height: 50px; border-radius: 12px;
    display: grid; place-items: center; font-size: 1.4rem;
}
.stat-card .stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat-card .stat-label { color: #6b7280; font-size: .85rem; }

.soft-primary { background: rgba(var(--mg-primary-rgb), .14); color: var(--mg-primary-readable); }
.soft-success { background: rgba(16, 185, 129, .13); color: #059669; }
.soft-warning { background: rgba(245, 158, 11, .15); color: #d97706; }
.soft-danger  { background: rgba(244, 63, 94, .12); color: #e11d48; }
.soft-info    { background: rgba(14, 165, 233, .13); color: #0284c7; }
.soft-secondary { background: rgba(100, 116, 139, .13); color: #64748b; }

/* ---------- Tables ---------- */
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table thead th {
    font-size: .76rem; text-transform: uppercase; letter-spacing: .03em;
    color: #8a90a6; font-weight: 600; border-bottom-width: 1px;
}
.table-hover tbody tr:hover { background: rgba(var(--mg-primary-rgb), .03); }

/* ---------- Badges ---------- */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 7px; }
.badge.rounded-pill { border-radius: 50rem; }

/* ---------- Pipeline (kanban) ---------- */
.pipeline { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; }
.pipeline-col {
    flex: 0 0 290px; max-width: 290px;
    background: #eceefa; border-radius: 13px; padding: .7rem;
}
.pipeline-col-head { display: flex; justify-content: space-between; align-items: center; padding: .35rem .5rem .65rem; font-weight: 600; }
.deal-card {
    background: #fff; border-radius: 11px; padding: .8rem .9rem;
    margin-bottom: .6rem; box-shadow: 0 1px 3px rgba(20, 25, 60, .07);
    border: 1px solid #e9ebf5; display: block;
}
.deal-card:hover { box-shadow: 0 6px 18px -8px rgba(20, 25, 60, .25); }
.deal-card[draggable] { cursor: grab; }
.deal-card.dragging { opacity: .45; }
.pipeline-col.drop-target { outline: 2px dashed var(--mg-primary); outline-offset: -3px; }
.pipeline-drop { min-height: 40px; }
[data-bs-theme="dark"] .pipeline-col { background: #181a23; }
[data-bs-theme="dark"] .deal-card { background: #20232e; border-color: rgba(255, 255, 255, .07); }

/* ---------- Progress ---------- */
.progress { background: #e9ecf5; border-radius: 50rem; height: .55rem; }
.progress-lg { height: .85rem; }
.progress-bar { background-color: var(--mg-primary); }

/* ---------- Auth ---------- */
.auth-wrap {
    min-height: 100vh; display: grid; place-items: center;
    background: radial-gradient(circle at 30% 20%, #23262f 0%, #161922 45%, #0f111a 100%);
    padding: 1.5rem;
}
.auth-card {
    width: 100%; max-width: 410px; background: #fff;
    border-radius: 18px; padding: 2.25rem; box-shadow: 0 25px 60px -20px rgba(0, 0, 0, .5);
}
.auth-logo {
    width: 60px; height: 60px; border-radius: 16px; margin: 0 auto 1rem;
    display: grid; place-items: center; font-size: 1.8rem; color: #fff;
    background: linear-gradient(135deg, var(--mg-primary), var(--mg-accent));
}

/* ---------- Misc ---------- */
.cursor-pointer { cursor: pointer; }
.timeline { position: relative; padding-inline-start: .5rem; }
.timeline-item { position: relative; padding-inline-start: 1.75rem; padding-bottom: 1.1rem; }
.timeline-item::before {
    content: ""; position: absolute; inset-inline-start: .32rem; top: 1.5rem; bottom: -.2rem;
    width: 2px; background: #e5e7f0;
}
.timeline-item:last-child::before { display: none; }
.timeline-dot {
    position: absolute; inset-inline-start: 0; top: .15rem;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    display: grid; place-items: center; font-size: .7rem; color: #fff;
}
.empty-state { text-align: center; padding: 3rem 1rem; color: #9aa0b4; }
.empty-state i { font-size: 2.5rem; opacity: .5; }
.object-link { color: inherit; font-weight: 600; }
.object-link:hover { color: var(--mg-primary-readable); }

/* ---------- Dark mode ---------- */
[data-bs-theme="dark"] {
    --mg-content-bg: #0e0f15;
    --bs-body-color: #e6e8ef;
    --bs-body-color-rgb: 230, 232, 239;
    --bs-emphasis-color: #ffffff;
}
[data-bs-theme="dark"] body { background: #0e0f15; color: #e6e8ef; }
[data-bs-theme="dark"] .app-navbar { background: #14151c; border-bottom-color: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .app-navbar .page-title { color: #f1f3f8; }
[data-bs-theme="dark"] .card { background: #181a23; border-color: rgba(255, 255, 255, .07); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
[data-bs-theme="dark"] .card-header { background: #181a23; border-bottom-color: rgba(255, 255, 255, .07); color: #e9ebf2; }
[data-bs-theme="dark"] .card-footer { background: #181a23; border-top-color: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .table thead th { color: #7e859c; }
[data-bs-theme="dark"] .table-hover tbody tr:hover { background: rgba(var(--mg-primary-rgb), .08); }
[data-bs-theme="dark"] .list-group-item { background: transparent; border-color: rgba(255, 255, 255, .06); }
[data-bs-theme="dark"] .stat-card .stat-label { color: #9aa0b4; }
[data-bs-theme="dark"] .pipeline-col { background: #1c1f29; }
[data-bs-theme="dark"] .deal-card { background: #20232e; border-color: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] .progress { background: rgba(255, 255, 255, .09); }
[data-bs-theme="dark"] .timeline-item::before { background: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .empty-state { color: #6b7186; }

/* On dark surfaces use the bright brand + light tints (not the white-bg readable shade). */
[data-bs-theme="dark"] a { color: var(--mg-primary); }
[data-bs-theme="dark"] .object-link { color: #eef0f6; }
[data-bs-theme="dark"] .object-link:hover { color: var(--mg-primary); }
[data-bs-theme="dark"] .text-primary,
[data-bs-theme="dark"] .link-primary,
[data-bs-theme="dark"] .page-link { color: var(--mg-primary) !important; }
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--mg-primary); }
[data-bs-theme="dark"] .soft-primary { color: var(--mg-primary); }
[data-bs-theme="dark"] .soft-success { color: #34d399; }
[data-bs-theme="dark"] .soft-warning { color: #fbbf24; }
[data-bs-theme="dark"] .soft-danger { color: #fb7185; }
[data-bs-theme="dark"] .soft-info { color: #38bdf8; }
[data-bs-theme="dark"] .soft-secondary { color: #9aa0b4; }
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: #20232e; --bs-btn-border-color: rgba(255, 255, 255, .08); --bs-btn-color: #d7dae3;
    --bs-btn-hover-bg: #272b38; --bs-btn-hover-border-color: rgba(255, 255, 255, .12); --bs-btn-hover-color: #fff;
}

/* ---------- WhatsApp floating button ---------- */
.wa-fab {
    position: fixed; inset-block-end: 22px; inset-inline-end: 22px; z-index: 1030;
    width: 56px; height: 56px; border-radius: 50%;
    background: #25d366; color: #fff; display: grid; place-items: center;
    font-size: 1.7rem; box-shadow: 0 8px 24px -6px rgba(37, 211, 102, .7);
}
.wa-fab:hover { color: #fff; transform: translateY(-2px); }

/* ---------- Client portal ---------- */
.portal-navbar { background: #14151c; }
.portal-navbar .nav-link { color: #c2c9d8; font-weight: 500; }
.portal-navbar .nav-link:hover, .portal-navbar .nav-link.active { color: #fff; }
.portal-navbar .navbar-text { color: #aeb4c6; }
.portal-navbar .navbar-toggler { border-color: rgba(255, 255, 255, .2); }

/* ---------- Calendar ---------- */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; min-width: 680px; }
.calendar-head { text-align: center; font-weight: 600; font-size: .78rem; color: #8a90a6; padding: 4px; text-transform: uppercase; letter-spacing: .03em; }
.calendar-cell { min-height: 100px; border: 1px solid #ebedf6; border-radius: 10px; padding: 6px; min-width: 0; overflow: hidden; }
.calendar-out { opacity: .4; }
.calendar-today { border-color: var(--mg-primary); box-shadow: inset 0 0 0 1px var(--mg-primary); }
.calendar-daynum { font-size: .82rem; font-weight: 700; margin-bottom: 4px; }
.calendar-event { display: block; font-size: .68rem; padding: 2px 6px; border-radius: 6px; margin-bottom: 3px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendar-event i { margin-inline-end: 3px; }
[data-bs-theme="dark"] .calendar-cell { border-color: rgba(255, 255, 255, .08); }
[data-bs-theme="dark"] .calendar-head { color: #7e859c; }

/* ---------- Print ---------- */
@media print {
    .app-sidebar, .app-navbar, .no-print, .btn { display: none !important; }
    .app-content { padding: 0 !important; }
    .card { border: none !important; box-shadow: none !important; }
    body { background: #fff; }
}