/* h5ai Dark Theme – matches PromFiles.me main site */

/* ── Base colors – force ALL text white ── */
#root,
#root *,
#root a,
#root a:active,
#root a:visited,
#root .label,
#root .date,
#root .size,
input,
select {
    color: rgba(255, 255, 255, 0.87) !important;
}

#root a:hover {
    color: #e74c3c !important;
}

#root {
    background: #010409 !important;
}

body {
    background: #010409 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* Invert only h5ai UI icons (not content images/thumbnails/previews) */
#toolbar img,
#crumbbar img,
#sidebar img,
#tree .indicator img,
#tree .icon img,
#view .square img:not(.thumb),
#view .header .sort,
#pv-prev-area img,
#pv-next-area img,
#pv-buttons img,
#fallback .fb-i img {
    filter: invert(1) !important;
}

/* Do NOT invert actual content: thumbnails, previews, photos */
#pv-content-img,
#pv-content-vid,
#pv-content-aud,
.thumb,
#view .square .thumb {
    filter: none !important;
}

/* ── Top bar / breadcrumb ── */
#topbar {
    background: #0d1117 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#crumbbar a,
#crumbbar a:active,
#crumbbar a:visited {
    color: rgba(255, 255, 255, 0.87) !important;
}

#crumbbar a:hover,
#crumbbar a:active:hover,
#crumbbar a:visited:hover {
    color: #e74c3c !important;
}

/* ── Toolbar icons – invert for dark bg ── */
#toolbar .tool img,
#crumbbar .sep img,
#crumbbar .hint img {
    filter: invert(1) !important;
}

#toolbar .tool:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ── Sidebar ── */
#sidebar {
    background: #0d1117 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#sidebar .button {
    color: rgba(255, 255, 255, 0.87) !important;
}

#sidebar .button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

#sidebar .button.active {
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 0 4px 0 rgba(255, 255, 255, 0.2) !important;
}

#sidebar .button img {
    filter: invert(1) !important;
}

#sidebar .range-track,
#sidebar input[type='range']::-webkit-slider-runnable-track,
#sidebar input[type='range']::-moz-range-track {
    background: #333 !important;
}

#sidebar .range-thumb,
#sidebar input[type='range']::-webkit-slider-thumb,
#sidebar input[type='range']::-moz-range-thumb {
    background: #999 !important;
}

#sidebar input:hover,
#sidebar select:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

#sidebar select {
    color: rgba(255, 255, 255, 0.87) !important;
}

/* ── Main content area ── */
#content {
    background: #010409 !important;
}

#content-header,
#content-footer {
    color: rgba(255, 255, 255, 0.87) !important;
}

#content-header a,
#content-footer a,
#content-header a:active,
#content-footer a:active,
#content-header a:visited,
#content-footer a:visited {
    color: #e74c3c !important;
}

/* ── All view items – force light text ── */
#view {
    color: rgba(255, 255, 255, 0.87) !important;
}

#view .item {
    color: rgba(255, 255, 255, 0.87) !important;
}

#view .item a,
#view .item a:active,
#view .item a:visited {
    color: rgba(255, 255, 255, 0.87) !important;
}

#view .item a:hover {
    color: #e74c3c !important;
}

#view .item .label,
#view .item .date,
#view .item .size {
    color: rgba(255, 255, 255, 0.87) !important;
}

#view .item .date,
#view .item .size {
    color: rgba(255, 255, 255, 0.5) !important;
}

#view .header .label,
#view .header .date,
#view .header .size {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Details view ── */
#view.view-details .header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#view.view-details .header .label:hover,
#view.view-details .header .date:hover,
#view.view-details .header .size:hover {
    color: #e74c3c !important;
}

#view.view-details .header .sort {
    filter: invert(1) !important;
}

#view.view-details .item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#view.view-details .item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.8) !important;
}

/* ── Grid / Icons view ── */
#view.view-grid .item:hover,
#view.view-icons .item:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.8) !important;
}

#view.view-icons .landscape {
    background: #161b22 !important;
}

/* ── No-match text ── */
#view .no-match {
    color: rgba(255, 255, 255, 0.08) !important;
}

/* ── Tree sidebar ── */
#tree a,
#tree a:active,
#tree a.visited {
    color: rgba(255, 255, 255, 0.87) !important;
}

#tree a:hover,
#tree a:active:hover,
#tree a.visited:hover {
    color: #e74c3c !important;
}

#tree .summary {
    color: rgba(255, 255, 255, 0.3) !important;
}

#tree .indicator img {
    filter: invert(1) !important;
}

/* ── Info sidebar ── */
#info .block {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Back link ── */
#backlink,
#backlink:active,
#backlink:visited {
    color: rgba(255, 255, 255, 0.3) !important;
}

#backlink:hover {
    color: #e74c3c !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ── Filter / Search input ── */
#filter input,
#search input {
    color: rgba(255, 255, 255, 0.87) !important;
}

#filter.pending input,
#search.pending input {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ── Context menu ── */
#cm-overlay .cm-panel {
    color: rgba(255, 255, 255, 0.87) !important;
    background: #161b22 !important;
}

#cm-overlay .cm-entry:hover {
    color: #e74c3c !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

#cm-overlay .cm-sep {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Fallback table ── */
#fallback table {
    background: #0d1117 !important;
}

#fallback th,
#fallback td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#fallback th {
    color: rgba(255, 255, 255, 0.4) !important;
}

#fallback a:hover,
#fallback a:active:hover,
#fallback a:visited:hover {
    color: #e74c3c !important;
}

#fallback-hints {
    background: #0d1117 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

#fallback-hints a,
#fallback-hints a:active,
#fallback-hints a:visited {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Preview overlay ── */
#pv-content-txt {
    background: #161b22 !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

#pv-content-img {
    background-color: #1a1a1a !important;
}

/* ── Code / pre ── */
code, pre {
    color: rgba(255, 255, 255, 0.87) !important;
}

div#pv-content-txt code {
    color: #4caf50 !important;
}

/* ── Input elements ── */
.el-input {
    background: #161b22 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

/* ── Selection highlight ── */
::selection {
    background: #e74c3c !important;
    color: #fff !important;
}

::-moz-selection {
    background: #e74c3c !important;
    color: #fff !important;
}

/* ── Selected items ── */
#view .item.selected:not(.selecting),
#view .item.selecting:not(.selected) {
    background: #e74c3c !important;
}

#view .item.selected:not(.selecting):hover,
#view .item.selecting:not(.selected):hover {
    background: #e74c3c !important;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #010409;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ── Info page (admin) ── */
#root.info #content {
    color: rgba(255, 255, 255, 0.87) !important;
}

#root.info #header a {
    color: rgba(255, 255, 255, 0.87) !important;
}

#root.info #header a:hover {
    color: #e74c3c !important;
}

#root.info code {
    background: #161b22 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#root.info #support {
    background: #161b22 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#root.info #pass {
    background: #161b22 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.87) !important;
}

#root.info #tests .test {
    background: #161b22 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── Selection rect ── */
#selection-rect {
    border: 1px dashed rgba(255, 255, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}