/* ==========================================================================
   SIFFRUM CRM — design system
   Brand accent sampled from the SIFFRUM wordmark (violet). Enterprise, clean,
   data-dense. Built on top of Bootstrap 5 with CSS custom properties.
   ========================================================================== */

:root {
    --siff-primary: #7A42E6;
    --siff-primary-rgb: 122, 66, 230;
    --siff-primary-dark: #5F2FC0;
    --siff-primary-light: #9B6CFF;
    --siff-gradient: linear-gradient(135deg, #9B6CFF 0%, #7A42E6 55%, #5F2FC0 100%);

    --siff-charcoal: #1F2430;
    --siff-ink: #2B3140;
    --siff-muted: #6B7280;
    --siff-border: #E6E8EF;
    --siff-bg: #F5F6FA;
    --siff-surface: #FFFFFF;

    --siff-radius: 12px;
    --siff-radius-sm: 8px;
    --siff-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --siff-shadow: 0 4px 16px rgba(16, 24, 40, 0.08);
    --siff-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12);

    --sidebar-width: 256px;

    --bs-primary: var(--siff-primary);
    --bs-primary-rgb: var(--siff-primary-rgb);
    --bs-link-color: var(--siff-primary);
    --bs-link-hover-color: var(--siff-primary-dark);
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--siff-bg);
    color: var(--siff-ink);
    font-size: 0.925rem;
}

a { text-decoration: none; }

/* ---- Buttons / accents --------------------------------------------------- */
.btn-primary {
    --bs-btn-bg: var(--siff-primary);
    --bs-btn-border-color: var(--siff-primary);
    --bs-btn-hover-bg: var(--siff-primary-dark);
    --bs-btn-hover-border-color: var(--siff-primary-dark);
    --bs-btn-active-bg: var(--siff-primary-dark);
    --bs-btn-disabled-bg: var(--siff-primary);
    --bs-btn-focus-shadow-rgb: var(--siff-primary-rgb);
}
.btn-outline-primary {
    --bs-btn-color: var(--siff-primary);
    --bs-btn-border-color: var(--siff-primary);
    --bs-btn-hover-bg: var(--siff-primary);
    --bs-btn-hover-border-color: var(--siff-primary);
    --bs-btn-active-bg: var(--siff-primary);
}
.text-primary { color: var(--siff-primary) !important; }
.bg-brand-gradient { background: var(--siff-gradient); }
.form-control:focus, .form-select:focus {
    border-color: var(--siff-primary-light);
    box-shadow: 0 0 0 0.2rem rgba(var(--siff-primary-rgb), 0.15);
}

/* ---- Auth screens -------------------------------------------------------- */
.auth-wrap {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
}
.auth-brand {
    background: var(--siff-gradient);
    color: #fff;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.auth-brand .logo { filter: brightness(0) invert(1); height: 46px; width: auto; }
.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: var(--siff-surface);
}
.auth-card { width: 100%; max-width: 400px; }
@media (max-width: 860px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
}

/* ---- App shell ----------------------------------------------------------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-width);
    background: var(--siff-charcoal);
    color: #C7CBD6;
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform 0.2s ease;
}
.sidebar .brand {
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar .brand img { height: 30px; filter: brightness(0) invert(1); }
.sidebar .nav-section {
    padding: 1rem 1.25rem 0.35rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #717689;
}
.sidebar .nav-link {
    color: #C7CBD6;
    padding: 0.6rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-left: 3px solid transparent;
    font-size: 0.9rem;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,0.04); }
.sidebar .nav-link.active {
    color: #fff;
    background: rgba(var(--siff-primary-rgb), 0.18);
    border-left-color: var(--siff-primary-light);
}
.sidebar .nav-scroll { overflow-y: auto; flex: 1; }

.app-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: 60px;
    background: var(--siff-surface);
    border-bottom: 1px solid var(--siff-border);
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.topbar .page-title { font-weight: 600; font-size: 1.05rem; margin: 0; }
.content { padding: 1.25rem; flex: 1; }

/* ---- Cards / KPI tiles --------------------------------------------------- */
.card { border: 1px solid var(--siff-border); border-radius: var(--siff-radius); box-shadow: var(--siff-shadow-sm); }
.card-header { background: var(--siff-surface); border-bottom: 1px solid var(--siff-border); font-weight: 600; }

.kpi-tile {
    border-radius: var(--siff-radius);
    background: var(--siff-surface);
    border: 1px solid var(--siff-border);
    padding: 1rem 1.1rem;
    box-shadow: var(--siff-shadow-sm);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    display: block;
    color: inherit;
    height: 100%;
}
.kpi-tile:hover { box-shadow: var(--siff-shadow); transform: translateY(-1px); color: inherit; }
.kpi-tile .kpi-label { color: var(--siff-muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi-tile .kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--siff-charcoal); }
.kpi-tile .kpi-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(var(--siff-primary-rgb), 0.12); color: var(--siff-primary); font-size: 1.1rem;
}
.kpi-tile.kpi-danger .kpi-value { color: #C8372D; }
.kpi-tile.kpi-danger .kpi-icon { background: rgba(200,55,45,0.12); color: #C8372D; }
.kpi-tile.kpi-success .kpi-icon { background: rgba(16,150,91,0.12); color: #10965B; }
.kpi-tile.kpi-warning .kpi-icon { background: rgba(214,158,46,0.15); color: #B7791F; }

/* ---- Badges / status ----------------------------------------------------- */
.badge-stage { font-weight: 600; font-size: 0.72rem; padding: 0.35em 0.6em; border-radius: 6px; }
.priority-low { color: #10965B; }
.priority-medium { color: #B7791F; }
.priority-high { color: #DD6B20; }
.priority-critical { color: #C8372D; }

/* ---- Tables -------------------------------------------------------------- */
.table { --bs-table-hover-bg: rgba(var(--siff-primary-rgb), 0.04); }
.table thead th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--siff-muted); border-bottom: 1px solid var(--siff-border); }
.table td, .table th { vertical-align: middle; }

/* ---- Timeline ------------------------------------------------------------ */
.timeline { position: relative; padding-left: 1.75rem; }
.timeline::before { content: ""; position: absolute; left: 0.55rem; top: 0; bottom: 0; width: 2px; background: var(--siff-border); }
.timeline-item { position: relative; padding-bottom: 1.25rem; }
.timeline-item::before {
    content: ""; position: absolute; left: -1.45rem; top: 0.2rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--siff-primary); box-shadow: 0 0 0 3px rgba(var(--siff-primary-rgb),0.15);
}

/* ---- Mobile -------------------------------------------------------------- */
.sidebar-backdrop { display: none; }
@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .app-main { margin-left: 0; }
    .sidebar-backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1035; }
}

/* ---- Quick action FAB (mobile) ------------------------------------------ */
.fab {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 1050;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--siff-gradient); color: #fff; border: none;
    box-shadow: var(--siff-shadow-lg); font-size: 1.5rem;
    display: none;
}
@media (max-width: 991px) { .fab { display: inline-flex; align-items: center; justify-content: center; } }

/* ---- Notification badge -------------------------------------------------- */
.notif-badge { position: absolute; top: 2px; right: 2px; font-size: 0.6rem; }

/* ---- Reminder modal ------------------------------------------------------ */
#reminderModal .modal-header { background: var(--siff-gradient); color: #fff; }
#reminderModal .reminder-item { border-left: 3px solid var(--siff-primary); background: #FAF8FF; }