/* === COMPONENTS.CSS === */
/* =========================================
   UI COMPONENTS (Buttons, etc)
   ========================================= */
.close-panel-btn {
    margin-top: 20px;
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.header-btn {
    background: transparent;
    border: 1px solid #444;
    color: #888;
    padding: 5px 15px;
    cursor: pointer;
    font-family: 'Courier New', var(--cjk-stack);
    font-weight: bold;
    transition: all 0.2s;
    margin-left: 5px;
}

.header-btn:hover {
    color: var(--main-color);
    border-color: var(--main-color);
    background: rgba(255, 255, 255, 0.1);
}

.header-btn.active {
    background: var(--main-color);
    color: var(--bg-color);
    border-color: var(--main-color);
    box-shadow: 0 0 10px var(--main-color);
}

.sys-btn {
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    font-family: 'VT323', monospace;
    cursor: pointer;
    text-transform: uppercase;
}

.sys-btn:hover,
.sys-btn.active {
    background: var(--main-color) !important;
    color: var(--bg-color) !important;
}

#init-btn {
    font-family: 'Press Start 2P', monospace;
    font-size: 18px;
    padding: 20px 40px;
    border: 2px solid var(--main-color);
    background: rgba(0, 0, 0, 0.8);
    color: var(--main-color);
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 0 10px var(--main-color), inset 0 0 10px var(--main-color);
    transition: all 0.2s;
}

#init-btn:hover {
    background: var(--main-color);
    color: var(--bg-color);
    box-shadow: 0 0 25px var(--main-color);
}

/* Changelog Box */
.changelog-box {
    width: 100%;
    max-height: 100px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--main-color);
    color: var(--panel-text);
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    white-space: pre-line;
    margin-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--bg-color);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Fix Writing Activity Colors */
#track-day,
#track-week,
#track-month,
#track-year,
#track-all-time,
.accordion-content div {
    color: var(--panel-text);
}

/* =========================================
   THEME PREVIEW CATALOG & CARDS
   ========================================= */
.theme-catalog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.random-theme-btn {
    transition: all 0.2s ease;
}

.random-theme-btn:hover {
    box-shadow: 0 0 8px var(--main-color);
}

.theme-card-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
    max-height: 275px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    border: 1px solid var(--main-color);
    background: rgba(0, 0, 0, 0.45);
    border-radius: 4px;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7);
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) transparent;
    margin-bottom: 8px;
}

.theme-card-catalog::-webkit-scrollbar {
    width: 5px;
}

.theme-card-catalog::-webkit-scrollbar-thumb {
    background: var(--main-color);
    border-radius: 3px;
}

.theme-preview-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    box-sizing: border-box;
    min-height: 36px;
    position: relative;
    overflow: hidden;
    text-shadow: 0 0 2px currentColor;
}

.theme-preview-card:hover {
    transform: translateY(-1.5px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    filter: brightness(1.2);
    z-index: 2;
}

.theme-preview-card.active {
    outline: 2px solid var(--main-color);
    outline-offset: 1.5px;
    box-shadow: 0 0 12px var(--main-color);
    z-index: 3;
}

.theme-card-left {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    min-width: 0;
}

.theme-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 5px currentColor;
}

.theme-card-title {
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.theme-card-badge {
    font-size: 9px;
    opacity: 0.65;
    flex-shrink: 0;
    font-family: monospace;
    font-weight: bold;
}

.theme-preview-card.active .theme-card-badge {
    opacity: 1;
    color: var(--main-color);
}

/* =========================================
   CLERK AUTH MODAL STYLING OVERRIDES
   ========================================= */
.cl-modalBackdrop {
    background-color: rgba(0, 0, 0, 0.75) !important;
    backdrop-filter: blur(4px) !important;
}

.cl-card {
    background-color: #121212 !important;
    border: 1px solid #282828 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85) !important;
}

.cl-socialButtonsBlockButton {
    background-color: #1c1c1c !important;
    border: 1px solid #333333 !important;
}

.cl-socialButtonsBlockButton:hover {
    background-color: #262626 !important;
    border-color: #4a4a4a !important;
}

.cl-socialButtonsBlockButtonText {
    color: #ffffff !important;
    font-weight: 600 !important;
}

.cl-formButtonPrimary {
    background-color: #33ff00 !important;
    color: #000000 !important;
    font-weight: 700 !important;
}

.cl-formButtonPrimary:hover {
    background-color: #2be000 !important;
}

.cl-footerActionText {
    color: #a0a0a0 !important;
}

.cl-footerActionLink {
    color: #33ff00 !important;
    font-weight: 600 !important;
}

.cl-footerActionLink:hover {
    color: #44ff11 !important;
}

.cl-dividerLine {
    background-color: #2a2a2a !important;
}

.cl-dividerText {
    color: #666666 !important;
}

.cl-formFieldInput {
    background-color: #1c1c1c !important;
    border: 1px solid #333333 !important;
    color: #ffffff !important;
}

.cl-headerTitle {
    color: #ffffff !important;
}

.cl-headerSubtitle {
    color: #a0a0a0 !important;
}