/* components.css — primitives: buttons, action icons, telemetry pods/groups, cyber-checkbox.
   Loaded after tokens.css + layout.css, before style.css. */

/* ─── Buttons ────────────────────────────────────────────────── */

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.6rem 1.2rem;
    border-radius:var(--radius);
    background:transparent;
    border:1px solid var(--primary-color);
    color:var(--primary-color);
    font-family:var(--font-mono);
    font-size:.9rem;
    cursor:pointer;
    transition:transform var(--ulp-press-ms) var(--ulp-press-ease),background-color .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,text-shadow .16s ease;
    text-transform:uppercase;
    letter-spacing:1px;
    gap:.5rem
}

.btn:hover {
    background-color:var(--accent-soft);
    color:var(--primary-color);
    box-shadow:0 0 15px rgba(0,255,157,0.3);
    text-shadow:0 0 5px rgba(0,255,157,0.5)
}

.btn.btn-toolbar,a.btn.btn-toolbar,button.btn.btn-toolbar {
    height:var(--filter-chip-height,36px);
    min-height:var(--filter-chip-height,36px);
    padding:.28rem .7rem;
    box-sizing:border-box;
    background:var(--surface-soft);
    border:1px solid var(--surface-border);
    border-radius:var(--modern-rounded-sm);
    color:var(--text-primary);
    font-family:var(--font-mono);
    font-size:.8rem;
    font-weight:500;
    letter-spacing:0;
    text-transform:none;
    text-shadow:none;
    gap:.32rem;
    line-height:1;
    white-space:nowrap;
    transition:transform var(--ulp-press-ms) var(--ulp-press-ease),background .16s ease,border-color .16s ease,box-shadow .16s ease,color .16s ease,text-shadow .16s ease
}

.btn.btn-toolbar:is(:active,.press-feedback):not(:disabled):not([disabled]),
button.btn.btn-toolbar:is(:active,.press-feedback):not(:disabled):not([disabled]),
.edit-content-staff-toggle:is(:active,.press-feedback):not(:disabled):not([disabled]) {
    transform:var(--ulp-press-transform);
    background:var(--ulp-press-surface-bg);
    border-color:rgba(255,255,255,0.14);
    box-shadow:var(--ulp-press-inset-shadow);
    text-shadow:none;
    color:var(--text-primary)
}

.btn.btn-toolbar:is(:active,.press-feedback):not(:disabled):not([disabled]) i,
.btn.btn-toolbar:is(:active,.press-feedback):not(:disabled):not([disabled]) .icon,
.edit-content-staff-toggle:is(:active,.press-feedback):not(:disabled):not([disabled]) i {
    color:var(--text-primary);
    filter:none
}

.btn:is(:active,.press-feedback):not(:disabled):not([disabled]):not(.btn-link):not(.btn-toolbar) {
    transform:var(--ulp-press-transform);
    box-shadow:var(--ulp-press-inset-shadow)
}

.btn.btn-toolbar:hover,a.btn.btn-toolbar:hover,button.btn.btn-toolbar:hover {
    background:rgba(0,255,157,0.08);
    border-color:rgba(0,255,157,0.38);
    color:var(--primary-color);
    box-shadow:0 4px 15px rgba(0,0,0,0.3),0 0 14px rgba(0,255,157,0.12);
    text-shadow:0 0 10px rgba(0,255,157,0.48)
}

.btn.btn-toolbar i,.btn.btn-toolbar .icon {
    color:#fff;
    margin-right:0;
    opacity:.95
}

.btn.btn-toolbar:hover i,.btn.btn-toolbar:hover .icon {
    color:var(--primary-color);
    filter:drop-shadow(0 0 4px rgba(0,255,157,0.5))
}

.btn-secondary {
    border-color:var(--accent-color);
    color:var(--accent-color)
}

.btn-secondary:hover {
    border-color:var(--accent-color);
    color:var(--accent-color);
    background-color:var(--accent-soft);
    box-shadow:0 0 15px rgba(0,255,157,0.3);
    text-shadow:0 0 5px rgba(0,255,157,0.5)
}

.btn[style*="--error-color"]:hover,button[style*="border-color: var(--error-color)"]:hover {
    background-color:rgba(255,51,102,0.1) !important;
    box-shadow:0 0 15px rgba(255,51,102,0.3) !important;
    text-shadow:0 0 5px rgba(255,51,102,0.5) !important
}

.btn-link {
    display:inline-block;
    padding:.4rem 1.2rem;
    background:transparent;
    border:1px solid var(--accent-color);
    color:var(--accent-color);
    text-decoration:none;
    font-family:var(--font-mono);
    font-size:.9rem;
    transition:all .2s;
    text-transform:uppercase
}

