/**
 * eFit Helpdesk Professional UI/UX Styles
 * Modern, clean, and accessible design system
 * Compatible with Bootstrap 5 and dashboard-v3.css
 */

/* ============================================================================
   CSS Custom Properties - Design Tokens
   ============================================================================ */
:root {
    /* Brand Colors */
    --hd-primary: #1b6ec2;
    --hd-primary-hover: #155a9c;
    --hd-primary-light: #e8f4fd;
    --hd-primary-dark: #0d4a86;

    /* Status Colors */
    --hd-success: #10b981;
    --hd-success-light: #d1fae5;
    --hd-warning: #f59e0b;
    --hd-warning-light: #fef3c7;
    --hd-danger: #ef4444;
    --hd-danger-light: #fee2e2;
    --hd-info: #0ea5e9;
    --hd-info-light: #e0f2fe;

    /* Neutrals */
    --hd-gray-50: #f9fafb;
    --hd-gray-100: #f3f4f6;
    --hd-gray-200: #e5e7eb;
    --hd-gray-300: #d1d5db;
    --hd-gray-400: #9ca3af;
    --hd-gray-500: #6b7280;
    --hd-gray-600: #4b5563;
    --hd-gray-700: #374151;
    --hd-gray-800: #1f2937;
    --hd-gray-900: #111827;

    /* Shadows */
    --hd-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --hd-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --hd-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --hd-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --hd-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Border Radius */
    --hd-radius-sm: 0.375rem;
    --hd-radius-md: 0.5rem;
    --hd-radius-lg: 0.75rem;
    --hd-radius-xl: 1rem;
    --hd-radius-2xl: 1.5rem;
    --hd-radius-full: 9999px;

    /* Transitions */
    --hd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --hd-transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --hd-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   Base Layout
   ============================================================================ */
.menu {
    margin: 0 auto 20px;
    padding: 0 15px;
}

.content {
    margin: 0 auto;
    padding: 0 15px 40px;
    max-width: 1400px;
}

/* ============================================================================
   Typography
   ============================================================================ */
h1, h2, h3, h4, h5, h6 {
    color: var(--hd-gray-800);
    font-weight: 600;
}

/* ============================================================================
   Buttons - Professional styling
   ============================================================================ */
.btn {
    font-weight: 500;
    border-radius: var(--hd-radius-md);
    transition: all var(--hd-transition-fast);
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--hd-shadow-md);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%);
    border: none;
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--hd-primary-hover) 0%, var(--hd-primary-dark) 100%);
    color: white;
}

.btn-success {
    background: linear-gradient(135deg, var(--hd-success) 0%, #059669 100%);
    border: none;
}

.btn-danger {
    background: linear-gradient(135deg, var(--hd-danger) 0%, #dc2626 100%);
    border: none;
}

.btn-warning {
    background: linear-gradient(135deg, var(--hd-warning) 0%, #d97706 100%);
    border: none;
    color: white;
}

.btn-info {
    background: linear-gradient(135deg, var(--hd-info) 0%, #0284c7 100%);
    border: none;
}

.btn-outline-secondary {
    border: 2px solid var(--hd-gray-300);
    color: var(--hd-gray-700);
    background: white;
}

.btn-outline-secondary:hover {
    background: var(--hd-gray-100);
    border-color: var(--hd-gray-400);
    color: var(--hd-gray-800);
}

.btn-outline-info {
    border: 2px solid var(--hd-info);
    color: var(--hd-info);
    background: white;
}

.btn-outline-info:hover {
    background: var(--hd-info);
    color: white;
}

.btn-outline-success {
    border: 2px solid var(--hd-success);
    color: var(--hd-success);
    background: white;
}

.btn-outline-success:hover {
    background: var(--hd-success);
    color: white;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* ============================================================================
   Navigation Menu - Modern pill style
   ============================================================================ */
.d-flex.gap-2 {
    background: white;
    padding: 1rem;
    border-radius: var(--hd-radius-xl);
    box-shadow: var(--hd-shadow-sm);
    border: 1px solid var(--hd-gray-200);
}

.d-flex.gap-2 .btn {
    border-radius: var(--hd-radius-full);
}

/* ============================================================================
   Cards - Elevated design
   ============================================================================ */
.card {
    border: none;
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-sm);
    background: white;
    overflow: hidden;
    transition: box-shadow var(--hd-transition-normal);
}

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

.card-header {
    background: linear-gradient(135deg, var(--hd-gray-50) 0%, white 100%);
    border-bottom: 1px solid var(--hd-gray-200);
    padding: 1rem 1.25rem;
    font-weight: 600;
    color: var(--hd-gray-800);
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: var(--hd-gray-50);
    border-top: 1px solid var(--hd-gray-200);
    padding: 0.875rem 1.25rem;
}

/* ============================================================================
   Tables - Clean modern design
   ============================================================================ */
.table {
    margin-bottom: 0;
}

.table thead th {
    background: linear-gradient(135deg, var(--hd-gray-100) 0%, var(--hd-gray-50) 100%);
    font-weight: 600;
    color: var(--hd-gray-700);
    border-bottom: 2px solid var(--hd-gray-200);
    padding: 1rem;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.table tbody td {
    padding: 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--hd-gray-100);
    color: var(--hd-gray-700);
}

.table tbody tr {
    transition: background var(--hd-transition-fast);
}

.table tbody tr:hover {
    background: var(--hd-primary-light);
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--hd-gray-50);
}

.table-striped tbody tr:nth-of-type(odd):hover {
    background: var(--hd-primary-light);
}

/* Table wrapper with rounded corners.
   This used to be overflow:hidden purely so the rounded corners clipped the
   table, which also cancelled Bootstrap's overflow-x:auto. Wide tables such as
   the 11-column ticket list were simply cut off: on a 767px viewport 660px of
   the table sat outside the wrapper with no way to reach it. overflow-x:auto
   restores the horizontal scroll; overflow-y:hidden keeps the corners clipped. */
.table-responsive {
    background: white;
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-sm);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    min-width: 0;
    border: 1px solid var(--hd-gray-200);
}

/* Overlay scrollbars are invisible until you scroll, so give the wrapper a
   permanently visible track: without it nothing on screen says the table
   continues past the right edge. */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: var(--hd-gray-400, #9ca3af) var(--hd-gray-100, #f3f4f6);
}

.table-responsive::-webkit-scrollbar {
    height: 10px;
}

.table-responsive::-webkit-scrollbar-track {
    background: var(--hd-gray-100, #f3f4f6);
    border-radius: 0 0 var(--hd-radius-lg) var(--hd-radius-lg);
}

.table-responsive::-webkit-scrollbar-thumb {
    background: var(--hd-gray-400, #9ca3af);
    border-radius: 5px;
    border: 2px solid var(--hd-gray-100, #f3f4f6);
}

.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--hd-gray-500, #6b7280);
}

/* ============================================================================
   Badges - Priority & Status
   ============================================================================ */
.badge {
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--hd-radius-full);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.badge i {
    font-size: 0.625rem;
}

/* Priority badges with subtle gradients */
.badge.bg-secondary {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
}

.badge.bg-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
}

.badge.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
}

.badge.bg-primary {
    background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%) !important;
}

/* Status labels (legacy support) */
.label-success,
.label-danger {
    padding: 0.375rem 0.75rem;
    border-radius: var(--hd-radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.label-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.label-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

/* ============================================================================
   Forms - Modern inputs
   ============================================================================ */
.form-control,
.form-select {
    border: 2px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-md);
    padding: 0.625rem 1rem;
    transition: all var(--hd-transition-fast);
    font-size: 0.9375rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--hd-primary);
    box-shadow: 0 0 0 4px var(--hd-primary-light);
    outline: none;
}

.form-control::placeholder {
    color: var(--hd-gray-400);
}

.form-label,
.control-label {
    font-weight: 500;
    color: var(--hd-gray-700);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

/* File input styling */
input[type="file"] {
    padding: 0.5rem;
    border: 2px dashed var(--hd-gray-300);
    border-radius: var(--hd-radius-md);
    background: var(--hd-gray-50);
    cursor: pointer;
    transition: all var(--hd-transition-fast);
}

input[type="file"]:hover {
    border-color: var(--hd-primary);
    background: var(--hd-primary-light);
}

/* Radio buttons */
.radio-inline {
    margin-right: 1rem;
    cursor: pointer;
}

.radio-inline input[type="radio"] {
    margin-right: 0.375rem;
}

/* ============================================================================
   Search Box - Enhanced filter panel
   ============================================================================ */
.search .alert-dark,
.search .mb-3.alert-dark {
    background: white;
    border: 1px solid var(--hd-gray-200);
    color: var(--hd-gray-700);
    border-radius: var(--hd-radius-xl);
    box-shadow: var(--hd-shadow-sm);
    padding: 1.5rem;
}

.search .form-control {
    border-radius: var(--hd-radius-full);
}

/* ============================================================================
   Alerts - Softer, modern alerts
   ============================================================================ */
.alert {
    border-radius: var(--hd-radius-lg);
    border: none;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.alert-success {
    background: var(--hd-success-light);
    color: #065f46;
    border-left: 4px solid var(--hd-success);
}

.alert-danger {
    background: var(--hd-danger-light);
    color: #991b1b;
    border-left: 4px solid var(--hd-danger);
}

.alert-warning {
    background: var(--hd-warning-light);
    color: #92400e;
    border-left: 4px solid var(--hd-warning);
}

.alert-info {
    background: var(--hd-info-light);
    color: #075985;
    border-left: 4px solid var(--hd-info);
}

.alert-primary {
    background: var(--hd-primary-light);
    color: var(--hd-primary-dark);
    border-left: 4px solid var(--hd-primary);
}

/* ============================================================================
   Ticket Info Sidebar
   ============================================================================ */
.ticket-info {
    background: white;
}

.ticket-info .card-header {
    background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%);
    color: white;
}

.ticket-info .card-header strong {
    color: white;
}

.ticket-info .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 0;
    border-bottom: 1px solid var(--hd-gray-100);
}

.ticket-info .info-item:last-child {
    border-bottom: none;
}

.ticket-info .info-label {
    font-weight: 500;
    color: var(--hd-gray-500);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.ticket-info .info-value {
    font-weight: 500;
    color: var(--hd-gray-800);
}

/* ============================================================================
   Ticket Reply Cards
   ============================================================================ */
.replies .card {
    border-left: 4px solid var(--hd-gray-300);
    margin-bottom: 1rem;
    transition: all var(--hd-transition-fast);
}

.replies .card:hover {
    border-left-color: var(--hd-primary);
}

.replies .card-header {
    background: transparent;
    border-bottom: 1px solid var(--hd-gray-100);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Staff reply styling */
.replies .card.admin-reply,
.replies .card:has(.fa-building) {
    border-left-color: var(--hd-success);
    background: linear-gradient(135deg, #f0fdf4 0%, white 100%);
}

.comment-post {
    padding: 0.5rem 0;
}

.comment-post p {
    margin-bottom: 0;
    line-height: 1.7;
    color: var(--hd-gray-700);
}

/* ============================================================================
   WYSIWYG Editor - Hide unused toolbar groups
   ============================================================================ */
#toolbarGroup-mode,
#toolbarGroup-special,
#toolbarGroup-insert,
#toolbarGroup-styles,
#toolbarGroup-fonts,
#toolbarGroup-components,
#toolbarGroup-intervals {
    display: none;
}

.wysiwyg-editor {
    border-radius: var(--hd-radius-md);
    border: 2px solid var(--hd-gray-200);
}

/* ============================================================================
   Ticket Status Indicators
   ============================================================================ */
.visible-ticket {
    display: table-row;
}

.hidden-ticket {
    display: none;
}

/* ============================================================================
   Loading States
   ============================================================================ */
.spinner-border {
    display: none;
}

.loading .spinner-border {
    display: inline-block;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

/* Skeleton loading animation */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--hd-gray-200) 25%, var(--hd-gray-100) 50%, var(--hd-gray-200) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--hd-radius-sm);
}

/* ============================================================================
   Empty States
   ============================================================================ */
.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--hd-gray-500);
}

