/*
 * find-hlsmx Tokyo Night
 * Degoog custom theme
 *
 * Palette inspired by Tokyo Night.
 */

/* ============================================================
   TOKYO NIGHT PALETTE
   ============================================================ */

:root,
[data-theme="dark"] {
    --bg: #1a1b26;
    --bg-light: #24283b;
    --bg-hover: #292e42;

    --border: #3b4261;
    --border-light: #292e42;

    --text-primary: #c0caf5;
    --text-secondary: #a9b1d6;
    --text-link: #7aa2f7;
    --text-link-visited: #bb9af7;
    --text-cite: #9ece6a;
    --text-snippet: #a9b1d6;

    --search-bar-bg: #16161e;
    --search-bar-bg-hover: #24283b;

    --btn-bg: #24283b;
    --btn-text: #c0caf5;

    --overlay-bg: rgba(22, 22, 30, 0.92);

    --white: #1a1b26;

    --theme-bar-bg: transparent;
    --theme-bar-text: #a9b1d6;
    --theme-bar-border: #3b4261;

    --theme-pagination-active-bg: #7aa2f7;

    --accent: #7aa2f7;
    --primary: #7aa2f7;
    --primary-hover: #7dcfff;
    --primary-rgb: 122, 162, 247;

    --danger: #f7768e;
    --warning: #e0af68;
    --success: #9ece6a;

    --shadow-sm:
        0 2px 12px rgba(0, 0, 0, .25);

    --shadow-md:
        0 8px 30px rgba(0, 0, 0, .35);

    --font-family:
        "JetBrains Mono",
        "Cascadia Code",
        "Fira Code",
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;
}


/* ============================================================
   BASE
   ============================================================ */

html {
    background: #1a1b26;
}

html,
body {
    font-family: var(--font-family);
    color: var(--text-primary);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    background:
        radial-gradient(
            circle at 50% -20%,
            rgba(122, 162, 247, .08),
            transparent 38%
        ),
        #1a1b26;
}


/* ============================================================
   HEADER
   ============================================================ */

#header,
#results-header {
    background: rgba(26, 27, 38, .94);
    border-bottom: 1px solid #292e42;

    backdrop-filter: blur(12px);
}


/* ============================================================
   FIND-HLSMX LOGO
   ============================================================ */

#home-logo .logo {
    font-size: 0 !important;

    display: block;

    width: min(620px, 82vw);
    height: 180px;

    margin-left: auto;
    margin-right: auto;

    background-image: url("/themes/admin-find-hlsmx-degoog-find-hlsmx-theme/images/logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    filter:
        drop-shadow(0 8px 18px rgba(0, 0, 0, .30))
        drop-shadow(0 0 18px rgba(122, 162, 247, .08));
}


/* logo pequeño en resultados */

.results-logo {
    font-size: 0 !important;

    display: inline-block;

    width: 155px;
    height: 52px;

    background-image: url("/themes/admin-find-hlsmx-degoog-find-hlsmx-theme/images/logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    vertical-align: middle;
}


/* Ocultar letras internas del logo original */

#home-logo .logo span,
.results-logo span {
    display: none !important;
}


/* ============================================================
   SEARCH BAR
   ============================================================ */

.search-bar,
.results-search-bar {
    background: #16161e;

    border: 1px solid #3b4261;
    border-radius: 10px;

    box-shadow:
        inset 0 0 0 1px rgba(122, 162, 247, .02),
        0 8px 32px rgba(0, 0, 0, .20);

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}


.search-bar:hover,
.results-search-bar:hover {
    background: #1f2335;

    border-color: #565f89;
}


.search-bar:focus-within,
.results-search-bar:focus-within {
    background: #16161e;

    border-color: #7aa2f7;

    box-shadow:
        0 0 0 1px rgba(122, 162, 247, .35),
        0 0 22px rgba(122, 162, 247, .10);
}


/* ============================================================
   INPUT
   ============================================================ */

input,
textarea,
select {
    color: #c0caf5;

    font-family: var(--font-family);
}


input::placeholder,
textarea::placeholder {
    color: #565f89;
}


/* ============================================================
   BUTTONS
   ============================================================ */

.search-btn,
.lucky-btn,
.button-row button,
button {
    background: #24283b;

    color: #c0caf5;

    border: 1px solid #3b4261;
    border-radius: 7px;

    font-family: var(--font-family);
    font-weight: 500;

    box-shadow: none;

    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}


.search-btn:hover,
.lucky-btn:hover,
.button-row button:hover,
button:hover {
    background: #292e42;

    color: #7dcfff;

    border-color: #7aa2f7;
}


/* ============================================================
   SEARCH RESULTS
   ============================================================ */

.result-title a {
    color: #7aa2f7;

    text-decoration: none;

    text-shadow: none;
}


.result-title a:hover {
    color: #7dcfff;

    text-decoration: underline;
    text-decoration-color: #3b4261;
}


.result-url,
.result-cite {
    color: #9ece6a;
}


.result-snippet {
    color: #a9b1d6;
}


/* ============================================================
   RESULT CARDS
   ============================================================ */

.result {
    border-radius: 8px;

    transition:
        background .12s ease,
        transform .12s ease;
}


.result:hover {
    background: rgba(36, 40, 59, .35);
}


/* ============================================================
   RESULT TABS
   ============================================================ */

.results-tab {
    color: #a9b1d6;
}


.results-tab:hover {
    color: #7dcfff;
}


.results-tab.active {
    color: #c0caf5;
}


.results-tab.active::after {
    background: #7aa2f7;

    box-shadow:
        0 0 10px rgba(122, 162, 247, .35);
}


/* ============================================================
   AUTOCOMPLETE
   ============================================================ */

.ac-dropdown {
    background: #16161e;

    border:
        1px solid #3b4261;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .40);
}


.ac-dropdown > *:hover {
    background: #24283b;
}


/* ============================================================
   KNOWLEDGE / PLUGIN PANELS
   ============================================================ */

.glance-box,
.knowledge-panel {
    background: #1f2335;

    border: 1px solid #292e42;
    border-radius: 9px;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .18);
}


/* ============================================================
   PAGINATION
   ============================================================ */

.pagination a,
.pagination button {
    background: #24283b;

    color: #a9b1d6;

    border:
        1px solid #3b4261;

    border-radius: 6px;
}


.pagination a:hover {
    color: #7dcfff;

    border-color: #7aa2f7;
}


.pagination .active {
    background: #7aa2f7;

    color: #1a1b26;

    border-color: #7aa2f7;

    box-shadow:
        0 0 16px rgba(122, 162, 247, .25);
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}


::-webkit-scrollbar-track {
    background: #16161e;
}


::-webkit-scrollbar-thumb {
    background: #3b4261;

    border:
        2px solid #16161e;

    border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
    background: #565f89;
}


/* Firefox */

* {
    scrollbar-color: #3b4261 #16161e;
    scrollbar-width: thin;
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
    color: #1a1b26;
    background: #7aa2f7;
}


/* ============================================================
   FOCUS
   ============================================================ */

:focus-visible {
    outline: 1px solid #7aa2f7;
    outline-offset: 3px;
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 768px) {

    #home-logo .logo {
        width: 86vw;
        height: 125px;
    }

    .results-logo {
        width: 115px;
        height: 42px;
    }

    .search-bar,
    .results-search-bar {
        border-radius: 8px;
    }
}