.btn-link:hover {
    background:var(--accent-soft);
    box-shadow:0 0 10px rgba(0,255,157,0.3);
    color:white
}

/* ─── Action icon buttons (row controls) ─────────────────────── */

.action-icon-btn {
    background:transparent;
    border:0;
    cursor:pointer;
    color:var(--text-secondary);
    padding:0 .5rem;
    font-size:1rem;
    transition:all .2s;
    display:flex;
    align-items:center;
    justify-content:center;
    height:30px
}

.action-icon-btn:hover {
    color:var(--primary-color)
}

.action-icon-btn.approve:hover {
    color:var(--primary-color)
}

.action-icon-btn.delete:hover {
    color:var(--error-color)
}

/* ─── Telemetry pod / group ──────────────────────────────────── */

.telemetry-pod {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.35rem;
    padding:0 7px;
    background:var(--surface-soft);
    border:1px solid var(--detail-meta-rail-border);
    border-radius:var(--meta-chip-radius,var(--modern-rounded-sm));
    height:20px;
    box-sizing:border-box;
    color:var(--text-secondary);
    font-family:var(--font-mono);
    font-weight:500;
    font-size:.75rem;
    white-space:nowrap
}

.telemetry-group {
    display:inline-flex;
    align-items:center;
    background:var(--surface-soft);
    border:1px solid var(--detail-meta-rail-border);
    border-radius:var(--meta-chip-radius,var(--modern-rounded-sm));
    overflow:visible;
    height:20px;
    flex-shrink:0
}

.telemetry-group .telemetry-pod {
    background:transparent !important;
    border:none !important;
    border-radius:0 !important;
    padding:0 8px;
    height:100% !important;
    position:relative
}

.telemetry-group > .telemetry-pod + .telemetry-pod {
    border-left:1px solid rgba(255,255,255,0.1) !important
}

/* 24px meta rail: topic OP strip, detail headers, file/resource/forum list cards */
:is(.file-view-header, .file-item, .resource-item, .forum-topic-list-card, .forum-topic-header, .forum-topic-op-meta-bar, .forum-post-op--top-rail) .file-meta .telemetry-group {
    height:var(--detail-meta-rail-h);
    min-height:var(--detail-meta-rail-h);
    max-height:var(--detail-meta-rail-h);
    overflow:visible
}

:is(.file-item, .resource-item) .file-meta .telemetry-group.list-telemetry-wrap,
.resource-item .file-meta .telemetry-group.telemetry-group-wrap {
    height:var(--detail-meta-rail-h);
    min-height:var(--detail-meta-rail-h);
    flex-wrap:nowrap
}

:is(.file-view-header, .file-item, .resource-item) .file-meta > a.category-badge.telemetry-pod.forum-topic-category-pill,
:is(.file-view-header, .file-item, .resource-item) .file-meta > .telemetry-pod.time-pod,
.forum-topic-list-card .file-meta .telemetry-pod.forum-topic-created-at,
.forum-topic-list-card .file-meta .telemetry-pod.forum-topic-activity-at,
.forum-topic-list-card .file-meta .telemetry-pod.forum-topic-no-replies {
    height:var(--detail-meta-rail-h);
    min-height:var(--detail-meta-rail-h);
    max-height:var(--detail-meta-rail-h);
    line-height:1;
    box-sizing:border-box
}

:is(.file-view-header, .file-item, .resource-item, .forum-topic-list-card) .file-meta .telemetry-group.file-time-combo--solo .telemetry-pod.time-pod,
:is(.file-view-header, .file-item, .resource-item, .forum-topic-list-card) .file-meta .telemetry-group.file-time-combo:not(:has(.file-bump-pod:not(.hidden))) .telemetry-pod.time-pod,
:is(.file-view-header, .file-item, .resource-item, .forum-topic-list-card) .file-meta .telemetry-group.file-time-combo--solo .telemetry-pod.file-bump-pod,
:is(.file-view-header, .file-item, .resource-item, .forum-topic-list-card) .file-meta .telemetry-group.file-time-combo--solo .telemetry-pod.file-activity-pod {
    height:var(--detail-meta-rail-h) !important;
    min-height:var(--detail-meta-rail-h)
}

.telemetry-group .telemetry-pod.file-price-pod .price-amount {
    color:var(--primary-color);
    font-weight:600
}

.telemetry-group .telemetry-pod.file-price-pod i {
    color:var(--primary-color)
}

.telemetry-pod i {
    font-size:.75rem
}

.file-meta .category-badge.telemetry-pod,.resource-item .category-badge.telemetry-pod,.category-badge.telemetry-pod {
    font-weight:500;
    text-transform:none !important;
    letter-spacing:normal
}

