/*
 * MiniERP decorative layer ("fancy" visual polish) built strictly on top
 * of the semantic tokens in tokens.css. This file never introduces its
 * own color values — every rule below reads a `--mini-color-*` /
 * `--mini-gradient-*` custom property, so a future palette change in
 * tokens.css still only has one place to update. tokens.css stays the
 * semantic source of truth (what a color *means*); this file only adds
 * *how things look* (gradients, elevation, icon treatments) on top of it.
 *
 * Loaded right after tokens.css in layout.php, so cascade order always
 * puts this file's rules after the tokens it depends on.
 */

/* ---------------------------------------------------------------------
 * General elevation refinement (every page): a softer, slightly tinted
 * shadow on cards than the flat tokens.css `--mini-elevation-1`, using
 * `color-mix()` against the primary token so the tint always follows
 * the active palette instead of a hard-coded rgba() value.
 * ------------------------------------------------------------------- */
.card {
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--mini-color-primary) 8%, transparent),
    0 8px 24px -12px color-mix(in srgb, var(--mini-color-primary) 28%, transparent);
  transition: box-shadow 0.15s ease-in-out;
}

.card:hover {
  box-shadow:
    0 2px 4px color-mix(in srgb, var(--mini-color-primary) 10%, transparent),
    0 12px 32px -14px color-mix(in srgb, var(--mini-color-primary) 34%, transparent);
}

.btn-primary {
  box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--mini-color-primary) 45%, transparent);
}

/* ---------------------------------------------------------------------
 * Fancy locale switcher, shared between the authenticated navbar
 * (#locale-switcher in partials/nav.php) and the pre-auth login page
 * (.auth-locale-switcher in auth/login.php) so both look like the same
 * component family instead of default <select>/<a> chrome.
 * ------------------------------------------------------------------- */
#locale-switcher {
  background-color: color-mix(in srgb, var(--mini-color-primary-contrast) 18%, transparent);
  color: var(--mini-color-primary-contrast);
  border: 1px solid color-mix(in srgb, var(--mini-color-primary-contrast) 35%, transparent);
  border-radius: 999px;
  font-weight: 600;
}

#locale-switcher option {
  color: var(--mini-color-text);
}

.auth-locale-switcher {
  display: flex;
  gap: var(--mini-space-1);
  justify-content: center;
}

.auth-locale-switcher .auth-locale-link {
  display: inline-flex;
  align-items: center;
  gap: var(--mini-space-1);
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mini-color-primary-contrast) 40%, transparent);
  color: var(--mini-color-primary-contrast);
  /* Default weight 500, active 700 below: the active locale is never
   * signaled by color/fill alone, there is always a font-weight and
   * fill-vs-outline shape difference too. */
  font-weight: 500;
  font-size: 0.875rem;
  text-decoration: none;
}

.auth-locale-switcher .auth-locale-link:hover {
  background-color: color-mix(in srgb, var(--mini-color-primary-contrast) 15%, transparent);
}

.auth-locale-switcher .auth-locale-link.active {
  background-color: var(--mini-color-primary-contrast);
  color: var(--mini-color-primary);
  font-weight: 700;
}

/* ---------------------------------------------------------------------
 * Login page: full-page gradient backdrop (built only from the brand
 * gradient token) behind the centered card, a brand mark, and inline
 * SVG field icons. All icon SVGs use `currentColor` so they inherit
 * `color` from their wrapping element and follow the active palette
 * automatically -- no separate icon color token needed.
 *
 * The gradient/texture live on `body.auth-page` (set via layout.php's
 * `bodyClass`) rather than on a wrapper element inside the content area,
 * so they cover the *entire* viewport -- including the layout's own
 * `.container-fluid.py-4` padding -- instead of leaving a plain
 * surface-alt sliver above/below a centered wrapper.
 * ------------------------------------------------------------------- */
body.auth-page {
  min-height: 100vh;
  background: var(--mini-gradient-brand);
}

body.auth-page::before {
  /* Purely decorative texture (soft radial highlights), kept behind the
   * card and never over form text, so it cannot reduce readability. */
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--mini-color-primary-contrast) 16%, transparent) 0%, transparent 35%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--mini-color-primary-contrast) 12%, transparent) 0%, transparent 40%);
}

body.auth-page #main-content {
  position: relative;
  z-index: 1;
}

.auth-shell {
  min-height: calc(100vh - 2 * var(--mini-space-4));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--mini-space-4);
}

.auth-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--mini-space-3);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--mini-color-primary-contrast) 20%, transparent);
  color: var(--mini-color-primary-contrast);
}

/* The checkmark inside the brand-mark shield is colored via an authored
 * class (rather than an inline `stroke="var(...)"` presentation
 * attribute) so the custom-property reference is resolved by the CSS
 * engine, not by inconsistent cross-browser SVG-presentation-attribute
 * parsing of var(). */
.auth-brand-mark-accent {
  stroke: var(--mini-color-primary);
}

.auth-card {
  border: none;
  border-radius: calc(var(--mini-radius) * 1.5);
  box-shadow: 0 24px 48px -20px color-mix(in srgb, var(--mini-color-text) 35%, transparent);
}

.auth-field-icon-group .input-group-text {
  background-color: var(--mini-color-surface-alt);
  border-color: var(--mini-color-border);
  color: var(--mini-color-text-muted);
}

.auth-field-icon-group .form-control:focus {
  z-index: 3;
}