/* ---------- Base styles ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  color: #222;
  background-color: #f6f7fb;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: #145c9e;
  text-decoration: none;

  &:hover,
  &:focus {
    text-decoration: underline;
  }
}

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Header (site-wide) ---------- */

.site-header {
  background: #145c9e;
  color: #ffffff;
  padding: 1rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  
  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }

  /* NEW: Branding block for logo + title */
  .branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .site-logo {
      width: 48px;
      height: 48px;
      object-fit: contain;
    }

    .title-wrapper {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }
  }

  .site-title {
    margin: 0;
    font-size: 1.6rem;
  }

  .site-subtitle {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
  }

  .main-nav {
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      gap: 1.25rem;
    }

    a {
      color: #ffffff;
      font-weight: 500;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }
  }
}

/* ---------- Generic section layout (shared) ---------- */

section {
  padding: 2.5rem 0;

  h2 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-size: 1.7rem;
  }

  .section-intro {
    max-width: 36rem;
    margin-bottom: 1.75rem;
    color: #444;
  }
}

/* ---------- Buttons (shared) ---------- */

.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  border: 2px solid transparent;
  text-align: center;

  &.primary-btn {
    background: #145c9e;
    color: #ffffff;

    &:hover,
    &:focus {
      background: #0f4577;
    }
  }

  &.secondary-btn {
    background: #ffffff;
    color: #145c9e;
    border-color: #145c9e;

    &:hover,
    &:focus {
      background: #dce7f3;
    }
  }
}

/* ---------- Footer (site-wide) ---------- */

.site-footer {
  background: #145c9e;
  color: #ffffff;
  padding: 1.5rem 0;
  margin-top: 2rem;
  text-align: center;

  .footer-note {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
  }
}
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    font-size: 0.95rem;
    background: #ffffff;
    border: 1px solid #d0d7e2;
    border-radius: 0.6rem;
    overflow: hidden; /* so rounded corners clip */
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);

    thead {
        background: #e8f0fb;
        color: #1a202c;
        font-weight: 600;

        th {
            padding: 0.75rem 1rem;
            text-align: left;
            border-bottom: 1px solid #ccd6e3;
        }
    }

    tbody {
        tr:nth-child(even) {
            background: #f7faff;
        }

        tr:nth-child(odd) {
            background: #ffffff;
        }

        tr:last-child td {
            border-bottom: none;
        }

        td {
            padding: 0.65rem 1rem;
            border-bottom: 1px solid #e0e6ef;
            color: #2d3748;
        }
    }
}


/* ---------- Responsive rules (site-wide) ---------- */

@media (max-width: 900px) {
  .site-header {
    .header-content {
      flex-direction: column;
      align-items: flex-start;
    }

    .main-nav ul {
      justify-content: flex-start;
    }
  }
}

@media (max-width: 600px) {
  .site-header {
    .header-content {
      align-items: stretch;
    }

    .main-nav ul {
      flex-wrap: wrap;
      gap: 0.75rem;
    }
  }
}
/* ---- Tooltip ----- */
.tooltip {
    position: relative;
    cursor: help;
    color: #0066cc;
    text-decoration: underline;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 260px;
    background-color: #f0f0f0;
    color: #000;
    text-align: left;
    border-radius: 6px;
    padding: 10px;
    border: 1px solid #ccc;

    /* Position */
    position: absolute;
    z-index: 10;
    top: 1.2em;
    left: 0;

    /* Fade-in animation */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}