/* ============================================================
   VLR Template - Kunena Forum Dark Theme Overrides
   Include this in your template if using Kunena forum
   ============================================================ */

/* ---------- Kunena 6.x Global ---------- */
#kunena {
    font-family: var(--vlr-font-body);
    color: var(--vlr-text-primary);
}

#kunena .container,
#kunena .container-fluid {
    padding: 0;
}

/* Cards & Containers */
#kunena .card {
    background-color: var(--vlr-bg-surface-raised);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-md);
    margin-bottom: 16px;
}

#kunena .card-header {
    background: linear-gradient(135deg, var(--vlr-accent-dark), var(--vlr-accent));
    color: var(--vlr-text-on-accent);
    font-family: var(--vlr-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.95rem;
    padding: 12px 18px;
    border-bottom: none;
    border-radius: var(--vlr-radius-md) var(--vlr-radius-md) 0 0;
}

#kunena .card-body {
    padding: 18px;
}

/* Category list */
#kunena .category-list .card {
    margin-bottom: 8px;
}

#kunena .category-list .card-body {
    padding: 14px 18px;
}

#kunena .category-list .card-body:hover {
    background-color: rgba(var(--vlr-accent-rgb), 0.04);
}

/* Topic titles */
#kunena a.topic-title,
#kunena .ktopic-title a {
    color: var(--vlr-accent-light);
    font-weight: 600;
    font-size: 0.95rem;
}

#kunena a.topic-title:hover,
#kunena .ktopic-title a:hover {
    color: var(--vlr-text-link-hover);
}

/* Category titles */
#kunena h3 a,
#kunena .kcategory-header a {
    color: var(--vlr-text-on-accent);
}

/* Links */
#kunena a {
    color: var(--vlr-text-link);
}

#kunena a:hover {
    color: var(--vlr-text-link-hover);
}

/* Stats text (topics, replies, etc.) */
#kunena .topic-stats,
#kunena .category-stats {
    color: var(--vlr-text-secondary);
    font-size: 0.82rem;
}

/* User avatars */
#kunena .kavatar img {
    border-radius: var(--vlr-radius-sm);
    border: 2px solid var(--vlr-border);
}

/* Post messages */
#kunena .kmessage-left {
    background-color: var(--vlr-bg-surface);
    border-right: 1px solid var(--vlr-border);
}

#kunena .kmessage-right {
    background-color: var(--vlr-bg-surface);
}

#kunena .kmessage {
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-md);
    margin-bottom: 12px;
    overflow: hidden;
}

/* Post header */
#kunena .kmessage-header {
    background-color: var(--vlr-bg-surface-raised);
    padding: 10px 16px;
    border-bottom: 1px solid var(--vlr-border);
    font-size: 0.82rem;
    color: var(--vlr-text-secondary);
}

/* Quote blocks */
#kunena blockquote,
#kunena .kmessage-quote {
    background-color: var(--vlr-bg-surface-overlay);
    border-left: 4px solid var(--vlr-accent);
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 0 var(--vlr-radius-sm) var(--vlr-radius-sm) 0;
    color: var(--vlr-text-secondary);
}

/* Code blocks */
#kunena pre,
#kunena code {
    background-color: #111;
    color: #66BB6A;
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    padding: 12px 16px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.85rem;
    overflow-x: auto;
}

/* Buttons */
#kunena .btn-primary,
#kunena .kbtn-primary {
    background: linear-gradient(135deg, var(--vlr-accent), var(--vlr-accent-dark));
    border: none;
    color: var(--vlr-text-on-accent);
    font-family: var(--vlr-font-heading);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--vlr-radius-sm);
    transition: all var(--vlr-transition);
}

#kunena .btn-primary:hover,
#kunena .kbtn-primary:hover {
    background: linear-gradient(135deg, var(--vlr-accent-light), var(--vlr-accent));
    box-shadow: 0 2px 10px rgba(var(--vlr-accent-rgb), 0.3);
}

#kunena .btn-outline-primary {
    color: var(--vlr-accent);
    border-color: var(--vlr-accent);
    background: transparent;
}

#kunena .btn-outline-primary:hover {
    background-color: var(--vlr-accent);
    color: var(--vlr-text-on-accent);
}

