/* ------------------------------------------------------------------------
   kotlin.website skin for the Reposilite dashboard.

   Injected by the nginx sidecar (see theme/nginx.conf), which appends a
   <link> to this file just before </head>. Reposilite's own bundle is left
   untouched, so an upgrade never has to be merged with this.

   The dashboard is built with Windi CSS: every colour arrives as a utility
   class over a fixed rgba() literal, so there is no variable to re-point.
   The skin therefore overrides the utility classes themselves, mapping
   Reposilite's neutral scale onto the palette in landik's site.css.

   Everything here is !important on purpose. These rules land on top of
   someone else's stylesheet, where a `.dark .dark\:bg-gray-900` outranks a
   plain `.bg-gray-900`; matching that specificity selector-by-selector would
   break the first time upstream adds a variant. Weight beats guessing.

   The overrides are deliberately NOT scoped to `.dark`. The dashboard keeps
   its own light/dark toggle in localStorage, but kotlin.website has one
   appearance, so both settings land on the same dark surface.
   ------------------------------------------------------------------------ */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root {
  --kw-bg: #0a0c0d;
  --kw-bg-elev: #0f1214;
  --kw-bg-hi: #151a1c;
  --kw-border: #1d2426;
  --kw-border-hi: #2e393c;

  --kw-fg: #d5dadb;
  --kw-fg-dim: #7c8a8d;
  --kw-fg-faint: #556063;

  --kw-green: #4ade80;
  --kw-green-dim: #2f9e5c;

  --kw-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ---------------------------------------------------------------- type */

/* Blanket, and deliberately so. The bundle sets the face in four places at once —
   `#app{font-family:Open Sans}` (an id, so it outranks any element rule), `html`,
   `.font-sans`/`.font-mono`, and a `pre,code` pair — and inheritance carries the id rule to
   everything the dashboard renders. Naming those four selectors would work until the next
   release adds a fifth; `#app *` cannot be outrun. Safe here because every icon in the
   dashboard is an inline SVG, so nothing depends on a glyph font. */
html,
body,
#app,
#app *,
button,
input,
select,
textarea,
pre,
code,
kbd,
samp,
.font-sans,
.font-mono,
.mosha__toast__content {
  font-family: var(--kw-mono) !important;
}

body {
  color: var(--kw-fg) !important;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(74, 222, 128, 0.25);
  color: #fff;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--kw-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--kw-border-hi);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #3c4a4e;
}

/* ------------------------------------------------------------ surfaces */

/* page ground */
html,
body,
.dark html,
.dark body,
.page-footer,
.dark .page-footer,
.bg-black,
.dark .dark\:bg-black {
  background-color: var(--kw-bg) !important;
}

/* cards, list rows, buttons at rest */
.bg-white,
.bg-gray-100,
.bg-true-gray-100,
.bg-default,
.default-entry,
.default-button,
.compact-background,
.dark .dark\:bg-gray-900,
.dark .default-entry,
.dark .default-button,
.dark .pom-form input {
  background-color: var(--kw-bg-elev) !important;
}

/* the next step up: hovers, inputs, the compact browser row */
.bg-gray-200,
.bg-gray-800,
.default-entry:hover,
.default-button:hover,
.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-gray-900:hover,
.hover\:bg-white:hover,
.dark .dark\:bg-gray-800,
.dark .compact-background,
.dark .input[data-v-e1f5bea3],
.dark .default-entry:hover,
.dark .default-button:hover,
.dark .tabs .item:hover,
.dark #card-menu button:hover,
.dark #browser-list li:hover .default-entry,
.dark .dark\:hover\:bg-gray-900:hover,
.dark .dark\:hover\:bg-gray-800:hover,
.dark .hover\:dark\:bg-gray-900:hover,
#card-menu button:hover,
#browser-list li:hover .default-entry {
  background-color: var(--kw-bg-hi) !important;
}

.dark .dark\:bg-gray-700,
.dark .dark\:bg-gray-600,
.dark .dark\:hover\:bg-gray-700:hover,
.dark .dark\:hover\:bg-gray-600:hover,
.dark #login-modal button[data-v-e1f5bea3]:hover,
#login-modal button[data-v-e1f5bea3]:hover {
  background-color: var(--kw-border-hi) !important;
}

/* -------------------------------------------------------------- borders */

.border-black,
.border-gray-100,
.border-gray-200,
.border-true-gray-200,
.\!border-gray-800,
.dark .dark\:border-black,
.dark .dark\:border-gray-800,
.dark .bg-default {
  border-color: var(--kw-border) !important;
}

.dark .dark\:border-gray-700,
.dark .dark\:border-gray-600 {
  border-color: var(--kw-border-hi) !important;
}

/* ----------------------------------------------------------------- text */

.text-black,
.text-white,
.text-gray-700,
.text-gray-800,
.text-gray-900,
.hover\:text-white:hover,
.hover\:text-gray-700:hover,
.hover\:text-gray-800:hover,
.dark .dark\:text-white,
.dark .dark\:text-gray-100,
.dark .dark\:text-gray-200,
.dark .dark\:hover\:text-gray-100:hover,
.dark .dark\:hover\:text-gray-200:hover,
.dark .compact-entry,
.dark .page-footer a:hover,
.page-footer a:hover {
  color: var(--kw-fg) !important;
}

.text-gray-600,
.hover\:text-gray-600:hover,
.dark .dark\:text-gray-600,
.item[data-v-57a18632],
.dark .item[data-v-57a18632] {
  color: var(--kw-fg-dim) !important;
}

.footer-heart,
.dark .footer-heart {
  color: var(--kw-fg-faint) !important;
}

/* --------------------------------------------------------------- accent */

/* Reposilite's accent is blue; the site's is the prompt green. */
.text-blue-400,
.text-blue-600,
.text-blue-700,
.hover\:text-blue-700:hover {
  color: var(--kw-green) !important;
}

.bg-blue-600,
.bg-blue-700,
.dark .dark\:bg-blue-500,
.dark .dark\:hover\:bg-blue-600:hover {
  background-color: var(--kw-green-dim) !important;
  color: var(--kw-bg) !important;
}

.border-t-blue-600,
.dark .dark\:border-t-blue-400 {
  border-top-color: var(--kw-green) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--kw-green) !important;
}

/* The active nav tab and the selected sidebar item are underlines in the
   default theme; green is what marks "you are here" on the site too. */
.active,
.dark .active,
[data-v-57a18632] .main-menu-tab-active,
.dark [data-v-57a18632] .main-menu-tab-active {
  border-color: var(--kw-green) !important;
  color: var(--kw-fg) !important;
}

/* The inverted primary button — white block, black label — becomes the
   green block the site uses for its own primary actions. */
.dark .dark\:bg-white {
  background-color: var(--kw-green) !important;
}

.dark .dark\:text-black {
  color: var(--kw-bg) !important;
}

/* The light/dark toggle is gone. nginx forces `theme-mode: dark` on every load, so the
   control could only take a visitor to the light palette this skin does not cover — and
   only until the next reload. The aria-label is the stable handle; the classes next to it
   are Windi utilities that carry no meaning. */
button[aria-label^="Current theme"] {
  display: none !important;
}

/* Links inside prose keep the site's underline-on-hover behaviour. */
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}