/* Fix for Fomantic UI icons not loading in Meteor */
@font-face {
  font-family: 'Icons';
  src: url('/themes/default/assets/fonts/icons.woff2') format('woff2'),
    url('/themes/default/assets/fonts/icons.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

/* Font face for outline icons */
@font-face {
  font-family: 'Outline-Icons';
  src: url('/themes/default/assets/fonts/outline-icons.woff2') format('woff2'),
    url('/themes/default/assets/fonts/outline-icons.woff') format('woff');
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
}

/* Ensure regular icon class uses the correct font */
i.icon:before {
  font-family: 'Icons' !important;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  speak: none;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}

/* Ensure outline icons use the outline font */
i.outline.icon:before {
  font-family: 'Outline-Icons' !important;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  text-align: center;
  speak: none;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
}


/* 
 * Replace Fomantic-UI's default primary color (#2185d0) with #F9C20E
 * This makes #F9C20E the default primary color across all components
 */

/* Primary Buttons */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: #f9c20e !important;
  color: white !important;
  border-radius: 0 !important;
}

.ui.primary.button:hover,
.ui.primary.buttons .button:hover,
.ui.primary.confirm-exclude.button:hover,
.ui.primary.confirm-exclude-station.button:hover {
  background-color: #444 !important;
  color: white !important;
}

.ui.fluid.large.button:hover {
  background-color: #444 !important;
  color: white !important;
}

.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
  background-color: #F9C20E !important;
  color: white !important;
}

/* Deny / Cancel Buttons (modal Cancel) */
.ui.deny.button,
.ui.deny.button:focus {
  background-color: green !important;
  color: white !important;
  border-radius: 0 !important;
}

.ui.deny.button:hover {
  background-color: #444 !important;
  color: white !important;
  border-radius: 0 !important;
}

/* Toggle Checkboxes - Replace default #2185d0 */
.ui.toggle.checkbox input:checked~label::before {
  background-color: #F9C20E !important;
}

.ui.toggle.checkbox input:focus:checked~label::before {
  background-color: #F9C20E !important;
}

/* Radio Buttons - Replace default blue */
.ui.radio.checkbox input:checked~label::before {
  background-color: #F9C20E !important;
}

.ui.radio.checkbox input:focus:checked~label::before {
  background-color: #F9C20E !important;
}

/* Regular Checkboxes */
.ui.checkbox input:checked~label::before {
  background-color: #F9C20E !important;
  border-color: #F9C20E !important;
}

.ui.checkbox input:focus:checked~label::before {
  border-color: #F9C20E !important;
}

/* Primary Labels */
.ui.primary.label {
  background-color: #F9C20E !important;
}

/* Primary Segments */
.ui.primary.segment {
  border-top-color: #F9C20E !important;
}

/*
 * Fix autofill colors - replace yellow/red backgrounds with white
 * Scoped to exclude login form to avoid conflicts
 */
.ui.form:not(#login-form):not(#forgot-password-form) .field.field input:-webkit-autofill {
  box-shadow: 0px 0px 0px 100px white inset !important;
  border-color: rgba(34, 36, 38, 0.15) !important;
}

.ui.form:not(#login-form):not(#forgot-password-form) .field.field input:-webkit-autofill:focus {
  box-shadow: 0px 0px 0px 100px white inset !important;
  border-color: #85b7d9 !important;
}

/* Remove error autofill red border - exclude login forms */
.ui.form:not(#login-form):not(#forgot-password-form).error.error input:-webkit-autofill {
  box-shadow: 0px 0px 0px 100px white inset !important;
  border-color: rgba(34, 36, 38, 0.15) !important;
}