.empty-state i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state h5 {
    color: var(--hd-gray-700);
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin-bottom: 1.5rem;
}

/* ============================================================================
   Quick Response / Canned Responses
   ============================================================================ */
.canned-response-select {
    background: var(--hd-gray-50);
    border: 2px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-md);
    padding: 0.5rem;
}

.canned-response-select:focus {
    border-color: var(--hd-warning);
    box-shadow: 0 0 0 4px var(--hd-warning-light);
}

/* ============================================================================
   Analytics Dashboard Cards
   ============================================================================ */
.analytics-dashboard {
    overflow: hidden;
}

.analytics-dashboard .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.analytics-dashboard [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.stat-card {
    border-radius: var(--hd-radius-xl);
    padding: 1.5rem;
    color: white;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.stat-card h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    color: white;
}

.stat-card p {
    opacity: 0.9;
    margin: 0;
    font-size: 0.9375rem;
}

.stat-card.bg-primary {
    background: linear-gradient(135deg, #0B2E93 0%, #163FC0 46%, #2864F0 100%);
}

.stat-card.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.stat-card.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.stat-card.bg-info {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.stat-card.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.chart-container {
    background: white;
    border-radius: var(--hd-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--hd-shadow-sm);
    border: 1px solid var(--hd-gray-200);
    height: 100%;
}

.chart-container h5 {
    color: var(--hd-gray-700);
    font-size: 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================================================
   Knowledge Base Styling
   ============================================================================ */
.kb-container {
    max-width: 1200px;
    margin: 0 auto;
}

.kb-header {
    /* Navy -> brand -> deep cyan. The old 0B2E93/163FC0 stops rendered as
       indigo-violet, off the blue-to-cyan brand palette. The light end is
       capped dark enough that white text stays comfortably past AA. */
    background: linear-gradient(135deg, #062A66 0%, #004BB5 52%, #0B6BA8 100%);
    border-radius: var(--hd-radius-2xl);
    position: relative;
    overflow: hidden;
    padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.25rem, 3.5vw, 2.5rem) clamp(1.75rem, 3.5vw, 2.75rem);
    margin-bottom: 2rem;
    text-align: center;
    box-shadow:
        0 12px 40px rgba(0, 75, 181, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.kb-header::before {
    content: '';
    position: absolute;
    top: -45%;
    right: -12%;
    width: min(52vw, 380px);
    height: min(52vw, 380px);
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(255,255,255,0.28) 0%, transparent 68%);
    pointer-events: none;
}

.kb-header::after {
    content: '';
    position: absolute;
    bottom: -55%;
    left: -12%;
    width: min(48vw, 340px);
    height: min(48vw, 340px);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(34, 211, 238, 0.35) 0%, transparent 66%);
    pointer-events: none;
}

/* Faint dot-grid, faded out at the edges. Sits between the gradient and the
   content; pure CSS, zero assets. */
.kb-header-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.10;
    background-image:
        linear-gradient(rgba(255,255,255,0.85) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.85) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 15%, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 35%, #000 15%, transparent 72%);
}

.kb-header-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0.35rem 0.9rem;
    position: relative;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: var(--hd-radius-full);
}

.kb-header-eyebrow i {
    font-size: 0.9em;
    opacity: 0.95;
}

.kb-header h1 {
    color: #ffffff;
    margin-bottom: 0.6rem;
    font-size: clamp(1.75rem, 4vw, 2.4rem);
    font-weight: 700;
    position: relative;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.kb-header p {
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 1.75rem;
    font-size: 1.0625rem;
    position: relative;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.55;
}

/* Live-suggest dropdown under the hero search (filled by nonce'd JS;
   the form is a plain GET and works fine without it). */
.kb-hero-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.45rem);
    z-index: 10;
    background: #ffffff;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-lg);
    box-shadow: 0 12px 36px rgba(0, 20, 60, 0.18);
    padding: 0.4rem;
    max-height: 16rem;
    overflow-y: auto;
    text-align: left;
}

.kb-hero-suggest[hidden] {
    display: none !important;
}

.kb-hero-suggest a {
    display: block;
    padding: 0.6rem 0.85rem;
    border-radius: var(--hd-radius-md);
    color: var(--hd-gray-800);
    text-decoration: none;
    font-size: 0.9375rem;
    line-height: 1.35;
}

.kb-hero-suggest a:hover,
.kb-hero-suggest a:focus {
    background: #e8f1fc;
    color: #00368A;
    outline: none;
}

.kb-hero-suggest .kb-hero-suggest-cat {
    display: inline-block;
    margin-left: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: #004BB5;
    background: #e8f1fc;
    padding: 0.1rem 0.45rem;
    border-radius: var(--hd-radius-full);
    vertical-align: middle;
}

.kb-search {
    max-width: 640px;
    margin: 0 auto;
    position: relative;
}

.kb-search .input-group {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-radius: var(--hd-radius-full) !important;
    overflow: hidden;
    background: #ffffff;
}

.kb-search .input-group .input-group-text {
    background: #ffffff;
    border: none;
    padding-left: 1.25rem;
    padding-right: 0.5rem;
    color: var(--hd-gray-400);
}

.kb-search .input-group .form-control {
    border: none !important;
    padding: 1rem 0.75rem;
    font-size: 1rem;
    background: #ffffff;
    height: auto;
}

.kb-search .input-group .form-control::placeholder {
    color: var(--hd-gray-400);
}

.kb-search .input-group .form-control:focus {
    box-shadow: none !important;
    outline: none;
}

.kb-search .input-group .btn,
.kb-search .input-group .btn.btn-light {
    border-radius: 0 var(--hd-radius-full) var(--hd-radius-full) 0 !important;
    padding: 1rem 1.75rem;
    background: linear-gradient(135deg, #004BB5 0%, #2864F0 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600;
    height: auto;
    transition: all var(--hd-transition-fast);
}

.kb-search .input-group .btn:hover,
.kb-search .input-group .btn.btn-light:hover {
    background: linear-gradient(135deg, #00368A 0%, #163FC0 100%) !important;
    color: #ffffff !important;
    transform: none;
    box-shadow: none;
}

.kb-header-hints {
    margin-top: 1.25rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kb-header-hints span {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.875rem;
}

.kb-header-hints a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 38px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    padding: 0.35rem 0.9rem;
    border-radius: var(--hd-radius-full);
    font-size: 0.8438rem;
    font-weight: 600;
    text-decoration: none;
    transition: all var(--hd-transition-fast);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

.kb-header-hints a i {
    font-size: 0.85em;
    opacity: 0.95;
}

.kb-header-hints a:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
}

.kb-header-hints a:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .kb-header-hints a,
    .kb-header-hints a:hover {
        transition: none;
        transform: none;
    }
}

.kb-article-card {
    background: white;
    border-radius: var(--hd-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--hd-gray-200);
    transition: all var(--hd-transition-normal);
    margin-bottom: 1rem;
}

.kb-article-card:hover {
    border-color: var(--hd-primary);
    box-shadow: var(--hd-shadow-lg);
    transform: translateY(-2px);
}

.kb-article-card h5 {
    margin-bottom: 0.75rem;
}

.kb-article-card h5 a {
    color: var(--hd-gray-800);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}

.kb-article-card h5 a:hover {
    color: var(--hd-primary);
}

.kb-article-card .views {
    color: var(--hd-gray-500);
    font-size: 0.875rem;
}

.kb-sidebar {
    background: white;
    border-radius: var(--hd-radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--hd-gray-200);
    box-shadow: var(--hd-shadow-sm);
}

.kb-sidebar h5 {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hd-gray-700);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--hd-primary-light);
    font-weight: 600;
}

