/* Reset default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Set base font and background */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f4f5f7;
  color: #2f3542;
  min-height: 100vh;   /* allow scrolling beyond one screen */
}

nav.menu {
  background-color: #2f3542;
  padding: 20px;
  text-align: right;
}

/* Sidebar styles */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 230px;
  height: 100vh;
  background-color: #2f3542;
  color: #f4f5f7;
  border-top-right-radius: 20px;
  display: flex;
  flex-direction: column;
  transition: left 0.3s ease;
}

.logo img { max-width: 100%; height: auto; }

/* Menu styles */
.sidebar .menu {
  display: flex;
  flex-direction: column;
  text-align: right; /* Aligns text to the right */
  gap: 15px;
}

.sidebar .menu a {
  color: #f4f5f7;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.sidebar .menu a:hover {
  color: #a4b0be;
}

/* when collapsed, move completely off-screen */
.sidebar.collapsed {
  left: -230px;
}

.toggle-btn {
  position: absolute;
  top: 220px;          /* keep your middle placement */
  right: 0px;        /* slightly outside sidebar edge */
  background-color: #3b4251;
  color: #f4f5f7;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  width: 28px;
  height: 28px;
  z-index: 1000;
  transition: right 0.3s ease, transform 0.3s ease;
}

/* Collapsed sidebar */
.sidebar.collapsed {
  left: -230px;
}

/* Shift mainContent when collapsed */
.sidebar.collapsed ~ .mainContent {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

.sidebar.collapsed .toggle-btn {
  right: -38px;
  transform: rotate(0deg); /* keep it pointing left always */
}

/* Main content area */
.mainContent {
  flex: 1;
  background-color: #f4f5f7;
  margin-left: 230px;  /* same as sidebar width */
  overflow: visible;    /* let content flow */
  min-height: 100vh;    /* full height but can grow */
  padding: 0;           /* don’t reset spacing */
  padding-top: 0;
}

.important-banner{
    margin-left: 15px;
  }
    
.mainContent table:first-of-type {
  margin-top: 0 !important;
}

.sidebar.collapsed + .mainContent {
  margin-left: 0;
  transition: margin-left 0.3s ease;
}

.pwa-install-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1200;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(244, 245, 247, 0.22);
  border-radius: 8px;
  background-color: #2f3542;
  color: #f4f5f7;
  box-shadow: 0 10px 24px rgba(47, 53, 66, 0.24);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
}

.pwa-install-button:hover {
  background-color: #3b4251;
}

.pwa-install-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(15, 23, 42, 0.72);
}

.pwa-install-card {
  position: relative;
  width: min(520px, 100%);
  padding: 28px;
  border: 1px solid rgba(244, 245, 247, 0.12);
  border-radius: 8px;
  background-color: #202938;
  color: #f4f5f7;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.36);
}

.pwa-install-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  color: #d8dce3;
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}

.pwa-install-close:hover {
  background-color: rgba(244, 245, 247, 0.08);
}

.pwa-install-logo {
  display: block;
  width: 74px;
  height: 74px;
  object-fit: contain;
  margin: 0 auto 16px;
}

.pwa-install-card h2 {
  margin: 0;
  color: #f4f5f7;
  text-align: center;
  font-size: 1.45rem;
  line-height: 1.25;
}

.pwa-install-copy {
  margin: 8px 0 22px;
  color: #c8d0dc;
  text-align: center;
  line-height: 1.45;
}

.pwa-install-steps {
  display: grid;
  gap: 14px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: install-step;
}

.pwa-install-steps li {
  position: relative;
  min-height: 36px;
  padding-left: 52px;
  color: #e6e9ef;
  line-height: 1.35;
  counter-increment: install-step;
}

.pwa-install-steps li::before {
  content: counter(install-step);
  position: absolute;
  left: 0;
  top: -4px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid #22c55e;
  border-radius: 50%;
  color: #22c55e;
  font-weight: 800;
}

.pwa-install-primary,
.pwa-install-later {
  width: 100%;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 800;
}

.pwa-install-primary {
  min-height: 50px;
  background-color: #22c55e;
  color: #102018;
  font-size: 1rem;
}

.pwa-install-primary:hover {
  background-color: #16a34a;
}

.pwa-install-later {
  margin-top: 12px;
  min-height: 34px;
  background-color: transparent;
  color: #aab4c2;
  font-size: 0.92rem;
}

