/* ==========================================================
	   CORE RESPONSIVE STRUCTURE (The Mobile-to-Desktop Magic)
	   ========================================================== */
	.table-container {
	  width: 100%;
	  overflow-x: auto;
	  border-radius: var(--radius);
	}

	.modern-table {
	  width: 100%;
	  border-collapse: collapse;
	  text-align: left;
	  font-size: 0.95rem;
	}

	.modern-table th, 
	.modern-table td {
	  padding: 1rem 1.5rem;
	}

	/* Responsive Mobile Layout (Viewport under 768px) */
	@media (max-width: 768px) {
	  /* Force the table to not behave like a table anymore */
	  .modern-table, 
	  .modern-table thead, 
	  .modern-table tbody, 
	  .modern-table th, 
	  .modern-table td, 
	  .modern-table tr { 
		display: block; 
	  }
	  
	  /* Hide table headers completely for mobile views */
	  .modern-table thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	  }
	  
	  /* Turn each row into a distinct, separate card structure */
	  .modern-table tr { 
		margin-bottom: 1.5rem;
		border-radius: var(--radius);
		padding: 0.5rem;
		box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
	  }
	  
	  /* Transform cells to align side-by-side like rows inside the card */
	  .modern-table td { 
		border: none;
		position: relative;
		padding-left: 50% !important; /* Push text to the right side */
		text-align: right;
	  }
	  
	  /* Inject the descriptive label on the left side of the mobile row */
	  .modern-table td:before { 
		content: attr(data-label); /* Pulls from HTML 'data-label' */
		position: absolute;
		left: 1.5rem;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		text-align: left;
		font-weight: 700;
		color: var(--bg-dark);
	  }
	}

	/* ==========================================================
	   THE 3 DESIGN VARIATIONS (Choose by changing the class name)
	   ========================================================== */

	/* STYLE 1: Clean & Minimal (Clean lines, light grey alternates) */
	.modern-table.variant-minimal {
	  background: var(--surface);
	}
	.modern-table.variant-minimal th {
	  background-color: #f8fafc;
	  color: var(--bg-dark);
	  font-weight: 600;
	  border-bottom: 2px solid #e2e8f0;
	}
	.modern-table.variant-minimal td {
	  border-bottom: 1px solid #e2e8f0;
	}
	.modern-table.variant-minimal tbody tr:nth-child(even) {
	  background-color: #f8fafc;
	}
	@media (max-width: 768px) {
	  .modern-table.variant-minimal tr { background: var(--surface); border: 1px solid #e2e8f0; }
	  .modern-table.variant-minimal td { border-bottom: 1px solid #f1f5f9; }
	}

	/* STYLE 2: Frosted Glass / Modern SaaS (Sleek translucent look) */
	.modern-table.variant-glass {
	  background: rgba(255, 255, 255, 0.7);
	  backdrop-filter: blur(8px);
	  border: 1px solid rgba(255, 255, 255, 0.4);
	}
	.modern-table.variant-glass th {
	  color: var(--primary);
	  font-weight: 700;
	  text-transform: uppercase;
	  font-size: 0.8rem;
	  letter-spacing: 0.05em;
	  border-bottom: 1px solid rgba(37, 99, 235, 0.1);
	}
	.modern-table.variant-glass td {
	  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
	}
	.modern-table.variant-glass tbody tr:hover {
	  background-color: rgba(37, 99, 235, 0.03);
	}
	@media (max-width: 768px) {
	  .modern-table.variant-glass tr { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.6); }
	}

	/* STYLE 3: Bold Header (Deep contrast anchor) */
	.modern-table.variant-bold {
	  background: var(--surface);
	  box-shadow: 0 4px 15px rgba(0,0,0,0.02);
	}
	.modern-table.variant-bold th {
	  background-color: var(--bg-dark);
	  color: var(--text-light);
	  font-weight: 500;
	}
	.modern-table.variant-bold td {
	  border-bottom: 1px solid #f1f5f9;
	}
	.modern-table.variant-bold tbody tr:hover {
	  background-color: #fdfdfd;
	  color: var(--primary);
	}
	@media (max-width: 768px) {
	  .modern-table.variant-bold tr { background: var(--surface); border-left: 4px solid var(--primary); }
	}

  /* 1. Hide the radio buttons completely */
  input[type="radio"] {
    display: none;
  }

  /* 2. Show everything by default when "All" is selected */
  #filter-all:checked ~ table tr {
    display: table-row;
  }

  /* 3. Hide all rows first, then only show matching rows when a specific radio is checked */
  #filter-aws:checked ~ table tr:not(.aws),
  #filter-agile:checked ~ table tr:not(.agile),
  #filter-azure:checked ~ table tr:not(.azure),
  #filter-itil:checked ~ table tr:not(.itil),
  #filter-oracle:checked ~ table tr:not(.oracle),
  #filter-others:checked ~ table tr:not(.others) {
    display: none;
  }
 
   /* --- Simple CSS Styling for the Dropdown Look --- */
  .dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
    z-index: 1;
    padding: 10px;
  }
  .dropdown:hover .dropdown-content {
    display: block;
  }
  label {
    display: block;
    padding: 5px 10px;
    cursor: pointer;
  }
  label:hover { background-color: #ddd; }