/* Editor area */
#kunena textarea,
#kunena .keditor-area textarea {
    background-color: var(--vlr-bg-input);
    color: var(--vlr-text-primary);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    font-family: var(--vlr-font-body);
}

#kunena textarea:focus {
    border-color: var(--vlr-accent);
    box-shadow: 0 0 0 3px rgba(var(--vlr-accent-rgb), 0.15);
    outline: none;
}

/* Pagination */
#kunena .pagination .page-link {
    background-color: var(--vlr-bg-surface-raised);
    border-color: var(--vlr-border);
    color: var(--vlr-text-primary);
}

#kunena .pagination .active .page-link {
    background-color: var(--vlr-accent);
    border-color: var(--vlr-accent);
    color: var(--vlr-text-on-accent);
}

/* Moderator badges */
#kunena .badge {
    background-color: rgba(var(--vlr-accent-rgb), 0.15);
    color: var(--vlr-accent-light);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 50px;
}

/* Who's online, stats */
#kunena .kfooter,
#kunena .kstats {
    background-color: var(--vlr-bg-surface-raised);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-md);
    padding: 16px;
    color: var(--vlr-text-secondary);
    font-size: 0.85rem;
}

/* User profile link colors */
#kunena .kuser-link,
#kunena .kpost-username a {
    color: var(--vlr-accent);
    font-weight: 600;
}

/* Breadcrumbs inside Kunena */
#kunena .breadcrumb {
    background-color: transparent;
    padding: 0;
    font-size: 0.82rem;
}

#kunena .breadcrumb a {
    color: var(--vlr-text-secondary);
}

#kunena .breadcrumb .active {
    color: var(--vlr-text-primary);
}

/* Search */
#kunena .ksearch input[type="text"],
#kunena .ksearch input[type="search"] {
    background-color: var(--vlr-bg-input);
    color: var(--vlr-text-primary);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-sm);
    padding: 8px 14px;
}

/* Tables within Kunena */
#kunena table {
    border-collapse: collapse;
    width: 100%;
}

#kunena table thead th {
    background: linear-gradient(135deg, var(--vlr-accent-dark), var(--vlr-accent));
    color: var(--vlr-text-on-accent);
    font-family: var(--vlr-font-heading);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 14px;
}

#kunena table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--vlr-border);
}

#kunena table tbody tr:hover {
    background-color: rgba(var(--vlr-accent-rgb), 0.04);
}

/* Icons */
#kunena .fa,
#kunena .fas,
#kunena .far,
#kunena .icon {
    color: var(--vlr-accent);
}

/* Dropdown menus */
#kunena .dropdown-menu {
    background-color: var(--vlr-bg-surface-raised);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-md);
    box-shadow: var(--vlr-shadow-lg);
}

#kunena .dropdown-menu .dropdown-item {
    color: var(--vlr-text-primary);
    padding: 8px 16px;
}

#kunena .dropdown-menu .dropdown-item:hover {
    background-color: rgba(var(--vlr-accent-rgb), 0.1);
    color: var(--vlr-accent);
}

/* Tabs */
#kunena .nav-tabs {
    border-bottom: 2px solid var(--vlr-border);
}

#kunena .nav-tabs .nav-link {
    color: var(--vlr-text-secondary);
    border: none;
    border-bottom: 3px solid transparent;
    font-family: var(--vlr-font-heading);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    padding: 10px 18px;
    transition: all var(--vlr-transition);
}

#kunena .nav-tabs .nav-link:hover {
    color: var(--vlr-text-primary);
    border-bottom-color: var(--vlr-accent);
}

#kunena .nav-tabs .nav-link.active {
    color: var(--vlr-accent);
    background-color: transparent;
    border-bottom-color: var(--vlr-accent);
}

/* Forms */
#kunena .form-control {
    background-color: var(--vlr-bg-input);
    color: var(--vlr-text-primary);
    border: 1px solid var(--vlr-border);
}

#kunena .form-control:focus {
    border-color: var(--vlr-accent);
    box-shadow: 0 0 0 3px rgba(var(--vlr-accent-rgb), 0.15);
}

/* Login box */
#kunena #klogin {
    background-color: var(--vlr-bg-surface-raised);
    border: 1px solid var(--vlr-border);
    border-radius: var(--vlr-radius-md);
    padding: 16px;
}