.pwa-install-later:hover {
  color: #f4f5f7;
}

@media (max-width: 640px) {
  .pwa-install-button {
    right: 12px;
    bottom: 12px;
  }

  .pwa-install-overlay {
    align-items: flex-end;
    padding: 12px;
  }

  .pwa-install-card {
    padding: 24px 18px 20px;
  }
}

.basicTable {
  width: auto; 
  border-spacing: 0;
  border-radius: 20px; /* same as sidebar */
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 0.85rem;
  padding: 6px 8px;
  border-collapse: collapse;   /* not "separate" */
  background-color: #3b4251;   /* your table background */
  white-space: nowrap;  
  table-layout: auto;
  margin: 0 0 15px 15px;   /* apply gap on all sides */
  border-spacing: 0;
  border-collapse: collapse;

}
.basicTable a {
  color: #f4f5f7;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.basicTable a:hover {
  color: #a4b0be;
}

.basicTable thead {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.basicTable img {
  height: 20px;
}

/* Header styling */
.basicTable thead th {
  background-color: #2f3542;
  color: #f1f2f6;
  font-weight: bold;
  text-align: center;
  padding: 6px 10px;       /* ↓ reduced vertical padding */
  line-height: 1.2;        /* ↓ tighter text box height */
  font-size: 0.95em;       /* optional: slightly smaller text */
  font-size: 0.95em;
  text-transform: uppercase;    /* ✅ all caps for clarity */
  letter-spacing: 1px;        /* ✅ subtle extra spacing between letters */
}

/* Sub Header styling */
 .basicTable tbody tr th{
  background-color: #57606f;
  color: #f1f2f6;
  padding: 4px 8px;      /* ↓ tighter vertical spacing */
  line-height: 1.2;      /* compact but still readable */
  text-transform: uppercase;    /* ✅ all caps for clarity */
  letter-spacing: 1px;        /* ✅ subtle extra spacing between letters */
 }

 .basicTable tbody td table th {
  background-color: inherit !important; /* or use the mini table’s own color */
}

.basicTable tbody td{
  background-color: #57606f;
  color: #f1f2f6;
  text-align: center;
  vertical-align: top;   /* keeps alignment tidy */
  padding: 4px 8px;      /* ↓ tighter vertical spacing */
  line-height: 1.2;      /* compact but still readable */
 } 

/* Modif pour tableau Transactions */
/* Dates */
.trade-date {
  background: linear-gradient(90deg, #2f3542, #2f3542);
  color: #fff;
  font-weight: 600;
  text-align: center;
  border-radius: 8px;
  padding: 4px 0;
  margin: 12px 0 6px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Teams */
.trade-teams {
  display: flex;
  justify-content: space-between;
  color: #f4f5f7;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 4px;
}

/* Player list */
.trade-players {
  color: #d8dce3;
  font-size: 1em;
  padding: 8px 12px; 
  line-height: 1.3;     /* space between lines of text */  
}

.trade-pick-toggle {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.trade-pick-result {
  color: #ffd43b;
  font-size: 0.92em;
  margin-top: 2px;
  padding-left: 12px;
  opacity: 0.95;
}

.trade-pick-result::before {
  content: "↳ ";
  color: #ffd43b;
}

.basicTable .trade-pick-result a,
.trade-pick-result a {
  color: #ffd43b;
  text-decoration: none;
}

.basicTable .trade-pick-result a:hover,
.trade-pick-result a:hover {
  color: #ffe066;
  text-decoration: underline;
}

/* Optional subtle divider */
.trade-block {
  background-color: #57606f;
  padding: 8px 12px;
  border-radius: 10px;
  /*margin-bottom: 10px;*/
  transition: transform 0.2s ease;
  margin: 10px;
}

/* Trade header line (date + opponent, or both teams) */
.trade-teams {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2f3542;   /* same as table header */
  color: #f1f2f6;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 8px;
  margin-bottom: 6px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.trade-teams img {
  height: 22px;
  width: 22px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 6px;
}

#leagueTradesTable th {
    text-align: center !important;
    padding: 6px 6px;
}

#rondeTable th:nth-child(4),
#rondeTable td:nth-child(4) {
  text-align: left;
}

#mainPoolerTable th:nth-child(2),
#mainPoolerTable td:nth-child(2),
#mainPoolerTable th:nth-child(8),
#mainPoolerTable td:nth-child(8) {
  text-align: left;
}

#rondeTable {
  box-shadow: 6px 4px 10px rgba(0, 0, 0, 0.2);  /* right + down, darker */
  transition: box-shadow 0.2s ease-in-out;
}

.draft-team-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.draft-team-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  vertical-align: middle;
}

