/* Client Harbor CRM Theme */

/* ===== Light theme (default) ===== */
:root,
[data-bs-theme="light"] {
    --crm-primary: #3498db;
    --crm-sidebar: #2c3e50;
    --crm-sidebar-hover: #34495e;
    --crm-body-bg: #f8f9fa;
    --crm-card-bg: #fff;
    --crm-card-border: #f0f0f0;
    --crm-text: #212529;
    --crm-text-muted: #6c757d;
    --crm-table-stripe: rgba(0, 0, 0, 0.02);
    --crm-section-header-bg: #3498db;
    --crm-section-header-text: #fff;
}

/* ===== Dark theme ===== */
[data-bs-theme="dark"] {
    --crm-primary: #5dade2;
    --crm-sidebar: #1a1d23;
    --crm-sidebar-hover: #2a2d35;
    --crm-body-bg: #121418;
    --crm-card-bg: #1e2127;
    --crm-card-border: #2e3238;
    --crm-text: #e0e0e0;
    --crm-text-muted: #8a8f98;
    --crm-table-stripe: rgba(255, 255, 255, 0.02);
    --crm-section-header-bg: #1a1d23;
    --crm-section-header-text: #e0e0e0;
}

/* ===== Base styles ===== */
body {
    background-color: var(--crm-body-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--crm-text);
}

/* ===== Navbar ===== */
.crm-navbar {
    background-color: var(--crm-sidebar) !important;
}

/* The app's logo fills the top-left corner, above the sidebar (same width), on white so its navy text reads.
   In dark mode it's the version with white lettering instead, straight on the dark bar (below). */
.crm-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    height: 56px;
    margin: -0.5rem 0 -0.5rem -0.75rem;  /* cancel the navbar's padding so the panel reaches the edges */
    padding: 4px 12px;
    background-color: #fff;
    flex-shrink: 0;
}

/* Sign-in and password pages: the logo on white, or in dark mode its white-lettered version with no panel */
.crm-auth-logo {
    display: inline-block;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #fff;
}

.crm-auth-logo img {
    max-width: 100%;
    height: auto;
}

.crm-brand img {
    max-height: 48px;
    width: auto;
}

/* Both versions of the logo are in the page; the theme shows one, so switching themes swaps it at once */
.crm-logo-dark,
[data-bs-theme="dark"] .crm-logo-light {
    display: none;
}

[data-bs-theme="dark"] .crm-logo-dark {
    display: inline;
}

[data-bs-theme="dark"] .crm-brand,
[data-bs-theme="dark"] .crm-auth-logo {
    background-color: transparent;
}

/* ===== Sidebar ===== */
.crm-sidebar {
    width: 240px;
    position: fixed;
    top: 56px;
    bottom: 0;
    background-color: var(--crm-sidebar);
    overflow-y: auto;
}

.sidebar .nav-link {
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background-color 0.15s;
}

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

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

.sidebar .sidebar-chevron {
    display: inline-block;
    font-size: 0.75rem;
    transition: transform 0.15s;
}

.sidebar .sidebar-toggle.collapsed .sidebar-chevron {
    transform: rotate(-90deg);
}

/* ===== Cards ===== */
.card {
    border-radius: 12px;
    background-color: var(--crm-card-bg);
}

.card-header {
    border-bottom: 1px solid var(--crm-card-border);
}

/* Section headers */
.card-header.section-header {
    background-color: var(--crm-section-header-bg);
    color: var(--crm-section-header-text);
    border-bottom: none;
    border-radius: 12px 12px 0 0 !important;
}

.card-header.section-header h6,
.card-header.section-header .badge {
    color: var(--crm-section-header-text);
}

.card-header.section-header .badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.card-header.section-header a,
.card-header.section-header .btn-outline-primary,
.card-header.section-header .btn-outline-secondary {
    color: var(--crm-section-header-text);
    border-color: rgba(255, 255, 255, 0.3);
}

.card-header.section-header a:hover,
.card-header.section-header .btn-outline-primary:hover,
.card-header.section-header .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

/* ===== Dark theme: section header border for contrast ===== */
[data-bs-theme="dark"] .card-header.section-header {
    border-bottom: 1px solid var(--crm-card-border);
}

/* ===== Tables ===== */
.table a {
    text-decoration: none;
    color: var(--crm-primary);
}

.table a:hover {
    text-decoration: underline;
}

/* ===== Breadcrumbs ===== */
.breadcrumb {
    background: none;
    padding: 0;
    margin-bottom: 0;
    font-size: 0.875rem;
}

/* ===== Email ===== */
.email-body img {
    max-width: 100%;
    height: auto;
}

/* ===== Login page ===== */
.crm-login-bg {
    background-color: var(--crm-sidebar);
}

.crm-login-title {
    color: var(--crm-sidebar);
}

[data-bs-theme="dark"] .crm-login-title {
    color: var(--crm-primary);
}

