/* ============================================================
   Fluent / Windows — component styles
   Interactive states (hover/active/focus) for the React primitives.
   Components render semantic classNames; these rules ship to consumers
   via styles.css. All values come from the Fluent token layer.
   ============================================================ */

/* ---------------- Button ---------------- */
.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: var(--control-height);
  padding: 5px 11px 6px;
  border-radius: var(--radius-control);
  border: var(--stroke-width) solid var(--stroke-control-default);
  border-bottom-color: rgba(0, 0, 0, 0.16);
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--font-weight-regular);
  cursor: default;
  user-select: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) var(--motion-ease-standard);
}
.fl-btn:focus-visible {
  outline: var(--focus-stroke-width) solid var(--focus-stroke-outer);
  outline-offset: 1px;
  box-shadow: 0 0 0 1px var(--focus-stroke-inner);
}
.fl-btn .fl-btn__icon { font-size: var(--icon-size); line-height: 1; }

/* Standard */
.fl-btn--standard {
  background: var(--fill-control-default);
  color: var(--text-primary);
}
.fl-btn--standard:hover { background: var(--fill-control-secondary); }
.fl-btn--standard:active {
  background: var(--fill-control-tertiary);
  color: var(--text-secondary);
  border-bottom-color: var(--stroke-control-default);
}

/* Accent */
.fl-btn--accent {
  background: var(--accent-default);
  color: var(--text-on-accent-primary);
  border-color: var(--stroke-control-on-accent);
  border-bottom-color: rgba(0, 0, 0, 0.4);
}
.fl-btn--accent:hover { background: var(--accent-secondary); }
.fl-btn--accent:active {
  background: var(--accent-tertiary);
  color: var(--text-on-accent-secondary);
  border-bottom-color: var(--stroke-control-on-accent);
}

/* Subtle / ghost */
.fl-btn--subtle {
  background: transparent;
  color: var(--text-primary);
  border-color: transparent;
}
.fl-btn--subtle:hover { background: var(--fill-subtle-secondary); }
.fl-btn--subtle:active {
  background: var(--fill-subtle-tertiary);
  color: var(--text-secondary);
}

/* Hyperlink */
.fl-btn--hyperlink {
  background: transparent;
  color: var(--accent-default);
  border-color: transparent;
  min-height: auto;
  padding: 5px 8px;
}
.fl-btn--hyperlink:hover { background: var(--fill-subtle-secondary); }
.fl-btn--hyperlink:active { color: var(--accent-tertiary); }

/* Sizes */
.fl-btn--sm { min-height: var(--control-height-sm); padding: 1px 11px 2px; }

/* Icon-only */
.fl-btn--icon { padding: 5px; min-height: var(--control-height); aspect-ratio: 1; }
.fl-btn--icon.fl-btn--sm { aspect-ratio: 1; }

/* Disabled */
.fl-btn:disabled,
.fl-btn[aria-disabled="true"] {
  pointer-events: none;
  border-color: var(--stroke-control-default);
  border-bottom-color: var(--stroke-control-default);
}
.fl-btn--standard:disabled { background: var(--fill-control-disabled); color: var(--text-disabled); }
.fl-btn--accent:disabled { background: var(--accent-disabled); color: var(--text-on-accent-disabled); border-color: transparent; }
.fl-btn--subtle:disabled,
.fl-btn--hyperlink:disabled { background: transparent; color: var(--text-disabled); }

/* ---------------- Text input ---------------- */
.fl-field { display: inline-flex; flex-direction: column; gap: var(--space-2); }
.fl-field__label {
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
}
.fl-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: var(--control-height);
  padding: 0 11px;
  background: var(--fill-control-default);
  border: var(--stroke-width) solid var(--stroke-control-default);
  border-bottom: var(--stroke-width) solid var(--stroke-surface);
  border-radius: var(--radius-control);
  transition: border-color var(--motion-fast) var(--motion-ease-standard);
}
.fl-input-wrap:hover { background: var(--fill-control-secondary); }
.fl-input-wrap:focus-within {
  background: var(--bg-layer-alt);
  border-bottom: 2px solid var(--accent-default);
  padding-bottom: 0;
}
.fl-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
  min-width: 0;
  padding: 5px 0 6px;
}
.fl-input::placeholder { color: var(--text-secondary); }
.fl-input-wrap--disabled {
  background: var(--fill-control-disabled);
  border-color: var(--stroke-control-default);
}
.fl-input-wrap--disabled .fl-input { color: var(--text-disabled); }
.fl-input-wrap__icon { font-size: var(--icon-size); color: var(--text-secondary); }