#draftTable thead th {
  text-align: left;
  /*text-indent: 25px;*/
}

#standingsTable th:nth-child(2) {
  text-align: left !important;
}
#standingsTable tbody tr td:nth-child(2) {
  text-align: left !important;
}

#debutTable thead th {
  text-align: left !important;
}

#debutTable tbody td {
  text-align: left !important;
}

/*Section page teams*/
.overview-table,
.team-page-top,
.plf-table,
.team-page-table {
  background-color: #3b4251;
  border-radius: 12px;
}

/* ===== Mini-table inside team header ===== */
.mini-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.8rem;
}

.mini-table td {
  padding: 0.2rem 0.5rem;
  text-align: left;
}

#teamHeader,
#playerSections,
.team-page-table { margin-bottom: 0.6rem; }

.team-left {
  flex: 3 1 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-right {
  flex: 1 1 300px;
  min-width: 280px;
}

#teamHeader .logo-cell img { max-height: 100px; width: auto; }
#teamHeader .injured-cell { text-align: left; vertical-align: top; }
.podiums-info {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  white-space: normal;
  text-align: center;
}
.podiums-label {
  flex: 0 0 auto;
}
.podiums-list {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  max-width: 190px;
  line-height: 1.15;
}
.podium-icon {
  display: inline-flex;
  width: 17px;
  height: 17px;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
}
.podium-empty {
  opacity: 0.8;
}
.injured-title { font-weight: 600; margin-bottom: 4px; }
.mini-table--injured td { vertical-align: top; }
#teamHeader .mini-table--injured td { text-align: left !important; }
.injured-list,
.injured-list-wrap {
  display: block;
}
.injured-item {
  display: block;
  white-space: normal;
  font-size: 0.82rem;
  line-height: 1.2;
  margin: 0 0 2px 0;
}
.injured-item a {
  color: #f4f5f7;
}

.team-layout {
  display: grid;
  grid-template-columns: 78% 22%;
  align-items: start;
  width: 100%;
  overflow-x: auto;      /* ✅ allow horizontal scroll */
  width: max-content;    /* ✅ prevents columns from shrinking too much */
}


#forwardsTable tbody tr td:nth-child(1),
#defenseTable tbody tr td:nth-child(1),
#goalersTable tbody tr td:nth-child(1),
#archive tbody tr td:nth-child(1){
  text-align: left !important;
}

#picksArchives tbody tr td {
  text-align: center !important;
}

#archive.basicTable thead th {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
  line-height: 1.15 !important;
}

#archive.basicTable tbody td {
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  line-height: 1.1 !important;
  border: 0 !important;
}

#archive.basicTable tbody tr {
  border: 0 !important;
}

#archive.basicTable tbody tr:last-child td {
  padding-bottom: 6px !important;
}

#playerSections,
#playerSections th,
#playerSections td {
  padding-left: 4px;
  padding-right: 4px;
}

#playerSections {
  border-spacing: 0;     /* removes space between cells if not collapsed */
  border-collapse: collapse; /* ensures cells share borders */
}

.playerSectionsWrapper {
  display: flex;
  flex-direction: row; /* <— make sure it's row, not row-reverse */
  width: 100%;

  gap: 10px;
}

#playerSections {
flex: 1;           /* allow it to scale freely */
  min-width: 718px;  /* optional, lower if you want it tighter */
}

.sideTables {
  flex: 1;          /* takes remaining space */
  min-width: 250px; /* sets a reasonable min width for smaller side tables */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#playerSections td {
  text-align: center;
  vertical-align: top; /* or middle, depending on your look */
}

#playerSections td > table {
  margin-left: auto;
  margin-right: auto;
}

#playerSections td > table.basicTable td {
  padding-left: 10px;
  padding-right: 10px;
}

/* === Joueurs footer controls === */
.footer-controls {
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}

