/* =============================================================================
   DocTak Custom CSS — Kimi Component Overrides
   =============================================================================
   Variables have been moved to doctak-variables.css.
   This file contains only component-level style overrides.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   COMPONENT OVERRIDES — Hardcoded colors in custom.css
   --------------------------------------------------------------------------- */

/* --- Cards --------------------------------------------------------------- */
.card {
    background: var(--surface, #FFFFFF);
    border: 1px solid transparent;
    border-radius: var(--radius-card, 12px);
    box-shadow: var(--shadow-card, 0 12px 30px -22px rgba(15, 23, 42, 0.2), 0 3px 8px rgba(15, 23, 42, 0.05));
    margin-bottom: var(--space-md, 16px);
}

[data-bs-theme="dark"] .card,
[data-theme="dark"] .card {
    background: var(--surface, #1e293b);
}

[data-bs-theme="dark"] .card-header,
[data-theme="dark"] .card-header {
    background: linear-gradient(90deg, rgba(14, 165, 233, 0.12), rgba(20, 184, 166, 0.08));
}

/* Rounded-3 hover border */
.card.rounded-3:hover {
    border-color: transparent;
}
[data-theme="dark"] .card.rounded-3:hover,
[data-bs-theme="dark"] .card.rounded-3:hover {
    border-color: transparent;
}

/* Card body hover h6 (profile suggestions) */
.card.rounded-3 .card-body:hover h6.fw-bold {
    color: var(--brand);
}
[data-theme="dark"] .card.rounded-3 .card-body:hover h6.fw-bold,
[data-bs-theme="dark"] .card.rounded-3 .card-body:hover h6.fw-bold {
    color: var(--brand-accent);
}

/* --- Buttons ------------------------------------------------------------- */
.btn:focus,
.btn:focus-visible {
    box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
}

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
}
.btn-primary:hover {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
}
.btn-primary:active {
    background: var(--brand-active);
    border-color: var(--brand-active);
}
.btn-primary.btn-gradient {
    background: var(--brand-gradient);
    border-color: transparent;
}

.btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand);
}
.btn-outline-primary:hover {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

/* --- Links (global) ------------------------------------------------------ */
a,
.link-brand {
    color: var(--brand);
}
a:hover,
.link-brand:hover {
    color: var(--brand-accent);
}

/* --- Badge info ---------------------------------------------------------- */
.badge-info {
    background-color: var(--brand);
}

/* --- Item action buttons ------------------------------------------------- */
.item-actions .btn:hover {
    background: var(--brand-soft);
}

/* --- Conference cards ---------------------------------------------------- */
.conference-date-container {
    color: var(--brand);
    background-color: var(--brand-soft);
}
.conference-card:hover .conference-date-container {
    background-color: var(--brand);
}
.conference-title:hover {
    color: var(--brand);
}
.conference-date-shimmer {
    background-color: rgba(var(--brand-rgb), 0.05);
}

/* --- User buttons -------------------------------------------------------- */
.user-btn {
    border-color: var(--brand);
}
.user-btn:hover {
    background-color: var(--brand);
}

/* --- Feature icons ------------------------------------------------------- */
.feature-icon {
    background-color: var(--brand-soft);
    color: var(--brand);
}
.feature-icon:hover {
    background-color: rgba(var(--brand-rgb), 0.15);
}

/* --- List group hover ---------------------------------------------------- */
.list-group-item:hover {
    background-color: rgba(var(--brand-rgb), 0.05);
}
.list-group-item a:hover {
    color: var(--brand);
}

/* --- Post actions -------------------------------------------------------- */
.post-actions.active {
    color: var(--brand);
}

/* --- Action buttons ------------------------------------------------------ */
.action-btn:hover {
    color: var(--brand);
    background-color: var(--brand-soft);
}
.action-btn.active {
    color: var(--brand);
    background-color: rgba(var(--brand-rgb), 0.15);
}

/* --- Comment actions ----------------------------------------------------- */
.comment-actions button:hover {
    color: var(--brand) !important;
}
.like-btn.active {
    color: var(--brand) !important;
}
.btn-comment-reply {
    color: var(--brand);
}

/* --- Scrollbar (dark) ---------------------------------------------------- */
[data-bs-theme="dark"] *::-webkit-scrollbar-thumb,
[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: var(--bs-gray-100);
}

/* --- Footer links -------------------------------------------------------- */
.footer-links a,
.copyright-link {
    color: var(--brand);
}
.footer-link:hover {
    color: var(--brand);
}

/* --- Welcome card dark mode ---------------------------------------------- */
[data-theme="dark"] #homePage .welcome-card .btn-outline-primary,
[data-bs-theme="dark"] #homePage .welcome-card .btn-outline-primary {
    color: var(--brand);
    border-color: var(--brand-border);
}