/* ---------------- Checkbox ---------------- */
.fl-check { display: inline-flex; align-items: center; gap: var(--space-3); cursor: default; user-select: none; }
.fl-check__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: var(--stroke-width) solid var(--stroke-surface);
  border-radius: var(--radius-control);
  background: var(--fill-control-default);
  color: var(--text-on-accent-primary);
  font-size: 12px;
  transition: background-color var(--motion-fast) var(--motion-ease-standard);
}
.fl-check:hover .fl-check__box { background: var(--fill-control-secondary); }
.fl-check__glyph { opacity: 0; line-height: 1; }
.fl-check--checked .fl-check__box {
  background: var(--accent-default);
  border-color: var(--accent-default);
}
.fl-check--checked .fl-check__glyph { opacity: 1; }
.fl-check--checked:hover .fl-check__box { background: var(--accent-secondary); }
.fl-check__label {
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
}
.fl-check--disabled { pointer-events: none; }
.fl-check--disabled .fl-check__box { background: var(--fill-control-disabled); border-color: var(--stroke-control-default); }
.fl-check--disabled .fl-check__label { color: var(--text-disabled); }

/* ---------------- Radio ---------------- */
.fl-radio { display: inline-flex; align-items: center; gap: var(--space-3); cursor: default; user-select: none; }
.fl-radio__dot {
  position: relative;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: var(--stroke-width) solid var(--stroke-surface);
  border-radius: var(--radius-circle);
  background: var(--fill-control-default);
  transition: background-color var(--motion-fast) var(--motion-ease-standard);
}
.fl-radio:hover .fl-radio__dot { background: var(--fill-control-secondary); }
.fl-radio__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-radius: var(--radius-circle);
  background: var(--text-on-accent-primary);
  transition: width var(--motion-fast) var(--motion-ease), height var(--motion-fast) var(--motion-ease);
}
.fl-radio--checked .fl-radio__dot {
  background: var(--accent-default);
  border-color: var(--accent-default);
}
.fl-radio--checked .fl-radio__dot::after { width: 8px; height: 8px; }
.fl-radio--checked:hover .fl-radio__dot::after { width: 10px; height: 10px; }
.fl-radio__label {
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
}
.fl-radio--disabled { pointer-events: none; }
.fl-radio--disabled .fl-radio__label { color: var(--text-disabled); }

/* ---------------- Toggle switch ---------------- */
.fl-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: default; user-select: none; }
.fl-switch__track {
  position: relative;
  width: 40px;
  height: 20px;
  box-sizing: border-box;
  border-radius: var(--radius-circle);
  border: var(--stroke-width) solid var(--text-secondary);
  background: var(--fill-control-default);
  transition: background-color var(--motion-normal) var(--motion-ease-standard);
}
.fl-switch:hover .fl-switch__track { background: var(--fill-control-secondary); }
.fl-switch__thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-circle);
  background: var(--text-secondary);
  transform: translateY(-50%);
  transition: left var(--motion-normal) var(--motion-ease), width var(--motion-fast) var(--motion-ease), background-color var(--motion-normal) var(--motion-ease-standard);
}
.fl-switch:hover .fl-switch__thumb { width: 14px; }
.fl-switch--on .fl-switch__track {
  background: var(--accent-default);
  border-color: var(--accent-default);
}
.fl-switch--on .fl-switch__thumb {
  left: 21px;
  background: var(--text-on-accent-primary);
}
.fl-switch--on:hover .fl-switch__track { background: var(--accent-secondary); }
.fl-switch--on:hover .fl-switch__thumb { left: 19px; }
.fl-switch__label {
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
}
.fl-switch--disabled { pointer-events: none; opacity: 1; }
.fl-switch--disabled .fl-switch__track { border-color: var(--text-disabled); background: var(--fill-control-disabled); }
.fl-switch--disabled .fl-switch__thumb { background: var(--text-disabled); }
.fl-switch--disabled .fl-switch__label { color: var(--text-disabled); }

/* ---------------- Dropdown / Select ---------------- */
.fl-dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: var(--control-height);
  min-width: 120px;
  padding: 5px 11px 6px;
  background: var(--fill-control-default);
  border: var(--stroke-width) solid var(--stroke-control-default);
  border-bottom-color: var(--stroke-surface);
  border-radius: var(--radius-control);
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
  cursor: default;
  user-select: none;
}
.fl-dropdown:hover { background: var(--fill-control-secondary); }
.fl-dropdown:active { background: var(--fill-control-tertiary); color: var(--text-secondary); }
.fl-dropdown__chevron { font-size: 12px; color: var(--text-secondary); }
.fl-dropdown--disabled { pointer-events: none; background: var(--fill-control-disabled); color: var(--text-disabled); }

