/* ======================================================
components.css  —  BuildStudio canonical UI components
Design System v2 — buttons / inputs / cards / links.

Authoritative sizing, radius, typography, and color come from
theme.css tokens (--bst-*). No raw px/hex values in this file.

Load ORDER matters: include AFTER styles.css, custom.css, and
tools.css so these rules win the cascade over legacy class
definitions. Legacy class names (greenButton, customButtonGreen,
toolBtnPrimary, whiteButton, etc.) are aliased to the canonical
rules so existing markup renders consistently without requiring
a page-by-page rewrite.

──────────────────────────────────────────────────────
COMPONENT INDEX

  Buttons    .btn-primary      /  aliased: greenButton, toolBtnPrimary, transparentButton, primaryBtn
             .btn-primary-lg   /  aliased: customButtonGreen, customGreenLargeButton, greenLargeButton
             .btn-secondary    /  aliased: toolBtnSecondary, whiteButton, secondaryBtn
             .btn-sm           /  aliased: toolBtnSmall
             .btn-lg

  Inputs     .input, .textarea, .select
             aliased: customFormInput, toolInput, customFormTextArea, toolSelect

  Cards      .card, .card-lg, .card-sm
             aliased: cardWithBorder, toolInputCard, toolResultCard, sharableCard, appInfoCard

  Links      .link  (inline text link with hover underline)
====================================================== */


/* ──────────────────────────────────────────────────────
BUTTONS — primary (medium / 45px)
────────────────────────────────────────────────────── */
.btn-primary,
.primaryBtn,
.greenButton,
.toolBtnPrimary,
.transparentButton,
.customButtonGreen,
.customGreenLargeButton,
.greenLargeButton {
  background-color: var(--bst-green);
  border: 1px solid var(--bst-green);
  border-radius: var(--bst-radius-md);
  height: var(--bst-btn-height-md);
  padding: var(--bst-space-1) var(--bst-space-6);
  font-size: var(--bst-fs-14);
  color: var(--bst-fix-text-white);
  font-family: var(--bst-font);font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--bst-transition-fast), border-color var(--bst-transition-fast);
  outline: none;
}

.btn-primary:hover,
.primaryBtn:hover,
.greenButton:hover,
.toolBtnPrimary:hover,
.transparentButton:hover,
.customButtonGreen:hover,
.customGreenLargeButton:hover,
.greenLargeButton:hover {
  background-color: var(--bst-green-hover);
  border-color: var(--bst-green-hover);
  color: var(--bst-fix-text-white);
}

.btn-primary:active,
.primaryBtn:active,
.greenButton:active,
.toolBtnPrimary:active,
.transparentButton:active,
.customButtonGreen:active,
.customGreenLargeButton:active,
.greenLargeButton:active {
  background-color: var(--bst-green-pressed);
  border-color: var(--bst-green-pressed);
}

.btn-primary:disabled,
.primaryBtn:disabled,
.greenButton:disabled,
.toolBtnPrimary:disabled,
.transparentButton:disabled,
.customButtonGreen:disabled,
.customGreenLargeButton:disabled,
.greenLargeButton:disabled {
  background-color: var(--bst-btn-disabled);
  border-color: var(--bst-btn-disabled);
  cursor: not-allowed;
}

/* Large primary (55px / 18px) — for prominent form / CTA buttons */
.btn-primary-lg,
.customButtonGreen,
.customGreenLargeButton,
.greenLargeButton {
  height: var(--bst-btn-height-lg);
  padding: var(--bst-space-1) var(--bst-space-8);
  font-size: var(--bst-fs-18);
}


/* ──────────────────────────────────────────────────────
BUTTONS — secondary (surface + border, 45px)
────────────────────────────────────────────────────── */
.btn-secondary,
.secondaryBtn,
.toolBtnSecondary,
.whiteButton {
  background-color: var(--bst-bg-surface-raised);
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-md);
  height: var(--bst-btn-height-md);
  padding: var(--bst-space-1) var(--bst-space-5);
  font-size: var(--bst-fs-14);
  color: var(--bst-text-secondary);
  font-family: var(--bst-font);font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: border-color var(--bst-transition-fast), color var(--bst-transition-fast);
  outline: none;
}

.btn-secondary:hover,
.secondaryBtn:hover,
.toolBtnSecondary:hover,
.whiteButton:hover {
  border-color: var(--bst-green);
  color: var(--bst-green);
}

.btn-secondary:disabled,
.secondaryBtn:disabled,
.toolBtnSecondary:disabled,
.whiteButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--bst-text-muted);
}