/* ===== Dark theme: form inputs & selects ===== */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #2a2d35;
    border-color: #3e4248;
    color: var(--crm-text);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #2e3138;
    border-color: var(--crm-primary);
    color: var(--crm-text);
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: var(--crm-text-muted);
}

/* ===== Dark theme: list groups ===== */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--crm-card-bg);
    border-color: var(--crm-card-border);
    color: var(--crm-text);
}

[data-bs-theme="dark"] .list-group-item-action:hover {
    background-color: var(--crm-sidebar-hover);
    color: var(--crm-text);
}

/* ===== Dark theme: table ===== */
[data-bs-theme="dark"] .table {
    color: var(--crm-text);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: #1a1d23;
    --bs-table-color: var(--crm-text);
    border-color: var(--crm-card-border);
}

[data-bs-theme="dark"] .table-hover > tbody > tr:hover {
    --bs-table-hover-bg: rgba(255, 255, 255, 0.04);
}

/* ===== Dark theme: misc ===== */
[data-bs-theme="dark"] .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: var(--crm-text-muted) !important;
}

[data-bs-theme="dark"] hr {
    border-color: var(--crm-card-border);
}

/* ===== Theme toggle button ===== */
#themeToggle {
    border: none;
    background: none;
    transition: transform 0.3s;
}

#themeToggle:hover {
    transform: scale(1.2);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .sidebar,
    .crm-sidebar {
        display: none !important;
    }
    main {
        margin-left: 0 !important;
    }
}

/* Modals whose header/body/footer sit inside a <form> (task, log activity, custom field): keep the body scrolling */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

/* Reminders bell menu */
.crm-bell-menu {
    width: 340px;
    max-width: calc(100vw - 2rem);
    max-height: 70vh;
    overflow-y: auto;
}

/* Rearrangeable sections (record pages, dashboard): drag by the grip in the blue header */
.crm-drag-handle { cursor: grab; opacity: .7; }
.crm-drag-handle:hover { opacity: 1; }
.crm-section-column { min-height: 4rem; }  /* so an emptied column can still take a section */
.crm-section-ghost > .card { opacity: .4; outline: 2px dashed var(--crm-section-header-bg); }
.sortable-chosen .crm-drag-handle { cursor: grabbing; }
.crm-section-dragging { opacity: .9 !important; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25); pointer-events: none; }
.crm-section-dragging .collapse { max-height: 12rem; overflow: hidden; }  /* a tall section shouldn't hide the drop spot */

/* Documentation articles */
.crm-docs h3 { margin-top: 2.25rem; margin-bottom: .75rem; font-size: 1.35rem; scroll-margin-top: 72px; }
.crm-docs h3:first-of-type { margin-top: 1rem; }
.crm-docs h4 { margin-top: 1.5rem; font-size: 1.05rem; font-weight: 600; }
.crm-docs li { margin-bottom: .3rem; }
.crm-docs code { overflow-wrap: anywhere; }
/* Commands and config files: wrap long lines rather than widening the page */
.crm-docs pre {
    margin: .5rem 0 .75rem; padding: .6rem .8rem; border-radius: .375rem;
    background: var(--bs-tertiary-bg); white-space: pre-wrap;
}
.crm-docs-step {
    display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem;
    margin-right: .6rem; border-radius: 50%; font-size: .95rem; vertical-align: .1em;
    background: var(--crm-section-header-bg); color: var(--crm-section-header-text);
}
.crm-docs-card:hover { border-color: var(--crm-section-header-bg) !important; }
@media (min-width: 992px) { .crm-docs-sidebar { position: sticky; top: 72px; } }

/* Editing one field in place on a record page (apps/core/inline_edit.py) */
.crm-inline-edit { font-size: .85em; line-height: 1; color: var(--bs-secondary-color); opacity: .55; vertical-align: baseline; }
.crm-inline-field:hover .crm-inline-edit, .crm-inline-edit:focus-visible { opacity: 1; color: var(--bs-primary); }
.crm-inline-editing > dd { background: var(--bs-tertiary-bg); border-radius: .375rem; padding: .5rem; }

/* Email: the {{ field }} list beside the editor (templates/emails/_merge_fields.html) */
.crm-merge-fields .card-body { max-height: 70vh; overflow-y: auto; }
.crm-merge-field { padding: .2rem .5rem; line-height: 1.25; }
.crm-merge-label { font-size: .75rem; }
@media (min-width: 992px) { .crm-merge-fields { position: sticky; top: 72px; } }

/* Tags: coloured pills on leads, contacts and accounts */
.crm-tag { background-color: #2980b9; color: #fff;  /* each pill sets its own colour inline */ font-weight: 500; font-size: .8rem;
           display: inline-flex; align-items: center; gap: .15rem; }
.crm-tag-remove { border: 0; background: none; color: inherit; padding: 0; line-height: 1; opacity: .8; }
.crm-tag-remove:hover { opacity: 1; }