.kb-sidebar h5 i {
    color: var(--hd-primary);
    margin-right: 0.5rem;
}

.kb-sidebar .list-group-item {
    border: none;
    padding: 0.75rem 0;
    background: transparent;
    border-bottom: 1px solid var(--hd-gray-100);
}

.kb-sidebar .list-group-item:last-child {
    border-bottom: none;
}

.kb-sidebar .list-group-item a {
    color: var(--hd-gray-700);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all var(--hd-transition-fast);
    font-weight: 500;
}

.kb-sidebar .list-group-item a:hover {
    color: var(--hd-primary);
    padding-left: 0.5rem;
}

.kb-sidebar .list-group-item small {
    color: var(--hd-gray-500);
}

.category-badge {
    background: var(--hd-primary-light);
    color: var(--hd-primary-dark);
    padding: 0.25rem 0.75rem;
    border-radius: var(--hd-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

/* ============================================================================
   Create/Edit Ticket Form
   ============================================================================ */
#ticketForm .card {
    max-width: 800px;
    margin: 0 auto;
}

#ticketForm .card-header {
    font-size: 1.125rem;
}

#ticketForm .mb-3 {
    margin-bottom: 1.25rem !important;
}

/* ============================================================================
   Mobile Responsive Enhancements
   ============================================================================ */
@media (max-width: 992px) {
    .ticket-info {
        margin-top: 1rem;
    }
}

@media (max-width: 768px) {
    .content {
        padding: 0 10px 30px;
    }

    .d-flex.gap-2 {
        flex-direction: column;
        gap: 0.5rem !important;
    }

    .d-flex.gap-2 .btn {
        width: 100%;
        justify-content: center;
    }

    .table thead th {
        padding: 0.75rem 0.5rem;
        font-size: 0.6875rem;
    }

    .table tbody td {
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }

    .stat-card {
        margin-bottom: 1rem;
    }

    .stat-card h2 {
        font-size: 2rem;
    }

    .ticket-info .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .card-header {
        padding: 0.875rem 1rem;
    }

    .card-body {
        padding: 1rem;
    }

}

@media (max-width: 768px) {
    .kb-container .row {
        flex-direction: column;
    }

    .kb-container .col-md-8,
    .kb-container .col-md-4 {
        width: 100%;
        max-width: 100%;
    }

    .kb-sidebar {
        margin-top: 1.5rem;
    }

    .kb-article-card {
        padding: 1.25rem;
    }
}

@media (max-width: 576px) {
    .kb-header {
        padding: 1.75rem 1rem 1.5rem;
        margin-bottom: 1.5rem;
        border-radius: var(--hd-radius-xl);
    }

    .kb-header-eyebrow {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .kb-header h1 {
        font-size: 1.5rem;
    }

    .kb-header p {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .kb-search .input-group .input-group-text {
        padding-left: 1rem;
    }

    .kb-search .input-group .form-control {
        padding: 0.875rem 0.5rem;
        font-size: 0.9rem;
    }

    .kb-search .input-group .btn,
    .kb-search .input-group .btn.btn-light {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .kb-header-hints {
        margin-top: 1rem;
        gap: 0.4rem;
    }

    .kb-header-hints span {
        width: 100%;
        margin-bottom: 0.25rem;
    }

    .kb-header-hints a {
        flex: 1 1 calc(50% - 0.4rem);
        justify-content: center;
        min-height: 44px;
    }

    .kb-article-card {
        padding: 1rem;
    }

    .kb-article-card h5 a {
        font-size: 1rem;
    }

    .kb-sidebar {
        padding: 1rem;
    }

    .replies .card-header {
        font-size: 0.8125rem;
    }

    .badge {
        padding: 0.25rem 0.5rem;
        font-size: 0.6875rem;
    }
}

/* ============================================================================
   Accessibility Enhancements
   ============================================================================ */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
a:focus-visible {
    outline: 3px solid var(--hd-primary);
    outline-offset: 2px;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        border: 2px solid var(--hd-gray-800);
    }

    .btn {
        border: 2px solid currentColor;
    }

    .badge {
        border: 1px solid currentColor;
    }
}

/* ============================================================================
   Print Styles
   ============================================================================ */
@media print {
    .menu,
    .btn,
    #reply,
    .search,
    #loadmore {
        display: none !important;
    }

    .card {
        box-shadow: none;
        border: 1px solid #ddd;
    }

    .content {
        max-width: 100%;
    }
}

/* ============================================================================
   Page Header
   ============================================================================ */
.page-header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--hd-gray-200);
}

.page-header h4 {
    margin-bottom: 0;
}

.page-header p {
    margin-bottom: 0;
}

/* ============================================================================
   Filter Panel
   ============================================================================ */
.filter-panel {
    background: white;
    border-radius: var(--hd-radius-xl);
}

.filter-panel .card-body {
    padding: 1.5rem;
}

/* Button group for filters */
.btn-group .btn-check:checked + .btn-outline-secondary {
    background: var(--hd-gray-700);
    border-color: var(--hd-gray-700);
    color: white;
}

.btn-group .btn-check:checked + .btn-outline-success {
    background: var(--hd-success);
    border-color: var(--hd-success);
    color: white;
}

/* ============================================================================
   Breadcrumb Navigation
   ============================================================================ */
.breadcrumb {
    background: white;
    padding: 0.75rem 1rem;
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-xs);
    border: 1px solid var(--hd-gray-200);
}

.breadcrumb-item a {
    color: var(--hd-primary);
    text-decoration: none;
    transition: color var(--hd-transition-fast);
}

.breadcrumb-item a:hover {
    color: var(--hd-primary-dark);
}

.breadcrumb-item.active {
    color: var(--hd-gray-600);
}

/* ============================================================================
   Reply Section Enhancements
   ============================================================================ */
.reply-section .card {
    border-radius: var(--hd-radius-xl);
    overflow: hidden;
}

.replies-section {
    margin-top: 2rem;
}

.reply-card {
    margin-bottom: 1rem;
    border-radius: var(--hd-radius-lg) !important;
    border-left: 4px solid var(--hd-gray-300) !important;
    transition: all var(--hd-transition-fast);
}

.reply-card:hover {
    border-left-color: var(--hd-primary) !important;
    box-shadow: var(--hd-shadow-md);
}

.reply-card.admin-reply {
    border-left-color: var(--hd-success) !important;
    background: linear-gradient(135deg, #f0fdf4 0%, white 100%);
}

.reply-card.user-reply {
    border-left-color: var(--hd-info) !important;
}

.reply-author {
    font-weight: 500;
    color: var(--hd-gray-700);
}

.reply-meta {
    font-size: 0.875rem;
}

/* ============================================================================
   Knowledge Base Article Full View
   ============================================================================ */
.kb-article-full {
    background: white;
    border-radius: var(--hd-radius-xl);
    padding: 2rem;
    box-shadow: var(--hd-shadow-sm);
    border: 1px solid var(--hd-gray-200);
}

.kb-article-full h3 {
    color: var(--hd-gray-800);
    margin-bottom: 1rem;
}

.kb-article-full .article-meta {
    color: var(--hd-gray-500);
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hd-gray-200);
}

.kb-article-full .article-content {
    line-height: 1.8;
    color: var(--hd-gray-700);
}

.kb-article-full .article-content h1,
.kb-article-full .article-content h2,
.kb-article-full .article-content h3 {
    color: var(--hd-gray-800);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.kb-article-full .article-content code {
    background: var(--hd-gray-100);
    padding: 0.125rem 0.375rem;
    border-radius: var(--hd-radius-sm);
    font-size: 0.875em;
}

.kb-article-full .article-content pre {
    background: var(--hd-gray-100);
    padding: 1rem;
    border-radius: var(--hd-radius-md);
    overflow-x: auto;
}

/* Article screenshots. HtmlSanitizer strips every style attribute at render
   time, so an <img width="1200"> cannot constrain itself and spills out of the
   article column. Scaling has to live here. */
.kb-article-full .article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.25rem 0;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-md);
}

/* Wide tables scroll inside their own box rather than widening the page. */
.kb-article-full .article-content .table-responsive {
    overflow-x: auto;
    margin: 1.25rem 0;
}

/* Alerts inside an article are paragraphs of prose. The .alert rule above is
   display:flex, built for the one-line "icon + message" strips on the ticket
   screens, and in a flex container every inline child becomes its own column:
   a <strong> lead-in ends up stranded in a narrow left column with the
   sentence stacked beside it, and each link starts another column. Article
   alerts lay out as ordinary blocks. */
.kb-article-full .article-content .alert {
    display: block;
    margin: 1.25rem 0;
    line-height: 1.7;
}

.kb-article-full .article-content .alert > :first-child {
    margin-top: 0;
}

.kb-article-full .article-content .alert > :last-child {
    margin-bottom: 0;
}

/* Each alert colour ships with text tuned for its own tinted background. A
   link painted the default brand blue fights that, so links borrow the alert's
   text colour and stay recognisable through the underline. */
.kb-article-full .article-content .alert a {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.kb-article-full .article-content .alert a:hover,
.kb-article-full .article-content .alert a:focus-visible {
    color: inherit;
    text-decoration-thickness: 2px;
}

/* KB Staff Panel */
.kb-admin-panel {
    background: var(--hd-warning-light);
    border: 1px solid var(--hd-warning);
    border-radius: var(--hd-radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* ============================================================================
   Knowledge Base - Category Cards
   ============================================================================ */
.kb-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    border-radius: var(--hd-radius-xl);
    padding: 1.5rem 1rem;
    border: 1px solid var(--hd-gray-200);
    text-decoration: none;
    transition: all var(--hd-transition-normal);
    height: 100%;
}

.kb-category-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--hd-shadow-lg);
    text-decoration: none;
}

