/* =========================================================================
   Blue Sky — Shared Controls (Fable 5 component layer)
   -------------------------------------------------------------------------
   Consumes the `--bss-*` engine from bss-tokens.css. Opt-in: nothing here
   restyles module-specific skins unless markup uses `.bss-*` classes. The
   only global rules are the focus ring and the native-select normalizer,
   both of which are accessibility affordances.

   Every interactive control implements the full state set:
     rest · hover · active · focus-visible · disabled · loading ·
     invalid · readonly
   ========================================================================= */

/* =========================================================================
   Global focus affordance
   ========================================================================= */
:focus-visible {
  outline: var(--bss-focus-width, 3px) solid var(--bss-primary, #1f55bd);
  outline-offset: var(--bss-focus-offset, 2px);
  border-radius: var(--bss-radius-2xs, 4px);
}

/* Pointer interactions should not paint a ring; keyboard always should. */
:focus:not(:focus-visible) {
  outline: none;
}

/* =========================================================================
   Global refinements
   -------------------------------------------------------------------------
   Element-level polish only — no layout, spacing or color of any existing
   component is altered. This layer ships on every page.
   ========================================================================= */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--bss-border-strong, #cdd6e3) transparent;
}

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

::selection {
  background: var(--bss-primary-muted, rgba(31, 85, 189, 0.22));
  color: var(--bss-text, #10151f);
}

/* Anchor targets should not hide beneath sticky chrome. */
:target {
  scroll-margin-block-start: 6rem;
}

/* Touch surfaces should not flash the platform highlight rectangle. */
a,
button,
[role="button"],
summary {
  -webkit-tap-highlight-color: transparent;
}

/* Slim, theme-aware scrollbars on engines without `scrollbar-color`. */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: var(--bss-radius-pill, 999px);
  background-clip: content-box;
  background-color: var(--bss-border-strong, #cdd6e3);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--bss-text-faint, #7c8697);
}

/* =========================================================================
   Button
   -------------------------------------------------------------------------
   Canonical: .bss-btn*  |  Live markup alias: .btn / .btn.primary / …
   ========================================================================= */
.btn,
.bss-btn,
.bss-button {
  --_btn-bg: transparent;
  --_btn-fg: var(--bss-text, #10151f);
  --_btn-border: transparent;
  --_btn-shadow: none;
  --_btn-lift: -1px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bss-space-xs, 0.5rem);
  min-height: var(--bss-control-md, 44px);
  padding: 0.7rem 1.15rem;
  border: 1px solid var(--_btn-border);
  border-radius: var(--bss-radius-pill, 999px);
  background: var(--_btn-bg);
  color: var(--_btn-fg);
  box-shadow: var(--_btn-shadow);
  font: inherit;
  font-weight: var(--bss-weight-bold, 700);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--bss-dur, 220ms) var(--bss-ease, ease),
    box-shadow var(--bss-dur, 220ms) var(--bss-ease, ease),
    background-color var(--bss-dur-fast, 150ms) ease,
    border-color var(--bss-dur-fast, 150ms) ease,
    color var(--bss-dur-fast, 150ms) ease;
}

.btn:hover,
.bss-btn:hover,
.bss-button:hover {
  transform: translateY(var(--_btn-lift));
}

.btn:active,
.bss-btn:active,
.bss-button:active {
  transform: translateY(0) scale(0.985);
  transition-duration: var(--bss-dur-instant, 90ms);
}

