/* ============================================================
   components.css — UNIFIED BUTTON + ICON SYSTEM
   ------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for the way buttons and icons look.
   Must be loaded LAST in every HTML entry point so it wins the
   cascade over the historical, per-file button rules.

   Design language: "subdued glass 3D" — translucent raised
   surfaces with a soft top highlight + drop shadow for depth,
   a gentle lift on hover, a pressed-in feel on click, and
   muted role colours that differentiate function:

     primary  → muted blue   (the single strong call-to-action)
     secondary→ neutral glass (default action)
     ghost    → quiet / transparent (tertiary)
     danger   → muted red     (destructive)
     warning  → muted amber   (caution)
     success  → muted green   (confirm / positive)

   Geometry & colour come from the tokens defined in theme.css.

   NOTE ON SCOPE: selectors here are intentionally kept at low
   specificity (single class). The alternate body-class skins
   — body.theme-atlas, body.theme-command-center, body.ni-interface
   — override with higher specificity and keep their identity.
   ============================================================ */

/* ------------------------------------------------------------
   1. BASE — pill action buttons
   All action/CTA button classes share one surface.
   ------------------------------------------------------------ */
.btn,
.d-btn,
.settings-btn,
.context-button,
.lookup-add-btn,
.btn-cycle-theme,
.btn-new-interface,
.system-prep-queue-btn,
.btn-uninstall-toggle,
.btn-cancel-uninstall,
.sentinelone-tenant-button {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-family: inherit;
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  box-shadow: var(--btn-highlight), var(--btn-shadow);
  transition: var(--btn-transition);
}

.btn:hover,
.d-btn:hover,
.settings-btn:hover,
.context-button:hover,
.lookup-add-btn:hover,
.btn-cycle-theme:hover,
.btn-new-interface:hover,
.system-prep-queue-btn:hover,
.btn-uninstall-toggle:hover,
.btn-cancel-uninstall:hover,
.sentinelone-tenant-button:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: var(--btn-highlight), var(--btn-shadow-hover);
  transform: translateY(-1px);
}

.btn:active,
.d-btn:active,
.settings-btn:active,
.context-button:active,
.lookup-add-btn:active,
.btn-cycle-theme:active,
.btn-new-interface:active,
.system-prep-queue-btn:active,
.btn-uninstall-toggle:active,
.btn-cancel-uninstall:active,
.sentinelone-tenant-button:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-active);
}

.btn:focus-visible,
.d-btn:focus-visible,
.settings-btn:focus-visible,
.context-button:focus-visible,
.lookup-add-btn:focus-visible,
.btn-cycle-theme:focus-visible,
.btn-new-interface:focus-visible,
.system-prep-queue-btn:focus-visible,
.btn-uninstall-toggle:focus-visible,
.btn-cancel-uninstall:focus-visible,
.sentinelone-tenant-button:focus-visible,
.btn-icon:focus-visible {
  outline: none;
  box-shadow: var(--btn-highlight), var(--btn-shadow), var(--btn-focus-ring);
}

.btn:disabled,
.btn[disabled],
.btn.is-disabled,
.d-btn:disabled,
.d-btn[disabled],
.settings-btn:disabled,
.context-button:disabled,
.lookup-add-btn:disabled,
.btn-cycle-theme:disabled,
.system-prep-queue-btn:disabled,
.sentinelone-tenant-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--btn-shadow-active);
}

/* ------------------------------------------------------------
   2. ROLE MODIFIERS (subdued colours differentiating function)
   Legacy per-panel role classes are aliased onto the same roles
   so the whole app differentiates function identically.
   ------------------------------------------------------------ */

/* Primary — muted blue */
.btn-primary,
.d-btn-primary,
.btn-edit-primary,
.sentinelone-tenant-button-ready {
  background: var(--btn-primary-bg);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-highlight), var(--btn-shadow);
}
.btn-primary:hover,
.d-btn-primary:hover,
.btn-edit-primary:hover,
.sentinelone-tenant-button-ready:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border);
  color: var(--btn-primary-text);
  box-shadow: var(--btn-primary-highlight), var(--btn-shadow-hover);
  transform: translateY(-1px);
}

/* Secondary — neutral glass (this is the base look, stated explicitly) */
.btn-secondary,
.d-btn-secondary {
  background: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--btn-text);
}
.btn-secondary:hover,
.d-btn-secondary:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
}

/* Ghost — quiet / low emphasis */
.btn-ghost,
.d-btn-ghost {
  background: transparent;
  border-color: var(--btn-border);
  color: var(--btn-text);
  box-shadow: none;
}
.btn-ghost:hover,
.d-btn-ghost:hover {
  background: var(--btn-bg);
  border-color: var(--btn-border-hover);
  box-shadow: var(--btn-highlight), var(--btn-shadow);
}

