/* Shared site-wide dark theme. */
body {
    background: #000;
    color: #EEEEEE;
    /* MainNavigation is fixed-top, so it's pulled out of normal flow -
       without this, its ~56px navbar height would sit on top of the first
       bit of every page's content. */
    padding-top: 56px;
}
a,
a:hover {
    color: #00ff00;
}

/* Bootstrap's plain .navbar has no horizontal padding of its own (that's
   normally a .container's job) - this lines the nav brand up with the page
   content below it (index.php's .SearchPage starts at the same 1rem left
   padding) instead of sitting flush against the browser edge. */
.NavContainer {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0 1rem;
}
.NavBrand {
    margin-right: auto;
}
.NavLink {
    color: #00ff00;
    font-size: 0.9rem;
    text-decoration: none;
}
.NavLink:hover,
.NavLink:focus-visible {
    color: #00ff00;
}
.NavLogoutForm {
    margin: 0;
}
.NavLogoutButton {
    padding: 0;
    border: 0;
    background: transparent;
}

/* Anything focused by keyboard gets a visible ring. Several things here are
   focusable without being native controls (the image tiles are divs with
   role="button"), and the browser's own default outline is invisible against
   this background. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #7fbf7f;
    outline-offset: 2px;
}

/* login.php */
.LoginPage {
    max-width: 24rem;
    margin: 4rem auto;
    padding: 0 1rem;
}
.LoginError {
    margin-bottom: 0.75rem;
    color: #ff8f8f;
}

/* index.php - search page: search on the left, image previews pinned on the
   right (Google Images-style). */
.Layout {
    display: flex;
    align-items: flex-start;
}
.SearchPage {
    flex: 1 1 60%;
    min-width: 0;
    box-sizing: border-box;
    margin: 3rem 0;
    padding: 0 1.5rem 0 1rem;
}
/* Bootstrap's reboot leaves the fieldset borderless already; this just tames
   its oversized default legend down to a compact label for the radio group. */
.ResultType {
    min-width: 0;
}
.ResultType legend {
    float: none;
    width: auto;
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #adb5bd;
}
.PreviewColumn {
    flex: 0 0 40%;
    box-sizing: border-box;
    /* Below the fixed navbar (body's own padding-top), pinned there while
       the search column scrolls past it - same idea as Google Images'
       side panel staying in view. */
    position: sticky;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
    padding: 1.5rem;
    border-left: 1px solid #333;
    color: #adb5bd;
}
#query-input {
    background: #000;
    border-color: #F0F;
    /* Light enough to actually read against the black field behind it - the
       magenta this used to share with the border sat at roughly 2:1 against
       #000, well under what's legible for body text, let alone what someone
       is proofreading a typed query in. */
    color: #F5C2F5;
}
#query-input::placeholder {
    color: #9A6E9A;
}
#query-input:focus {
    background: #2A002A;
    border-color: #F0F;
    color: #FFF;
    box-shadow: 0 0 0 0.25rem rgba(255, 0, 255, 0.25);
}
#search-button {
    border-color: #F0F;
    background: #808;
    color: #0F0;
}
.SearchResultRow {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #333;
    color: inherit;
    text-decoration: none;
}
.SearchResultRow:hover .SearchResultTitle {
    text-decoration: underline;
}
.SearchResultRow img {
    max-height: 90px;
    max-width: 120px;
    object-fit: cover;
    flex-shrink: 0;
}
.SearchResultTitle {
    color: #00ff00;
    overflow-wrap: break-word;
}
.SearchResultDescription {
    overflow-wrap: break-word;
}
.SearchResultURL {
    font-size: 0.85rem;
    color: #00ff00;
    overflow-wrap: break-word;
}
.ImageGrid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ImageGridRow {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.ImageTile {
    display: block;
    flex-shrink: 0;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.ImageTile.Selected img {
    outline: 3px solid #7fbf7f;
    outline-offset: 2px;
}
.ImageTile img {
    display: block;
    border-radius: 4px;
}
.ImageTileURL {
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #00ff00;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ImageTileDescription {
    font-size: 0.75rem;
    color: inherit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#status {
    color: #adb5bd;
}
.IndexStats {
    color: #adb5bd;
    font-size: 0.9rem;
}
.SearchResultDescription mark {
    background: transparent;
    color: #7fbf7f;
    font-weight: 600;
    padding: 0;
}
.PreviewImage {
    display: block;
    width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 1rem;
    background: #1a1a1a;
}
.PreviewTitle {
    color: #e9ecef;
    font-weight: 600;
    margin-bottom: 0.5rem;
    overflow-wrap: break-word;
}
.PreviewDescription {
    white-space: pre-wrap;
    margin-bottom: 1rem;
    overflow-wrap: break-word;
}
.PreviewParent {
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    overflow-wrap: break-word;
}
.PreviewParent a {
    color: #00ff00;
}
.PreviewImageLink {
    display: inline-block;
    font-size: 0.85rem;
    color: #00ff00;
}

/* watch.php - crawl feed page */

.WatchPage {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    overflow: hidden;
}
.WatchControls {
    flex: 0 0 auto;
    background: #000;
}
.CrawlStatisticsTable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}
.CrawlStatisticsTable th,
.CrawlStatisticsTable td {
    padding: 0.2rem 0.35rem;
    white-space: nowrap;
    text-align: center;
}
.CrawlStatisticsTable th {
    color: #adb5bd;
    font-weight: 500;
}
.CrawlStatisticsTable td {
    color: #f8f9fa;
    border-bottom: 1px solid #343a40;
}
.CrawlerStatus {
    font-size: 0.9rem;
    color: #adb5bd;
}
.CrawlerStatus.Running {
    color: #7fbf7f;
}
.CrawlerStatus.Stopped {
    color: #ff8f8f;
}
.CrawlFeedTitleLink {
    color: #00ff00;
}
#feed {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}
.CrawlFeedItem {
    opacity: 0;
    animation: flash-in 0.4s ease-out forwards;
    border-bottom: 1px solid #333;
    padding: 0.25rem 0;
}
@keyframes flash-in {
    0% { opacity: 0; background-color: #ffd54f; color: #000; }
    100% { opacity: 1; background-color: transparent; }
}
.CrawlFeedThumbnail {
    max-height: 50px;
    max-width: 80px;
    object-fit: cover;
}
.CrawlFeedDescription {
    color: #adb5bd;
}

/* Below this the two columns can't both be usable side by side - 40% of a
   phone's width is roughly a dozen characters. The preview stops being a
   pinned column and becomes an ordinary block above the results, where it
   gets the full width when there's actually something in it. */
@media (max-width: 900px) {
    .Layout {
        flex-direction: column;
    }
    .SearchPage,
    .PreviewColumn {
        flex: 1 1 auto;
        width: 100%;
    }
    .SearchPage {
        order: 2;
        margin-top: 1rem;
    }
    .PreviewColumn {
        order: 1;
        position: static;
        height: auto;
        max-height: 60vh;
        border-left: none;
        border-bottom: 1px solid #333;
    }
    /* An empty preview column would otherwise still take its padding and
       border, leaving a stray rule across the top of every text search. */
    .PreviewColumn:empty {
        display: none;
    }
}