.kb-category-card.kb-category-primary:hover {
    border-color: var(--hd-primary);
}

.kb-category-card.kb-category-success:hover {
    border-color: var(--hd-success);
}

.kb-category-card.kb-category-info:hover {
    border-color: var(--hd-info);
}

.kb-category-card.kb-category-warning:hover {
    border-color: var(--hd-warning);
}

.kb-category-icon {
    width: 60px;
    height: 60px;
    border-radius: var(--hd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.kb-category-icon i {
    font-size: 1.5rem;
    color: white;
}

.kb-category-icon.bg-primary {
    background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%);
}

.kb-category-icon.bg-success {
    background: linear-gradient(135deg, var(--hd-success) 0%, #059669 100%);
}

.kb-category-icon.bg-info {
    background: linear-gradient(135deg, var(--hd-info) 0%, #0284c7 100%);
}

.kb-category-icon.bg-warning {
    background: linear-gradient(135deg, var(--hd-warning) 0%, #d97706 100%);
}

.kb-category-card h6 {
    color: var(--hd-gray-800);
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 0.9375rem;
}

.kb-category-count {
    color: var(--hd-gray-500);
    font-size: 0.8125rem;
    display: block;
}

.kb-category-views {
    display: block;
    margin-top: 0.125rem;
    color: var(--hd-gray-500);
}

.kb-category-views i {
    margin-right: 0.25rem;
    opacity: 0.75;
}

.kb-topics-heading {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--hd-gray-800);
    margin-bottom: 0.75rem;
}

.kb-topics-heading i {
    color: var(--hd-primary);
    margin-right: 0.5rem;
}

.kb-list-sort {
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    color: var(--hd-gray-600);
}

.kb-list-sort i {
    margin-right: 0.375rem;
    color: var(--hd-primary);
}

.kb-topics-basis {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--hd-gray-600);
}

/* ============================================================================
   Knowledge Base - Quick Filter Pills
   ============================================================================ */
.kb-quick-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem;
    background: white;
    border-radius: var(--hd-radius-xl);
    border: 1px solid var(--hd-gray-200);
}

.kb-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--hd-radius-full);
    background: var(--hd-gray-100);
    color: var(--hd-gray-700);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--hd-transition-fast);
}

.kb-filter-pill:hover {
    background: var(--hd-gray-200);
    color: var(--hd-gray-800);
    text-decoration: none;
}

.kb-filter-pill.active {
    background: var(--hd-primary);
    color: white;
}

.kb-filter-pill.active:hover {
    background: var(--hd-primary-hover);
    color: white;
}

/* ============================================================================
   Knowledge Base - Results Header
   ============================================================================ */
.kb-results-header {
    padding: 1rem 1.25rem;
    background: white;
    border-radius: var(--hd-radius-lg);
    border: 1px solid var(--hd-gray-200);
}

.kb-results-header h5 {
    margin-bottom: 0.25rem;
    color: var(--hd-gray-800);
}

.kb-results-header h5 i {
    color: var(--hd-primary);
    margin-right: 0.5rem;
}

/* ============================================================================
   Knowledge Base - Enhanced Article Cards
   ============================================================================ */
.kb-article-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

/* App Store / Google Play badge rows inside article bodies. The KB sanitizer
   strips style attributes and allows class only on div/span/p, so the badge
   layout has to live here rather than in the stored article HTML. */
.kb-store-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0 1.25rem;
}

.kb-store-badges a {
    display: inline-block;
    border-radius: 6px;
}

.kb-store-badges a:focus-visible {
    outline: 3px solid #004BB5;
    outline-offset: 2px;
}

.kb-store-badges img,
.kb-article-full .article-content .kb-store-badges img {
    display: block;
    max-width: 100%;
    height: auto;
    /* The generic article-image rule paints a light border and radius, which
       shows as a box around the Play badge's transparent padding. Its selector
       is more specific than a bare .kb-store-badges img, hence the long form. */
    border: 0;
    border-radius: 0;
    background: none;
}

.kb-article-content {
    flex: 1;
}

.kb-article-card h5 {
    margin-bottom: 0.5rem;
}

.kb-article-card h5 a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.kb-article-arrow {
    font-size: 0.75rem;
    opacity: 0;
    transition: all var(--hd-transition-fast);
    transform: translateX(-5px);
}

.kb-article-card:hover .kb-article-arrow {
    opacity: 1;
    transform: translateX(0);
}

