/* ==========================================================================
   Buttons: one system for Bootstrap .btn, .ds-btn and the daisyUI .btn used
   on the library and gallery pages.

   Variants   primary (green) · secondary (ochre, .btn-warning) · dark (black,
              .btn-black) · outline (.btn-outline*, .ds-btn--ghost) ·
              text (.btn-ghost: no border, for low-emphasis actions)
   Sizes      xs 30px · sm 36px · default 44px · lg 52px
   Shape      8px radius; round icon buttons (.btn-circle, .rounded-circle)
   Type       WWF display face, uppercase

   Every selector starts with :is(body, #library-app, #gallery-app). The ID
   gives all rules the same specificity, so they beat Bootstrap, the inline
   legacy CSS and the daisyUI isolation reset (daisy-scope.css) without
   !important, and the order below decides between variants.
   ========================================================================== */

:root {
  --ds-btn-h: 44px;
  --ds-btn-h-xs: 30px;
  --ds-btn-h-sm: 36px;
  --ds-btn-h-lg: 52px;
}

/* ---------- Base ---------- */
:is(body, #library-app, #gallery-app) .btn:not([data-toggle="collapse"]),
:is(body, #library-app, #gallery-app) .ds-btn {
  --ds-btn-bg: var(--ds-green-600);
  --ds-btn-bg-hover: var(--ds-green-700);
  --ds-btn-fg: #fff;
  --ds-btn-fg-hover: #fff;
  --ds-btn-border: var(--ds-btn-bg);
  --ds-btn-border-hover: var(--ds-btn-bg-hover);
  --ds-btn-height: var(--ds-btn-h);

  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  box-sizing: border-box; min-height: var(--ds-btn-height); height: auto;
  padding: 0 var(--ds-space-4);
  border: 2px solid var(--ds-btn-border); border-radius: var(--ds-radius-md);
  background: var(--ds-btn-bg); background-image: none; color: var(--ds-btn-fg);
  font-family: var(--ds-font-display); font-size: var(--ds-fs-md); font-weight: 400;
  line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-align: center; text-decoration: none;
  box-shadow: none; cursor: pointer;
  transition: background-color var(--ds-dur-fast) var(--ds-ease), border-color var(--ds-dur-fast) var(--ds-ease),
              color var(--ds-dur-fast) var(--ds-ease), transform var(--ds-dur-fast) var(--ds-ease);
}
:is(body, #library-app, #gallery-app) .btn:not([data-toggle="collapse"]):hover,
:is(body, #library-app, #gallery-app) .btn:not([data-toggle="collapse"]):focus-visible,
:is(body, #library-app, #gallery-app) .ds-btn:hover,
:is(body, #library-app, #gallery-app) .ds-btn:focus-visible {
  background: var(--ds-btn-bg-hover); color: var(--ds-btn-fg-hover); border-color: var(--ds-btn-border-hover);
  text-decoration: none; transform: none;
}
:is(body, #library-app, #gallery-app) .btn:not([data-toggle="collapse"]):focus-visible,
:is(body, #library-app, #gallery-app) .ds-btn:focus-visible {
  outline: 3px solid var(--wwf-focus); outline-offset: 2px;
}
:is(body, #library-app, #gallery-app) .btn:not([data-toggle="collapse"]):active:not(:disabled):not(.disabled),
:is(body, #library-app, #gallery-app) .ds-btn:active:not(:disabled) { transform: scale(.98); }
:is(body, #library-app, #gallery-app) .btn:disabled,
:is(body, #library-app, #gallery-app) .btn.disabled,
:is(body, #library-app, #gallery-app) .btn.btn-disabled,
:is(body, #library-app, #gallery-app) .ds-btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ---------- Variants ---------- */
:is(body, #library-app, #gallery-app) .btn.btn-warning,
:is(body, #library-app, #gallery-app) .ds-btn.ds-btn--secondary {
  --ds-btn-bg: var(--ds-ochre-600); --ds-btn-bg-hover: var(--ds-ochre-700);
}
:is(body, #library-app, #gallery-app) .btn.btn-black,
:is(body, #library-app, #gallery-app) .btn.btn-dark,
:is(body, #library-app, #gallery-app) .ds-btn.ds-btn--dark {
  --ds-btn-bg: #000; --ds-btn-bg-hover: #2b2b2b;
}
:is(body, #library-app, #gallery-app) .btn.btn-outline,
:is(body, #library-app, #gallery-app) .btn.btn-outline-success,
:is(body, #library-app, #gallery-app) .btn.btn-outline-primary,
:is(body, #library-app, #gallery-app) .ds-btn.ds-btn--ghost {
  --ds-btn-bg: transparent; --ds-btn-bg-hover: var(--ds-green-50);
  --ds-btn-fg: var(--ds-green-700); --ds-btn-fg-hover: var(--ds-green-800);
  --ds-btn-border: var(--ds-green-600); --ds-btn-border-hover: var(--ds-green-600);
}
:is(body, #library-app, #gallery-app) .btn.btn-ghost {
  --ds-btn-bg: transparent; --ds-btn-bg-hover: var(--ds-green-50);
  --ds-btn-fg: var(--ds-green-700); --ds-btn-fg-hover: var(--ds-green-800);
  --ds-btn-border: transparent; --ds-btn-border-hover: transparent;
}

/* ---------- Sizes ---------- */
:is(body, #library-app, #gallery-app) .btn.btn-xs { --ds-btn-height: var(--ds-btn-h-xs); padding: 0 var(--ds-space-2); font-size: .9rem; }
:is(body, #library-app, #gallery-app) .btn.btn-sm { --ds-btn-height: var(--ds-btn-h-sm); padding: 0 var(--ds-space-3); font-size: 1rem; }
:is(body, #library-app, #gallery-app) .btn.btn-lg { --ds-btn-height: var(--ds-btn-h-lg); padding: 0 var(--ds-space-5); font-size: 1.25rem; }

/* ---------- Round icon buttons ---------- */
:is(body, #library-app, #gallery-app) .btn.btn-circle,
:is(body, #library-app, #gallery-app) .btn.rounded-circle {
  width: var(--ds-btn-height); padding: 0; border-radius: 50%;
}
:is(body, #library-app, #gallery-app) .btn.btn-circle.btn-ghost {
  --ds-btn-fg: var(--ds-ink-900); --ds-btn-fg-hover: var(--ds-ink-900);
  --ds-btn-border: transparent; --ds-btn-border-hover: transparent; --ds-btn-bg-hover: rgba(0, 0, 0, .08);
}

/* ---------- Segmented groups (daisyUI .join) ---------- */
:is(body, #library-app, #gallery-app) .btn.join-item { border-radius: 0; }
:is(body, #library-app, #gallery-app) .join > .btn.join-item:first-child { border-start-start-radius: var(--ds-radius-md); border-end-start-radius: var(--ds-radius-md); }
:is(body, #library-app, #gallery-app) .join > .btn.join-item:last-child { border-start-end-radius: var(--ds-radius-md); border-end-end-radius: var(--ds-radius-md); }

/* ---------- Gallery: controls that sit on a photo ---------- */
#gallery-app .btn.btn-ghost.text-white,
#gallery-app .btn.btn-circle.text-white {
  --ds-btn-bg: rgba(0, 0, 0, .45); --ds-btn-bg-hover: rgba(255, 255, 255, .25);
  --ds-btn-fg: #fff; --ds-btn-fg-hover: #fff;
  --ds-btn-border: transparent; --ds-btn-border-hover: transparent;
}

/* ---------- Busy state (ds.js sets aria-busy on submit) ---------- */
:is(body, #library-app, #gallery-app) .ds-btn[aria-busy="true"] { pointer-events: none; opacity: .8; }
:is(body, #library-app, #gallery-app) .ds-btn[aria-busy="true"]::before {
  content: ""; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: ds-spin .7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  :is(body, #library-app, #gallery-app) .btn, :is(body, #library-app, #gallery-app) .ds-btn { transition: none; }
}

/* The hidden attribute must win over the button's own display (used by the dashboard full-screen button). */
:is(body, #library-app, #gallery-app) .ds-btn[hidden] { display: none; }