/* ---------------------------------------------------------------------------
   Sales CRM — application styles
   Layered on top of Bootstrap 5. Deliberately small: anything Bootstrap
   already does (spacing, grid, buttons, badges) is not repeated here.
--------------------------------------------------------------------------- */

:root {
    --crm-sidebar-width: 250px;
    --crm-topbar-height: 56px;
    --crm-sidebar-bg: #1f2937;
    --crm-sidebar-fg: #cbd5e1;
    --crm-sidebar-fg-active: #ffffff;
    --crm-sidebar-hover: #374151;
    --crm-accent: #2563eb;
}

body {
    background-color: #f4f6f9;
    font-size: 0.9375rem;
}

/* --- Topbar --------------------------------------------------------------- */

.crm-topbar {
    height: var(--crm-topbar-height);
    z-index: 1030;
}

.crm-topbar .crm-search {
    max-width: 420px;
}

/* --- Sidebar -------------------------------------------------------------- */

.crm-sidebar {
    width: var(--crm-sidebar-width);
    background-color: var(--crm-sidebar-bg);
    top: var(--crm-topbar-height);
    height: calc(100vh - var(--crm-topbar-height));
    overflow-y: auto;
    z-index: 1020;
}

.crm-sidebar .nav-link {
    color: var(--crm-sidebar-fg);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9rem;
}

.crm-sidebar .nav-link:hover {
    background-color: var(--crm-sidebar-hover);
    color: var(--crm-sidebar-fg-active);
}

.crm-sidebar .nav-link.active {
    background-color: var(--crm-accent);
    color: var(--crm-sidebar-fg-active);
}

/* Sections not yet built are shown, but plainly inert rather than broken. */
.crm-sidebar .nav-link.disabled {
    color: #64748b;
    cursor: not-allowed;
}

.crm-sidebar .crm-nav-heading {
    color: #64748b;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1rem 0.75rem 0.375rem;
}

/* --- Content -------------------------------------------------------------- */

.crm-content {
    margin-left: var(--crm-sidebar-width);
    margin-top: var(--crm-topbar-height);
    padding: 1.25rem;
    min-height: calc(100vh - var(--crm-topbar-height));
}

@media (max-width: 991.98px) {
    .crm-content {
        margin-left: 0;
    }
}

/* --- Tables --------------------------------------------------------------- */

/* Wide tables scroll inside their own container so the page body never does. */
.crm-table-wrap {
    overflow-x: auto;
}

.table > :not(caption) > * > * {
    padding: 0.6rem 0.75rem;
}

/* --- Auth screens --------------------------------------------------------- */

.crm-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, #1e3a8a 0%, #1f2937 100%);
}

.crm-auth-card {
    max-width: 26rem;
    width: 100%;
}

/* --- Utilities ------------------------------------------------------------ */

.crm-kpi-value {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.crm-kpi-label {
    font-size: 0.8125rem;
    color: #6b7280;
}

/* Mobile: keep the primary contact actions within thumb reach. */
@media (max-width: 575.98px) {
    .crm-sticky-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        border-top: 1px solid #dee2e6;
        padding: 0.5rem;
        z-index: 1010;
    }
}