.kb-article-excerpt {
    color: var(--hd-gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.kb-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.kb-article-views,
.kb-article-date {
    color: var(--hd-gray-500);
    font-size: 0.8125rem;
}

.kb-article-views i,
.kb-article-date i {
    margin-right: 0.25rem;
}

.kb-article-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ============================================================================
   Knowledge Base - Empty State
   ============================================================================ */
.kb-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: var(--hd-radius-xl);
    border: 1px solid var(--hd-gray-200);
}

.kb-empty-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 1.5rem;
    background: var(--hd-gray-100);
    border-radius: var(--hd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-empty-icon i {
    font-size: 2.5rem;
    color: var(--hd-gray-400);
}

.kb-empty-state h4 {
    color: var(--hd-gray-800);
    margin-bottom: 0.5rem;
}

.kb-empty-state p {
    max-width: 400px;
    margin: 0 auto 1.5rem;
}

.kb-empty-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================================================
   Knowledge Base - Sidebar Enhancements
   ============================================================================ */
.kb-sidebar .list-group-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kb-sidebar .list-group-item.active {
    background: var(--hd-primary-light);
    border-radius: var(--hd-radius-md);
    margin: 0 -0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

.kb-sidebar .list-group-item.active a {
    color: var(--hd-primary-dark);
    font-weight: 600;
}

.kb-sidebar-count {
    background: var(--hd-gray-200);
    color: var(--hd-gray-600);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: var(--hd-radius-full);
    margin-left: auto;
}

.kb-sidebar .list-group-item.active .kb-sidebar-count {
    background: var(--hd-primary);
    color: white;
}

/* ============================================================================
   Knowledge Base - CTA Card
   ============================================================================ */
.kb-cta-card {
    background: linear-gradient(135deg, var(--hd-primary) 0%, var(--hd-primary-dark) 100%);
    border-radius: var(--hd-radius-xl);
    padding: 1.5rem;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.kb-cta-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.kb-cta-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--hd-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kb-cta-icon i {
    font-size: 1.5rem;
    color: white;
}

.kb-cta-card h6 {
    color: white;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.kb-cta-card p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.kb-cta-card .btn {
    background: white;
    color: var(--hd-primary-dark);
    border: none;
}

.kb-cta-card .btn:hover {
    background: var(--hd-gray-100);
    color: var(--hd-primary-dark);
}

/* Knowledge Base Breadcrumb */
.kb-breadcrumb {
    margin-bottom: 1rem;
}

.kb-breadcrumb .breadcrumb {
    background: white;
    border-radius: var(--hd-radius-lg);
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    border: 1px solid var(--hd-gray-200);
    font-size: 0.875rem;
}

.kb-breadcrumb .breadcrumb-item a {
    color: var(--hd-gray-600);
    text-decoration: none;
    transition: color var(--hd-transition-fast);
}

.kb-breadcrumb .breadcrumb-item a:hover {
    color: var(--hd-primary);
}

.kb-breadcrumb .breadcrumb-item a i {
    margin-right: 0.375rem;
}

.kb-breadcrumb .breadcrumb-item.active {
    color: var(--hd-gray-800);
    font-weight: 500;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kb-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--hd-gray-400);
    content: "›";
    font-weight: 600;
}

/* Knowledge Base Pagination */
.kb-pagination {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--hd-gray-200);
}

.kb-pagination .pagination {
    margin-bottom: 0.75rem;
    gap: 0.25rem;
}

.kb-pagination .page-item .page-link {
    border: none;
    border-radius: var(--hd-radius-md);
    padding: 0.5rem 0.875rem;
    color: var(--hd-gray-600);
    background: var(--hd-gray-100);
    font-weight: 500;
    transition: all 0.2s ease;
    min-width: 40px;
    text-align: center;
}

.kb-pagination .page-item .page-link:hover {
    background: var(--hd-primary);
    color: white;
}

.kb-pagination .page-item.active .page-link {
    background: var(--hd-primary);
    color: white;
}

.kb-pagination .page-item.disabled .page-link {
    background: var(--hd-gray-100);
    color: var(--hd-gray-400);
    cursor: not-allowed;
}

.kb-pagination-info {
    color: var(--hd-gray-500);
}

/* ============================================================================
   Knowledge Base - Mobile Responsive
   ============================================================================ */
@media (max-width: 768px) {
    .kb-breadcrumb .breadcrumb {
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    .kb-breadcrumb .breadcrumb-item.active {
        max-width: 150px;
    }

    .kb-category-card {
        padding: 1rem 0.75rem;
    }

    .kb-category-icon {
        width: 50px;
        height: 50px;
    }

    .kb-category-icon i {
        font-size: 1.25rem;
    }

    .kb-category-card h6 {
        font-size: 0.8125rem;
    }

    .kb-quick-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .kb-filter-pill {
        white-space: nowrap;
    }

    .kb-article-card {
        flex-direction: column;
    }

    .kb-article-actions {
        margin-top: 0.75rem;
    }

    .kb-empty-state {
        padding: 2.5rem 1.5rem;
    }

    .kb-empty-icon {
        width: 80px;
        height: 80px;
    }

    .kb-empty-icon i {
        font-size: 2rem;
    }

    .kb-pagination .page-item .page-link {
        padding: 0.4rem 0.65rem;
        min-width: 36px;
        font-size: 0.875rem;
    }
}

/* ============================================================================
   Spinner Utilities
   ============================================================================ */
.spinner-border.d-none {
    display: none !important;
}

.search-spinner {
    margin-left: 0.5rem;
}

/* ============================================================================
   Helpdesk Navigation
   ============================================================================ */
.helpdesk-nav {
    background: white;
    padding: 1rem;
    border-radius: var(--hd-radius-xl);
    box-shadow: var(--hd-shadow-sm);
    border: 1px solid var(--hd-gray-200);
}

.nav-pills-wrapper .btn {
    border-radius: var(--hd-radius-full);
    padding: 0.5rem 1.25rem;
    font-weight: 500;
}

.nav-pills-wrapper .btn i {
    margin-right: 0.375rem;
}

/* ============================================================================
   Settings Panel
   ============================================================================ */
.settings-panel {
    background: var(--hd-gray-50);
    border: 1px solid var(--hd-gray-200);
    position: sticky;
    top: 1rem;
}

.settings-panel h6 {
    color: var(--hd-gray-700);
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--hd-gray-200);
}

/* External requester fields */
.external-user-fields {
    background: var(--hd-info-light);
    border: 1px solid var(--hd-info);
}

.external-user-fields h6 {
    color: var(--hd-gray-700);
    font-weight: 600;
}

/* ============================================================================
   Text Utilities
   ============================================================================ */
.text-primary {
    color: var(--hd-primary) !important;
}

.text-muted {
    color: var(--hd-gray-500) !important;
}

.text-danger {
    color: var(--hd-danger) !important;
}

/* ============================================================================
   Dark Mode Support (future-proofing)
   ============================================================================ */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here when needed */
}

/* Font Awesome Icon Visibility */
.fa-solid, .fa-regular, .fa-brands { display: inline-block; line-height: 1; }
.btn i.fa-solid, .btn i.fa-regular { margin-right: 0.35em; }

/* Public Support Page - Icon Color Contrast Fixes */
.bg-primary.bg-opacity-10 i.fa-solid { color: var(--hd-primary-dark) !important; }
.bg-warning.bg-opacity-10 i.fa-solid { color: #92400e !important; }
.bg-info.bg-opacity-10 i.fa-solid { color: #0369a1 !important; }
.bg-success.bg-opacity-10 i.fa-solid { color: #047857 !important; }
.bg-danger.bg-opacity-10 i.fa-solid { color: #b91c1c !important; }

/* Ensure text-* utility classes have sufficient contrast */
.text-primary { color: var(--hd-primary-dark) !important; }
.text-warning { color: #b45309 !important; }
.text-info { color: #0369a1 !important; }
.text-success { color: #047857 !important; }

/* ============================================================================
   Analytics Button - Custom styling with good contrast
   ============================================================================ */
.btn-analytics {
    background: transparent;
    border: 2px solid #004BB5;
    color: #004BB5;
    font-weight: 500;
}

.btn-analytics:hover {
    background: #004BB5;
    border-color: #004BB5;
    color: white;
}

.btn-analytics.active,
.btn-analytics:active {
    background: linear-gradient(135deg, #004BB5 0%, #00368A 100%);
    border-color: #004BB5;
    color: white;
}

/* ============================================================================
   Ticket Detail v2 — conversation thread layout
   One chronological thread (original message first, composer at the end)
   with a sticky facts sidebar. All classes are hd-* namespaced so they
   cannot collide with the legacy card styles still used elsewhere.
   ============================================================================ */

/* ---- Flash (post-reply feedback) ---- */
.hd-flash {
    box-shadow: var(--hd-shadow-sm);
}

/* ---- Page header ---- */
.hd-page-head {
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-sm);
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.25rem;
}

.hd-page-head-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.hd-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--hd-gray-800);
    margin: 0;
    line-height: 1.35;
}

.hd-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 1.1rem;
    font-size: 0.82rem;
    color: var(--hd-gray-500);
}

.hd-meta-line b {
    color: var(--hd-gray-700);
    font-weight: 600;
}

.hd-meta-line time,
.hd-kv-value time {
    border-bottom: 1px dotted var(--hd-gray-400);
    cursor: help;
}

/* ---- Chips (status, priority, id) ---- */
.hd-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.18rem 0.65rem;
    border-radius: var(--hd-radius-full);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.hd-chip i {
    font-size: 0.6rem;
}

.hd-chip-open {
    background: var(--hd-success-light);
    color: #047857;
    border: 1px solid #a7f3d0;
}

.hd-chip-closed {
    background: var(--hd-gray-100);
    color: var(--hd-gray-600);
    border: 1px solid var(--hd-gray-300);
}

/* Priority chips keyed to Tickets::$priorityLabels colors */
.hd-chip-secondary {
    background: var(--hd-gray-100);
    color: var(--hd-gray-600);
    border: 1px solid var(--hd-gray-300);
}

.hd-chip-info {
    background: var(--hd-info-light);
    color: #075985;
    border: 1px solid #bae6fd;
}

.hd-chip-warning {
    background: var(--hd-warning-light);
    color: #92400e;
    border: 1px solid #fde68a;
}

.hd-chip-danger {
    background: var(--hd-danger-light);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.hd-chip-id {
    background: var(--hd-gray-100);
    color: var(--hd-gray-600);
    border: 1px solid var(--hd-gray-200);
    font-weight: 500;
}

.hd-copy-btn {
    border: none;
    background: transparent;
    color: var(--hd-gray-500);
    padding: 0 0 0 0.15rem;
    cursor: pointer;
    line-height: 1;
}

.hd-copy-btn:hover {
    color: var(--hd-primary);
}

.hd-copy-btn.hd-copied {
    color: var(--hd-success);
}

/* ---- Thread ---- */
.hd-thread-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.hd-thread-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hd-gray-500);
}

.hd-thread-count {
    font-size: 0.78rem;
    color: var(--hd-gray-400);
}

.hd-msg {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.hd-avatar {
    width: 38px;
    height: 38px;
    border-radius: var(--hd-radius-full);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
}

.hd-avatar-user {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.hd-avatar-staff {
    background: linear-gradient(135deg, var(--hd-primary), var(--hd-primary-dark));
}

.hd-bubble {
    flex: 1;
    min-width: 0;
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-lg);
    overflow: hidden;
    box-shadow: var(--hd-shadow-xs);
}

.hd-msg-staff .hd-bubble {
    background: #f2f8ff;
    border-color: #cfe4f7;
}

.hd-bubble-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--hd-gray-200);
    font-size: 0.8rem;
}

.hd-msg-staff .hd-bubble-head {
    border-color: #cfe4f7;
}

.hd-who {
    font-weight: 600;
    color: var(--hd-gray-800);
}

.hd-role-tag {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.1rem 0.5rem;
    border-radius: var(--hd-radius-sm);
}

.hd-role-user {
    background: var(--hd-gray-100);
    color: var(--hd-gray-600);
}

.hd-role-staff {
    background: var(--hd-primary);
    color: #fff;
}

.hd-bubble-head time {
    margin-left: auto;
    color: var(--hd-gray-500);
    font-size: 0.76rem;
    border-bottom: 1px dotted var(--hd-gray-400);
    cursor: help;
}

/* "(edited)" sits with the timestamp, not with the author, so the head still
   reads "who / role ............ when". */
.hd-edited {
    color: var(--hd-gray-500);
    font-size: 0.74rem;
    font-style: italic;
    cursor: help;
}

/* Edit control. A quiet text button rather than a filled one: it appears on the
   reader's own messages throughout the thread, and a row of buttons would
   compete with the reply composer, which is the action that matters most. */
.hd-edit-msg {
    background: none;
    border: 1px solid transparent;
    padding: 0.05rem 0.4rem;
    border-radius: var(--hd-radius-sm);
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--hd-primary);
    cursor: pointer;
    line-height: 1.5;
}

.hd-edit-msg:hover,
.hd-edit-msg:focus-visible {
    background: var(--hd-gray-100);
    border-color: var(--hd-gray-200);
    text-decoration: underline;
}

/* The staff bubble is tinted, so the neutral hover above would vanish into it. */
.hd-msg-staff .hd-edit-msg:hover,
.hd-msg-staff .hd-edit-msg:focus-visible {
    background: #fff;
    border-color: #cfe4f7;
}

/* The edit modal borrows the composer's editor surface; without an explicit
   background it inherits the modal's and loses the "this is a field" cue. */
#hd-edit-reply-body {
    background: #fff;
}

.hd-bubble-body {
    padding: 0.85rem 1rem;
    line-height: 1.65;
    color: var(--hd-gray-700);
    overflow-wrap: break-word;
}

.hd-bubble-body p {
    margin: 0 0 0.6rem;
}

.hd-bubble-body p:last-child {
    margin-bottom: 0;
}

.hd-bubble-body img {
    max-width: 100%;
    height: auto;
}

.hd-bubble-body table {
    max-width: 100%;
}

.hd-attach {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 1rem 0.85rem;
    padding: 0.35rem 0.75rem;
    background: var(--hd-gray-50);
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-md);
    font-size: 0.78rem;
    color: var(--hd-primary-dark);
    text-decoration: none;
    transition: all var(--hd-transition-fast);
}

.hd-attach:hover {
    border-color: var(--hd-primary);
    background: var(--hd-primary-light);
    color: var(--hd-primary-dark);
}

.hd-empty {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--hd-gray-500);
}

.hd-empty i {
    font-size: 1.75rem;
    opacity: 0.5;
    margin-bottom: 0.5rem;
    display: block;
}

.hd-empty p {
    margin: 0;
    font-size: 0.9rem;
}

/* ---- Composer ---- */
.hd-composer {
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-sm);
    padding: 1rem 1.1rem;
    margin-top: 1.25rem;
}

