html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* Font stack with Traditional Chinese fallbacks (zh-Hant). */
html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Noto Sans", "PingFang TC", "Microsoft JhengHei", "Microsoft YaHei",
    "Heiti TC", "LiHei Pro", Arial, sans-serif;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

/* The app shell manages the full viewport height with flexbox, so the footer
   sticks to the bottom without absolute positioning. */
body {
  margin-bottom: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ============================================================
   App shell: header / left sidebar / main container / footer

   These rules live in the global stylesheet rather than
   _Layout.cshtml.css on purpose: scoped CSS only applies the
   scope attribute to elements in the declaring view, so rules
   targeting markup inside a partial (such as _Sidebar.cshtml)
   would never match.
   ============================================================ */

:root {
  --sidebar-width: 240px;
  --sidebar-bg: #f8f9fa;
  --sidebar-border: #e5e5e5;
  --sidebar-link-color: #495057;
  --sidebar-link-hover-bg: #e9ecef;
  --sidebar-link-active-color: #1b6ec2;
  --sidebar-link-active-bg: #e7f1fb;
  --header-height: 80px;
}

.app-body {
  /* The shell owns the full viewport height so the footer can stick to the
     bottom of the window without using absolute positioning. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- Header ---------- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  /* The header carries the navy gradient, from the lighter band at the top to
     the dark blue at the bottom. */
  background: linear-gradient(to bottom, #344e75, #0a111e, #0a192f);
  min-height: var(--header-height);
}

/* The navbar sits on the background of the header, so it carries no colour of
   its own. The rule needs the important flag, because Bootstrap sets the
   colour of the navbar with one. */
.app-header .navbar {
  background-color: transparent !important;
  min-height: var(--header-height);
  box-shadow: none;
}

.app-header .navbar-brand {
  display: inline-flex;
  align-items: center;
}

.app-header .navbar-brand img {
  max-height: calc(var(--header-height) - 16px);
  width: auto;
}

/* The header is dark, so the language switcher is light as well. */
.app-header .language-switcher__label {
  color: rgba(255, 255, 255, 0.55);
}

.app-header .language-switcher .btn-link {
  color: rgba(255, 255, 255, 0.85);
}

.app-header .language-switcher .btn-link:hover {
  color: #fff;
}

/* ---------- Shell (sidebar + main) ---------- */

.app-shell {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

/* ---------- Left sidebar ---------- */

.app-sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
}

.sidebar-nav {
  padding: 1rem 0.75rem 2rem;
}

.sidebar-nav__section + .sidebar-nav__section {
  margin-top: 1.25rem;
}

.sidebar-nav__heading {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #868e96;
  margin: 0 0 0.35rem 0.75rem;
}

.sidebar-nav__list {
  margin: 0;
  padding: 0;
}

.sidebar-nav__link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.1rem;
  border-radius: 0.375rem;
  color: var(--sidebar-link-color);
  text-decoration: none;
  font-size: 0.925rem;
}

.sidebar-nav__link:hover {
  background-color: var(--sidebar-link-hover-bg);
  color: #212529;
}

.sidebar-nav__link.is-active {
  background-color: var(--sidebar-link-active-bg);
  color: var(--sidebar-link-active-color);
  font-weight: 600;
}

.sidebar-nav__icon {
  font-size: 0.6rem;
  color: #adb5bd;
  line-height: 1;
}

.sidebar-nav__label {
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-nav__link.is-active .sidebar-nav__icon {
  color: var(--sidebar-link-active-color);
}

/* ---------- Main container ---------- */

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-content {
  flex: 1 1 auto;
  padding: 1.5rem;
}

/* ---------- Footer ---------- */

.app-footer {
  flex: 0 0 auto;
  background-color: #fff;
}

.app-footer__inner {
  padding: 0.9rem 1.5rem;
  font-size: 0.875rem;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.app-footer__sep {
  color: #adb5bd;
}

/* The disclaimer and the copyright line are stacked and centred, with the
   disclaimer on top of the copyright line. */
.app-footer__inner--stacked {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.app-footer__disclaimer {
  margin: 0;
  max-width: 72rem;
}

.app-footer__copyright {
  margin: 0;
}

/* ---------- Company autocomplete dropdown ---------- */

.company-dropdown {
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  z-index: 1050;
}

/* The dropdown starts hidden and is revealed by removing the hidden
   attribute. The display value has to be set here because the Bootstrap
   utility classes use !important and would win over the hidden attribute. */
.company-dropdown:not([hidden]) {
  display: block;
}

.company-dropdown__create {
  font-weight: 600;
  color: var(--sidebar-link-active-color);
}

/* ---------- Option groups: a bordered fieldset of checkboxes ---------- */

.option-groups {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 0 1rem 0.75rem;
  margin-inline: 0;
}

.option-groups__legend {
  float: none;
  width: auto;
  padding: 0 0.35rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
}

/* The legend is floated by default, so the body needs to clear it. */
.option-groups__body {
  display: flow-root;
}

.option-groups__option {
  margin-bottom: 0.6rem;
}

.option-groups__option:last-child {
  margin-bottom: 0;
}

.option-groups__option .form-check-label {
  /* The labels are long, so they wrap under the checkbox instead of
     pushing the box to the next line. */
  overflow-wrap: anywhere;
}

/* The groups of the categories that are not chosen are hidden by the script.
   The display value has to be set here because the Bootstrap utility classes
   use !important and would win over the hidden attribute. */
.option-groups[hidden] {
  display: none !important;
}

/* ---------- Rating: the fires the members gave to an interview ---------- */

.rating__title {
  margin-bottom: 0.4rem;
}

.rating__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rating__fires {
  display: inline-flex;
  gap: 0.1rem;
  line-height: 1;
}

.rating__text {
  font-size: 0.9rem;
}

.rating__label {
  font-size: 0.9rem;
  font-weight: 600;
}

/* The own rating of the member sits below the average of the members. */
.rating__own {
  margin-top: 0.8rem;
}

.rating__message {
  margin: 0.4rem 0 0;
  font-size: 0.9rem;
}

.rating__form {
  display: flex;
  gap: 0.15rem;
  margin-top: 0.4rem;
}

/* The button is made to look like a fire that can be clicked, so it carries
   no border and no padding of its own. */
.rating__fire-btn {
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  color: var(--bs-secondary-color);
  cursor: pointer;
}

.rating__fire-btn:hover,
.rating__fire-btn:focus-visible {
  color: var(--bs-warning);
}

.rating__fire {
  font-size: 1.15rem;
}

/* ---------- Home page: the three blocks of interviews ---------- */

/* The block is a fieldset, so it is drawn like the option groups of the
   write form: a border with the heading as the legend of it. */
.home-block {
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 0 1rem 0.75rem;
  margin-inline: 0;
  margin-bottom: 1.75rem;
}

.home-block__heading {
  float: none;
  width: auto;
  padding: 0 0.35rem;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--bs-body-color);
}

/* The legend is floated by default, so the body needs to clear it. */
.home-block__list {
  display: flow-root;
  margin-bottom: 0;
}

/* The read more button sits at the bottom of the block. */
.home-block__more {
  margin-top: 0.75rem;
}

/* ---------- The row of an interview, shared by the blocks and the pages of
   the rankings ---------- */

.home-list {
  margin-bottom: 0;
}

.home-item {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.home-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.home-item__title {
  font-weight: 600;
  text-decoration: none;
}

.home-item__title:hover {
  text-decoration: underline;
}

.home-item__meta {
  font-size: 0.85rem;
  color: var(--bs-secondary-color);
}

.home-item__separator {
  padding: 0 0.25rem;
}

.home-item__rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* The rating of the poster, shown in the block of the worst rated ones. */
.home-item__score {
  font-size: 0.9rem;
  font-weight: 600;
}

/* The fires of a row are smaller than the ones of the detail page, because a
   list holds many interviews at once. */
.home-item__rating .rating__fire {
  font-size: 0.95rem;
}

/* ---------- Responsive: collapse the sidebar on small screens ---------- */

@media (max-width: 767.98px) {
  .app-shell {
    flex-direction: column;
  }

  .app-sidebar {
    flex: 0 0 auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--sidebar-border);
    max-height: 45vh;
  }

  .app-content {
    padding: 1rem;
  }
}