/*
 * helpdesk.css  —  v2  (Area 3 update)
 * Adds agent navbar, admin navbar, sidebar dividers, btn-xs.
 * All Area 2 styles preserved below.
 */

/* =========================================================
   CSS variables
========================================================= */
:root {
    --hd-primary:        #3b5bdb;
    --hd-primary-dark:   #2f4ac0;
    --hd-agent-nav:      #343a40;
    --hd-admin-nav:      #c92a2a;
    --hd-success:        #2f9e44;
    --hd-warning:        #e67700;
    --hd-danger:         #c92a2a;
    --hd-muted:          #868e96;
    --hd-border:         #dee2e6;
    --hd-bg-light:       #f8f9fa;
    --hd-bg-sidebar:     #f1f3f5;
    --hd-shadow-sm:      0 1px 3px rgba(0,0,0,.08);
    --hd-shadow:         0 2px 8px rgba(0,0,0,.10);
    --hd-radius:         6px;
    --hd-navbar-height:  56px;
    --hd-sidebar-width:  220px;
}

/* =========================================================
   Base
========================================================= */
body {
    font-size: 0.9rem;
    background-color: #f0f2f5;
    color: #212529;
}
a { color: var(--hd-primary); }

/* =========================================================
   Auth layout
========================================================= */
.hd-auth-body {
    background: linear-gradient(135deg, #3b5bdb 0%, #1971c2 100%);
    min-height: 100vh;
}
.hd-auth-wrapper  { min-height: 100vh; }
.hd-auth-logo {
    width: 64px; height: 64px;
    background: #fff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.8rem; color: var(--hd-primary);
    box-shadow: var(--hd-shadow);
}
.hd-auth-card {
    border: none; border-radius: var(--hd-radius); box-shadow: var(--hd-shadow);
}

/* =========================================================
   Navbars
========================================================= */
.hd-navbar-customer { background-color: var(--hd-primary); box-shadow: var(--hd-shadow-sm); }
.hd-navbar-agent    { background-color: var(--hd-agent-nav); box-shadow: var(--hd-shadow-sm); }
.hd-navbar-admin    { background-color: var(--hd-admin-nav); box-shadow: var(--hd-shadow-sm); }

/* =========================================================
   Sidebar
========================================================= */
.hd-app-body {
    display: flex;
    min-height: calc(100vh - var(--hd-navbar-height));
}

.hd-sidebar {
    width: var(--hd-sidebar-width);
    min-height: calc(100vh - var(--hd-navbar-height));
    background: var(--hd-bg-sidebar);
    border-right: 1px solid var(--hd-border);
    flex-shrink: 0;
}

.hd-sidebar .list-group-item {
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0.875rem;
    color: #495057;
    padding: 0.65rem 1.25rem;
}
.hd-sidebar .list-group-item:hover {
    background: rgba(59,91,219,0.07);
    color: var(--hd-primary);
}
.hd-sidebar .list-group-item.active,
.hd-sidebar .list-group-item.hd-active {
    background: rgba(59,91,219,0.12);
    color: var(--hd-primary);
    font-weight: 600;
}
.hd-sidebar .list-group-item i { width: 18px; text-align: center; }

/* Section dividers inside sidebar */
.hd-sidebar-divider {
    padding: 0.4rem 1.25rem 0.2rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hd-muted);
    font-weight: 600;
    margin-top: 0.5rem;
}

.hd-main-content {
    flex: 1;
    padding: 1.5rem;
    min-width: 0;
}

/* =========================================================
   Cards
========================================================= */
.card {
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow-sm);
}
.hd-stat-card { border-radius: var(--hd-radius); box-shadow: var(--hd-shadow-sm); }
.hd-stat-number { font-size: 2rem; font-weight: 700; line-height: 1; }
.hd-stat-label  { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hd-muted); }