.fl-menu {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--bg-layer-alt);
  border: var(--stroke-width) solid var(--stroke-surface);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-flyout);
  min-width: 160px;
}
.fl-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 7px 11px;
  border-radius: var(--radius-control);
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-primary);
  cursor: default;
}
.fl-menu__item:hover { background: var(--fill-subtle-secondary); }
.fl-menu__item--selected { background: var(--fill-subtle-secondary); }
.fl-menu__item--selected::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  height: 16px;
  border-radius: var(--radius-circle);
  background: var(--accent-default);
}
.fl-menu__item { position: relative; }

/* ---------------- Badge ---------------- */
.fl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-circle);
  font-family: var(--font-family-base);
  font-size: var(--type-caption-size);
  line-height: 1;
  font-weight: var(--font-weight-semibold);
}
.fl-badge--accent { background: var(--accent-default); color: var(--text-on-accent-primary); }
.fl-badge--neutral { background: var(--grey-44); color: var(--grey-white); }
.fl-badge--success { background: var(--status-success); color: #fff; }
.fl-badge--caution { background: var(--status-caution); color: #fff; }
.fl-badge--critical { background: var(--status-critical); color: #fff; }
.fl-badge--dot { min-width: 4px; width: 4px; height: 4px; padding: 0; }

/* ---------------- Card ---------------- */
.fl-card {
  box-sizing: border-box;
  background: var(--bg-card);
  border: var(--stroke-width) solid var(--stroke-control-default);
  border-radius: var(--radius-overlay);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  color: var(--text-primary);
}
.fl-card--clickable { cursor: default; transition: background-color var(--motion-fast) var(--motion-ease-standard); }
.fl-card--clickable:hover { background: var(--bg-card-secondary); }
.fl-card--clickable:active { background: var(--fill-control-tertiary); }

/* ---------------- Tabs ---------------- */
.fl-tabs { display: flex; gap: var(--space-2); border-bottom: var(--stroke-width) solid var(--stroke-divider); }
.fl-tab {
  position: relative;
  padding: 8px 12px 12px;
  background: transparent;
  border: none;
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  color: var(--text-secondary);
  cursor: default;
  border-radius: var(--radius-control) var(--radius-control) 0 0;
}
.fl-tab:hover { color: var(--text-primary); background: var(--fill-subtle-secondary); }
.fl-tab--active { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.fl-tab--active::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2.5px;
  border-radius: var(--radius-circle);
  background: var(--accent-default);
}

/* ---------------- Tooltip ---------------- */
.fl-tooltip {
  display: inline-block;
  max-width: 320px;
  padding: 5px 8px 7px;
  background: var(--bg-layer-alt);
  border: var(--stroke-width) solid var(--stroke-surface);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-tooltip);
  font-family: var(--font-family-base);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-line);
  color: var(--text-primary);
}

/* ---------------- Dialog ---------------- */
.fl-dialog-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-smoke);
  z-index: 1000;
}
.fl-dialog {
  box-sizing: border-box;
  width: 100%;
  max-width: 448px;
  background: var(--bg-solid-base);
  border: var(--stroke-width) solid var(--stroke-surface);
  border-radius: var(--radius-dialog);
  box-shadow: var(--shadow-dialog);
  overflow: hidden;
}
.fl-dialog__body { padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.fl-dialog__title {
  font-family: var(--font-family-display);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-line);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.fl-dialog__text { color: var(--text-primary); }
.fl-dialog__footer {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-7);
  padding-top: 0;
}
.fl-dialog__footer > * { flex: 1; }

/* ---------------- Link ---------------- */
.fl-link {
  color: var(--accent-default);
  font-family: var(--font-family-base);
  text-decoration: none;
  cursor: default;
  border-radius: 2px;
}
.fl-link:hover { text-decoration: underline; }
.fl-link:active { color: var(--accent-tertiary); }

/* ---------------- Avatar ---------------- */
.fl-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--accent-default);
  color: var(--text-on-accent-primary);
  font-family: var(--font-family-base);
  font-size: var(--type-body-size);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  user-select: none;
}
.fl-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------- ProgressBar ---------------- */
.fl-progress {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: var(--radius-circle);
  background: var(--fill-control-tertiary);
  overflow: hidden;
}
.fl-progress__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: var(--radius-circle);
  background: var(--accent-default);
}