/* Buttons
 *
 * Default = neutral secondary button (Linear / GitHub style):
 * filled surface, subtle border, soft grey hover. .btn-primary keeps its
 * own purple gradient styling further down.
 *
 * The bare `button` selector deliberately excludes `nb-` prefixed elements (the
 * navbar). This rule sets border/background/color with !important, which a
 * component cannot override by specificity alone - the navbar's triggers, theme
 * control and collapses would render as bordered secondary buttons. Excluding
 * them here keeps that fix out of the navbar stylesheet, which is required to
 * stay free of !important.
 *
 * The exclusion is wrapped in :where() because :where() contributes ZERO
 * specificity. A bare `button:not([class*='nb-'])` scores 0,1,1 rather than the
 * 0,0,1 of `button`, which silently promotes this rule above every single-class
 * rule that used to beat it - on eduloo that turned a white hero-button label
 * black. Never write the exclusion without :where().
 */
.button,
button:not(:where([class*='nb-'])),
input[type='submit'],
input[type='reset'],
input[type='button'],
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  margin: 8px 8px 8px 0;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px;
  background: var(--container-bg) !important;
  color: var(--text-color) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  /* Kills Skeleton's CDN default, which uppercases every `button`/`.button`
     element (see the identical note in base_navbar.css for the navbar's own
     case of this). Buttons should never render full-uppercase. */
  text-transform: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
  text-decoration: none;
  font-family: inherit;
  height: auto;
  white-space: nowrap;
}

/* Links with FontAwesome icon support */
a:not(:where([class*='nb-'])) {
  color: var(--link);
  border-bottom: 1px dotted var(--link);
}

