/* IT-Tools, dressed in the homelab dashboard's theme.
 *
 * Copied, not templated: it holds no variables, same as the dashboard and
 * Gokapi themes. Injected into IT-Tools' <head> by a sub_filter in
 * it-tools.conf, and served by nginx from the dashboard mount as
 * /homelab-it-tools.css. Bump the ?v=N in it-tools.conf whenever this file
 * changes, or browsers keep the old stylesheet.
 *
 * IT-Tools is a Vue SPA built on Naive UI, which paints most components from
 * per-component inline CSS variables. That is why so much of this sheet is
 * !important: a plain rule loses to an inline var. It also means the big
 * surfaces (background, cards, inputs, buttons, type, accent) theme
 * reliably, while deep widget internals may keep their own colours, and an
 * `it-tools:latest` pull can shift class names under us. Cosmetic only --
 * if it drifts, every tool still works.
 */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&display=swap');

:root {
    /* Same palette as templates/dashboard/homelab-theme.css */
    --hl-bg: #1a1f2e;
    --hl-surface: rgba(168, 218, 220, 0.06);
    --hl-surface-solid: #202636;
    --hl-border: #a8dadc;
    --hl-accent: #a8dadc;
    --hl-accent-dim: #8ab5b8;
    --hl-text: #b4d4e1;
    --hl-text-bright: #a8dadc;
    --hl-amber: #e9c46a;
    --hl-red: #e06c75;
    --hl-green: #4ade80;
    --hl-mono: 'Share Tech Mono', monospace;
    --hl-display: 'VT323', monospace;
}

/* ---- Page shell ------------------------------------------------------- */

html,
body,
#app,
.n-config-provider,
.n-layout,
.n-layout-content,
.n-layout-sider,
.n-layout__content-wrapper {
    background-color: var(--hl-bg) !important;
    color: var(--hl-text) !important;
}

body,
#app {
    font-family: var(--hl-mono) !important;
}

/* The sidebar and header get a touch of separation from the content. */
.n-layout-sider,
.n-layout-header {
    border-color: rgba(168, 218, 220, 0.25) !important;
}

/* ---- Type ------------------------------------------------------------- */

h1, h2, h3,
.n-h1, .n-h2, .n-h3,
.n-page-header__title {
    font-family: var(--hl-display) !important;
    color: var(--hl-text-bright) !important;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(168, 218, 220, 0.35);
}

h4, h5, h6,
.n-h4, .n-h5, .n-h6 {
    font-family: var(--hl-mono) !important;
    color: var(--hl-text-bright) !important;
}

p, span, div, label,
.n-text,
.n-form-item-label,
.n-form-item-label__text {
    color: var(--hl-text);
}

a,
.n-a,
a.n-a {
    color: var(--hl-accent) !important;
    text-decoration: none;
}

a:hover,
.n-a:hover {
    color: #ffffff !important;
    text-shadow: 0 0 8px var(--hl-accent);
}

/* ---- Cards: the tool tiles and every tool's panel --------------------- */

.n-card,
.n-card.n-card--bordered,
.c-card,
.n-collapse-item,
.n-alert {
    background-color: var(--hl-surface) !important;
    border: 2px solid var(--hl-border) !important;
    border-radius: 0 !important;
    color: var(--hl-text) !important;
    box-shadow: none !important;
}

.n-card__content,
.n-card-header,
.n-card__footer {
    color: var(--hl-text) !important;
}

.n-card-header__main,
.n-card__header,
.n-card-header {
    font-family: var(--hl-display) !important;
    color: var(--hl-text-bright) !important;
    letter-spacing: 1px;
}