.btn-secondary:disabled:hover,
.secondaryBtn:disabled:hover,
.toolBtnSecondary:disabled:hover,
.whiteButton:disabled:hover {
  border-color: var(--bst-border);
  color: var(--bst-text-muted);
}

/* Active/selected state for segmented controls — used when a secondary-style
   button represents the currently-selected option (e.g. size toggles, flag pills). */
.btn-secondary.active,
.toolBtnSecondary.active {
  background-color: var(--bst-green);
  border-color: var(--bst-green);
  color: var(--bst-fix-text-white);
}
.btn-secondary.active:hover,
.toolBtnSecondary.active:hover {
  background-color: var(--bst-green-hover);
  border-color: var(--bst-green-hover);
  color: var(--bst-fix-text-white);
}


/* ──────────────────────────────────────────────────────
BUTTONS — size modifiers
────────────────────────────────────────────────────── */
.btn-sm,
.toolBtnSmall {
  height: var(--bst-btn-height-sm);
  padding: var(--bst-space-1) var(--bst-space-3);
  font-size: var(--bst-fs-13);
}

.btn-lg {
  height: var(--bst-btn-height-lg);
  padding: var(--bst-space-1) var(--bst-space-8);
  font-size: var(--bst-fs-18);
}


/* ──────────────────────────────────────────────────────
FORM — inputs, textareas, selects
Heights unified to --bst-input-height; radius to --bst-radius-md.
────────────────────────────────────────────────────── */
.input,
.customFormInput,
.toolInput {
  width: 100%;
  height: var(--bst-input-height);
  border-radius: var(--bst-radius-md);
  border: 1px solid var(--bst-border);
  background-color: var(--bst-bg-input);
  color: var(--bst-text-primary);
  padding: var(--bst-space-1) var(--bst-space-4);
  font-size: var(--bst-fs-14);
  font-family: var(--bst-font);font-weight: 400;
  transition: border-color var(--bst-transition-fast);
  outline: none;
}

.input:focus-visible,
.customFormInput:focus-visible,
.toolInput:focus-visible {
  border-color: var(--bst-green);
}

.input::placeholder,
.customFormInput::placeholder,
.toolInput::placeholder {
  color: var(--bst-text-muted);
}

.textarea,
.customFormTextArea {
  width: 100%;
  border-radius: var(--bst-radius-md);
  border: 1px solid var(--bst-border);
  background-color: var(--bst-bg-input);
  color: var(--bst-text-primary);
  padding: var(--bst-space-4);
  font-size: var(--bst-fs-14);
  font-family: var(--bst-font);font-weight: 400;
  resize: none;
  transition: border-color var(--bst-transition-fast);
  outline: none;
}

.textarea:focus-visible,
.customFormTextArea:focus-visible {
  border-color: var(--bst-green);
}

.textarea::placeholder,
.customFormTextArea::placeholder {
  color: var(--bst-text-muted);
}

.select,
.toolSelect {
  height: var(--bst-input-height);
  border-radius: var(--bst-radius-md);
  border: 1px solid var(--bst-border);
  background-color: var(--bst-bg-surface);
  color: var(--bst-text-primary);
  padding: var(--bst-space-1) var(--bst-space-10) var(--bst-space-1) var(--bst-space-4);
  font-size: var(--bst-fs-14);
  font-family: var(--bst-font);font-weight: 400;
  cursor: pointer;
  appearance: none;
  background-image: url("../icons/arrowDown.webp");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 14px;
  transition: border-color var(--bst-transition-fast);
  outline: none;
}

.select:focus-visible,
.toolSelect:focus-visible {
  border-color: var(--bst-green);
}

/* Tags input stays at input-height to match standard inputs */
.tagsInputContainer {
  min-height: var(--bst-input-height);
  border-radius: var(--bst-radius-md);
}

.tagsInput {
  height: var(--bst-input-height);
}


/* ──────────────────────────────────────────────────────
CARDS — canonical surface containers
.card       = default (radius-lg, padding-6)
.card-lg    = prominent (radius-xl, padding-10)
.card-sm    = compact  (radius-md, padding-5)
────────────────────────────────────────────────────── */
.card,
.cardWithBorder,
.toolInputCard,
.toolResultCard,
.sharableCard,
.appInfoCard {
  background-color: var(--bst-bg-surface-raised);
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
  padding: var(--bst-space-6);
}

.card-lg,
.analyseCard,
.customerAppCard {
  background-color: var(--bst-bg-surface-raised);
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-xl);
  padding: var(--bst-space-10);
}

.card-sm,
.fileSizeCard {
  background-color: var(--bst-bg-surface-raised);
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-md);
  padding: var(--bst-space-5);
}