.btn:disabled,
.bss-btn:disabled,
.bss-button:disabled,
.btn[aria-disabled="true"],
.bss-btn[aria-disabled="true"],
.bss-button[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* --- Variants ------------------------------------------------------------ */
.btn.primary,
.bss-btn-primary {
  --_btn-bg: var(--bss-primary, #1f55bd);
  --_btn-fg: var(--bss-on-primary, #fff);
  --_btn-shadow: var(--bss-shadow-primary, 0 10px 30px rgba(31, 85, 189, 0.26));
}

.btn.primary:hover,
.bss-btn-primary:hover {
  --_btn-bg: var(--bss-primary-hover, #1a459b);
}

.btn.primary:active,
.bss-btn-primary:active {
  --_btn-bg: var(--bss-primary-active, #17386f);
}

.bss-btn-brand {
  --_btn-bg: var(--bss-gradient-brand, linear-gradient(135deg, #2f6fed, #7a45e0));
  --_btn-fg: var(--bss-on-primary, #fff);
  --_btn-shadow: var(--bss-shadow-primary, 0 10px 30px rgba(31, 85, 189, 0.26));
  background-image: var(--bss-gradient-brand, linear-gradient(135deg, #2f6fed, #7a45e0));
}

.btn:not(.primary):not(.danger):not(.ghost),
.bss-btn-secondary {
  --_btn-fg: var(--bss-text, #10151f);
  --_btn-border: var(--bss-border-strong, #cdd6e3);
}

.btn:not(.primary):not(.danger):not(.ghost):hover,
.bss-btn-secondary:hover {
  --_btn-bg: var(--bss-primary-subtle, rgba(31, 85, 189, 0.05));
  --_btn-border: var(--bss-primary-muted, rgba(31, 85, 189, 0.22));
  --_btn-fg: var(--bss-primary, #1f55bd);
}

.btn.ghost,
.bss-btn-ghost {
  --_btn-fg: var(--bss-text-soft, #5b6472);
  --_btn-lift: 0px;
}

.bss-btn-ghost:hover {
  --_btn-bg: var(--bss-surface-muted, #eef2f8);
  --_btn-fg: var(--bss-text, #10151f);
}

.bss-btn-danger {
  --_btn-bg: var(--bss-danger, #b3303c);
  --_btn-fg: var(--bss-danger-contrast, #fff);
}

.bss-btn-danger:hover {
  --_btn-bg: var(--bss-danger, #b3303c);
  filter: brightness(0.92);
}

.bss-btn-success {
  --_btn-bg: var(--bss-success, #0f7a58);
  --_btn-fg: var(--bss-success-contrast, #fff);
}

/* --- Sizes ---------------------------------------------------------------- */
.bss-btn-sm {
  min-height: var(--bss-control-sm, 36px);
  padding: 0.45rem 0.85rem;
  font-size: var(--bss-text-sm, 0.875rem);
}

.bss-btn-lg {
  min-height: var(--bss-control-lg, 52px);
  padding: 0.9rem 1.6rem;
  font-size: var(--bss-text-lg, 1.1rem);
}

.bss-btn-block {
  display: flex;
  width: 100%;
}

.bss-btn-icon {
  width: var(--bss-control-md, 44px);
  min-width: var(--bss-control-md, 44px);
  padding: 0;
  border-radius: var(--bss-radius-pill, 999px);
}

/* --- Loading -------------------------------------------------------------- */
.bss-btn[data-loading="true"],
.bss-button[data-loading="true"] {
  color: transparent;
  pointer-events: none;
}

.bss-btn[data-loading="true"]::after,
.bss-button[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 1.05em;
  height: 1.05em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--_btn-fg);
  animation: bss-spin 640ms linear infinite;
}

@keyframes bss-spin {
  to { transform: rotate(360deg); }
}

/* =========================================================================
   Text inputs
   ========================================================================= */
.bss-input,
.bss-select,
.bss-textarea,
select.bss-select {
  width: 100%;
  min-height: var(--bss-control-md, 46px);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--bss-border, #e2e8f1);
  border-radius: var(--bss-radius-md, 16px);
  background: var(--bss-surface, #fff);
  color: var(--bss-text, #10151f);
  font: inherit;
  transition:
    border-color var(--bss-dur-fast, 150ms) ease,
    box-shadow var(--bss-dur-fast, 150ms) ease,
    background-color var(--bss-dur-fast, 150ms) ease;
}

.bss-input::placeholder,
.bss-textarea::placeholder {
  color: var(--bss-text-faint, #7c8697);
  opacity: 1;
}

.bss-input:hover:not(:disabled),
.bss-select:hover:not(:disabled),
.bss-textarea:hover:not(:disabled) {
  border-color: var(--bss-border-strong, #cdd6e3);
}

.bss-input:focus,
.bss-select:focus,
.bss-textarea:focus,
select.bss-select:focus {
  outline: none;
  border-color: var(--bss-primary, #1f55bd);
  box-shadow: var(--bss-focus-ring, 0 0 0 3px rgba(31, 85, 189, 0.45));
}

.bss-input:disabled,
.bss-select:disabled,
.bss-textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bss-surface-muted, #eef2f8);
}

.bss-input[readonly],
.bss-textarea[readonly] {
  background: var(--bss-surface-sunken, #eef2f8);
  color: var(--bss-text-soft, #5b6472);
}

.bss-input[aria-invalid="true"],
.bss-select[aria-invalid="true"],
.bss-textarea[aria-invalid="true"] {
  border-color: var(--bss-danger, #b3303c);
}

.bss-input[aria-invalid="true"]:focus,
.bss-select[aria-invalid="true"]:focus,
.bss-textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 var(--bss-focus-width, 3px) var(--bss-danger-soft, rgba(179, 48, 60, 0.3));
}

.bss-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--bss-leading-relaxed, 1.8);
}

/* =========================================================================
   Field scaffolding
   ========================================================================= */
.bss-field {
  display: grid;
  gap: var(--bss-space-2xs, 0.25rem);
}

.bss-label {
  color: var(--bss-text-soft, #5b6472);
  font-size: var(--bss-text-sm, 0.875rem);
  font-weight: var(--bss-weight-semibold, 600);
}

.bss-hint {
  color: var(--bss-text-faint, #7c8697);
  font-size: var(--bss-text-xs, 0.75rem);
}

.bss-error {
  color: var(--bss-danger, #b3303c);
  font-size: var(--bss-text-xs, 0.75rem);
  font-weight: var(--bss-weight-semibold, 600);
}

/* =========================================================================
   Switch
   ========================================================================= */
.bss-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 27px;
  border: 0;
  border-radius: var(--bss-radius-pill, 999px);
  background: var(--bss-border-strong, #cdd6e3);
  cursor: pointer;
  transition: background-color var(--bss-dur, 220ms) var(--bss-ease, ease);
}

.bss-switch::after {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--bss-white, #fff);
  box-shadow: var(--bss-shadow-xs, 0 1px 2px rgba(16, 24, 40, 0.06));
  transition: translate var(--bss-dur, 220ms) var(--bss-ease-spring, ease);
}

.bss-switch[aria-checked="true"],
.bss-switch:checked {
  background: var(--bss-primary, #1f55bd);
}

.bss-switch[aria-checked="true"]::after,
.bss-switch:checked::after {
  translate: 19px 0;
}

html[dir="rtl"] .bss-switch[aria-checked="true"]::after,
html[dir="rtl"] .bss-switch:checked::after,
[dir="rtl"] .bss-switch[aria-checked="true"]::after,
[dir="rtl"] .bss-switch:checked::after {
  translate: -19px 0;
}

.bss-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* =========================================================================
   Badge
   ========================================================================= */
.bss-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bss-space-2xs, 0.25rem);
  padding: 0.2rem 0.62rem;
  border: 1px solid transparent;
  border-radius: var(--bss-radius-pill, 999px);
  background: var(--bss-surface-muted, #eef2f8);
  color: var(--bss-text-soft, #5b6472);
  font-size: var(--bss-text-xs, 0.75rem);
  font-weight: var(--bss-weight-bold, 700);
  line-height: 1.6;
  white-space: nowrap;
}

.bss-badge-primary { background: var(--bss-primary-soft); color: var(--bss-primary); }
.bss-badge-success { background: var(--bss-success-soft); color: var(--bss-success); }
.bss-badge-warning { background: var(--bss-warning-soft); color: var(--bss-warning); }
.bss-badge-danger  { background: var(--bss-danger-soft);  color: var(--bss-danger); }
.bss-badge-info    { background: var(--bss-info-soft);    color: var(--bss-info); }

/* =========================================================================
   Card
   ========================================================================= */
.bss-card {
  padding: var(--bss-space-lg, 1.5rem);
  border: 1px solid var(--bss-border, #e2e8f1);
  border-radius: var(--bss-radius-lg, 22px);
  background: var(--bss-surface, #fff);
  box-shadow: var(--bss-shadow-sm);
}

.bss-card-glass {
  background: var(--bss-glass-bg);
  border-color: var(--bss-glass-border);
  backdrop-filter: var(--bss-glass-blur);
  -webkit-backdrop-filter: var(--bss-glass-blur);
}

.bss-card-interactive {
  transition:
    transform var(--bss-dur, 220ms) var(--bss-ease, ease),
    box-shadow var(--bss-dur, 220ms) var(--bss-ease, ease),
    border-color var(--bss-dur-fast, 150ms) ease;
}

.bss-card-interactive:hover {
  transform: translateY(-2px);
  border-color: var(--bss-primary-muted);
  box-shadow: var(--bss-shadow-md);
}

/* =========================================================================
   Skeleton
   ========================================================================= */
.bss-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--bss-radius-xs, 8px);
  background: var(--bss-surface-muted, #eef2f8);
}

.bss-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -100% 0;
  background: linear-gradient(90deg, transparent, var(--bss-glass-border), transparent);
  animation: bss-shimmer 1.4s infinite;
}

@keyframes bss-shimmer {
  to { translate: 100% 0; }
}

/* =========================================================================
   Native select normalizer (accessibility affordance, kept from Phase U2)
   ========================================================================= */
.field select:not([multiple]),
.form-grid select:not([multiple]),
.login-form select:not([multiple]),
.customer-form select:not([multiple]) {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(0.9rem + 4px) calc(50% - 2px),
    0.9rem calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-start: 2rem;
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .bss-btn,
  .bss-button,
  .bss-input,
  .bss-select,
  .bss-textarea,
  .bss-switch,
  .bss-switch::after,
  .bss-card-interactive {
    transition: none !important;
  }

  .bss-btn:hover,
  .bss-button:hover,
  .bss-card-interactive:hover {
    transform: none;
  }

  .bss-skeleton::after,
  .bss-btn[data-loading="true"]::after,
  .bss-button[data-loading="true"]::after {
    animation: none;
  }
}

/* =========================================================================
   Forced colors
   ========================================================================= */
@media (forced-colors: active) {
  .bss-btn,
  .bss-button,
  .bss-input,
  .bss-select,
  .bss-textarea,
  .bss-card {
    border: 1px solid ButtonBorder;
  }

  .bss-switch {
    border: 1px solid ButtonBorder;
  }
}