a {
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/*
 * Navbar anchors are excluded. They own their colours - brand for a "see all"
 * link, --text-primary for a row title, --muted-text for a description - and
 * most set that colour only at rest, so this rule (0,1,1, one higher than the
 * component's own 0,1,0 class) repainted them on hover. In dark mode
 * --link-hover is a purple, so hovering anything in the products menu turned it
 * violet.
 *
 * :where() is required: it contributes no specificity, so this stays at 0,1,1
 * and only loses the navbar, rather than being promoted above other rules.
 */
a:not(:where([class*='nb-'])):hover {
  color: var(--link-hover);
  border-bottom-color: var(--link-hover);
}

/*
 * ...but excluding them entirely handed them to Skeleton instead. The vendored
 * Skeleton bundle ships `a { color: #1EAEDB }` and `a:hover { color: #0FA0CE }`,
 * a teal from no palette in this codebase, and it loads before this file. So an
 * nb- anchor that does NOT set its own hover colour - a tag pill, a card link -
 * turned Skeleton teal on hover on every project.
 *
 * :where() again, so this stays at 0,1,1 and every navbar component that DOES
 * declare a hover colour (0,2,0 and up) still wins. This only fills the gap.
 */
a:where([class*='nb-']):hover {
  color: var(--link-hover);
}

/* Plain link — no dotted border, inherits theme link colour */
a.plain-link {
  border-bottom: none;
}

a .fas,
a .fab,
a .far {
  font-size: 0.9em;
  opacity: 0.8;
}

a:hover .fas,
a:hover .fab,
a:hover .far {
  opacity: 1;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.button .fas,
.button .fab,
.button .far,
button:not(:where([class*='nb-'])) .fas,
button:not(:where([class*='nb-'])) .fab,
button:not(:where([class*='nb-'])) .far,
.btn .fas,
.btn .fab,
.btn .far {
  font-size: 0.9em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.button-primary i,
.button-primary .fas,
.button-primary .fab,
.button-primary .far,
.btn-primary i,
.btn-primary .fas,
.btn-primary .fab,
.btn-primary .far {
  color: #ffffff !important;
}
.button:not(:where(.button-primary)):hover,
button:not(
    :where([class*='nb-'], .btn-primary, .btn-primary-action, .button-primary)
  ):hover,
.btn:not(:where(.btn-primary, .btn-primary-action)):hover {
  /* Subtle neutral darken on light, lighten on dark — works for both
     themes via color-mix without per-theme overrides. */
  background: color-mix(
    in srgb,
    var(--text-color) 6%,
    var(--container-bg)
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--text-color) 18%,
    var(--border-color)
  ) !important;
  color: var(--text-color) !important;
  box-shadow: none;
  transform: none;
}

/* Brand-adaptive primary button: every gradient/border/shadow stop is
   derived from --primary-blue via color-mix(), so this automatically
   renders in each project's own accent color (and each theme's own value
   of that variable), instead of a hardcoded coral. Frame (border + inset
   highlight + outer glow) and the brightness-filter hover match eduloo's
   actual polished button treatment (assets/css/app-ui-overrides.css),
   promoted here so every project gets it out of the box, not just eduloo. */
/* Primary / secondary CTA look, shared with the navbar's own CTA
   (base_navbar.css `--nb-cta-*`): a brand-gradient pill for primary and a
   surface pill with a brand-tinted hairline for secondary. */
.button-primary,
.btn-primary,
.btn-primary-action {
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: linear-gradient(
    135deg,
    var(--cta-gradient-start) 0%,
    var(--cta-gradient-mid) 55%,
    var(--cta-gradient-end) 100%
  ) !important;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  text-transform: none !important;
  box-shadow: 0 4px 12px -7px var(--primary-blue) !important;
  transition:
    filter 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* Borderless icon-only button (kebab menus, bells, close-ish affordances).
   Needs !important because the generic `button` rule above sets border and
   background with !important, which would otherwise repaint these as pills. */
.button-icon,
.btn-icon,
.icon-btn {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 34px !important;
  width: 34px;
  height: 34px;
  border-radius: 999px !important;
  color: var(--muted-text, var(--text-color)) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.button-icon:hover,
.btn-icon:hover,
.icon-btn:hover,
.button-icon:focus-visible,
.btn-icon:focus-visible,
.icon-btn:focus-visible {
  background: color-mix(
    in srgb,
    var(--primary-blue) 12%,
    transparent
  ) !important;
  color: var(--primary-blue) !important;
}

/* Secondary. Deliberately keyed off the explicit .btn/.button classes only -
   matching bare `button` elements would repaint every base component's
   internal buttons (segmented tabs, icon buttons, vote controls, ...) that
   own their look. */
.button:not(:where(.button-primary)),
.btn:not(:where(.btn-primary, .btn-primary-action)),
.btn-secondary-action,
.btn-danger-action,
.btn-success-action,
.btn-action {
  border: 1px solid color-mix(in srgb, var(--primary-blue) 18%, transparent) !important;
  border-radius: 999px !important;
  background: var(--container-bg) !important;
  color: var(--text-color) !important;
  padding: 10px 22px;
  font-weight: 700;
  /* Brand-tinted bottom lift, matching the primary's `0 4px 12px -7px
     var(--primary-blue)`. Secondary used to carry a neutral grey shadow, so
     next to a primary it read as flat and unrelated. This sits on the button
     box only - never on text or icons inside it, which is why it is a
     box-shadow on this rule rather than anything inherited by children. */
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text-color) 4%, transparent),
    0 4px 12px -7px var(--primary-blue);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}

.button:not(:where(.button-primary)):hover,
.btn:not(:where(.btn-primary, .btn-primary-action)):hover,
.btn-secondary-action:hover,
.btn-danger-action:hover,
.btn-success-action:hover,
.btn-action:hover {
  border-color: color-mix(
    in srgb,
    var(--primary-blue) 45%,
    transparent
  ) !important;
  background: color-mix(
    in srgb,
    var(--primary-blue) 5%,
    var(--container-bg)
  ) !important;
  color: var(--primary-blue) !important;
}
.button-primary:hover,
.btn-primary:hover,
.btn-primary-action:hover {
  background: linear-gradient(
    135deg,
    var(--cta-gradient-start) 0%,
    var(--cta-gradient-mid) 55%,
    var(--cta-gradient-end) 100%
  ) !important;
  border: 1px solid transparent !important;
  filter: brightness(1.12) !important;
  color: #ffffff !important;
  transform: none;
}
.button-primary:active,
.btn-primary:active,
.btn-primary-action:active {
  filter: brightness(0.96) !important;
  transform: translateY(1px);
}

.btn-icon-only,
.btn-icon,
.icon-btn {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  gap: 0 !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 999px !important;
  flex-shrink: 0;
}

.btn-sm.btn-icon-only,
.btn-sm.btn-icon,
.btn-sm.icon-btn {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
}

.btn-icon-only > i,
.btn-icon > i,
.icon-btn > i {
  margin: 0 !important;
  line-height: 1;
}

.btn-success,
.btn-success-action {
  border-color: #10b981 !important;
  color: #10b981 !important;
}
.btn-success:hover,
.btn-success-action:hover {
  border-color: #059669 !important;
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
}

.btn-danger,
.button-danger,
.btn-danger-action {
  border-color: #ef4444 !important;
  color: #ef4444 !important;
}
.btn-danger:hover,
.button-danger:hover,
.btn-danger-action:hover {
  border-color: #dc2626 !important;
  background: rgba(239, 68, 68, 0.1) !important;
  color: #dc2626 !important;
}

/* Forms with professional styling */
input[type='text'],
input:not([type]),
input[type='email'],
input[type='password'],
input[type='number'],
input[type='url'],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--field-border, var(--border-color)) !important;
  border-radius: var(--radius-medium);
  background: var(--field-bg, var(--input-bg)) !important;
  color: var(--text-color) !important;
  font-size: 0.95em;
  font-family: inherit;
}

