/* 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; }

/* ---- 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); }
}

/* ===== Knowledge Base articles (mirrored from WHMCS; same components as the
   hd-kb styles in the WHMCS Lagom custom.css) ===== */
.kb-article .hd-kb { line-height: 1.65; font-size: 15px; }
.kb-article .hd-kb h2 { font-size: 1.3rem; margin: 2rem 0 .75rem; }
.kb-article .hd-kb h3 { font-size: 1.08rem; margin: 1.5rem 0 .5rem; }
.kb-article .hd-kb .hd-summary { font-size: 1.05rem; padding: 1rem 1.25rem; border-left: 4px solid #C19A6B; background: #FAF6F0; border-radius: 6px; margin-bottom: 1.5rem; }
.kb-article .hd-kb .hd-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.kb-article .hd-kb .hd-meta li { font-size: .8rem; padding: .2rem .6rem; border-radius: 999px; border: 1px solid #EEE0CF; }
.kb-article .hd-kb ol.hd-steps { counter-reset: hdstep; list-style: none; padding-left: 0; }
.kb-article .hd-kb ol.hd-steps > li { counter-increment: hdstep; position: relative; padding: 0 0 1.1rem 2.75rem; }
.kb-article .hd-kb ol.hd-steps > li::before { content: counter(hdstep); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: #C19A6B; color: #fff; font-weight: 600; text-align: center; line-height: 1.9rem; font-size: .9rem; }
.kb-article .hd-kb .hd-note, .kb-article .hd-kb .hd-warn, .kb-article .hd-kb .hd-tip { padding: .85rem 1.1rem; border-radius: 6px; margin: 1rem 0; border: 1px solid; }
.kb-article .hd-kb .hd-note { background: #eef5fc; border-color: #c7dcf2; }
.kb-article .hd-kb .hd-warn { background: #fdf3e7; border-color: #f0cfa4; }
.kb-article .hd-kb .hd-tip { background: #eef8f1; border-color: #bfe3c9; }
.kb-article .hd-kb .hd-note strong:first-child, .kb-article .hd-kb .hd-warn strong:first-child, .kb-article .hd-kb .hd-tip strong:first-child { display: block; margin-bottom: .2rem; }
.kb-article .hd-kb figure { margin: 1rem 0 1.5rem; }
.kb-article .hd-kb figure img, .kb-article img { max-width: 100%; height: auto; }
.kb-article .hd-kb figure img { border: 1px solid rgba(0,0,0,.12); border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.kb-article .hd-kb figcaption { font-size: .85rem; opacity: .75; margin-top: .4rem; }
.kb-article .hd-kb table.hd-table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: .95rem; }
.kb-article .hd-kb table.hd-table th, .kb-article .hd-kb table.hd-table td { border: 1px solid rgba(0,0,0,.12); padding: .55rem .75rem; text-align: left; vertical-align: top; }
.kb-article .hd-kb table.hd-table th { background: #FAF6F0; }
@media (max-width: 640px) { .kb-article .hd-kb table.hd-table { display: block; overflow-x: auto; } }
.kb-article .hd-kb code { padding: .1rem .35rem; border-radius: 4px; background: rgba(0,0,0,.06); color: inherit; font-weight: 600; font-size: .9em; word-break: break-word; }
.kb-article .hd-kb pre { background: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.1); border-radius: 6px; padding: .8rem 1rem; overflow-x: auto; font-size: .88rem; white-space: pre; }
.kb-article .hd-kb pre code { background: none; padding: 0; font-weight: 400; }
.kb-article .hd-kb .hd-help { margin-top: 2rem; padding: 1.1rem 1.25rem; border-radius: 8px; background: #FAF6F0; border: 1px solid #EEE0CF; }
.kb-article .hd-kb .hd-related ul { padding-left: 1.2rem; }
.kb-article .hd-kb .hd-reviewed { font-size: .8rem; opacity: .65; margin-top: 1.5rem; }
/* ===== end Knowledge Base ===== */