.file-meta a.category-badge.telemetry-pod.forum-topic-category-pill,.resource-item a.category-badge.telemetry-pod.forum-topic-category-pill,.forum-topic-list-card-category-row a.telemetry-pod.forum-topic-category-pill {
    display:inline-flex;
    align-items:center;
    gap:.28rem;
    color:var(--text-secondary);
    background:var(--surface-soft);
    border:1px solid var(--detail-meta-rail-border);
    vertical-align:middle;
    cursor:pointer;
    text-decoration:none;
    box-sizing:border-box;
    height:20px;
    min-height:20px;
    max-height:20px;
    line-height:1;
    padding:0 7px;
    -webkit-tap-highlight-color:transparent;
    border-radius:var(--meta-chip-radius,var(--modern-rounded-sm)) !important
}

.forum-topic-list-card-category-row a.telemetry-pod.forum-topic-category-pill i,.file-meta a.category-badge.telemetry-pod.forum-topic-category-pill i,.resource-item a.category-badge.telemetry-pod.forum-topic-category-pill i {
    font-size:.75rem;
    line-height:1
}

.telemetry-pod .fa-level-up-alt,
.telemetry-pod.file-activity-pod .fa-comment {
    color:var(--text-secondary) !important
}

.telemetry-pod.bump-time-pod,.file-meta .telemetry-pod[title^="Bumped"],
.file-meta .telemetry-pod[title^="Commented"] {
    color:var(--text-secondary) !important
}

.telemetry-group.file-time-combo .file-bump-pod.hidden {
    display:none !important
}

/* Upload-only: inner pod is the full pill (group chrome clips right radius when bump is hidden) */
.telemetry-group.file-time-combo--solo,
.telemetry-group.file-time-combo:not(:has(.file-bump-pod:not(.hidden))) {
    background:transparent;
    border:none;
    height:auto;
    overflow:visible;
    flex-shrink:0
}

.file-item .file-meta > .telemetry-group.file-stats-group,
.resource-item .file-meta > .telemetry-group.file-stats-group {
    overflow:visible;
    flex-shrink:0
}

.telemetry-group.file-time-combo--solo .telemetry-pod.time-pod,
.telemetry-group.file-time-combo:not(:has(.file-bump-pod:not(.hidden))) .telemetry-pod.time-pod {
    background:var(--surface-soft) !important;
    border:1px solid var(--detail-meta-rail-border) !important;
    border-radius:var(--meta-chip-radius,var(--modern-rounded-sm)) !important;
    height:20px !important;
    padding:0 7px;
    box-sizing:border-box
}

.telemetry-pod.clickable {
    cursor:pointer;
    text-decoration:none;
    color:var(--text-primary);
    transition:all .2s
}

.telemetry-pod.clickable:hover {
    background:var(--accent-soft);
    border-color:var(--primary-color);
    box-shadow:0 0 10px rgba(0,255,157,0.2);
    position:relative;
    z-index:2
}

/* ─── Cyber input ────────────────────────────────────────────── */

.cyber-input {
    width:100%;
    padding:0 1rem;
    height:36px;
    background-color:rgba(0,0,0,0.5) !important;
    border:1px solid var(--surface-border);
    border-radius:var(--radius);
    color:var(--text-primary) !important;
    font-family:var(--font-mono);
    box-sizing:border-box;
    transition:all .3s;
    box-sizing:border-box
}

.cyber-input:focus {
    outline:0;
    border-color:var(--accent-color);
    box-shadow:0 0 10px rgba(0,255,157,0.2)
}

.cyber-input::placeholder {
    color:var(--text-secondary);
    opacity:.7
}

/* ─── Filter chip (page toolbar tabs) ────────────────────────── */

.filter-chip {
    padding:.28rem .7rem;
    height:var(--filter-chip-height);
    min-height:var(--filter-chip-height);
    box-sizing:border-box;
    background:var(--surface-soft);
    border:1px solid var(--surface-border);
    border-radius:var(--modern-rounded-sm);
    color:var(--text-primary);
    text-decoration:none;
    font-family:var(--font-mono);
    font-size:.8rem;
    transition:all .2s cubic-bezier(0.4,0,0.2,1);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.32rem;
    line-height:1;
    white-space:nowrap;
    position:relative;
    overflow:visible;
    will-change:transform,box-shadow,filter,background-color
}

.filter-chip:hover {
    color:var(--primary-color);
    background:rgba(0,255,157,0.07);
    border-color:rgba(0,255,157,0.35);
    box-shadow:0 4px 15px rgba(0,0,0,0.3),0 0 12px rgba(0,255,157,0.12);
    text-shadow:0 0 9px rgba(0,255,157,0.45);
    z-index:3
}

