/*
 * Alpenglow for autobrr (rachel/alpenglow): Dawn in autobrr's light mode,
 * Dusk in its dark mode.
 *
 * Caddy adds a link to this file to autobrr's page (see roles/autobrr and
 * the autobrr article). autobrr's own stylesheet loads first and stays as it
 * is; this only overrides it:
 *   - colors.css, generated by roles/autobrr/theme/build.py, repeats every
 *     colour rule of autobrr's with Alpenglow's colours;
 *   - this file adds what isn't a colour class: fonts, corners, focus rings,
 *     selection, the logo and the sign-in page.
 * Rules that only override autobrr's defaults sit in the same @layer as
 * those defaults, so autobrr's utility classes still win over them.
 */
@import url("colors.css");

/* Plus Jakarta Sans for headings. Text stays in autobrr's own Inter. Variable
   Latin and Latin Extended subsets from Fontsource, under the SIL Open Font
   License 1.1 (the licence is served next to them). */
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The roles this file uses, from palette/alpenglow.json. */
:root {
  --ag-page: #fdfafb;
  --ag-surface: #ffffff;
  --ag-text: #1d171f;
  --ag-border: #ece1e7;
  --ag-accent: #bf3264;
  --ag-accent-hover: #9f2d56;
  --ag-accent-active: #86204a;
  --ag-on-accent: #fff5f9;
  --ag-focus-ring: #bf3264;
  --ag-selection: #fcd1db;
  --ag-selection-text: #1d171f;
  --ag-logo-fill: #fee8ed; /* raspberry tint-6 */
  --ag-logo-ink: #bf3264; /* raspberry base */
  --ag-display: "Plus Jakarta Sans Variable", "Inter Var", ui-sans-serif, system-ui, sans-serif;
}
.dark {
  --ag-page: #1d171f;
  --ag-surface: #261e29;
  --ag-text: #faecf2;
  --ag-border: #faecf21a;
  --ag-on-accent: #fff1f6;
  --ag-focus-ring: #d9467a;
  --ag-selection: #7f1840;
  --ag-selection-text: #faecf2;
  --ag-logo-fill: #ffdde5; /* raspberry tint-6 */
  --ag-logo-ink: #d9467a; /* raspberry base */
}

/* Corners one step rounder than autobrr's, as the style guide asks: inputs
   and menus 8px, cards 10px, large tiles 14px. */
@layer theme {
  :root,
  :host {
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.625rem;
    --radius-xl: 0.875rem;
    --radius-2xl: 1.25rem;
  }
}

@layer base {
  /* The page is Alpenglow's page colour, a shade lighter than autobrr's grey,
     so white cards sit on it as they do in Lodestar. */
  .bg-color {
    background-color: var(--ag-page);
  }

  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Page titles in Plus Jakarta Sans, as in qui and Lodestar. */
  h1,
  h2 {
    font-family: var(--ag-display);
  }

  /* Focus rings are the focus-ring colour, never the browser's blue. autobrr
     draws its own rings with utility classes, which still win over this. */
  :focus-visible {
    outline-color: var(--ag-focus-ring);
  }

  ::selection {
    background-color: var(--ag-selection);
    color: var(--ag-selection-text);
  }
}

/* In dark mode autobrr dims its delete buttons to a deep red that brightens
   on hover. In Dusk that deep red is the error message box's background, so
   they take the palette's danger fill instead, as in qui, and hover to
   danger-hover. :where keeps these below autobrr's hover classes. */
@layer utilities {
  :where(.dark) .dark\:bg-red-900.text-white,
  :where(.dark) .dark\:bg-red-800.text-white {
    background-color: #d22d36;
  }
  :where(.dark) .dark\:hover\:bg-red-900.text-white:hover {
    background-color: #b91b28;
  }
  /* Dawn's danger text is 4.4:1 on the logs page's tinted pane, so errors
     there take the palette's deeper red (red dark-1). */
  html:not(.dark) .bg-gray-100 .text-red-500 {
    color: #a21921;
  }
}

/* autobrr's bunny, in raspberry instead of blue. The logo is inline SVG with
   its colours as attributes, which any CSS rule overrides. */