/* Generic fix: all form inputs/textareas white background, no pink error state */
/* Excludes login and forgot-password forms which intentionally show validation red */
/* Excludes submit/button/reset inputs so primary buttons keep their yellow color */
.ui.form:not(#login-form):not(#forgot-password-form) input:not(.search):not([type="submit"]):not([type="button"]):not([type="reset"]),
.ui.form:not(#login-form):not(#forgot-password-form) textarea {
  background-color: white !important;
  border: 1px solid rgba(34, 36, 38, 0.15) !important;
}

/* Focus state - blue border */
.ui.form:not(#login-form):not(#forgot-password-form) input:not(.search):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
.ui.form:not(#login-form):not(#forgot-password-form) textarea:focus {
  border-color: #85b7d9 !important;
  background-color: #ffffff !important;
}

/* Error state override - keep white, not pink */
.ui.form:not(#login-form):not(#forgot-password-form).error input:not(.search):not([type="submit"]):not([type="button"]):not([type="reset"]),
.ui.form:not(#login-form):not(#forgot-password-form).error textarea,
.ui.form:not(#login-form):not(#forgot-password-form) .field.error input:not(.search):not([type="submit"]):not([type="button"]):not([type="reset"]),
.ui.form:not(#login-form):not(#forgot-password-form) .field.error textarea {
  background-color: white !important;
  border-color: rgba(34, 36, 38, 0.15) !important;
}

/* Current Password field - Lemon yellow background */
/* HIGH SPECIFICITY - Must override the .ui.form input[type="password"] rule above */
.ui.form:not(#login-form):not(#forgot-password-form) input[name="currentPassword"],
.ui.form:not(#login-form):not(#forgot-password-form) input[name="currentPassword"][type="password"] {
  background-color: #fffacd !important;
  border: 1px solid rgba(34, 36, 38, 0.15) !important;
}

.ui.form:not(#login-form):not(#forgot-password-form) input[name="currentPassword"]:focus {
  background-color: #fffacd !important;
  border-color: #85b7d9 !important;
}

/* Override autofill for current password field */
.ui.form:not(#login-form):not(#forgot-password-form) input[name="currentPassword"]:-webkit-autofill {
  -webkit-box-shadow: 0px 0px 0px 1000px #fffacd inset !important;
  box-shadow: 0px 0px 0px 1000px #fffacd inset !important;
  border-color: rgba(34, 36, 38, 0.15) !important;
}

/* Make checkbox backgrounds white instead of yellow */
.ui.checkbox input:checked~label::before {
  background-color: white !important;
  border-color: rgba(34, 36, 38, 0.15) !important;
}

.ui.checkbox input:checked~label::after {
  color: rgba(0, 0, 0, 0.87) !important;
}

.ui.checkbox input:focus:checked~label::before {
  background-color: white !important;
  border-color: rgba(34, 36, 38, 0.35) !important;
}

/* Progress Bars */
.ui.primary.progress .bar {
  background-color: #F9C20E !important;
}

/* Fix blue/autofill background on transparent search inputs (e.g. accession number) */
/* Chrome ignores background-color on autofilled inputs; use inset box-shadow as overlay */
.ui.transparent.input>input {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  background-color: white !important;
  background: white !important;
}

.ui.transparent.input>input:focus {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  background-color: white !important;
  background: white !important;
}

.ui.transparent.input>input:-webkit-autofill,
.ui.transparent.input>input:-webkit-autofill:hover,
.ui.transparent.input>input:-webkit-autofill:focus,
.ui.transparent.input>input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important;
  -webkit-text-fill-color: rgba(0, 0, 0, 0.87) !important;
}

/* Links and other primary colored elements */
a.ui.primary.label:hover,
.ui.primary.label:hover {
  background-color: #F9C20E !important;
}

/* Global font override — restore Meteor 2.16 / Semantic UI font stack across everything */
/* Exclude i.icon so the Icons/Outline-Icons font-face declarations above are not overridden */
*:not(i.icon):not(i.icon::before):not(i.icon::after) {
  font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;
}

/* Restore Semantic UI body font-smoothing — Semantic UI applied antialiased globally to body,
   which makes text appear thinner/lighter. Fomantic only sets this on icons. */
body {
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

.ui.table thead th {
  font-size: 1em !important;
  padding: 0.92857143em 0.78571429em !important;
}

/* jQuery Validation Error Labels */
#newFeed .field label.error-label {
  display: inline-block;
  margin-left: 10px;
  font-weight: bold;
  font-size: 0.92857143em;
  white-space: nowrap;
}

/* Fix X (remove) icon vertical position on non-selection, non-multiple dropdowns */
.ui.dropdown:not(.selection):not(.multiple)>.remove.icon {
  margin-top: -1.6em !important;
}