.filter-chip:hover i {
    color:var(--primary-color);
    filter:drop-shadow(0 0 4px rgba(0,255,157,0.5))
}

.filter-chip:active,.filter-chip.press-feedback {
    transform:var(--ulp-press-transform);
    background:rgba(0,255,157,0.13);
    border-color:rgba(0,255,157,0.48);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.14),inset 0 0 0 1px rgba(0,255,157,0.24),0 2px 9px rgba(0,0,0,0.28);
    text-shadow:0 0 9px rgba(0,255,157,0.4)
}

.filter-chip:active i,.filter-chip.press-feedback i {
    color:var(--primary-color);
    filter:drop-shadow(0 0 6px rgba(0,255,157,0.6))
}

.filter-chip.active {
    border-color:rgba(0,255,157,0.35);
    background:linear-gradient(90deg,rgba(0,255,157,0.12),var(--surface-soft));
    color:#eafff6;
    box-shadow:inset 0 0 0 1px rgba(0,255,157,0.12)
}

.filter-chip.active:hover {
    text-shadow:0 0 10px rgba(0,255,157,0.35);
    border-color:rgba(0,255,157,0.48)
}

.filter-chip.active:hover i {
    color:var(--primary-color);
    filter:drop-shadow(0 0 4px rgba(0,255,157,0.45))
}

.filter-chip.filter-chip--vip i.icon.icon-gem-gradient,.filter-chip.filter-chip--vip>i.icon-gem-gradient,.page-toolbar-page .directory-tabs-scroll>.filter-chip.filter-chip--vip i.icon-gem-gradient,.page-toolbar-page .directory-tabs-scroll>.filter-chip.filter-chip--vip .icon.icon-gem-gradient,.page-toolbar-page .directory-tabs-scroll>.filter-chip.filter-chip--vip>i.icon-gem-gradient {
    filter:drop-shadow(0 0 1px rgba(0,0,0,0.28)) !important
}

.filter-chip.filter-chip--vip:hover i.icon.icon-gem-gradient,.filter-chip.filter-chip--vip:hover>i.icon-gem-gradient,.filter-chip.filter-chip--vip.active i.icon.icon-gem-gradient,.filter-chip.filter-chip--vip.active>i.icon-gem-gradient,.filter-chip.filter-chip--vip.active:hover i.icon.icon-gem-gradient,.filter-chip.filter-chip--vip.active:hover>i.icon-gem-gradient {
    filter:drop-shadow(0 0 1px rgba(0,0,0,0.32))
}

.filter-chip.filter-chip--vip {
    z-index:auto;
    color:var(--vip-caption-color);
    text-shadow:0 0 8px var(--vip-caption-glow)
}

.filter-chip.filter-chip--vip:hover {
    z-index:3;
    color:var(--vip-caption-color-strong);
    border-color:var(--vip-caption-border);
    background:rgba(245,197,66,0.1);
    box-shadow:0 4px 15px rgba(0,0,0,0.3),0 0 14px rgba(245,197,66,0.2);
    text-shadow:0 0 12px var(--vip-caption-glow)
}

.filter-chip.filter-chip--vip.active {
    color:var(--vip-caption-color-strong);
    border-color:rgba(251,191,36,0.48);
    background:linear-gradient(90deg,rgba(245,197,66,0.16),rgba(217,119,6,0.08));
    box-shadow:inset 0 0 0 1px rgba(245,197,66,0.18);
    text-shadow:0 0 10px var(--vip-caption-glow)
}

.filter-chip.filter-chip--vip.active:hover {
    border-color:rgba(253,224,139,0.58);
    text-shadow:0 0 12px var(--vip-caption-glow)
}

/* ─── Cyber checkbox ─────────────────────────────────────────── */

.cyber-checkbox {
    appearance:none;
    width:20px;
    height:20px;
    border:2px solid var(--surface-border);
    border-radius:4px;
    background:rgba(0,0,0,0.4);
    cursor:pointer;
    transition:all .2s cubic-bezier(0.175,0.885,0.32,1.275);
    position:relative;
    margin:0;
    vertical-align:middle
}

.cyber-checkbox:hover {
    border-color:var(--primary-color);
    background:var(--accent-soft);
    box-shadow:0 0 10px rgba(0,255,157,0.2)
}

.cyber-checkbox:checked {
    background:var(--primary-color);
    border-color:var(--primary-color);
    box-shadow:0 0 12px rgba(0,255,157,0.4)
}

.cyber-checkbox:checked::after {
    content:'\f00c';
    font-family:'Font Awesome 5 Free';
    font-weight:900;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    color:black;
    font-size:11px
}