.hd-composer-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--hd-gray-800);
    font-size: 0.9rem;
    margin-bottom: 0.6rem;
}

.hd-composer-label i {
    color: var(--hd-primary);
}

.hd-composer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.7rem;
}

.hd-file-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 220px;
    margin: 0;
    color: var(--hd-gray-500);
}

.hd-file-label input[type="file"] {
    flex: 1;
}

.hd-post-btn {
    margin-left: auto;
}

.hd-composer-note {
    font-size: 0.75rem;
    color: var(--hd-gray-500);
    margin: 0.55rem 0 0;
}

/* ---- Closed banner ---- */
.hd-closed-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    background: var(--hd-gray-100);
    border: 1px solid var(--hd-gray-300);
    border-left: 4px solid var(--hd-gray-500);
    border-radius: var(--hd-radius-lg);
    padding: 1rem 1.1rem;
    margin-top: 1.25rem;
    color: var(--hd-gray-700);
}

.hd-closed-banner > i {
    font-size: 1.1rem;
    color: var(--hd-gray-500);
}

.hd-closed-banner > div {
    flex: 1;
    min-width: 200px;
}

.hd-closed-banner strong {
    display: block;
}

.hd-closed-banner span {
    font-size: 0.85rem;
    color: var(--hd-gray-600);
}

/* ---- Facts sidebar ---- */
.hd-side {
    position: sticky;
    top: 1rem;
    display: grid;
    gap: 1rem;
}

.hd-side-card {
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-xs);
    overflow: hidden;
}

.hd-side-title {
    margin: 0;
    padding: 0.65rem 1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hd-gray-500);
    border-bottom: 1px solid var(--hd-gray-200);
    background: var(--hd-gray-50);
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hd-side-title i {
    color: var(--hd-primary);
    font-size: 0.8rem;
}

.hd-kv {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--hd-gray-100);
    font-size: 0.82rem;
}

.hd-kv:last-child {
    border-bottom: none;
}

.hd-kv-label {
    color: var(--hd-gray-500);
    font-weight: 500;
    flex: none;
}

.hd-kv-value {
    color: var(--hd-gray-800);
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
    min-width: 0;
}

/* A row that carries a link and no field label. Without this the lone value
   would sit at the left edge and break the label-left / value-right rhythm of
   the card it closes. */
.hd-kv-solo {
    justify-content: flex-end;
}

.hd-side-actions {
    display: grid;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
}

/* Header "View student account" button: sits at the top right of the page head */
.hd-head-account {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .hd-head-account {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* Sidebar card note (e.g. "student switched courses after filing") */
.hd-side-note {
    margin: 0;
    padding: 0.55rem 1rem;
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--hd-gray-600);
    background: var(--hd-warning-light);
    border-bottom: 1px solid var(--hd-gray-100);
}

.hd-side-note i {
    color: var(--hd-warning);
    margin-right: 0.3rem;
}

/* Separator between multiple enrollments in the current-enrollment card */
.hd-enr-next {
    border-top: 2px solid var(--hd-gray-200);
}

/* ---- Responsive ---- */
@media (max-width: 991.98px) {
    .hd-side {
        position: static;
        margin-top: 1.25rem;
    }

    .hd-bubble-head time {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .hd-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .hd-page-head {
        padding: 0.9rem 1rem;
    }

    .hd-post-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Composer tools: quick responses and article links ---- */
.hd-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--hd-primary-dark);
    background: var(--hd-primary-light);
    border: 1px solid #bcdcf7;
    border-radius: var(--hd-radius-md);
    padding: 0.4rem 0.7rem;
    transition: background var(--hd-transition-fast), border-color var(--hd-transition-fast);
}

.hd-tool-btn:hover,
.hd-tool-btn:focus-visible {
    background: #d8ecfc;
    border-color: var(--hd-primary);
    color: var(--hd-primary-dark);
}

.hd-tool-count {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: var(--hd-radius-full);
    background: white;
    border: 1px solid #bcdcf7;
    color: var(--hd-primary);
}

/* ---- Picker modals (quick responses, article links) ---- */
.hd-picker .modal-body {
    padding-top: 0.9rem;
}

.hd-picker-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.hd-picker-search {
    position: relative;
}

.hd-picker-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hd-gray-400);
    pointer-events: none;
}

.hd-picker-search .form-control {
    padding-left: 2.2rem;
}

.hd-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.hd-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--hd-gray-700);
    background: var(--hd-gray-100);
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-full);
    padding: 0.28rem 0.65rem;
    transition: all var(--hd-transition-fast);
}

.hd-filter-chip:hover {
    background: var(--hd-gray-200);
    color: var(--hd-gray-900);
}

.hd-filter-chip.is-active {
    background: var(--hd-primary);
    border-color: var(--hd-primary);
    color: white;
}

.hd-filter-count {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.05rem 0.35rem;
    border-radius: var(--hd-radius-full);
    background: rgba(255, 255, 255, 0.7);
    color: var(--hd-gray-700);
}

.hd-filter-chip.is-active .hd-filter-count {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

.hd-picker-panes {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 1rem;
    align-items: start;
}

.hd-picker-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-md);
    background: var(--hd-gray-50);
}

.hd-picker-list-wide {
    max-height: 26rem;
}

.hd-picker-item {
    display: block;
    width: 100%;
    text-align: left;
    background: white;
    border: 1px solid transparent;
    border-radius: var(--hd-radius-sm);
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.25rem;
    transition: border-color var(--hd-transition-fast), background var(--hd-transition-fast);
}

.hd-picker-item:hover {
    border-color: var(--hd-primary);
    background: var(--hd-primary-light);
}

.hd-picker-item.is-selected {
    border-color: var(--hd-primary);
    background: var(--hd-primary-light);
    box-shadow: inset 3px 0 0 var(--hd-primary);
}

.hd-picker-item-title {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hd-gray-800);
    line-height: 1.3;
}

.hd-picker-item-cat {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--hd-gray-500);
    margin-top: 0.15rem;
}

.hd-picker-empty {
    padding: 1rem 0.75rem;
    font-size: 0.83rem;
    color: var(--hd-gray-500);
    text-align: center;
}

.hd-picker-preview {
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-md);
    overflow: hidden;
}

.hd-picker-preview-head {
    background: var(--hd-gray-100);
    border-bottom: 1px solid var(--hd-gray-200);
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--hd-gray-800);
}

.hd-picker-preview-body {
    padding: 0.85rem 0.9rem;
    max-height: 20.5rem;
    overflow-y: auto;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--hd-gray-700);
}

.hd-picker-preview-body p,
.hd-picker-preview-body ul,
.hd-picker-preview-body ol {
    margin-bottom: 0.7rem;
}

.hd-picker-preview-body li {
    margin-bottom: 0.25rem;
}

.hd-picker-hint {
    color: var(--hd-gray-500);
}

.hd-picker-foot {
    justify-content: flex-end;
    gap: 0.5rem;
}

.hd-picker-foot-note {
    margin-right: auto;
    font-size: 0.76rem;
    color: var(--hd-gray-500);
}

@media (max-width: 767.98px) {
    .hd-picker-panes {
        grid-template-columns: minmax(0, 1fr);
    }

    .hd-picker-list {
        max-height: 14rem;
    }

    .hd-picker-foot-note {
        margin-right: 0;
        width: 100%;
    }
}

/* ---- Insert toast, with the undo that makes inserting safe ---- */
.hd-toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%) translateY(0.5rem);
    z-index: 1080;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--hd-gray-900);
    color: white;
    font-size: 0.85rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--hd-radius-md);
    box-shadow: var(--hd-shadow-lg);
    opacity: 0;
    transition: opacity var(--hd-transition-normal), transform var(--hd-transition-normal);
}

.hd-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.hd-toast-undo {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: white;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: var(--hd-radius-sm);
}

.hd-toast-undo:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* ---- Print: the thread is the record ---- */
@media print {
    .hd-composer,
    .hd-side-actions,
    .hd-toast,
    .hd-picker,
    #hd-load-earlier,
    .hd-copy-btn {
        display: none !important;
    }

    .hd-bubble,
    .hd-side-card,
    .hd-page-head {
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ============================================================================
   Create Ticket v2 — form components
   ============================================================================ */

/* ---- Knowledge-base deflection tip ---- */
.hd-kbtip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: var(--hd-primary-light);
    border: 1px solid #bfe0fa;
    border-radius: var(--hd-radius-lg);
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: #0c4a86;
}

.hd-kbtip i {
    color: var(--hd-warning);
    flex: none;
}

.hd-kbtip a {
    font-weight: 600;
    color: var(--hd-primary-dark);
}

/* ---- Label row with live counter ---- */
.hd-lbl-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.hd-counter {
    font-size: 0.75rem;
    color: var(--hd-gray-400);
    font-variant-numeric: tabular-nums;
}

/* ---- Segmented priority picker ---- */
.hd-seg-legend {
    font-size: 0.875rem;
    float: none;
    width: auto;
    margin-bottom: 0.5rem;
}

.hd-seg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.hd-seg-opt {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1.5px solid var(--hd-gray-300);
    border-radius: var(--hd-radius-md);
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    margin: 0;
    transition: all var(--hd-transition-fast);
    background: white;
}

.hd-seg-opt:hover {
    border-color: var(--hd-primary);
}

.hd-seg-opt input[type="radio"] {
    margin-top: 0.2rem;
    accent-color: var(--hd-primary);
    flex: none;
}

.hd-seg-opt:has(input:checked) {
    border-color: var(--hd-primary);
    background: var(--hd-primary-light);
}

.hd-seg-text {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.hd-seg-title {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--hd-gray-800);
}

.hd-seg-desc {
    font-size: 0.72rem;
    color: var(--hd-gray-500);
}

/* ---- Staff-only options box ---- */
.hd-staff-box {
    border: 1px solid #fde68a;
    background: #fffdf5;
    border-radius: var(--hd-radius-lg);
    overflow: hidden;
}

.hd-staff-head {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid #fde68a;
    background: var(--hd-warning-light);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92400e;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.hd-staff-body {
    padding: 1rem;
}

/* ---- Form actions row ---- */
.hd-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

/* ---- External-user success card (PRG landing) ---- */
.hd-success {
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-xl);
    box-shadow: var(--hd-shadow-sm);
    padding: 2.25rem 1.5rem;
    text-align: center;
    max-width: 560px;
    margin: 1.5rem auto;
}

.hd-success-ok {
    width: 64px;
    height: 64px;
    border-radius: var(--hd-radius-full);
    background: var(--hd-success-light);
    color: #047857;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin: 0 auto 1rem;
}

.hd-success h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.hd-success-sub {
    color: var(--hd-gray-500);
    font-size: 0.875rem;
    max-width: 44ch;
    margin: 0 auto 1.25rem;
}

.hd-success-ref {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    background: var(--hd-gray-50);
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-md);
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.hd-success-ref span {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hd-gray-500);
}

