/* EPFL theme for Indico -- boxes, cards, tables, messages.

   Elements (elements.min.css):
     .card        { background:#fff; border:1px solid #d5d5d5;
                    border-radius:2px }  then flattened to
                    { border-color:#e6e6e6; border-radius:0 }
     .card-header { padding:.9rem 1.35rem; background-color:transparent;
                    border-bottom:1px solid #d5d5d5 }
     .card-body   { padding:1.35rem }
     table        { border-collapse:collapse; font-size:.83rem }
     .table-bordered td,th { border:1px solid #c1c1c1 }
     .list-group-item { padding:.75rem 1.25rem; background-color:#fff;
                        border:1px solid rgba(33,33,33,.125) }

   Indico's .i-box is the direct analogue of .card but hardcodes a teal
   title (.i-box-header .i-box-title{color:#007cac}) and a serif
   description, neither of which exists in the EPFL system. */

.i-box {
  background: var(--epfl-white);
  border-color: var(--epfl-gray-200);
  border-radius: var(--epfl-radius);
  box-shadow: none;
}

.i-box-header {
  background-color: var(--epfl-white);
  background-image: none;
  border-bottom: 1px solid var(--epfl-gray-300);
  padding: 0.9rem 1.35rem;
}

.i-box-header .i-box-title {
  color: var(--epfl-black);
  font-family: 'SuisseIntl', Arial, sans-serif;
  font-weight: 700;
}

.i-box-header .i-box-description {
  color: var(--epfl-gray-600);
  font-family: 'SuisseIntl', Arial, sans-serif;
}

/* Tables: EPFL's smaller type and mid-grey rules, with a plain grey
   header band rather than Indico's gradient. */
table.i-table,
.i-table {
  border-collapse: collapse;
  font-size: 0.83rem;
}

table.i-table th,
.i-table thead th {
  background-color: var(--epfl-gray-100);
  background-image: none;
  color: var(--epfl-black);
  font-family: 'SuisseIntl', Arial, sans-serif;
  font-weight: 700;
  border-color: var(--epfl-gray-400);
}

table.i-table td,
.i-table td {
  border-color: var(--epfl-gray-300);
}

table.i-table tbody tr:hover > td {
  background-color: var(--epfl-gray-050);
}

/* Semantic-UI tables appear in the newer React views; keep them in step. */
.ui.table {
  border-color: var(--epfl-gray-300);
  border-radius: var(--epfl-radius);
  font-family: 'SuisseIntl', Arial, sans-serif;
}

.ui.table thead th {
  background: var(--epfl-gray-100);
  color: var(--epfl-black);
  font-family: 'SuisseIntl', Arial, sans-serif;
}

/* List rows (category and event listings) read as Elements' .list-group:
   white rows, hairline rule, grey hover. */
.event-list .event-row,
.category-list .item,
.list-group-item {
  background-color: var(--epfl-white);
  border-color: rgba(33, 33, 33, 0.125);
}

.event-list .event-row:hover,
.category-list .item:hover {
  background-color: var(--epfl-gray-050);
}

/* Flashed messages / announcements: EPFL palette, 2px corners, no gradient. */
.flashed-messages .message-box,
div.announcement-bar:not([hidden]) {
  border-radius: var(--epfl-radius);
  font-family: 'SuisseIntl', Arial, sans-serif;
  background-image: none;
}

.flashed-messages .message-box.error,
.flashed-messages .message-box.danger {
  border-left: 4px solid var(--epfl-red-dark);
}

.flashed-messages .message-box.warning {
  border-left: 4px solid var(--epfl-orange);
}

.flashed-messages .message-box.success {
  border-left: 4px solid var(--epfl-green-text);
}

.flashed-messages .message-box.info {
  border-left: 4px solid var(--epfl-canard);
}

/* Footer: white with a hairline top rule, matching Elements. */
.footer,
footer {
  background: var(--epfl-white);
  border-top: 1px solid var(--epfl-gray-200);
  font-family: 'SuisseIntl', Arial, sans-serif;
}

/* The "current month" badge in event listings is hardcoded to a cream
   (`.event-list h3.current-month span{background-color:#f6e8bd}`) that
   predates Indico's --highlight-color token, so retinting that token does
   not reach it. EPFL has no cream; this keeps the "you are here" cue using
   the lightest red tint and EPFL's own text colour. */
.event-list h3.current-month span {
  background-color: var(--highlight-color);
  color: var(--epfl-black);
  font-weight: 700;
}

/* Footer links ship at #bbb (`.footer .footer-links{color:#bbb}`), which is
   both off-palette and well under the 4.5:1 contrast floor on white. EPFL
   footers use ordinary black links; Indico's own selector is matched here
   so the rule actually wins. */
.footer .footer-links,
.footer .footer-links li,
.footer .footer-links a,
.footer a {
  color: var(--epfl-black);
}

.footer-links a:hover,
.footer a:hover {
  color: var(--epfl-red);
}

/* Disabled tabs/items: EPFL's disabled neutral rather than a near-black. */
.ui.menu .item.disabled,
button.disabled.item {
  color: var(--epfl-gray-500) !important;
}