/* =========================================================
   Tables
========================================================= */
.hd-table thead th {
    background-color: var(--hd-bg-light);
    border-top: none;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hd-muted);
    font-weight: 600;
}
.hd-ticket-no { font-family: monospace; font-size: 0.85rem; color: var(--hd-primary); }

/* =========================================================
   Ticket thread / replies
========================================================= */
.hd-reply            { padding: 1rem 1.25rem; border-bottom: 1px solid var(--hd-border); }
.hd-reply-last       { border-bottom: none; }
.hd-reply-customer   { background-color: #fff; }
.hd-reply-agent      { background-color: #edf2ff; }
.hd-reply-internal   { background-color: #fff9db; border-left: 3px solid #fab005; }

/* Avatars */
.hd-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.hd-avatar-customer  { background-color: #868e96; }
.hd-avatar-agent     { background-color: var(--hd-primary); }
.hd-avatar-internal  { background-color: #e67700; }

.hd-avatar-sm {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.3);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
}
.hd-user-pill { display: flex; align-items: center; }

.hd-message-body { font-size: 0.9rem; line-height: 1.6; word-break: break-word; }

/* =========================================================
   Ticket header
========================================================= */
.hd-ticket-header { background-color: var(--hd-bg-light); }

/* =========================================================
   Details sidebar table
========================================================= */
.hd-details-table th,
.hd-details-table td { padding: 0.5rem 0.75rem; border-top: 1px solid var(--hd-border); vertical-align: middle; }
.hd-details-table tr:first-child th,
.hd-details-table tr:first-child td { border-top: none; }

/* =========================================================
   Overdue row
========================================================= */
.hd-overdue             { background-color: #fff5f5 !important; }
.hd-overdue td          { color: #c92a2a; }

/* =========================================================
   Breadcrumb
========================================================= */
.hd-breadcrumb          { background: transparent; padding: 0; margin-bottom: 0.75rem; font-size: 0.85rem; }

/* =========================================================
   Footer
========================================================= */
.hd-footer { padding: 1rem 0; margin-top: 3rem; border-top: 1px solid var(--hd-border); background: #fff; }

/* =========================================================
   Badges
========================================================= */
.badge          { font-size: 0.75rem; padding: 0.3em 0.55em; }
.badge-warning  { color: #fff; }

/* btn-xs — Bootstrap 4 doesn't include this */
.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: 0.2rem;
}

/* =========================================================
   Custom file input
========================================================= */
.custom-file-label::after { content: "Browse"; }

/* =========================================================
   Utilities
========================================================= */
.min-width-0    { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.text-decoration-none { text-decoration: none !important; }

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 767px) {
    .hd-sidebar {
        width: 100%;
        min-height: auto;
        border-right: none;
        border-bottom: 1px solid var(--hd-border);
    }
    .hd-app-body      { flex-direction: column; }
    .hd-main-content  { padding: 1rem; }
}

/*
 * helpdesk.css additions — Area 4
 * Append these lines to the END of assets/css/helpdesk.css
 * Do NOT replace the whole file — just paste below the existing content.
 */

/* =========================================================
   Guest pages
========================================================= */
.hd-guest-body {
    background-color: #f0f2f5;
}

/* Success page ticket number box */
.hd-ticket-number-box {
    background: #edf2ff;
    border: 2px dashed #3b5bdb;
    border-radius: var(--hd-radius);
    padding: 1rem 1.5rem;
    display: inline-block;
    min-width: 220px;
}

/*
 * helpdesk.css additions — Area 5 (Knowledge Base + Public Portal)
 * APPEND these lines to the END of assets/css/helpdesk.css
 */

/* =========================================================
   Public portal body
========================================================= */
.hd-public-body {
    background: #f8f9fa;
}

/* =========================================================
   Public top navigation
========================================================= */
.hd-public-nav {
    background: #fff;
    border-bottom: 1px solid var(--hd-border);
    box-shadow: var(--hd-shadow-sm);
}

.hd-public-logo {
    text-decoration: none;
}

.hd-logo-img {
    max-height: 40px;
    width: auto;
}

.hd-logo-text {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hd-primary);
}

.hd-public-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.hd-nav-link {
    color: #495057;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background 0.15s;
}

.hd-nav-link:hover {
    background: #f1f3f5;
    color: var(--hd-primary);
    text-decoration: none;
}

/* =========================================================
   Hero section
========================================================= */
.hd-hero {
    background: linear-gradient(135deg, #3b5bdb 0%, #1971c2 100%);
    padding: 3.5rem 0 3rem;
    color: #fff;
}

.hd-hero-title {
    font-size: 1.9rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
}

/* Search bar */
.hd-search-form    { max-width: 560px; margin: 0 auto; }
.hd-search-group   { border-radius: 8px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.hd-search-input   { border: none; padding: 0.75rem 1rem; font-size: 1rem; }
.hd-search-input:focus { box-shadow: none; }
.hd-search-btn     { background: #fff; border: none; color: var(--hd-primary); padding: 0 1.25rem; font-size: 1.1rem; }
.hd-search-btn:hover { background: #f1f3f5; }

/* CTA buttons */
.hd-cta-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.hd-cta-btn {
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.2s;
}

.hd-cta-btn:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
    text-decoration: none;
}

/* =========================================================
   Knowledge base section (homepage + solutions)
========================================================= */
.hd-kb-section {
    padding: 2.5rem 0 3rem;
}

.hd-kb-heading {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #343a40;
}

/* KB card */
.hd-kb-card {
    background: #fff;
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius);
    box-shadow: var(--hd-shadow-sm);
    height: 100%;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.hd-kb-card:hover {
    box-shadow: var(--hd-shadow);
}

/* Category header inside card */
.hd-kb-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid #f1f3f5;
}

.hd-kb-cat-icon {
    font-size: 1.5rem;
    color: var(--hd-primary);
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.hd-kb-cat-title {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: #212529;
    text-decoration: none;
    line-height: 1.2;
}

.hd-kb-cat-title:hover {
    color: var(--hd-primary);
    text-decoration: none;
}

.hd-kb-cat-count {
    display: inline-block;
    background: #e7f5ff;
    color: var(--hd-primary);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1em 0.5em;
    border-radius: 10px;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* Article list inside card */
.hd-kb-article-list {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.hd-kb-article-list li {
    padding: 0.35rem 1.25rem;
    border-bottom: 1px solid #f8f9fa;
}

.hd-kb-article-list li:last-child {
    border-bottom: none;
}

.hd-kb-article-list a {
    font-size: 0.875rem;
    color: #495057;
    text-decoration: none;
}

.hd-kb-article-list a:hover {
    color: var(--hd-primary);
    text-decoration: underline;
}

/* View all link */
.hd-kb-view-all {
    padding: 0.6rem 1.25rem;
    border-top: 1px solid #f1f3f5;
    background: #fafafa;
}

.hd-kb-view-all a {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--hd-primary);
    text-decoration: none;
}

.hd-kb-view-all a:hover {
    text-decoration: underline;
}

/* =========================================================
   Article content area
========================================================= */
.hd-article-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #343a40;
}

.hd-article-content h1,
.hd-article-content h2,
.hd-article-content h3 {
    margin-top: 1.5rem;
    font-weight: 600;
}

.hd-article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0.75rem 0;
}

.hd-article-content pre {
    background: #f8f9fa;
    border: 1px solid var(--hd-border);
    border-radius: 4px;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
}

.hd-article-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.hd-article-content th,
.hd-article-content td {
    border: 1px solid var(--hd-border);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.hd-article-content th {
    background: var(--hd-bg-light);
    font-weight: 600;
}

/* =========================================================
   Public footer
========================================================= */
.hd-public-footer {
    background: #fff;
    border-top: 1px solid var(--hd-border);
    padding: 1.25rem 0;
    margin-top: 3rem;
}