.hd-success-ref strong {
    font-size: 1.25rem;
    color: var(--hd-primary-dark);
    font-variant-numeric: tabular-nums;
}

.hd-success-ref small {
    font-size: 0.72rem;
    color: var(--hd-gray-400);
}

.hd-success-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.hd-success-help {
    margin: 1.25rem 0 0;
    font-size: 0.78rem;
    color: var(--hd-gray-500);
}

@media (max-width: 576px) {
    .hd-seg {
        grid-template-columns: 1fr;
    }

    .hd-form-actions {
        flex-direction: column-reverse;
    }

    .hd-form-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   Print — Analytics Dashboard
   Loaded last so it wins over the two earlier @media print blocks. The app
   shell (topbar, sidebar, gutter, footer) is stripped by dashboard-v3.css,
   which helpdesk pages inherit through admin/body.php.
   ============================================================================ */
@media print {
    .analytics-dashboard .page-header {
        border-bottom: 2px solid #334155;
        break-after: avoid;
        page-break-after: avoid;
    }

    .analytics-dashboard .page-header h4 {
        font-size: 16pt;
    }

    /* The stat cards are white text on a full-bleed gradient. Browsers drop
       backgrounds when printing, which would leave white text on white paper.
       Forcing the gradient through instead would flood four blocks of toner,
       so invert to a light card and keep the colour as an accent rule. */
    .analytics-dashboard .stat-card {
        background: #f1f5f9 !important;
        color: #0f172a !important;
        border: 1px solid #cbd5e1;
        border-left-width: 5px;
        border-radius: 0;
        padding: 0.75rem !important;
        height: auto !important;
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* The decorative radial highlight has nothing to contribute on paper. */
    .analytics-dashboard .stat-card::before {
        display: none !important;
    }

    .analytics-dashboard .stat-card h2 {
        color: #0f172a !important;
        font-size: 18pt;
        margin-bottom: 0;
    }

    .analytics-dashboard .stat-card p {
        opacity: 1;
        color: #334155 !important;
        font-size: 9pt;
    }

    .analytics-dashboard .stat-card.bg-primary { border-left-color: #163FC0 !important; }
    .analytics-dashboard .stat-card.bg-success { border-left-color: #059669 !important; }
    .analytics-dashboard .stat-card.bg-warning { border-left-color: #d97706 !important; }
    .analytics-dashboard .stat-card.bg-info    { border-left-color: #0891b2 !important; }
    .analytics-dashboard .stat-card.bg-danger  { border-left-color: #b91c1c !important; }

    .analytics-dashboard .chart-container {
        box-shadow: none !important;
        border: 1px solid #cbd5e1;
        border-radius: 0;
        padding: 0.75rem;
        height: auto !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Cap the canvas width so a wide chart cannot run off the sheet. Leave the
       height alone: these canvases carry a tall intrinsic size (height="1792"
       after devicePixelRatio scaling), so height:auto makes the browser derive
       height from that aspect ratio and blows the chart far past its box. */
    .analytics-dashboard .chart-container canvas {
        max-width: 100% !important;
    }

    .analytics-dashboard .table {
        font-size: 9pt;
        width: 100% !important;
    }

    .analytics-dashboard .table th {
        background: #e2e8f0 !important;
        color: #0f172a !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .analytics-dashboard .table th,
    .analytics-dashboard .table td {
        padding: 0.3rem 0.5rem;
        border-bottom: 1px solid #cbd5e1;
    }

    /* A Letter sheet inside a 12mm margin is about 720 CSS px, under Bootstrap's
       768px md breakpoint, so .col-md-* would otherwise collapse to full width
       and stack the dashboard one tile per line. Pin the widths back.

       The row also carries Bootstrap's -12px gutter margins, which are normally
       absorbed by container padding. Print strips that padding, so the last
       column in each row hung off the right edge until these are zeroed. */
    .analytics-dashboard .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .analytics-dashboard .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .analytics-dashboard .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .analytics-dashboard .badge {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

/* ============================================================================
   Ticket queue (pages/tickets.php)

   Built to fit. The old list was 1409px wide inside a 1077px pane and had no
   way to scroll, so a third of every ticket was unreachable: three separate
   action columns cost ~350px and a 16-character hash as the identifier cost
   another ~165px. Department and reply count moved into the subject cell, the
   hash gave way to the ticket number, and the three action columns became one.
   ============================================================================ */
.hd-queue-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--hd-gray-200);
}

.hd-queue-title {
    margin: 0 0 0.25rem;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--hd-gray-800);
}

.hd-queue-title i {
    color: var(--hd-primary);
    margin-right: 0.375rem;
}

.hd-queue-sub {
    margin: 0;
    color: var(--hd-gray-600);
    font-size: 0.9375rem;
}

/* --- Filter bar --------------------------------------------------------- */
.hd-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.875rem 1rem;
    padding: 1rem 1.125rem;
    margin-bottom: 1.25rem;
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-xs);
}

.hd-filter-label {
    display: block;
    margin-bottom: 0.3125rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hd-gray-600);
}

.hd-filter-search {
    flex: 1 1 240px;
    min-width: 200px;
    max-width: 340px;
}

.hd-search-input {
    position: relative;
}

.hd-search-input i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--hd-gray-400);
    pointer-events: none;
}

.hd-search-input .form-control {
    padding-left: 2.25rem;
}

.hd-filter-select {
    flex: 0 1 170px;
    min-width: 150px;
}

.hd-filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

/* Status segmented control */
.hd-status-pills {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: var(--hd-gray-100);
    border-radius: 2rem;
}

.hd-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.9375rem;
    border: none;
    border-radius: 2rem;
    background: transparent;
    color: var(--hd-gray-600);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--hd-transition-fast), color var(--hd-transition-fast);
}

.hd-status-pill:hover {
    background: var(--hd-gray-200);
    color: var(--hd-gray-800);
}

.btn-check:checked + .hd-status-pill {
    background: var(--hd-primary);
    color: white;
    box-shadow: var(--hd-shadow-xs);
}

.btn-check:checked + .hd-status-pill.hd-pill-open {
    background: #047857;
}

.btn-check:checked + .hd-status-pill.hd-pill-closed {
    background: var(--hd-gray-600);
}

.btn-check:focus-visible + .hd-status-pill {
    outline: 2px solid var(--hd-primary);
    outline-offset: 2px;
}

.hd-result-count {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    color: var(--hd-gray-600);
}

/* Hidden by default and switched on in the narrow-screen block below, where the
   queue really does overflow. Declared here rather than after that block: the
   two rules have the same specificity, so the later one would always win. */
.hd-scroll-hint {
    display: none;
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    color: var(--hd-gray-600);
}

/* --- The table ---------------------------------------------------------- */
.hd-tickets {
    width: 100%;
    margin: 0;
    font-size: 0.9375rem;
    /* Fixed layout so the declared widths below are honoured exactly and the
       leftover space all lands on Subject, which is the column people read.
       Under auto layout the browser handed Subject whatever the badges and
       buttons did not want, which was 197px of 1077. */
    table-layout: fixed;
}

.hd-tickets thead th {
    padding: 0.75rem 0.875rem;
    background: var(--hd-gray-50);
    border-bottom: 1px solid var(--hd-gray-200);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--hd-gray-600);
    white-space: nowrap;
}

.hd-tickets th.hd-sortable {
    padding: 0;
}

.hd-tickets th.hd-sortable > a {
    display: block;
    padding: 0.75rem 0.875rem;
    color: inherit;
    text-decoration: none;
}

.hd-tickets th.hd-sortable > a:hover {
    background: var(--hd-gray-100);
    color: var(--hd-gray-800);
}

.hd-tickets th.hd-sortable i {
    margin-left: 0.25rem;
    opacity: 0.35;
}

.hd-tickets th.hd-sortable[aria-sort="ascending"] i,
.hd-tickets th.hd-sortable[aria-sort="descending"] i {
    opacity: 1;
    color: var(--hd-primary);
}

.hd-tickets tbody td {
    padding: 0.8125rem 0.875rem;
    border-bottom: 1px solid var(--hd-gray-200);
    vertical-align: middle;
}

.hd-tickets tbody tr:last-child td {
    border-bottom: none;
}

.hd-ticket-row {
    cursor: pointer;
    transition: background var(--hd-transition-fast);
}

.hd-ticket-row:hover {
    background: var(--hd-primary-light);
}

/* Unread rows carry weight rather than a colour, so the priority and status
   badges stay the only things using colour to mean something. */
.hd-row-unread .hd-ticket-subject,
.hd-row-unread .hd-ticket-number {
    font-weight: 700;
}

.hd-row-overdue {
    box-shadow: inset 3px 0 0 var(--hd-danger);
}

