/* These styles are generated from project.scss. */

/* ── BRAND ─────────────────────────────────────────────────────────────────
   Greens sampled from static/images/logo.png — the fotomark.pl wordmark is a
   gradient running from #0a5502 (bottom) to #15a90a (top).

   The brightest logo green only reaches 3.2:1 against white text, so --brand
   is the slightly deeper #0f8a06 (4.5:1, WCAG AA) for filled surfaces, and
   the bright green is kept as --brand-light for borders/focus/accents.

   Bootstrap comes from the CDN and its own variants (primary, success, …) are
   left untouched: `brand` is an ADDITIONAL variant, built out of the same
   --bs-btn-* custom properties Bootstrap 5.2 uses, so .btn-brand inherits all
   the sizing, focus and disabled behaviour of .btn. Use these classes for
   brand identity; keep success/danger/warning for status meaning. */
:root {
  --brand: #0f8a06;
  --brand-rgb: 15, 138, 6;
  --brand-deep: #0d7a05;
  --brand-dark: #0d6b04;
  --brand-darker: #0a5502;
  --brand-light: #13a709;
  /* Desaturated green for small metadata icons. L* 47 vs Bootstrap's grey
     text-secondary L* 49, so it carries the same visual weight and keeps the
     hierarchy below .text-brand — greenish, not a brand accent. 5:1 on white. */
  --brand-muted: #4f7a4a;
  --brand-subtle: rgba(15, 138, 6, 0.08);
}

.btn-brand {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-darker);
  --bs-btn-active-border-color: var(--brand-darker);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

.btn-outline-brand {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-dark);
  --bs-btn-active-border-color: var(--brand-dark);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: var(--brand-rgb);
}

/* Colour utilities mirroring Bootstrap's naming, so `bg-brand bg-opacity-10`
   works as usual. Opacity is read with a var() fallback, never declared: this
   file loads after Bootstrap, so declaring --bs-bg-opacity here would beat
   every .bg-opacity-* utility and pin the colour to full strength. */
.text-brand {
  color: rgba(var(--brand-rgb), var(--bs-text-opacity, 1)) !important;
}

.text-brand-muted {
  color: var(--brand-muted) !important;
}

.bg-brand {
  background-color: rgba(var(--brand-rgb), var(--bs-bg-opacity, 1)) !important;
}

/* Card headers and other filled bars that used the grey bg-secondary.
   One notch deeper than --brand (ΔL* ≈ 5.6) so a header and a .btn-brand
   sitting in the same card read as related but not identical — the button
   stays the lighter, more saturated element and keeps the eye. 5.5:1 with
   white text. */
.bg-brand-deep {
  background-color: var(--brand-deep) !important;
}

/* Darkest point of the logo gradient. 9:1 against white text. */
.bg-brand-dark {
  background-color: var(--brand-darker) !important;
}

/* Tinted panel — icon circles, callout boxes, the order total. Named after
   Bootstrap 5.3's `bg-primary-subtle` so it upgrades cleanly. */
.bg-brand-subtle {
  background-color: var(--brand-subtle) !important;
}

.border-brand-subtle {
  border-color: rgba(var(--brand-rgb), 0.25) !important;
}

.border-brand {
  border-color: rgba(var(--brand-rgb), var(--bs-border-opacity, 1)) !important;
}

.link-brand {
  color: var(--brand);
}

.link-brand:hover,
.link-brand:focus {
  color: var(--brand-dark);
}

/* Secondary links that are still real navigation — top-bar contact, footer.
   Bootstrap's `text-muted` is the colour of disabled text; these read as live
   links instead. Same base colour as .nav-brand .nav-link. */
.link-quiet {
  color: #3a4148;
  transition: color 0.15s ease;
}

.link-quiet:hover,
.link-quiet:focus-visible {
  color: var(--brand-dark);
}

/* Input focus + checked states. These are built-in Bootstrap states rather
   than variants, so there is no new class to add — they are restated here so
   form controls pick up the brand instead of Bootstrap's blue (orders.css
   previously did the same thing with a teal). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--brand-light);
  box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* ── BRAND NAV ─────────────────────────────────────────────────────────────
   Opt-in class on a .navbar-nav (Bootstrap's own nav styles are untouched).
   Bootstrap's navbar-light links are rgba(0,0,0,.55), which reads as faded;
   these are a shade darker and slightly heavier, with a green underline that
   wipes in on hover and stays put on the current page. The link is
   inline-block so the underline hugs the label instead of the full row when
   the navbar is collapsed on mobile. */
.nav-brand .nav-link {
  color: #3a4148;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: inline-block;
  position: relative;
  padding-bottom: 0.4rem;
}

.nav-brand .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--brand);
  transform: scaleX(0);
  transition: transform 0.18s ease;
}

.nav-brand .nav-link:hover,
.nav-brand .nav-link:focus-visible {
  color: var(--brand-dark);
}

.nav-brand .nav-link:hover::after,
.nav-brand .nav-link:focus-visible::after,
.nav-brand .nav-link.active::after {
  transform: scaleX(1);
}

.nav-brand .nav-link.active {
  color: var(--brand-dark);
  font-weight: 600;
}

/* Respect users who ask for less motion — show the underline, skip the wipe. */
@media (prefers-reduced-motion: reduce) {
  .nav-brand .nav-link::after {
    transition: none;
  }
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/* Service-type chooser cards on the photo upload page. Bootstrap has no
   parent-state utility for "a card whose radio is checked", so the checked
   highlight is a small custom rule keyed off :has(). */
.service-option {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.service-option:has(input:checked) {
  border-color: var(--brand) !important;
  background-color: var(--brand-subtle);
}

/* ── UPLOAD / DROP ZONE ────────────────────────────────────────────────────
   Shared by both pickers; lives here because photo_upload.html doesn't load
   orders.css. Visual only — each app keeps its own JS, and only orders adds
   .cursor-pointer. Border is a plain shorthand, not `.border border-2`: that
   utility's !important beat the hover rule, `border-dashed` was never a
   Bootstrap utility, and staying un-!important lets .border-danger win. */
.upload-area {
  border: 2px dashed #ced4da;
  background-color: #fafafa;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.upload-area:hover {
  background-color: #f4f4f4;
  border-color: var(--brand);
}

/* Drag-over. Both apps add .bg-light, whose grey would otherwise win on
   !important — restate it as a brand tint at higher specificity. */
.upload-area.bg-light {
  background-color: rgba(var(--brand-rgb), 0.07) !important;
  border-color: var(--brand) !important;
}

/* Only the cloud glyph floats — scoped to its own class so the Browse button
   and file-preview icons in the photo_docs zone stay still. */
.upload-area__icon {
  animation: float 3s ease infinite;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .upload-area__icon {
    animation: none;
  }
}