/* EPFL theme for Indico -- Semantic UI components.

   Indico's newer screens (search, room booking, registration, most
   dialogs) are React + Semantic UI rather than the jQuery/.i-button
   stack, and Semantic ships its own palette: the "new" badge on the
   front page is <span class="ui label mini blue"> at #0099cc, which is
   nowhere in the EPFL system. Semantic's colour classes are applied as
   literal names (.blue, .red, .teal, ...), so they are remapped here to
   the nearest EPFL token rather than left at Semantic's defaults.

   Semantic's own rules carry !important on many colour declarations
   (.ui.blue.label{background-color:#2185d0!important}), so the
   overrides have to match that to take effect. */

.ui,
.ui.button,
.ui.label,
.ui.input > input,
.ui.header,
.ui.message,
.ui.menu,
.ui.table,
.ui.form {
  font-family: 'SuisseIntl', Arial, sans-serif;
}

/* Primary action == EPFL red, matching .btn-primary. */
.ui.primary.button,
.ui.primary.buttons .button {
  background-color: var(--epfl-red) !important;
  color: var(--epfl-white) !important;
  border-radius: var(--epfl-radius);
  font-weight: 700;
}

.ui.primary.button:hover,
.ui.primary.button:focus,
.ui.primary.buttons .button:hover {
  background-color: var(--epfl-red-hover) !important;
  color: var(--epfl-white) !important;
}

.ui.primary.button:active {
  background-color: var(--epfl-red-active) !important;
}

/* Neutral button == .btn-secondary: white, black label, grey hover. */
.ui.button {
  border-radius: var(--epfl-radius);
  background-color: var(--epfl-gray-100);
  color: var(--epfl-black);
}

.ui.button:hover,
.ui.button:focus {
  background-color: var(--epfl-gray-200);
  color: var(--epfl-black);
}

/* Semantic's named colours remapped onto EPFL tokens. Blue and teal both
   collapse onto canard -- EPFL has no mid-blue -- and red onto EPFL red. */
.ui.blue.label,
.ui.blue.button,
.ui.teal.label,
.ui.teal.button,
.ui.label.blue,
.ui.label.teal {
  background-color: var(--epfl-canard) !important;
  border-color: var(--epfl-canard-dark) !important;
  color: var(--epfl-white) !important;
}

.ui.blue.button:hover,
.ui.teal.button:hover {
  background-color: var(--epfl-canard-dark) !important;
}

.ui.red.label,
.ui.red.button,
.ui.label.red {
  background-color: var(--epfl-red) !important;
  border-color: var(--epfl-red-border) !important;
  color: var(--epfl-white) !important;
}

.ui.red.button:hover {
  background-color: var(--epfl-red-hover) !important;
}

.ui.green.label,
.ui.green.button,
.ui.label.green {
  background-color: var(--epfl-green-text) !important;
  border-color: var(--epfl-green-text) !important;
  color: var(--epfl-white) !important;
}

.ui.orange.label,
.ui.orange.button,
.ui.yellow.label {
  background-color: var(--epfl-orange) !important;
  border-color: var(--epfl-orange) !important;
  color: var(--epfl-black) !important;
}

.ui.grey.label,
.ui.grey.button {
  background-color: var(--epfl-gray-500) !important;
  color: var(--epfl-white) !important;
}

/* Labels keep EPFL's near-square corners rather than Semantic's pills. */
.ui.label {
  border-radius: var(--epfl-radius);
  font-family: 'SuisseIntl', Arial, sans-serif;
}

/* Inputs: same treatment as the jQuery-era controls (see 40-epfl-inputs). */
.ui.input > input,
.ui.form input[type='text'],
.ui.form input[type='email'],
.ui.form input[type='password'],
.ui.form input[type='number'],
.ui.form textarea,
.ui.selection.dropdown {
  border: 1px solid var(--epfl-gray-500);
  border-radius: var(--epfl-radius);
  color: var(--epfl-black);
  font-family: 'SuisseIntl', Arial, sans-serif;
}

.ui.input > input:focus,
.ui.form input[type='text']:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus,
.ui.selection.dropdown.active {
  border-color: var(--epfl-black);
  box-shadow: 0 0 0 1px var(--epfl-gray-300);
}

/* Segments and messages: EPFL card geometry. */
.ui.segment,
.ui.segments {
  border-radius: var(--epfl-radius);
  border-color: var(--epfl-gray-200);
  box-shadow: none;
}

.ui.message {
  border-radius: var(--epfl-radius);
}

.ui.info.message {
  background: #f1f8f9;
  box-shadow: 0 0 0 1px var(--epfl-canard) inset;
  color: var(--epfl-canard-dark);
}

.ui.error.message,
.ui.negative.message {
  background: #fff5f5;
  box-shadow: 0 0 0 1px var(--epfl-red-dark) inset;
  color: var(--epfl-red-dark);
}

/* Active tab / menu item takes the EPFL red marker. */
.ui.secondary.menu .active.item,
.ui.tabular.menu .active.item {
  border-bottom: 2px solid var(--epfl-red);
  color: var(--epfl-black);
  font-weight: 700;
}

.ui.menu .item {
  font-family: 'SuisseIntl', Arial, sans-serif;
}

.ui.checkbox input:checked ~ .box::before,
.ui.checkbox input:checked ~ label::before {
  background: var(--epfl-red) !important;
  border-color: var(--epfl-red) !important;
}

.ui.checkbox input:checked ~ .box::after,
.ui.checkbox input:checked ~ label::after {
  color: var(--epfl-white) !important;
}

.ui.header {
  color: var(--epfl-black);
  font-family: 'SuisseIntl', Arial, sans-serif;
}

/* Semantic's own `.ui.menu .active.item` sets a dark 2px underline at a
   specificity this file's earlier rule does not beat (verified live:
   computed border-bottom "2px solid rgb(49,57,60)" on <button class="active
   item">), so the EPFL red marker is forced here. This is the same red
   underline the top nav and the side menu use, which is what makes "where
   am I" read consistently across the three different menu systems Indico
   ships. */
.ui.menu .item.active,
.ui.secondary.menu .item.active,
.ui.tabular.menu .item.active,
.ui.menu button.item.active {
  border-bottom-color: var(--epfl-red) !important;
  color: var(--epfl-black) !important;
  font-weight: 700;
}