/* Subject is the only column without a width: it takes what is left. */
.hd-col-number   { width: 4.75rem; }
.hd-col-person   { width: 8rem; }
.hd-col-priority { width: 6.5rem; }
.hd-col-status   { width: 8rem; }
.hd-col-created  { width: 6.75rem; white-space: nowrap; }
.hd-col-actions  { width: 10rem; white-space: nowrap; padding-left: 0.5rem; padding-right: 0.5rem; }

.hd-col-subject,
.hd-col-person {
    overflow-wrap: anywhere;
}

.hd-ticket-number {
    font-variant-numeric: tabular-nums;
    color: var(--hd-gray-600);
    text-decoration: none;
    font-size: 0.875rem;
}

.hd-ticket-number:hover {
    color: var(--hd-primary);
    text-decoration: underline;
}

.hd-ticket-subject {
    display: block;
    color: var(--hd-gray-800);
    font-weight: 500;
    text-decoration: none;
    line-height: 1.35;
}

.hd-ticket-subject:hover {
    color: var(--hd-primary);
    text-decoration: underline;
}

.hd-ticket-meta {
    margin-top: 0.1875rem;
    font-size: 0.8125rem;
    color: var(--hd-gray-600);
}

.hd-meta-dot {
    margin: 0 0.375rem;
    color: var(--hd-gray-400);
}

.hd-tag-nespeca {
    display: inline-block;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--hd-radius-sm);
    background: var(--hd-primary-light);
    color: var(--hd-primary-dark);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Who spoke last, right in the queue row: a staff reply reads as "handled",
   a student reply as the thing waiting on you. Icon carries the distinction
   too, not just color, since the status column already relies on color for
   priority/status meaning. */
.hd-last-reply {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.hd-last-reply-staff {
    color: var(--hd-info);
}

.hd-last-reply-student {
    color: var(--hd-warning);
}

.hd-unassigned,
.hd-muted {
    color: var(--hd-gray-500);
    font-style: italic;
    font-size: 0.875rem;
}

.hd-col-status .badge + .badge {
    margin-top: 0.25rem;
}

/* Laid out as flex rather than inline-block: the whitespace between the three
   buttons was worth ~8px, which a fixed-width column cannot spare. */
.hd-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
}

.hd-action-view {
    padding: 0.25rem 0.625rem;
    font-size: 0.8125rem;
}

.hd-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    font-size: 0.8125rem;
    line-height: 1;
}

/* --- Empty state -------------------------------------------------------- */
.hd-empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--hd-gray-600);
}

.hd-empty-state > i {
    font-size: 2.25rem;
    color: var(--hd-gray-300);
    margin-bottom: 0.75rem;
}

.hd-empty-title {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--hd-gray-800);
}

.hd-empty-body {
    margin: 0 0 1rem;
    font-size: 0.9375rem;
}

/* --- Pagination --------------------------------------------------------- */
.hd-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.hd-page-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.hd-page-step,
.hd-page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: 2.25rem;
    padding: 0.4375rem 0.75rem;
    border: 1px solid var(--hd-gray-300);
    border-radius: var(--hd-radius-md);
    background: white;
    color: var(--hd-gray-700);
    font-size: 0.875rem;
    text-decoration: none;
}

.hd-page-step:hover,
.hd-page-num:hover {
    border-color: var(--hd-primary);
    color: var(--hd-primary);
}

.hd-page-num.current {
    background: var(--hd-primary);
    border-color: var(--hd-primary);
    color: white;
    font-weight: 600;
}

.hd-page-step.disabled {
    opacity: 0.45;
    pointer-events: none;
}

.hd-page-gap {
    padding: 0 0.25rem;
    color: var(--hd-gray-400);
}

/* --- Narrow screens ----------------------------------------------------- */
@media (max-width: 991.98px) {
    .hd-filter-actions {
        margin-left: 0;
    }

    .hd-filter-search,
    .hd-filter-select,
    .hd-filter-status {
        flex: 1 1 100%;
        max-width: none;
    }

    .hd-status-pills {
        display: flex;
        width: 100%;
    }

    .hd-status-pill {
        flex: 1 1 0;
        justify-content: center;
    }
}

@media (max-width: 991.98px) {
    /* Fixed layout only works while the declared widths still fit: below this
       they add up to more than the pane, the leftover for Subject goes
       negative, and the column collapses to one character per line. Hand the
       sizing back to the browser and let the table scroll instead. */
    .hd-tickets {
        table-layout: auto;
    }

    .hd-col-number,
    .hd-col-priority,
    .hd-col-status,
    .hd-col-created,
    .hd-col-actions {
        width: auto;
    }

    .hd-col-subject {
        min-width: 190px;
    }

    .hd-scroll-hint {
        display: block;
    }
}

@media (max-width: 767.98px) {
    /* Requester and Assignee are the widest columns and the least useful on a
       phone; everything else stays, and the table scrolls for the rest. */
    .hd-tickets .hd-col-person {
        display: none;
    }

    .hd-tickets tbody td,
    .hd-tickets thead th,
    .hd-tickets th.hd-sortable > a {
        padding: 0.625rem 0.5rem;
    }

    .hd-col-actions .hd-action-view {
        padding: 0.25rem 0.5rem;
    }

    .hd-pagination {
        justify-content: center;
    }
}

/* ---- AI-drafted reply (reviewers only, see inc/ai_drafts.php) ---- */
.hd-ai-draft {
    border: 1px solid #bcdcf7;
    border-left: 4px solid var(--hd-primary);
    border-radius: var(--hd-radius-md);
    background: #f3f9fe;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.hd-ai-draft.is-low {
    border-color: #fcd9a8;
    border-left-color: #f59e0b;
    background: #fff8ee;
}

.hd-ai-draft-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.75rem;
    margin-bottom: 0.5rem;
}

.hd-ai-draft-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--hd-primary-dark);
}

.hd-ai-draft-title i {
    margin-right: 0.3rem;
}

.hd-ai-draft-meta {
    font-size: 0.75rem;
    color: var(--hd-gray-600);
}

.hd-ai-draft-warn {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--hd-radius-sm);
    background: #fff1d6;
    color: #7c2d12;
    font-size: 0.82rem;
}

.hd-ai-draft-warn i {
    margin-right: 0.3rem;
}

.hd-ai-draft-body {
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-sm);
    padding: 0.75rem 0.9rem;
    font-size: 0.92rem;
    line-height: 1.55;
    max-height: 22rem;
    overflow-y: auto;
}

.hd-ai-draft-body p:last-child {
    margin-bottom: 0;
}

.hd-ai-draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

@media print {
    .hd-ai-draft {
        display: none !important;
    }
}

/* ---- Suggestion cards (?p=ai-suggestions, reviewers only) ---- */
.hd-sug {
    background: white;
    border: 1px solid var(--hd-gray-200);
    border-left: 4px solid var(--hd-gray-300);
    border-radius: var(--hd-radius-md);
    box-shadow: var(--hd-shadow-xs);
    padding: 0.9rem 1.05rem;
    margin-bottom: 0.85rem;
}

.hd-sug-planned  { border-left-color: var(--hd-primary); }
.hd-sug-approved { border-left-color: #198754; }
.hd-sug-accepted { border-left-color: #0dcaf0; }
.hd-sug-changes  { border-left-color: #f59e0b; }
.hd-sug-built    { border-left-color: var(--hd-gray-800); }

.hd-sug-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
    margin-bottom: 0.5rem;
}

.hd-sug-meta {
    font-size: 0.75rem;
    color: var(--hd-gray-600);
    font-weight: 400;
}

.hd-sug-ticket {
    font-size: 0.78rem;
    margin-left: auto;
}

.hd-sug-text {
    margin: 0 0 0.6rem;
    font-size: 0.93rem;
    line-height: 1.55;
    color: var(--hd-gray-800);
}

.hd-sug-feedback,
.hd-sug-built {
    margin: 0 0 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: var(--hd-radius-sm);
    font-size: 0.83rem;
    line-height: 1.5;
}

.hd-sug-feedback { background: #fff8ee; color: #7c2d12; }
.hd-sug-built    { background: var(--hd-gray-100); color: var(--hd-gray-800); }

.hd-sug-note {
    margin: 0 0 0.6rem;
    font-size: 0.78rem;
    color: var(--hd-gray-600);
}

.hd-sug-plan,
.hd-sug-changes {
    margin-bottom: 0.7rem;
}

.hd-sug-plan > summary,
.hd-sug-changes > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--hd-primary-dark);
    padding: 0.35rem 0;
}

.hd-sug-plan-body {
    background: var(--hd-gray-50, #f8f9fb);
    border: 1px solid var(--hd-gray-200);
    border-radius: var(--hd-radius-sm);
    padding: 0.75rem 0.9rem;
    font-size: 0.88rem;
    line-height: 1.6;
    max-height: 32rem;
    overflow-y: auto;
}

.hd-sug-plan-body h4,
.hd-sug-plan-body h5,
.hd-sug-plan-body h6 {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0.9rem 0 0.35rem;
    color: var(--hd-gray-800);
}

.hd-sug-plan-body h4:first-child,
.hd-sug-plan-body h5:first-child {
    margin-top: 0;
}

.hd-sug-plan-body p { margin: 0 0 0.6rem; }
.hd-sug-plan-body ul,
.hd-sug-plan-body ol { margin: 0 0 0.6rem 1.15rem; padding: 0; }
.hd-sug-plan-body li { margin-bottom: 0.25rem; }

.hd-sug-plan-body code {
    background: var(--hd-gray-100);
    border-radius: 3px;
    padding: 0.05rem 0.3rem;
    font-size: 0.85em;
    color: var(--hd-gray-800);
}

.hd-sug-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.hd-sug-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0.5rem 0 0.3rem;
    color: var(--hd-gray-700);
}