/* Host Dada CRM — UI styles */
:root {
    /* Host Dada brand (matches wpbuild.hostdada.co.uk) */
    --hd-ink: #1b1e21;
    --hd-ink-2: #2c3034;
    --hd-gold: #C19A6B;
    --hd-gold-hover: #b38b5c;
    --hd-gold-ink: #8C6838;   /* gold dark enough for text/white-on-gold */
    --hd-gold-soft: #f6efe6;
    --hd-cream: #f7f4ef;

    --bh-sidebar-bg: var(--hd-ink);
    --bh-sidebar-active: var(--hd-gold);
    --bh-sidebar-width: 240px;

    /* Bootstrap: brand gold instead of blue for links, badges, focus rings. */
    --bs-primary: #8C6838;
    --bs-primary-rgb: 140, 104, 56;
    --bs-primary-text-emphasis: #5c4425;
    --bs-primary-bg-subtle: #f6efe6;
    --bs-primary-border-subtle: #e7d7c2;
    --bs-link-color: #8C6838;
    --bs-link-color-rgb: 140, 104, 56;
    --bs-link-hover-color: #6b4f2a;
    --bs-link-hover-color-rgb: 107, 79, 42;
    --bs-focus-ring-color: rgba(193, 154, 107, .35);
}

body { background: #f4f2ee; color: var(--hd-ink); }

/* Gold buttons with ink text, as on the Host Dada sites. */
.btn-primary {
    --bs-btn-color: var(--hd-ink);
    --bs-btn-bg: var(--hd-gold);
    --bs-btn-border-color: var(--hd-gold);
    --bs-btn-hover-color: var(--hd-ink);
    --bs-btn-hover-bg: var(--hd-gold-hover);
    --bs-btn-hover-border-color: var(--hd-gold-hover);
    --bs-btn-active-color: var(--hd-ink);
    --bs-btn-active-bg: var(--hd-gold-hover);
    --bs-btn-active-border-color: var(--hd-gold-hover);
    --bs-btn-disabled-color: var(--hd-ink);
    --bs-btn-disabled-bg: var(--hd-gold);
    --bs-btn-disabled-border-color: var(--hd-gold);
    --bs-btn-focus-shadow-rgb: 193, 154, 107;
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--hd-gold-ink);
    --bs-btn-border-color: var(--hd-gold);
    --bs-btn-hover-color: var(--hd-ink);
    --bs-btn-hover-bg: var(--hd-gold);
    --bs-btn-hover-border-color: var(--hd-gold);
    --bs-btn-active-color: var(--hd-ink);
    --bs-btn-active-bg: var(--hd-gold-hover);
    --bs-btn-active-border-color: var(--hd-gold-hover);
    --bs-btn-focus-shadow-rgb: 193, 154, 107;
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--hd-gold); }
.form-check-input:checked { background-color: var(--hd-gold-ink); border-color: var(--hd-gold-ink); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--hd-gold-ink); }
.page-link { --bs-pagination-active-bg: var(--hd-gold-ink); --bs-pagination-active-border-color: var(--hd-gold-ink); }

/* ---- Login ------------------------------------------------------------ */
.login-logo { height: 44px; width: auto; }

/* ---- Sidebar ---------------------------------------------------------- */
.sidebar {
    width: var(--bh-sidebar-width);
    min-width: var(--bh-sidebar-width);
    min-height: 100vh;
    background: var(--bh-sidebar-bg);
    position: sticky;
    top: 0;
    height: 100vh;
    /* The menu can be taller than the screen: scroll inside the dark panel
       rather than spilling onto the page. */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.2) transparent;
}
.sidebar > * { flex-shrink: 0; }
/* Standard (dark) logo on a cream strip: "Host Dada | CRM". */
.sidebar-brand { background: var(--hd-cream); gap: 12px; }
.sidebar-logo { height: 26px; width: auto; }
.sidebar-product {
    border-left: 1px solid rgba(27,30,33,.18); padding-left: 12px;
    color: var(--hd-gold-ink); font-weight: 700; letter-spacing: .04em; font-size: .95rem;
}
.sidebar-tenant { color: var(--hd-gold); border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar .nav-link {
    color: #c9ccd0;
    border-radius: .5rem;
    padding: .5rem .75rem;
    font-size: .925rem;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { background: var(--bh-sidebar-active); color: var(--hd-ink); font-weight: 600; }
.sidebar-heading { letter-spacing: .04em; }

.main-wrap { min-width: 0; }

/* ---- Topbar ---------------------------------------------------------- */
.topbar { position: sticky; top: 0; z-index: 1020; }
.avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--bh-sidebar-active); color: var(--hd-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: .9rem;
}

/* ---- Stat cards ------------------------------------------------------ */
.stat-card:hover { transform: translateY(-2px); transition: transform .15s ease; }
.stat-icon {
    width: 48px; height: 48px; border-radius: .75rem;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
}

/* ---- Timeline ------------------------------------------------------- */
.timeline { position: relative; padding-left: 2rem; }
.timeline::before {
    content: ''; position: absolute; left: .65rem; top: .25rem; bottom: .25rem;
    width: 2px; background: #e2e8f0;
}
.timeline-item { position: relative; padding-bottom: 1.1rem; }
.timeline-icon {
    position: absolute; left: -2rem; top: 0;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    background: var(--hd-gold-soft); color: var(--hd-gold-ink);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem; border: 2px solid #fff;
}
.timeline-content { font-size: .9rem; }

/* ---- Knowledge base content ----------------------------------------- */
.kb-content h3 { font-size: 1.3rem; font-weight: 600; }
.kb-content h4 { font-size: 1.1rem; font-weight: 600; }
.kb-content h5 { font-size: 1rem; font-weight: 600; }
.kb-content p { margin-bottom: .75rem; }
.kb-content ul, .kb-content ol { margin-bottom: .75rem; }
.kb-content code { background: #f1f5f9; padding: .1rem .3rem; border-radius: .25rem; }

/* ---- Mobile sidebar -------------------------------------------------- */
@media (max-width: 767.98px) {
    .sidebar {
        position: fixed; z-index: 1040; left: 0; top: 0;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .sidebar.show { transform: translateX(0); }
}