/* ──────────────────────────────────────────────────────
LINKS — inline text link
────────────────────────────────────────────────────── */
.link {
  color: var(--bst-green);
  text-decoration: none;
  transition: color var(--bst-transition-fast);
}

.link:hover {
  color: var(--bst-green-hover);
  text-decoration: underline;
}


/* ──────────────────────────────────────────────────────
FORM LABELS + HELPER TEXT
.form-label alias maps Bootstrap class name onto our canonical styling.
────────────────────────────────────────────────────── */
.label,
.form-label,
.labelInput {
  display: block;
  font-size: var(--bst-fs-14);
  font-family: var(--bst-font);font-weight: 500;
  color: var(--bst-text-primary);
  margin-bottom: var(--bst-space-2);
}

.helper-text,
.form-text {
  display: block;
  font-size: var(--bst-fs-12);
  font-family: var(--bst-font);font-weight: 400;
  color: var(--bst-text-muted);
  margin-top: var(--bst-space-1);
}


/* ──────────────────────────────────────────────────────
ALERTS — inline status messages
.alert alert-{danger|success|warning|info} aliases map Bootstrap
variants onto our canonical styling using theme tokens.
────────────────────────────────────────────────────── */
.alert {
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-md);
  padding: var(--bst-space-3) var(--bst-space-4);
  font-size: var(--bst-fs-14);
  font-family: var(--bst-font);font-weight: 400;
  color: var(--bst-text-primary);
  background-color: var(--bst-bg-surface);
}

.alert-danger,
.toolError {
  background-color: var(--bst-red-light-bg);
  border-color: var(--bst-red-border);
  color: var(--bst-red);
}

.alert-success,
.toolSuccess {
  background-color: var(--bst-green-light-bg);
  border-color: var(--bst-success-border);
  color: var(--bst-green);
}

.alert-warning {
  background-color: var(--bst-orange-light-bg);
  border-color: var(--bst-orange-50);
  color: var(--bst-orange-active);
}

.alert-info {
  background-color: var(--bst-blue-light-bg);
  border-color: var(--bst-blue-30);
  color: var(--bst-blue-active);
}


/* ──────────────────────────────────────────────────────
MODAL — theme-aware surface + borders
Overrides Bootstrap's hardcoded white background so modals render
correctly in both light and dark mode. Affects all .modal-content.
────────────────────────────────────────────────────── */
.modal-content {
  background-color: var(--bst-bg-surface-raised);
  color: var(--bst-text-primary);
  border: 1px solid var(--bst-border);
  border-radius: var(--bst-radius-lg);
}
.modal-header {
  border-bottom: 1px solid var(--bst-border);
  color: var(--bst-text-primary);
}
.modal-footer {
  border-top: 1px solid var(--bst-border);
}
.modal-title {
  color: var(--bst-text-primary);
  font-family: var(--bst-font);font-weight: 600;
}
/* Bootstrap's .btn-close uses an SVG background that's dark by default.
   Invert it in dark mode so the close X stays visible on dark surfaces. */
.bst-dark .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Bootstrap's .text-muted hardcodes rgba(33,37,41,0.75) which is invisible
   on dark surfaces. Route through our muted-text token so it theme-adapts. */
.bst-dark .text-muted {
  color: var(--bst-text-muted) !important;
}
.bst-dark .text-danger {
  color: var(--bst-red) !important;
}


/* ──────────────────────────────────────────────────────
CHECKBOX + RADIO — canonical native form controls
Green accent-color applied globally so every bare checkbox/radio
matches brand without requiring page-specific rules.
────────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--bst-green);
  cursor: pointer;
}


/* ──────────────────────────────────────────────────────
NAVIGATION LINK — .active canonical state
Header / footer / sidebar nav links use .active for current page.
Scope covers both light and dark (bst-dark) contexts.

Bootstrap 5 ships .navbar-nav .nav-link.active {color: var(--bs-navbar-active-color)}
at specificity 0,3,0 which beats our 0,1,4 rule below, so we ALSO
point Bootstrap's own variable at --bst-green inside the header.
────────────────────────────────────────────────────── */
.lightHeader .navbar, .homeFirstSection .navbar {
  --bs-navbar-active-color: var(--bst-green);
  --bs-navbar-hover-color: var(--bst-green);
}
.lightHeader nav ul li a.active,
.lightHeader nav ul li a:hover,
.homeFirstSection nav ul li a.active,
.homeFirstSection nav ul li a:hover,
.bst-dark .lightHeader nav ul li a.active,
.bst-dark .lightHeader nav ul li a:hover {
  color: var(--bst-green);
}