/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== SITE HEADER ===== */

#site-header {
  background-image: url('../header/mobile_bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 16px 0;
  height: 112px;
  width: 100%;
}

#site-header div img {
  width: 286px;
}

@media (min-width: 768px) {
  #site-header {
    background-image: url('../header/desktop_bg.png');
    height: 144px;
  }

  #site-header div img {
    content: url('../header/election.svg');
    width: 100%;
  }

  #site-header .flex.justify-center {
    justify-content: space-between;
    align-items: center;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS V2 ===== */

/* Global Styles */
* {
  font-family: 'Inter', sans-serif;
}

/* Base body styling - OPTIMIZED */
body {
  min-height: 100vh;
  background: #f8fafc;
  background-attachment: fixed;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* OPTIMIZED: Simplified gradient for better performance */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(219, 234, 254, 0.3) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(224, 231, 255, 0.3) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Hidden utility class */
.hidden {
  display: none !important;
}

/* Tab content animation - OPTIMIZED */
.tab-content {
  animation: fadeIn 0.25s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glass Effect - OPTIMIZED WITHOUT BACKDROP FILTER */
.glass-effect {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Chart container - OPTIMIZED */
.chart-container {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  padding-bottom: 2.5rem;
  contain: layout style;
}

/* Navigation Styles - OPTIMIZED */
.nav-tab {
  transition: color 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.nav-tab::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: #21898b;
  transition: width 0.2s ease;
}

.nav-tab.active::before,
.nav-tab:hover::before {
  width: 100%;
}

/* Map Container - OPTIMIZED */
#map-holder,
#bpmap {
  contain: layout style paint;
}

.map-container {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Alert Styles - OPTIMIZED */
.alert-modern {
  border-left: 4px solid;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* REMOVED hover transforms for performance */
.alert-modern:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Card Styles - OPTIMIZED */
.card-modern {
  background: rgba(255, 255, 255, 0.98);
  border-radius: 16px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}

.card-modern:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Legend Styles - OPTIMIZED */
.legend-item {
  transition: transform 0.15s ease;
  margin-top: 24px;
}

.legend-item:hover {
  transform: scale(1.02);
}

/* Methodology Formula */
.methodology-formula {
  background: linear-gradient(135deg, #1ba09f 0%, #21898b 100%);
  border: 2px solid #e3f2fd;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

/* Table Styles - OPTIMIZED */
.table-modern {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  table-layout: fixed;
  width: 100%;
  contain: layout style;
}

.table-modern th {
  background: linear-gradient(135deg, #1ba09f 0%, #21898b 100%);
  color: white;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-align: center !important;
  vertical-align: middle !important;
}

.table-modern td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Center all table cells globally */
table th,
table td {
  text-align: center !important;
  vertical-align: middle !important;
}

.table-modern tbody tr {
  transition: background-color 0.15s ease;
}

.table-modern tbody tr:hover {
  background: rgba(33, 137, 139, 0.03);
}

/* OPTIMIZED: Remove pointer-events blocking during scroll */
/* This was causing unnecessary reflows */

/* Mobile Navigation */
.mobile-nav-toggle {
  display: none;
}

.mobile-nav {
  display: none;
}

/* ===== MOBILE RESPONSIVE STYLES - OPTIMIZED ===== */
@media (max-width: 768px) {

  /* Disable gradient on mobile */
  body::before {
    display: none;
  }

  body {
    background: #ffffff;
  }

  /* Simplified shadows on mobile */
  .card-modern,
  .alert-modern,
  .chart-container,
  .map-container,
  .table-modern {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  /* Disable hover effects on mobile */
  .card-modern:hover,
  .alert-modern:hover,
  .table-modern tbody tr:hover,
  .legend-item:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    background: inherit !important;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .desktop-nav {
    display: none !important;
  }

  .mobile-nav {
    display: block;
    position: fixed;
    top: 0;
    left: -100%;
    width: 80%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.98);
    transition: left 0.25s ease;
    z-index: 50;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
  }

  .mobile-nav.active {
    left: 0;
  }

  nav {
    display: none !important;
  }

  /* Mobile Table Styles */
  .table-responsive-mobile table {
    display: none !important;
  }

  .table-responsive-mobile {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
  }

}

/* Desktop Table Styles */
@media (min-width: 769px) {

  .table-modern img,
  .table-responsive-mobile img,
  table img {
    max-width: 1.5vw !important;
    max-height: 1.5vw !important;
    min-width: 20px !important;
    min-height: 20px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    vertical-align: middle !important;
  }

  .table-responsive-mobile table img[style] {
    max-width: 1.5vw !important;
    min-width: 20px !important;
  }

  .table-responsive-mobile {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive-mobile table {
    width: 100%;
    table-layout: auto;
  }

  .table-responsive-mobile th,
  .table-responsive-mobile td {
    white-space: nowrap;
    padding: 8px 4px;
    font-size: 0.9rem;
  }
}

/* Large Screen Styles */
@media (min-width: 1400px) {

  .table-modern img,
  .table-responsive-mobile img,
  table img {
    max-width: 2vw !important;
    max-height: 2vw !important;
    min-width: 24px !important;
    min-height: 24px !important;
  }

  .table-responsive-mobile table img[style] {
    max-width: 2vw !important;
    min-width: 24px !important;
  }
}

/* Medium Screen Adjustments */
@media (max-width: 1200px) and (min-width: 769px) {

  .table-modern img,
  .table-responsive-mobile img,
  table img {
    max-width: 1.2vw !important;
    max-height: 1.2vw !important;
    min-width: 18px !important;
    min-height: 18px !important;
  }

  .table-responsive-mobile table img[style] {
    max-width: 1.2vw !important;
    min-width: 18px !important;
  }

  .table-responsive-mobile th,
  .table-responsive-mobile td {
    padding: 6px 3px;
    font-size: 0.8rem;
  }
}

.chart-container .mb-6:first-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 1rem;
}

.chart-container h4 {
  color: #374151;
  font-weight: 600;
}

.mb-8.barbox {
  margin-bottom: 0rem !important;
}

#patko-legend {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ===== INDEX PAGE FORM STYLES ===== */

/* Form input styling */
.form-input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: white;
}

.form-input:focus {
  outline: none;
  border-color: #1ba09f;
  box-shadow: 0 0 0 3px rgba(27, 160, 159, 0.1);
}

.form-input:invalid {
  border-color: #ef4444;
}

/* Party label with logo support */
.party-label {
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Party logo styling */
.party-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 4px;
}

/* ===== BRAND COLOR UPDATES FOR TEAL THEME ===== */

/* Update body gradient for teal theme */
body::before {
  background: linear-gradient(135deg,
      rgba(209, 250, 229, 0.3) 0%,
      rgba(255, 255, 255, 0) 50%,
      rgba(204, 251, 241, 0.3) 100%);
}

/* Mobile body background update */
@media (max-width: 768px) {
  body {
    background: #f3f4f6;
  }
}

/* ===== RESULTS PAGE SPECIFIC STYLES ===== */

/* Teal-themed alert modern styles */
.alert-modern.teal-theme {
  background: rgba(243, 244, 246, 0.95);
  border-left-color: #1ba09f;
  color: #134e4a;
}

.alert-modern.teal-theme .text-brand {
  color: #1ba09f;
}

.alert-modern.teal-theme .text-brand:hover {
  color: #21898b;
}

/* Teal gradient text */
.text-gradient-teal {
  background: linear-gradient(135deg, #1ba09f 0%, #21898b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Teal background utilities */
.bg-teal-formula {
  background-color: rgba(240, 253, 250, 1);
}

/* Navigation hover states for teal theme */
.nav-tab:hover {
  color: #1ba09f;
}

.mobile-nav-toggle:hover {
  color: #1ba09f;
}

/* Methodology bullet points */
.methodology-bullet {
  background-color: #1ba09f;
}

/* Interactive elements teal theme */
button.teal-theme {
  background: linear-gradient(135deg, #1ba09f 0%, #21898b 100%);
  color: white;
}

button.teal-theme:hover {
  opacity: 0.9;
}

/* Link styling for teal theme */
.link-teal {
  color: #1ba09f;
  transition: color 0.2s ease;
}

.link-teal:hover {
  color: #21898b;
  text-decoration: underline;
}

/* ===== PERFORMANCE CRITICAL PATH CSS ===== */
/* These are the most important optimizations */

/* Disable expensive effects globally */
* {
  /* Disable text shadows globally */
  text-shadow: none !important;
}

/* Optimize scrolling performance */
html {
  scroll-behavior: smooth;
  /* Prevent horizontal scroll */
  overflow-x: hidden;
}

/* Optimize rendering for fixed elements */
.sticky,
header,
nav {
  will-change: auto;
  /* Only use will-change when actually animating */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Remove large horizontal margins on mobile */
@media (max-width: 768px) {
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Optional: Even less padding for very small screens */
  @media (max-width: 400px) {
    main {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
  }
}

/* ===== MOBILE HEADER OPTIMIZATION ===== */
@media (max-width: 768px) {

  /* Remove excessive margins and padding */
  main {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Compact header */
  header {
    position: sticky;
    top: 0;
  }

  header .container {
    padding: 12px !important;
  }

  /* Smaller logo */
  .logo img {
    height: 2.5rem !important;
  }

  header .flex.justify-center.items-center.mb-2 {
    margin-bottom: 8px !important;
  }

  /* Compact Vissza button */
  header a[href="/"] {
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-right: 8px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  header a[href="/"] svg {
    width: 16px !important;
    height: 16px !important;
    margin-right: 6px !important;
  }

  /* Remove hover transform on mobile */
  header a[href="/"]:hover {
    transform: none !important;
  }

  /* Compact mobile nav toggle */
  .mobile-nav-toggle {
    padding: 8px !important;
    min-width: 40px !important;
  }

  .mobile-nav-toggle svg {
    width: 20px !important;
    height: 20px !important;
  }

  /* Adjust nav container */
  header .flex.items-center.mb-2.gap-2 {
    gap: 8px !important;
    margin-bottom: 0 !important;
  }
}

/* ===== MOBILE MAP OPTIMIZATIONS ===== */
@media (max-width: 768px) {

  /* Reduce white borders (stroke width) on mobile */
  #map-holder path,
  #bpmap path {
    stroke-width: 0.5px !important;
  }

  /* Keep some padding but reduce it */
  .map-container .bg-white {
    padding: 12px 8px !important;
  }

  .map-container h3 {
    padding: 0 8px !important;
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }

  /* Optimize map heights for mobile */
  #map-holder {
    height: 50vh !important;
    min-height: 350px !important;
    max-height: 450px !important;
  }

  #bpmap {
    height: 40vh !important;
    min-height: 280px !important;
    max-height: 350px !important;
  }

  /* Extend maps slightly beyond card padding - keeps card margin */
  .space-y-6.mb-8 .w-full .map-container {
    margin-left: -4px;
    margin-right: -4px;
  }

  /* Slightly reduce card border radius on mobile */
  .map-container {
    border-radius: 12px !important;
  }

  /* Position zoom controls better on mobile */
  .map-container>div>div:last-child {
    bottom: 12px !important;
    right: 12px !important;
  }
}

/* For very small screens */
@media (max-width: 400px) {
  #map-holder {
    height: 45vh !important;
    min-height: 300px !important;
  }

  #bpmap {
    height: 35vh !important;
    min-height: 250px !important;
  }
}

/* ===== MOBILE TOOLTIP OPTIMIZATION ===== */
@media (max-width: 768px) {
  .ttip {
    max-width: 260px !important;
    font-size: 12px !important;
    padding: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .ttip h3 {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .ttip h4 {
    font-size: 12px !important;
  }

  .ttip p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* Prevent tooltip from causing horizontal scroll on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  .ttip {
    max-width: calc(100vw - 20px) !important;
  }

    /* Mobile Table Cards - IMPROVED WORD WRAPPING */
    @media (max-width: 768px) {
      .mobile-table-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        overflow: hidden;
      }
  
      .mobile-table-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        /* Changed from center to flex-start */
        margin-bottom: 12px;
        /* Increased from 8px */
        font-size: 0.875rem;
        min-height: auto;
        /* Changed from 24px */
        gap: 12px;
        /* Added gap */
      }
  
      .mobile-table-row:last-child {
        margin-bottom: 0;
      }
  
      .mobile-table-label {
        font-weight: 600;
        color: #374151;
        flex: 1;
        padding-right: 8px;
        /* Reduced from 12px */
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        /* Added */
        hyphens: auto;
        /* Added for better Hungarian word breaking */
        line-height: 1.4;
        max-width: 60%;
        /* Added to prevent taking too much space */
      }
  
      .mobile-table-value {
        font-weight: 600;
        /* Increased from 500 */
        color: #1f2937;
        text-align: right;
        flex-shrink: 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 35%;
        /* Reduced from 50% */
        line-height: 1.4;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        min-width: fit-content;
        /* Added */
      }
  
      .mobile-table-value img,
      .mobile-table-row img {
        max-width: 20px !important;
        max-height: 20px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        vertical-align: middle;
        flex-shrink: 0;
      }
  
      .mobile-table-header {
        background: linear-gradient(135deg, #1ba09f 0%, #21898b 100%);
        color: white;
        font-weight: 600;
        text-align: center;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 16px;
        font-size: 1rem;
      }
  
      .mobile-table-party-name {
        font-weight: bold !important;
        font-size: 1.2rem !important;
        color: #1f2937 !important;
        margin-bottom: 12px !important;
        text-align: center !important;
        border-bottom: 2px solid #e5e7eb !important;
        padding-bottom: 8px !important;
      }
    }
}

/* ===== DESKTOP TABLE STYLES - FIXED HEADER WRAPPING ===== */

/* Base table layout */
.table-modern {
  table-layout: auto !important;
  width: 100% !important;
}

.table-modern table {
  width: 100% !important;
  table-layout: auto !important;
}

/* All table headers - allow wrapping with better spacing */
.table-modern th {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding: 12px 12px !important;
  vertical-align: middle !important;
  min-width: 120px !important;
  hyphens: auto !important;
  font-size: 0.85rem !important;
}

/* First column header (Pártok) - narrower */
.table-modern th:first-child {
  min-width: 90px !important;
  max-width: 110px !important;
}

/* Other column headers - adequate space for long Hungarian text */
.table-modern th:not(:first-child) {
  min-width: 140px !important;
  max-width: 200px !important;
}

/* All table cells - base styling */
.table-modern td {
  padding: 10px 12px !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}

/* First column cells - allow wrapping for long category names */
.table-modern td:first-child {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
  min-width: 180px !important;
  max-width: 250px !important;
}

/* Ensure proper spacing between columns */
.table-modern {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* ===== MOBILE HEADER LAYOUT FIX ===== */
@media (max-width: 768px) {

  /* Adjust the flex container that holds Vissza button and hamburger */
  header .flex.items-center.mb-2.gap-2 {
    justify-content: space-between !important;
  }

  /* Push hamburger to the right */
  .mobile-nav-toggle {
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* Vissza button stays on the left */
  header a[href="/"] {
    margin-right: auto !important;
  }
}

/* ===== ACCORDION TABLES STYLING - SPECIFIC IDS ===== */

/* Target specific accordion tables by ID */
#fractional_votes_without_winner_compensation,
#fractional_votes_with_winner_compensation,
#list-mandates,
#dhondt_matrix,
#smd_table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  width: 100% !important;
  table-layout: auto !important;
}

/* Accordion table headers */
#fractional_votes_without_winner_compensation th,
#fractional_votes_with_winner_compensation th,
#list-mandates th,
#dhondt_matrix th,
#smd_table th {
  background: linear-gradient(135deg, #1ba09f 0%, #21898b 100%) !important;
  color: white !important;
  font-weight: 600 !important;
  letter-spacing: 0.025em !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
  padding: 12px 12px !important;
  min-width: 120px !important;
  hyphens: auto !important;
  font-size: 0.85rem !important;
}

/* First column header */
#fractional_votes_without_winner_compensation th:first-child,
#fractional_votes_with_winner_compensation th:first-child,
#list-mandates th:first-child,
#dhondt_matrix th:first-child,
#smd_table th:first-child {
  min-width: 90px !important;
  max-width: 110px !important;
}

/* Other column headers */
#fractional_votes_without_winner_compensation th:not(:first-child),
#fractional_votes_with_winner_compensation th:not(:first-child),
#list-mandates th:not(:first-child),
#dhondt_matrix th:not(:first-child),
#smd_table th:not(:first-child) {
  min-width: 80px !important;
  max-width: 120px !important;
}

/* Accordion table cells */
#fractional_votes_without_winner_compensation td,
#fractional_votes_with_winner_compensation td,
#list-mandates td,
#dhondt_matrix td,
#smd_table td {
  text-align: center !important;
  vertical-align: middle !important;
  padding: 10px 8px !important;
  white-space: nowrap !important;
}

/* First column cells - allow wrapping for long location names */
#fractional_votes_without_winner_compensation td:first-child,
#fractional_votes_with_winner_compensation td:first-child,
#dhondt_matrix td:first-child,
#smd_table td:first-child {
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  line-height: 1.3 !important;
  text-align: left !important;
  padding-left: 12px !important;
}

/* Accordion table row hover */
#fractional_votes_without_winner_compensation tbody tr,
#fractional_votes_with_winner_compensation tbody tr,
#list-mandates tbody tr,
#dhondt_matrix tbody tr,
#smd_table tbody tr {
  transition: background-color 0.15s ease !important;
}

#fractional_votes_without_winner_compensation tbody tr:hover,
#fractional_votes_with_winner_compensation tbody tr:hover,
#list-mandates tbody tr:hover,
#dhondt_matrix tbody tr:hover,
#smd_table tbody tr:hover {
  background: rgba(33, 137, 139, 0.03) !important;
}

/* Zebra striping for better readability */
#fractional_votes_without_winner_compensation tbody tr:nth-child(even),
#fractional_votes_with_winner_compensation tbody tr:nth-child(even),
#dhondt_matrix tbody tr:nth-child(even),
#smd_table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.5);
}

/* Bold numbers in dhondt_matrix */
#dhondt_matrix td b {
  font-weight: 700 !important;
  color: #1ba09f !important;
}

/* Mobile: Add to table-responsive-mobile wrapper */
@media (max-width: 768px) {

  #fractional_votes_without_winner_compensation,
  #fractional_votes_with_winner_compensation,
  #list-mandates,
  #dhondt_matrix,
  #smd_table {
    font-size: 0.8rem !important;
  }

  #fractional_votes_without_winner_compensation th,
  #fractional_votes_with_winner_compensation th,
  #list-mandates th,
  #dhondt_matrix th,
  #smd_table th {
    font-size: 0.75rem !important;
    padding: 10px 6px !important;
  }

  #fractional_votes_without_winner_compensation td,
  #fractional_votes_with_winner_compensation td,
  #list-mandates td,
  #dhondt_matrix td,
  #smd_table td {
    padding: 8px 4px !important;
    font-size: 0.75rem !important;
  }
}
/* ===== REDUCE MOBILE CARD PADDING ===== */
@media (max-width: 768px) {

  /* Info/Alert cards - reduce horizontal padding */
  .bg-gray-100.border.border-teal-200,
  .alert-modern {
    padding: 12px 12px !important;
    /* Reduced from default */
  }

  /* Card modern - reduce horizontal padding */
  .card-modern {
    padding: 16px 12px !important;
    /* Keep vertical, reduce horizontal */
  }

  /* Mobile table cards - reduce horizontal padding */
  .mobile-table-card {
    padding: 12px !important;
    /* Reduced from 16px */
  }

  /* Header sections in mobile cards */
  .mobile-table-header {
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
  }
}