/* URL input — fa-globe icon via background-image (dark mode) */
input[type='url'] {
  padding-left: 38px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23999' d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.5 26 20.9 58.3 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.5-26-20.9-58.3-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 13px center !important;
  background-size: 14px 14px !important;
}

body.theme-light input[type='url'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23777' d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.5 26 20.9 58.3 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.5-26-20.9-58.3-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z'/%3E%3C/svg%3E") !important;
}

input[type='text']:hover,
input:not([type]):hover,
input[type='email']:hover,
input[type='password']:hover,
input[type='number']:hover,
input[type='url']:hover,
select:hover,
textarea:hover {
  border-color: color-mix(
    in srgb,
    var(--primary-blue) 55%,
    transparent
  ) !important;
}
input[type='text']:focus,
input:not([type]):focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='url']:focus,
select:focus,
textarea:focus {
  outline: none;
  /* Brand accent. --primary-color is not reliably the brand (the framework's
     dark default sets it to a teal), which made focus rings render green on
     brand-rose projects; --primary-blue is the token every base component
     already uses for brand. */
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 16%, transparent);
}
input[type='radio'] {
  accent-color: var(--primary-blue);
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Custom-drawn checkbox - native `accent-color` checkboxes don't render at a
   consistent size across browsers/OSes, which is what made this look
   oversized and misaligned next to label text. Full appearance:none control
   fixes the size everywhere it's used, base-wide. */
input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-grid;
  place-content: center;
  border: 1.5px solid var(--border-color);
  border-radius: 5px;
  background: var(--input-bg, var(--container-bg));
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

input[type='checkbox']:checked {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
}

input[type='checkbox']:checked::after {
  content: '';
  width: 4px;
  height: 8px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

input[type='checkbox']:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 25%, transparent);
}

input[type='checkbox']:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
label {
  color: var(--heading-sub);
  font-size: 0.9em;
  font-weight: 500;
  display: block;
  margin-bottom: 8px;
}

/* Inline checkbox label pattern: checkbox and text on one line */
label.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  cursor: pointer;
  line-height: 1.4;
  white-space: nowrap;
}

label.checkbox-label input[type='checkbox'] {
  margin: 0;
  flex-shrink: 0;
}
.form-group {
  margin-bottom: 20px;
}
textarea {
  min-height: 100px;
  resize: vertical;
}

/* u-full-width class support - match other inputs */
.u-full-width {
  width: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--field-border, var(--border-color)) !important;
  border-radius: var(--radius-medium) !important;
  background: var(--field-bg, var(--input-bg)) !important;
  color: var(--text-color) !important;
  font-size: 0.95em !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
}
.u-full-width:hover {
  border-color: color-mix(
    in srgb,
    var(--primary-blue) 55%,
    var(--border-color)
  ) !important;
}
.u-full-width:focus {
  outline: none !important;
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 16%, transparent) !important;
}

/* Select elements - fix visibility issues */
select.u-full-width,
#timezoneSelect {
  padding: 12px 40px 12px 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  min-height: 44px !important;
  line-height: 1.5 !important;
}
body.theme-dark select.u-full-width,
body.theme-dark #timezoneSelect {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23b8b8b8' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
}

/* Button small with copy button styling */
.button-sm,
.copy-btn {
  min-height: 36px !important;
  padding: 8px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}
.button-sm .fas,
.button-sm .fab,
.button-sm .far,
.copy-btn .fas,
.copy-btn .fab,
.copy-btn .far {
  font-size: 0.85em !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.button-sm:only-child,
.copy-btn:only-child {
  width: auto !important;
  min-width: 36px !important;
}

/* Card/Section with professional styling */
.card {
  background: var(--card-bg);
  border: none;
  border-radius: var(--radius-medium);
  padding: 24px;
  margin: 24px 0;
  transition: all 0.3s ease;
}
.card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
  border-color: var(--primary-blue);
}
.card :is(.fas, .fab, .far) {
  color: var(--primary-blue);
}

.card :is(.fas, .fab, .far):not(:only-child) {
  margin-right: 8px;
}
.badge {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  font-size: 0.8em;
  background: rgba(255, 255, 255, 0.05);
  color: var(--muted-text);
  margin: 0 4px;
}
body.theme-light .badge {
  background: rgba(0, 0, 0, 0.02);
}

/* Canonical form control. Both names were in wide use (415 .form-control,
   60 .form-select) but were only ever DEFINED inside page-level stylesheets,
   which leaked a global definition from whichever page happened to load. */
.form-control,
.form-select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg, var(--container-bg));
  color: var(--text-color);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

textarea.form-control {
  min-height: 100px;
  resize: vertical;
  line-height: 1.6;
}

.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-blue) 18%, transparent);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  opacity: 0.65;
  cursor: not-allowed;
}