/* Page-specific styles: candidates */

.tag {
  text-decoration: none !important;
  color: inherit !important;
  cursor: default !important;
  border: none !important;
}

.tag:hover,
.tag:active,
.tag:visited,
.tag:focus {
  text-decoration: none !important;
  color: inherit !important;
  outline: none !important;
}

.pie-chart-container {
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Mobile responsive styles (card table layout) */
@media screen and (max-width: 768px) {
  /* Make pie chart section vertical on mobile */
  .pie-chart-container {
    flex-direction: column !important;
    align-items: center !important;
  }

  #sector-pie {
    margin-right: 0 !important;
    margin-bottom: 16px;
    max-width: 90%;
    width: auto !important;
    height: auto !important;
  }

  #sector-legend {
    min-width: auto;
    width: 100%;
    font-size: 0.85em;
    column-count: 2;
    column-gap: 12px;
  }

  /* Hide table and show card layout */
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-elev-2);
    padding: 12px;
  }

  tr:hover {
    background: var(--color-surface-2) !important;
  }

  td {
    border: none;
    position: relative;
    padding: 8px 8px 8px 45%;
    text-align: right !important;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  td:before {
    content: attr(data-label);
    position: absolute;
    left: 12px;
    font-weight: bold;
    color: var(--color-text);
    text-align: left;
  }

  td:first-child {
    font-weight: bold;
    font-size: 1.1em;
    background: var(--color-bg);
    margin: -12px -12px 8px -12px;
    padding: 12px;
    border-radius: 8px 8px 0 0;
  }

  td:first-child:before {
    content: '';
  }

  td:first-child a {
    text-align: left !important;
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  #sector-pie {
    max-width: 280px;
  }

  #sector-legend {
    column-count: 1;
  }
}