.footer-controls button {
  background-color: #3b4251;
  color: #f1f2f6;
  border: 1px solid #004080;
  border-radius: 6px;
  cursor: pointer;
}

.footer-controls button:hover {
  background-color: #3b4251;
}

.footer-controls .active {
  background-color: #3b4251;
}

/* === Filters bar (responsive) === */
#filtersBar {
  background-color: #2f3542;
  border-bottom: 2px solid #004080;
}
/* === Filters bar (horizontal scroll version) === */
#filtersBar {
  background-color: #2f3542;
  border-bottom: 2px solid #004080;
}

.filters-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f1f2f6;
  font-size: 0.9rem;
  overflow-x: auto;             /* ✅ allow horizontal scroll */
  white-space: nowrap;          /* ✅ prevent wrapping */
  scrollbar-width: thin;        /* Firefox: thinner scrollbar */
  scrollbar-color: #004080 #2f3542;
}

.filters-container::-webkit-scrollbar {
  height: 6px;                  /* ✅ thinner scrollbar for Chrome */
}
.filters-container::-webkit-scrollbar-track {
  background: #2f3542;
}
.filters-container::-webkit-scrollbar-thumb {
  background-color: #004080;
  border-radius: 4px;
}

.filters-left {
  display: inline-flex;          /* ✅ keep in one line */
  align-items: center;
  gap: 15px;
  white-space: nowrap;
  flex-shrink: 0;
}

.filters-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.filters-right input[type="text"] {
  background-color: #3b4251;
  border: 1px solid #004080;
  border-radius: 6px;
  color: #f1f2f6;
  padding: 4px 8px;
  font-size: 0.9rem;
  width: 180px;
  min-width: 140px;
}

.filters-right input[type="text"]:focus {
  outline: none;
  border-color: #ffd700;
}

.filters-container {
  justify-content: space-between;
  gap: 40px; /* adds visual breathing space between Libre and Recherche */
}

/* Table footer background + centered text */
#joueursOptions tfoot td,
#listJoueurs tfoot td {
  background-color: #3b4251;
  color: #f1f2f6;
  text-align: center;
}

/* Flex layout only inside footer content, not on tfoot */
.footer-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
/* Ensure the cells respect fixed width */
#joueursOptions th,
#joueursOptions td,
#listJoueurs th,
#listJoueurs td {
  word-wrap: break-word;      /* keeps text from expanding cells */
  overflow: hidden;
}

#listJoueurs thead th.sortable-header {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 24px;
}

#listJoueurs thead th.sortable-header::after {
  content: "\2195";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  opacity: 0.45;
}

#listJoueurs thead th.sortable-header.sort-desc::after {
  content: "\25BC";
  opacity: 1;
}

#listJoueurs thead th.sortable-header.sort-asc::after {
  content: "\25B2";
  opacity: 1;
}

/* Tighten footer vertical spacing precisely */
#joueursOptions tfoot td,
#listJoueurs tfoot td {
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;          /* neutralize extra vertical spacing from text */
  height: 1px;             /* removes default cell height reserve */
}

.footer-controls {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.85rem;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1;
  height: auto;
}

.tables-wrapper {
  display: flex;
  flex-wrap: nowrap;       /* ❌ no wrapping */
  overflow-x: auto;        /* ✅ horizontal scroll when too wide */
  overflow-y: hidden;
  gap: 1rem;
  align-items: flex-start; /* keeps them top-aligned */
  padding-bottom: 0.5rem;  /* a bit of space under scrollbar */
}

/* Optional: make sure tables don't shrink */
.tables-wrapper table {
  flex: 0 0 auto;
}

.tables-wrapper table {
  align-self: flex-start !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

a[href^="#"][onclick^="loadTeams"] img:hover {
  filter: brightness(1.15);
  transform: scale(1.05);
  transition: 0.2s;
}

.rules-page {
  max-width: 1120px;
  margin: 24px 24px 32px;
  color: #2f3542;
}

.rules-hero {
  background: linear-gradient(135deg, #2f3542 0%, #3b4251 100%);
  border-radius: 22px;
  color: #f4f5f7;
  padding: 28px 32px;
  box-shadow: 0 18px 36px rgba(47, 53, 66, 0.16);
}

.rules-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  background-color: rgba(244, 245, 247, 0.12);
  color: #d8dce3;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rules-title {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: 1.08;
}

.rules-subtitle {
  margin-top: 10px;
  max-width: 760px;
  color: #d8dce3;
  font-size: 1rem;
  line-height: 1.6;
}

.rules-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 8px 14px;
  border-radius: 12px;
  background-color: rgba(244, 245, 247, 0.1);
  color: #f1f2f6;
  font-size: 0.95rem;
}

