/* CMS Help Desk — small layer on top of Bootstrap 5.3 */
:root {
    --hd-brand: #1d3a6e;
    --hd-brand-2: #27508f;
    --hd-accent: #f2a900;
    --bs-primary: #27508f;
    --bs-primary-rgb: 39, 80, 143;
    --bs-link-color: #27508f;
    --bs-link-color-rgb: 39, 80, 143;
}

body { background: #f4f6fa; }

.btn-primary {
    --bs-btn-bg: var(--hd-brand-2);
    --bs-btn-border-color: var(--hd-brand-2);
    --bs-btn-hover-bg: var(--hd-brand);
    --bs-btn-hover-border-color: var(--hd-brand);
    --bs-btn-active-bg: var(--hd-brand);
    --bs-btn-disabled-bg: var(--hd-brand-2);
    --bs-btn-disabled-border-color: var(--hd-brand-2);
}
.btn-outline-primary {
    --bs-btn-color: var(--hd-brand-2);
    --bs-btn-border-color: var(--hd-brand-2);
    --bs-btn-hover-bg: var(--hd-brand-2);
    --bs-btn-hover-border-color: var(--hd-brand-2);
    --bs-btn-active-bg: var(--hd-brand);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--hd-brand-2); }
.list-group { --bs-list-group-active-bg: var(--hd-brand-2); --bs-list-group-active-border-color: var(--hd-brand-2); }
.pagination { --bs-pagination-active-bg: var(--hd-brand-2); --bs-pagination-active-border-color: var(--hd-brand-2); }

.hd-navbar { background: linear-gradient(90deg, var(--hd-brand), var(--hd-brand-2)); border-bottom: 3px solid var(--hd-accent); }
.hd-navbar .nav-link.active { font-weight: 600; }

.hd-hero { background: linear-gradient(135deg, #ffffff 0%, #eef3fb 100%); }

.min-w-0 { min-width: 0; }

/* Stat tiles */
.hd-stat { transition: transform .12s ease, box-shadow .12s ease; border-left: 4px solid var(--hd-brand-2) !important; }
a.hd-stat:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.hd-stat-warn { border-left-color: var(--hd-accent) !important; }
.hd-stat-danger { border-left-color: #dc3545 !important; }

/* Ticket rows */
.hd-ticket-row { border-left: 3px solid transparent; }
.hd-ticket-row.hd-overdue { border-left-color: #dc3545; }

/* Conversation */
.hd-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #e2e8f0; color: #334155; font-weight: 600; font-size: .9rem; flex-shrink: 0;
}
.hd-avatar-agent { background: var(--hd-brand-2); color: #fff; }
.hd-reply.hd-from-agent { border-left: 3px solid var(--hd-brand-2) !important; }
.hd-reply.hd-internal { background: #fff8e1; border-left: 3px solid var(--hd-accent) !important; }
.hd-body { white-space: normal; word-wrap: break-word; overflow-wrap: anywhere; }

form.hd-internal-mode { background: #fff8e1; }
form.hd-internal-mode textarea { background: #fffdf5; border-color: var(--hd-accent); }

.hd-file {
    display: inline-flex; align-items: center; gap: .15rem;
    padding: .3rem .6rem; border: 1px solid #dee2e6; border-radius: .5rem;
    background: #fff; font-size: .8rem; text-decoration: none;
}
.hd-file:hover { background: #f8f9fa; }

/* Markdown content */
.hd-markdown > :last-child { margin-bottom: 0; }
.hd-markdown ol, .hd-markdown ul { padding-left: 1.25rem; }
.hd-markdown li { margin-bottom: .25rem; }
.hd-markdown code { background: #eef1f6; padding: .1rem .3rem; border-radius: .25rem; color: #b02a37; }
.hd-markdown pre { background: #1e293b; color: #e2e8f0; padding: .75rem; border-radius: .5rem; }
.hd-markdown pre code { background: none; color: inherit; padding: 0; }

/* Knowledge base */
.hd-section-label { letter-spacing: .05em; font-size: .75rem; }
.hd-solution { background: #f0faf4; border: 1px solid #cfe9d9; }
.hd-kb-item { transition: transform .12s ease, box-shadow .12s ease; }
.hd-kb-item:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important; }
.hd-kb-card { background: #f0faf4; }

.hd-suggest {
    background: #fffbea; border: 1px solid #f5e1a4; border-radius: .5rem; padding: .75rem;
    animation: hd-fade .2s ease;
}
.hd-suggest .list-group-item { background: transparent; }

.hd-kb-insert [data-hd-kb-insert-results]:empty { display: none; }

.hd-activity .list-group-item { padding-top: .5rem; padding-bottom: .5rem; }

@keyframes hd-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (max-width: 991.98px) {
    .hd-navbar .navbar-collapse { padding-bottom: .75rem; }
}