/* The home page tool tiles lift on hover, like the dashboard service cards. */
.n-card:hover {
    border-color: #ffffff !important;
    box-shadow: 0 0 18px rgba(168, 218, 220, 0.35) !important;
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* ---- Inputs, selects, textareas --------------------------------------- */

.n-input,
.n-input .n-input__input-el,
.n-input .n-input__textarea-el,
.n-input-number,
.n-base-selection,
.n-base-selection-label,
.n-select .n-base-selection {
    background-color: rgba(10, 14, 24, 0.85) !important;
    color: var(--hl-text-bright) !important;
    font-family: var(--hl-mono) !important;
    border-radius: 0 !important;
}

.n-input .n-input__border,
.n-input .n-input__state-border,
.n-base-selection .n-base-selection__border,
.n-base-selection .n-base-selection__state-border {
    border: 1px solid rgba(168, 218, 220, 0.5) !important;
    border-radius: 0 !important;
}

.n-input:hover .n-input__state-border,
.n-input--focus .n-input__state-border,
.n-base-selection:hover .n-base-selection__state-border {
    border-color: var(--hl-accent) !important;
    box-shadow: 0 0 8px rgba(168, 218, 220, 0.3) !important;
}

.n-input .n-input__placeholder,
.n-base-selection .n-base-selection-placeholder {
    color: rgba(180, 212, 225, 0.45) !important;
}

/* ---- Buttons ---------------------------------------------------------- */

.n-button {
    font-family: var(--hl-mono) !important;
    border-radius: 0 !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Naive's primary is #18a058 green; the homelab accent is cyan. */
.n-button.n-button--primary-type,
.n-button--primary-type {
    background-color: rgba(168, 218, 220, 0.15) !important;
    border: 2px solid var(--hl-accent) !important;
    color: var(--hl-accent) !important;
}

.n-button.n-button--primary-type:hover,
.n-button--primary-type:hover {
    background-color: var(--hl-accent) !important;
    color: var(--hl-bg) !important;
    box-shadow: 0 0 14px rgba(168, 218, 220, 0.5) !important;
}

.n-button.n-button--default-type,
.n-button--default-type {
    background-color: transparent !important;
    border: 1px solid rgba(168, 218, 220, 0.5) !important;
    color: var(--hl-text) !important;
}

.n-button.n-button--default-type:hover {
    border-color: var(--hl-accent) !important;
    color: var(--hl-accent) !important;
}

/* ---- Menu / navigation ------------------------------------------------ */

.n-menu,
.n-menu .n-menu-item-content {
    font-family: var(--hl-mono) !important;
    background-color: transparent !important;
}

.n-menu .n-menu-item-content .n-menu-item-content-header,
.n-menu .n-menu-item-content__icon {
    color: var(--hl-text) !important;
}

.n-menu .n-menu-item-content:hover .n-menu-item-content-header,
.n-menu .n-menu-item-content--selected .n-menu-item-content-header {
    color: var(--hl-accent) !important;
}

.n-menu .n-menu-item-content--selected::before {
    background-color: rgba(168, 218, 220, 0.12) !important;
    border-left: 2px solid var(--hl-accent);
}

/* ---- Tags, switches, dividers, tooltips ------------------------------- */

.n-tag {
    background-color: rgba(168, 218, 220, 0.12) !important;
    border: 1px solid rgba(168, 218, 220, 0.4) !important;
    color: var(--hl-accent) !important;
    border-radius: 0 !important;
    font-family: var(--hl-mono) !important;
}

.n-switch.n-switch--active .n-switch__rail {
    background-color: var(--hl-accent) !important;
}

.n-divider .n-divider__line {
    background-color: rgba(168, 218, 220, 0.25) !important;
}

.n-tooltip .n-tooltip__content,
.n-popover.n-popover--shadow {
    background-color: var(--hl-surface-solid) !important;
    border: 1px solid var(--hl-accent) !important;
    border-radius: 0 !important;
    color: var(--hl-text) !important;
    font-family: var(--hl-mono) !important;
}

/* Naive's green success / red error, mapped onto the homelab pair. */
.n-button--success-type,
.n-tag--success-type {
    border-color: var(--hl-green) !important;
    color: var(--hl-green) !important;
}

.n-button--error-type,
.n-tag--error-type {
    border-color: var(--hl-red) !important;
    color: var(--hl-red) !important;
}

.n-button--warning-type,
.n-tag--warning-type {
    border-color: var(--hl-amber) !important;
    color: var(--hl-amber) !important;
}

/* ---- Code output ------------------------------------------------------ */

pre, code, kbd, samp,
.n-code,
.n-code pre {
    font-family: var(--hl-mono) !important;
    background-color: rgba(10, 14, 24, 0.85) !important;
    color: var(--hl-text-bright) !important;
    border-radius: 0 !important;
}

/* ---- Scrollbars ------------------------------------------------------- */

* {
    scrollbar-width: thin;
    scrollbar-color: var(--hl-accent-dim) var(--hl-bg);
}

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

::-webkit-scrollbar-track {
    background: var(--hl-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--hl-accent-dim);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--hl-accent);
}

/* ---- Hidden chrome ----------------------------------------------------- */

/* "Buy me a coffee" (upstream's donation link).
 *
 * Two selectors on purpose, either of which is enough: the class is what the
 * component sets, and the href is what the button is FOR. The class could be
 * renamed by a refactor and the label is translated into a dozen languages,
 * but the donation URL is the one thing that cannot change without the
 * button ceasing to be this button. */
.support-button,
a[href*="buymeacoffee.com"] {
    display: none !important;
}

/* Dark/light theme toggle.
 *
 * This one has no class, no id and no stable attribute -- it is an unlabelled
 * icon button in the navbar -- so the only thing left to key on is the icon
 * inside it. These two `d` values are the tabler moon and sun glyphs: the
 * moon shows while dark mode is active, the sun while light is. Both are
 * listed so the button stays hidden whichever state it is in.
 *
 * Hiding it is not only cosmetic: it-tools.conf forces dark mode by setting
 * localStorage['vueuse-color-scheme'], and this stylesheet only themes the
 * dark palette. Letting someone flip to light would show a half-themed page,
 * and the setting would persist in their browser.
 *
 * `:has()` is required here (Chrome 105+, Safari 15.4+, Firefox 121+). This
 * is the most fragile rule in the file: a tabler-icons update that redraws
 * the glyph, or an upstream switch to a different icon set, makes the toggle
 * reappear. It will not break anything else if it stops matching. */
button:has(path[d^="M12 3h.393a7.5"]),
button:has(path[d^="M3 12h1m8-9v1"]) {
    display: none !important;
}