.rules-pdf-link {
  color: #f1f2f6;
  font-weight: 700;
  text-decoration: none;
}

.rules-pdf-link:hover,
.rules-pdf-link:focus {
  text-decoration: underline;
}

.rules-pdf-panel {
  margin-top: 0;
  overflow: hidden;
  border: 1px solid #dfe4ea;
  border-radius: 20px;
  background-color: #ffffff;
  box-shadow: 0 12px 28px rgba(47, 53, 66, 0.08);
}

.rules-pdf-viewer {
  display: block;
  width: 100%;
  min-height: min(98vh, 1200px);
  border: 0;
}

.rules-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.rules-card {
  grid-column: span 4;
  background-color: #ffffff;
  border: 1px solid #dfe4ea;
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 12px 28px rgba(47, 53, 66, 0.08);
}

.rules-card-half {
  grid-column: span 6;
}

.rules-card-full {
  grid-column: 1 / -1;
}

.rules-cluster {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.rules-cluster-stack {
  display: grid;
  gap: 18px;
  align-content: start;
}

.rules-cluster > .rules-card,
.rules-cluster > .rules-cluster-stack,
.rules-cluster-stack > .rules-card {
  grid-column: auto;
}

.rules-card h2,
.rules-card h3 {
  margin: 0 0 14px;
  color: #2f3542;
}

.rules-card h2 {
  font-size: 1.3rem;
}

.rules-card h3 {
  font-size: 1.05rem;
}

.rules-card p,
.rules-card li {
  font-size: 0.98rem;
  line-height: 1.62;
}

.rules-card p + p {
  margin-top: 12px;
}

.rules-card ul {
  margin: 0;
  padding-left: 1.2rem;
}

.rules-card li + li {
  margin-top: 8px;
}

.rules-card .rules-subsection + .rules-subsection {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #e7ebf0;
}

.rules-highlight {
  color: #f4f5f7;
  background: linear-gradient(135deg, #57606f 0%, #2f3542 100%);
}

.rules-highlight h2,
.rules-highlight h3,
.rules-highlight p,
.rules-highlight li {
  color: inherit;
}

.rules-highlight .rules-subsection + .rules-subsection {
  border-top-color: rgba(244, 245, 247, 0.16);
}

.rules-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.rules-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  background-color: rgba(47, 53, 66, 0.08);
  color: #2f3542;
  font-size: 0.9rem;
  font-weight: 600;
}

.rules-note {
  margin-top: 16px;
  padding: 14px 16px;
  border-left: 4px solid #2f3542;
  border-radius: 0 14px 14px 0;
  background-color: #eef1f5;
}

.rules-highlight .rules-note {
  background-color: rgba(244, 245, 247, 0.12);
  border-left-color: #f4f5f7;
}

.rules-salary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.rules-salary-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 16px;
  background-color: #ffffff;
}

.rules-salary-table thead th {
  padding: 12px 14px;
  background-color: #2f3542;
  color: #f4f5f7;
  text-align: left;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rules-salary-table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid #e8ecf1;
  font-size: 0.95rem;
}

.rules-salary-table tbody tr:last-child td {
  border-bottom: none;
}

.rules-salary-table tbody td:last-child {
  text-align: right;
  font-weight: 600;
  color: #2f3542;
}

.rules-section-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: #57606f;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.rules-highlight .rules-section-eyebrow {
  color: #d8dce3;
}

@media (max-width: 900px) {
  .rules-grid {
    grid-template-columns: 1fr;
  }

  .rules-card,
  .rules-card-half,
  .rules-card-full {
    grid-column: 1 / -1;
  }

  .rules-cluster {
    grid-template-columns: 1fr;
  }

  .rules-page {
    margin: 18px 14px 28px;
  }

  .rules-hero,
  .rules-card {
    padding: 20px 18px;
  }

  .rules-pdf-panel {
    border-radius: 16px;
  }

  .rules-pdf-viewer {
    min-height: 88vh;
  }
}