/* Buttons */
.button,
button,
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: transparent !important;
  color: var(--text-color) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  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 {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px dotted var(--link);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

a:hover {
  color: var(--link-hover);
  border-bottom-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 .fas,
button .fab,
button .far,
.btn .fas,
.btn .fab,
.btn .far {
  font-size: 0.9em;
}

.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:hover,
button:hover,
.btn:hover {
  border-color: var(--primary-blue) !important;
  background: var(--info-item-bg) !important;
  color: var(--primary-blue) !important;
  box-shadow: none;
  transform: none;
}

body.theme-light .button:hover,
body.theme-light button:hover,
body.theme-light .btn:hover {
  background: color-mix(
    in srgb,
    var(--primary-blue) 18%,
    transparent
  ) !important;
}

.button-primary,
.btn-primary {
  border: none !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: radial-gradient(
    ellipse at 50% 40%,
    #a855f7 0%,
    #9333ea 55%,
    #7e22ce 100%
  ) !important;
  padding: 9px 20px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: none;
  transition: background 0.25s ease;
}
.button-primary:hover,
.btn-primary:hover {
  border: none !important;
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  box-shadow: none;
  transform: none;
}
.button-primary:active,
.btn-primary:active {
  background: radial-gradient(
    ellipse at 50% 40%,
    #9333ea 0%,
    #7e22ce 55%,
    #6b1bb8 100%
  ) !important;
  transform: translateY(1px);
  box-shadow: none;
}

/* Light mode — restore purple gradient, override the generic sky-blue hover */
body.theme-light .button-primary,
body.theme-light .btn-primary {
  background: radial-gradient(
    ellipse at 50% 40%,
    #a855f7 0%,
    #9333ea 55%,
    #7e22ce 100%
  ) !important;
  color: #ffffff !important;
}
body.theme-light .button-primary:hover,
body.theme-light .btn-primary:hover {
  background: linear-gradient(135deg, #c084fc 0%, #a855f7 100%) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Dark mode — brighter violet, more luminance to pop on dark bg */
body.theme-dark .button-primary,
body.theme-dark .btn-primary {
  background: radial-gradient(
    ellipse at 50% 40%,
    #c084fc 0%,
    #a855f7 55%,
    #9333ea 100%
  ) !important;
}
body.theme-dark .button-primary:hover,
body.theme-dark .btn-primary:hover {
  background: linear-gradient(135deg, #d09cff 0%, #b76cff 100%) !important;
}
body.theme-dark .button-primary:active,
body.theme-dark .btn-primary:active {
  background: radial-gradient(
    ellipse at 50% 40%,
    #b06fec 0%,
    #9333ea 55%,
    #8226d6 100%
  ) !important;
}

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

/* Forms with professional styling */
input[type='text'],
input[type='email'],
input[type='password'],
input[type='number'],
input[type='url'],
select,
textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-medium);
  background: 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[type='email']:hover,
input[type='password']:hover,
input[type='number']:hover,
input[type='url']:hover,
select:hover,
textarea:hover {
  border-color: var(--accent-blue) !important;
}
input[type='text']:focus,
input[type='email']:focus,
input[type='password']:focus,
input[type='number']:focus,
input[type='url']:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--primary-blue);
}
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(--border-color) !important;
  border-radius: var(--radius-medium) !important;
  background: 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: var(--accent-blue) !important;
}
.u-full-width:focus {
  outline: none !important;
  border-color: var(--primary-blue) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !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(--accent-blue);
}
.card .fas,
.card .fab,
.card .far {
  color: var(--primary-blue);
  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);
}