/* Danger — muted red */
.btn-danger,
.d-btn-danger,
.btn-uninstall,
.btn-uninstall-toggle.uninstall,
.sentinelone-tenant-button-missing {
  background: var(--btn-danger-bg);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-text);
}
.btn-danger:hover,
.d-btn-danger:hover,
.btn-uninstall:hover,
.btn-uninstall-toggle.uninstall:hover,
.sentinelone-tenant-button-missing:hover {
  background: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-text);
}

/* Warning — muted amber */
.btn-warning,
.d-btn-warning {
  background: var(--btn-warning-bg);
  border-color: var(--btn-warning-border);
  color: var(--btn-warning-text);
}
.btn-warning:hover,
.d-btn-warning:hover {
  background: var(--btn-warning-bg-hover);
  border-color: var(--btn-warning-border);
  color: var(--btn-warning-text);
}

/* Success — muted green */
.btn-success,
.d-btn-success {
  background: var(--btn-success-bg);
  border-color: var(--btn-success-border);
  color: var(--btn-success-text);
}
.btn-success:hover,
.d-btn-success:hover {
  background: var(--btn-success-bg-hover);
  border-color: var(--btn-success-border);
  color: var(--btn-success-text);
}

/* ------------------------------------------------------------
   3. SIZE MODIFIERS
   ------------------------------------------------------------ */
.btn-small,
.d-btn.btn-small {
  padding: var(--btn-pad-y-sm) var(--btn-pad-x-sm);
  font-size: var(--btn-font-sm);
}
.btn-block {
  display: flex;
  width: 100%;
}

/* ------------------------------------------------------------
   4. ICON-ONLY BUTTONS — square, centred glyph
   .btn-icon is always paired with .btn in markup, so it only
   needs to constrain size and squareness.
   ------------------------------------------------------------ */
.btn-icon,
.totp-icon-button {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  min-width: var(--btn-icon-size);
  padding: 0;
  gap: 0;
  border-radius: var(--btn-radius-compact);
  font-size: 15px;
  line-height: 1;
}
.totp-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  box-shadow: var(--btn-highlight), var(--btn-shadow);
  transition: var(--btn-transition);
}
.totp-icon-button:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: var(--btn-highlight), var(--btn-shadow-hover);
  transform: translateY(-1px);
}

/* Header "?" help control — render as a neutral glass icon button */
.help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  border-radius: var(--btn-radius-compact);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--btn-highlight), var(--btn-shadow);
  transition: var(--btn-transition);
}
.help-btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--accent);
  box-shadow: var(--btn-highlight), var(--btn-shadow-hover);
  transform: translateY(-1px);
}

/* Logout — danger-tinted icon button */
.btn-logout {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  min-width: var(--btn-icon-size);
  padding: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--btn-radius-compact);
  border: 1px solid var(--btn-danger-border);
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--btn-highlight), var(--btn-shadow);
  transition: var(--btn-transition);
}
.btn-logout:hover {
  background: var(--btn-danger-bg-hover);
  border-color: var(--btn-danger-border);
  color: var(--btn-danger-text);
  box-shadow: var(--btn-highlight), var(--btn-shadow-hover);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   5. ICON NORMALISATION
   Inline SVGs drift in size and stroke width across the app.
   Normalise every SVG that sits inside a button, plus a shared
   .icon utility with a small size scale.
   ------------------------------------------------------------ */
.btn svg,
.d-btn svg,
.btn-icon svg,
.btn-logout svg,
.help-btn svg,
.settings-btn svg,
.context-button svg,
.totp-icon-button svg {
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  stroke-width: var(--icon-stroke);
  vertical-align: middle;
  pointer-events: none;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  flex: 0 0 auto;
  line-height: 1;
  vertical-align: middle;
}
.icon svg {
  width: 100%;
  height: 100%;
  stroke-width: var(--icon-stroke);
}
.icon-sm,
.icon-sm svg { width: var(--icon-size-sm); height: var(--icon-size-sm); }
.icon-lg,
.icon-lg svg { width: var(--icon-size-lg); height: var(--icon-size-lg); }

/* ------------------------------------------------------------
   6. ACCESSIBILITY — respect reduced-motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .d-btn,
  .settings-btn,
  .context-button,
  .btn-icon,
  .btn-logout,
  .help-btn,
  .totp-icon-button {
    transition: none;
  }
  .btn:hover,
  .d-btn:hover,
  .btn-primary:hover,
  .btn-danger:hover,
  .btn-icon:hover,
  .btn-logout:hover,
  .help-btn:hover {
    transform: none;
  }
}