/* For very small screens - even tighter */
@media (max-width: 400px) {

  .bg-gray-100.border.border-teal-200,
  .alert-modern,
  .card-modern {
    padding: 12px 10px !important;
  }

  .mobile-table-card {
    padding: 10px !important;
  }
}
/* ===== KATEX FORMULA MOBILE FIX ===== */

/* Base formula container */
.methodology-formula,
.bg-teal-formula,
.text-lg {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 768px) {

  /* Scale down KaTeX formulas on mobile */
  .katex,
  .katex-html {
    font-size: 0.9em !important;
    max-width: 100% !important;
  }

  /* Formula containers - allow horizontal scroll */
  .methodology-formula,
  .bg-teal-formula {
    padding: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Text containing formulas */
  .text-lg {
    font-size: 0.9rem !important;
  }

  /* KaTeX display mode (block formulas) */
  .katex-display {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 4px !important;
    margin: 8px 0 !important;
  }

  /* Scale down complex fractions */
  .katex .frac-line,
  .katex .mfrac {
    transform: scale(0.95) !important;
    transform-origin: center !important;
  }

  /* Ensure formula wrapper doesn't overflow */
  p:has(.katex-display) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* For very small screens - more aggressive scaling */
@media (max-width: 400px) {

  .katex,
  .katex-html {
    font-size: 0.8em !important;
  }

  .katex-display {
    font-size: 0.85em !important;
  }

  .methodology-formula,
  .bg-teal-formula {
    padding: 10px 8px !important;
  }
}

/* ===== SUPPORTING CSS FOR MOBILE REORDERING ===== */

/* Ensure summary tab can be flex container */
#summary {
  width: 100%;
}

/* Smooth transitions when reordering */
#summary>* {
  transition: order 0.3s ease;
}

/* Mobile: Add visual separation after maps */
@media (max-width: 768px) {
  #summary>div[data-order="1"] {
    margin-bottom: 2rem !important;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
  }
}

/* Mandate Calculator Chart Tooltip */
.mandate-tooltip {
  position: absolute;
  background: rgba(30, 30, 30, 0.95);
  color: white;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  max-width: 280px;
}

.mandate-tooltip.show {
  opacity: 1;
}

.mandate-tooltip .tooltip-title {
  font-weight: 700;
  margin-bottom: 4px;
  color: #a5b4fc;
  font-size: 15px;
}

.mandate-tooltip .tooltip-content {
  font-size: 13px;
  line-height: 1.6;
}

#mandate-chart-container {
  width: 100%;
  min-height: 450px;
  /* Volt 600px */
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  #mandate-chart-container {
    min-height: 350px;
    /* Volt 400px */
  }
}