svg [fill="#DFF0FE" i] {
  fill: var(--ag-logo-fill);
}
svg [stroke="#4788C7" i] {
  stroke: var(--ag-logo-ink);
}
svg [fill="#4788C7" i] {
  fill: var(--ag-logo-ink);
}

/* The multi-select dropdowns (react-multi-select-component) take their
   colours from variables that autobrr sets with !important in its utilities
   layer. An !important rule in an earlier layer beats that, so these are in
   base: the hover and selected rows as Alpenglow's hover and muted, and
   inputs' 8px corners. colors.css covers the rest. */
@layer base {
  html:not(.dark) .rmsc {
    --rmsc-hover: #f6e9ef !important;
    --rmsc-radius: 0.5rem !important;
  }
  html.dark .rmsc {
    --rmsc-hover: #332738 !important;
    --rmsc-selected: #2e2433 !important;
    --rmsc-radius: 0.5rem !important;
  }
}

/* ------------------------------------------------------------ sign-in page
 * autobrr's sign-in page is a centred column. Alpenglow's are split: the
 * column on one side and the Haleakala photo on the other, with pill
 * buttons. Below 768px only the column shows.
 */
#root .min-h-full.flex-1.flex-col.justify-center > div:first-child > svg {
  box-sizing: content-box;
  padding: 0.75rem;
  border: 1px solid var(--ag-border);
  border-radius: 14px;
  background: var(--ag-surface);
}
#root .min-h-full.flex-1.flex-col.justify-center > div:first-child > h2 {
  font-family: var(--ag-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ag-text);
}
/* The heading reads "Sign in to autobrr", as Alpenglow's sign-in pages do.
   autobrr's own text ("autobrr") stays for screen readers. */
#root .min-h-full.flex-1.flex-col.justify-center > div:first-child > h2 {
  font-size: 0;
}
#root .min-h-full.flex-1.flex-col.justify-center > div:first-child > h2::after {
  content: "Sign in to autobrr";
  content: "Sign in to autobrr" / "";
  font-size: 1.5rem;
  line-height: 2rem;
}

@media (min-width: 768px) {
  #root .min-h-full.flex-1.flex-col.justify-center {
    min-height: 100vh;
    padding-right: 50%;
  }
  #root .min-h-full.flex-1.flex-col.justify-center::after {
    content: "";
    position: fixed;
    inset: 0 0 0 50%;
    background: url("haleakala.jpg") right center / cover no-repeat;
  }
}

/* The password form's button, and the Lodestar (OpenID Connect) button, as
   pills. When both show, Lodestar is the primary action: filled, and the
   password button outlined. */
#root .min-h-full.flex-1.flex-col.justify-center button[type="submit"],
#root .min-h-full.flex-1.flex-col.justify-center button[type="button"]:has(> svg + span) {
  border-radius: 9999px;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
#root .min-h-full.flex-1.flex-col.justify-center button[type="button"]:has(> svg + span) {
  border-color: transparent;
  background-color: var(--ag-accent);
  color: var(--ag-on-accent);
}
#root .min-h-full.flex-1.flex-col.justify-center button[type="button"]:has(> svg + span):hover {
  background-color: var(--ag-accent-hover);
}
#root .min-h-full.flex-1.flex-col.justify-center button[type="button"]:has(> svg + span):active {
  background-color: var(--ag-accent-active);
}
/* autobrr labels the button "OpenID Connect"; the homelab's provider is
   Lodestar. The label shows "Sign in with Lodestar", and autobrr's own text
   stays for screen readers (the shown label is marked decorative). */
#root .min-h-full.flex-1.flex-col.justify-center button[type="button"]:has(> svg + span) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#root .min-h-full.flex-1.flex-col.justify-center button[type="button"]:has(> svg + span)::after {
  content: "Sign in with Lodestar";
  content: "Sign in with Lodestar" / "";
}
#root .min-h-full.flex-1.flex-col.justify-center:has(button[type="button"] > svg + span) button[type="submit"] {
  border-color: var(--ag-border);
  background-color: transparent;
  color: var(--ag-text);
}
#root .min-h-full.flex-1.flex-col.justify-center:has(button[type="button"] > svg + span) button[type="submit"]:hover {
  background-color: #f6e9ef;
}
.dark #root .min-h-full.flex-1.flex-col.justify-center:has(button[type="button"] > svg + span) button[type="submit"]:hover {
  background-color: #332738;
}