/* ============================================
   Modern XLX Dashboard - FreeSTAR Network
   Fully Responsive, Glassmorphism Design
   ============================================ */

:root {
   /* FreeSTAR Network Color Palette - Light Mode */
   --primary-dark: #04295e;
   --primary-blue: #2a68a1;
   --accent-blue: #0066cc;
   --light-blue: #3385d6;
   --gradient-start: #e8f4f8;
   --gradient-end: #d1e7f5;
   
   /* Modern UI Colors - Light Mode - HIGH CONTRAST */
   --glass-bg: rgba(255, 255, 255, 0.95);
   --glass-border: rgba(4, 41, 94, 0.2);
   --text-light: #1a1a1a;
   --text-dark: #1a1a1a;
   --hover-bg: rgba(0, 102, 204, 0.1);
   --active-bg: rgba(0, 102, 204, 0.2);
   --shadow-color: rgba(0, 0, 0, 0.15);
   --body-bg-start: #e8f4f8;
   --body-bg-end: #d1e7f5;
   --header-bg: rgba(255, 255, 255, 0.98);
   --header-text: #1a1a1a;
   --menu-bg: rgba(255, 255, 255, 0.95);
   --menu-link-bg: rgba(4, 41, 94, 0.05);
   --menu-link-text: #04295e;
   --table-header-bg: rgba(4, 41, 94, 0.08);
   --table-text: #1a1a1a;
   --link-color: #0066cc;
   --link-hover: #004499;
   
   /* Spacing */
   --spacing-xs: 0.5rem;
   --spacing-sm: 1rem;
   --spacing-md: 1.5rem;
   --spacing-lg: 2rem;
   --spacing-xl: 3rem;
   
   /* Border Radius */
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
}

/* Dark Mode - Glossy Slate/Off-Black Theme */
[data-theme="dark"] {
   /* Dark Mode Color Palette */
   --primary-dark: #0a0e1a;
   --primary-blue: #1a2332;
   --accent-blue: #4a9eff;
   --light-blue: #6bb8ff;
   --gradient-start: #0a0e1a;
   --gradient-end: #1a2332;
   
   /* Dark Mode UI Colors - Glossy Slate */
   --glass-bg: rgba(30, 40, 55, 0.85);
   --glass-border: rgba(74, 158, 255, 0.2);
   --text-light: #e8eef5;
   --text-dark: #e8eef5;
   --hover-bg: rgba(74, 158, 255, 0.15);
   --active-bg: rgba(74, 158, 255, 0.25);
   --shadow-color: rgba(0, 0, 0, 0.6);
   --body-bg-start: #0a0e1a;
   --body-bg-end: #1a2332;
   --header-bg: rgba(20, 28, 40, 0.95);
   --header-text: #e8eef5;
   --menu-bg: rgba(26, 35, 50, 0.95);
   --menu-link-bg: rgba(40, 55, 75, 0.9);
   --menu-link-text: #e8eef5;
   --table-header-bg: rgba(40, 55, 75, 0.5);
   --table-text: #e8eef5;
   --link-color: #4a9eff;
   --link-hover: #6bb8ff;
}

/* ============================================
   Base Styles & Reset
   ============================================ */

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   background: linear-gradient(135deg, var(--body-bg-start) 0%, var(--body-bg-end) 100%);
   background-attachment: fixed;
   color: var(--text-light);
   line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: background 0.3s ease, color 0.3s ease;
   width: 100%;
   max-width: 100%;
   position: relative;
}

/* ============================================
   Glassmorphism Card Effect
   ============================================ */

.glass-card {
   background: rgba(255, 255, 255, 0.1); /* Fallback for older browsers */
   background: var(--glass-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--glass-border);
   border-radius: var(--radius-md);
   box-shadow: 0 8px 32px var(--shadow-color);
   padding: var(--spacing-md);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@supports not (backdrop-filter: blur(10px)) {
   .glass-card {
      background: rgba(255, 255, 255, 0.2);
   }
}

.glass-card:hover {
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
   transform: translateY(-4px);
}

/* ============================================
   Layout Utilities
   ============================================ */

.two-column-grid {
   display: grid;
   grid-template-columns: 1fr minmax(300px, 400px);
   gap: 2rem;
   align-items: start;
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
}

/* Desktop: More space for modules */
@media screen and (min-width: 1400px) {
   .two-column-grid {
      grid-template-columns: 1fr minmax(400px, 600px);
      gap: 2.5rem;
   }
}

@media screen and (max-width: 1200px) {
   .two-column-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
   }
}

/* When modules need full width on desktop for many modules */
.modules-full-width {
   grid-column: 1 / -1;
   width: 100%;
}

/* ============================================
   Header Section
   ============================================ */

#top {
   background: var(--header-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: var(--spacing-md);
   text-align: center;
   box-shadow: 0 4px 16px var(--shadow-color);
   position: sticky;
   top: 0;
   z-index: 1000;
   animation: slideDown 0.5s ease;
   transition: padding 0.3s ease, box-shadow 0.3s ease;
   will-change: padding, box-shadow;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
}

/* Shrunk state when scrolling - smooth animated transition */
#top.shrunk {
   padding: var(--spacing-xs) var(--spacing-md);
   box-shadow: 0 2px 8px var(--shadow-color);
}

#top.shrunk img {
   max-height: 60px;
   margin-bottom: 0;
   transform: scale(0.95);
   opacity: 0.9;
}

#top.shrunk .header-info {
   max-height: 0;
   opacity: 0;
   margin-top: 0;
   overflow: hidden;
   transform: translateY(-10px) translateZ(0);
   -webkit-transform: translateY(-10px) translateZ(0);
   transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease;
}

@supports not (backdrop-filter: blur(10px)) {
   #top {
      background: var(--header-bg);
   }
}

@keyframes slideDown {
   from {
      transform: translateY(-100%);
      opacity: 0;
   }
   to {
      transform: translateY(0);
      opacity: 1;
   }
}

#top img {
   max-width: 100%;
   height: auto;
   border-radius: var(--radius-md);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
   margin-bottom: var(--spacing-sm);
   transition: max-height 0.3s ease, transform 0.3s ease, opacity 0.3s ease, margin-bottom 0.3s ease;
   transform-origin: center;
   will-change: max-height, transform, opacity;
   transform: translateZ(0);
   -webkit-transform: translateZ(0);
}

.header-info {
   color: var(--header-text);
   font-size: 0.95rem;
   font-weight: 500;
   margin-top: var(--spacing-sm);
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--spacing-sm);
   align-items: center;
   transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s ease;
   max-height: 100px;
   opacity: 1;
   transform: translateY(0) translateZ(0);
   -webkit-transform: translateY(0) translateZ(0);
   overflow: hidden;
   will-change: max-height, opacity, transform;
}

.header-info .separator {
   color: var(--accent-blue);
   font-weight: bold;
}

/* ============================================
   Navigation Menu
   ============================================ */

#menubar {
   background: var(--menu-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   padding: var(--spacing-sm);
   box-shadow: 0 4px 16px var(--shadow-color);
   position: sticky;
   top: 0;
   z-index: 999;
   transition: all 0.3s ease;
}

@supports not (backdrop-filter: blur(10px)) {
   #menubar {
      background: var(--menu-bg);
   }
}

/* Menu container with hamburger */
.menu-container {
   max-width: 1400px;
   margin: 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

/* Theme toggle button */
.theme-toggle {
   background: var(--menu-link-bg);
   border: 2px solid var(--glass-border);
   color: var(--menu-link-text);
   padding: 0.5rem 1rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 1.2rem;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   align-items: center;
   gap: 0.5rem;
   font-weight: 600;
   margin-left: auto;
}

.theme-toggle:hover {
   background: var(--hover-bg);
   transform: translateY(-3px) rotate(15deg) scale(1.1);
   box-shadow: 0 6px 20px var(--shadow-color);
}

.theme-toggle:active {
   transform: translateY(-1px) rotate(0deg) scale(0.95);
}

/* Hamburger menu button */
.mobile-menu-toggle {
   display: none;
   background: var(--menu-link-bg);
   border: 2px solid var(--glass-border);
   padding: 0.5rem 1rem;
   border-radius: var(--radius-sm);
   cursor: pointer;
   font-size: 1.5rem;
   color: var(--menu-link-text);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-toggle:hover {
   background: var(--hover-bg);
   transform: scale(1.1) rotate(90deg);
}

.mobile-menu-toggle:active {
   transform: scale(0.95) rotate(90deg);
}

#menu {
   flex: 1;
}

#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   gap: var(--spacing-xs);
}

#menu li {
   display: inline-block;
}

.menulink {
   display: inline-block;
   padding: var(--spacing-sm) var(--spacing-md);
   text-decoration: none;
   font-weight: 600;
   font-size: 0.9rem;
   border-radius: var(--radius-sm);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   position: relative;
   overflow: hidden;
   background: var(--menu-link-bg);
   color: var(--menu-link-text);
   border: 2px solid transparent;
}

.menulink:hover {
   background: var(--accent-blue);
   color: #ffffff;
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 6px 20px var(--shadow-color);
}

.menulink.active,
.menulinkactive {
   background: var(--accent-blue);
   color: #ffffff !important;
   transform: translateY(-3px) scale(1.05);
   box-shadow: 0 6px 20px var(--shadow-color);
}

/* ============================================
   Content Area
   ============================================ */

#content {
   max-width: 1400px;
   margin: var(--spacing-lg) auto;
   padding: 0 var(--spacing-md);
   animation: fadeIn 0.6s ease;
   width: 100%;
   box-sizing: border-box;
   overflow-x: hidden;
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(20px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* ============================================
   Tables - Modern Design
   ============================================ */

.listingtable {
   width: 100%;
   max-width: 100%;
   background: rgba(255, 255, 255, 0.05); /* Fallback for older browsers */
   background: var(--glass-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: var(--radius-md);
   overflow: hidden;
   box-shadow: 0 8px 32px var(--shadow-color);
   margin-top: var(--spacing-md);
   border: 1px solid var(--glass-border);
   table-layout: auto;
   box-sizing: border-box;
}

@supports not (backdrop-filter: blur(10px)) {
   .listingtable {
      background: rgba(255, 255, 255, 0.1);
   }
}

.listingtable th {
   background: var(--table-header-bg);
   color: var(--table-text);
   padding: var(--spacing-md);
   text-align: center;
   font-weight: 600;
   font-size: 0.95rem;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border-bottom: 2px solid var(--glass-border);
   position: sticky;
   top: 0;
   z-index: 10;
   transition: background 0.3s ease, color 0.3s ease;
}

.listingtable td {
   padding: var(--spacing-sm) var(--spacing-md);
   color: var(--table-text) !important;
   text-align: center;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   transition: all 0.3s ease;
   word-wrap: break-word;
   overflow-wrap: break-word;
   background: transparent !important;
}

/* Override inline bgcolor attributes */
.listingtable tr[bgcolor] td {
   background: transparent !important;
   color: var(--table-text) !important;
}

.listingtable tr {
   background: transparent;
}

.listingtable tr:nth-child(even) {
   background: rgba(0, 0, 0, 0.03);
}

[data-theme="dark"] .listingtable tr:nth-child(even) {
   background: rgba(255, 255, 255, 0.03);
}

.listingtable tr:hover {
   background: var(--hover-bg) !important;
}

/* Disable hover effects on filter row */
.listingtable tr.filter-row:hover {
   background: transparent !important;
}

.listingtable tr.filter-row:hover th {
   background: transparent !important;
}

.listingtable tr.filter-row:hover td {
   background: transparent !important;
   transform: none !important;
}

/* Progressive enhancement for modern browsers with :has() support (Safari 15.4+, Firefox 103+, Chrome 105+) */
@supports selector(:has(*)) {
   .listingtable tr:has(th[colspan]):hover,
   .listingtable tr:has(th .filter-container):hover {
      background: transparent !important;
   }
   
   .listingtable tr:has(th[colspan]):hover th,
   .listingtable tr:has(th .filter-container):hover th {
      background: transparent !important;
   }
   
   .listingtable tr:has(th[colspan]):hover td,
   .listingtable tr:has(th .filter-container):hover td {
      background: transparent !important;
      transform: none !important;
   }
}

.listingtable tr:hover td {
   background: var(--hover-bg) !important;
   transform: scale(1.01);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.listingtable tr {
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Ensure links inside tables are visible */
.listingtable a {
   color: var(--link-color) !important;
}

.listingtable a:hover {
   color: var(--link-hover) !important;
}

/* Responsive table wrapper */
.table-wrapper {
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
   border-radius: var(--radius-md);
   width: 100%;
   max-width: 100%;
}

/* Ensure tables don't cause horizontal overflow */
.table-wrapper table {
   min-width: 100%;
   max-width: 100%;
}

/* Module Grid - Responsive Design */
.module-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--spacing-md);
   padding: var(--spacing-md);
   width: 100%;
   max-width: 100%;
   box-sizing: border-box;
}

.module-card {
   background: var(--glass-bg);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 2px solid var(--glass-border);
   border-radius: var(--radius-md);
   padding: var(--spacing-md);
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   animation: fadeInUp 0.5s ease-out backwards;
   overflow: hidden;
}

.module-card:nth-child(1) { animation-delay: 0.05s; }
.module-card:nth-child(2) { animation-delay: 0.1s; }
.module-card:nth-child(3) { animation-delay: 0.15s; }
.module-card:nth-child(4) { animation-delay: 0.2s; }
.module-card:nth-child(5) { animation-delay: 0.25s; }
.module-card:nth-child(n+6) { animation-delay: 0.3s; }

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translateY(30px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.module-card:hover {
   transform: translateY(-8px) scale(1.02);
   box-shadow: 0 16px 40px var(--shadow-color);
   border-color: var(--accent-blue);
}

.module-card-header {
   background: linear-gradient(135deg, var(--accent-blue) 0%, var(--light-blue) 100%);
   color: #ffffff;
   padding: var(--spacing-md);
   border-radius: var(--radius-sm);
   text-align: center;
   font-weight: 700;
   font-size: 1rem;
   margin-bottom: var(--spacing-md);
   line-height: 1.4;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.module-card:hover .module-card-header {
   transform: scale(1.05);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.module-card-content {
   max-height: 500px;
   overflow-y: auto;
   overflow-x: hidden;
   padding-right: 4px;
}

/* Custom scrollbar for module content */
.module-card-content::-webkit-scrollbar {
   width: 6px;
}

.module-card-content::-webkit-scrollbar-track {
   background: rgba(0, 0, 0, 0.1);
   border-radius: 3px;
}

.module-card-content::-webkit-scrollbar-thumb {
   background: var(--accent-blue);
   border-radius: 3px;
}

.module-card-content::-webkit-scrollbar-thumb:hover {
   background: var(--light-blue);
}

.module-user {
   padding: var(--spacing-sm);
   margin: 4px 0;
   background: rgba(0, 0, 0, 0.05);
   border-radius: var(--radius-sm);
   font-size: 0.9rem;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   transform-origin: left center;
   border-left: 3px solid transparent;
}

[data-theme="dark"] .module-user {
   background: rgba(255, 255, 255, 0.05);
}

.module-user:hover {
   background: var(--hover-bg);
   transform: translateX(8px) scale(1.02);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   border-left-color: var(--accent-blue);
}

.module-user a {
   color: var(--link-color) !important;
   text-decoration: none;
   font-weight: 500;
}

.module-user a:hover {
   color: var(--link-hover) !important;
}

/* Desktop-specific module styling - More columns and open layout */
@media screen and (min-width: 1200px) {
   .module-grid {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: var(--spacing-lg);
   }
   
   .module-card {
      padding: var(--spacing-lg);
   }
   
   .module-card-header {
      font-size: 1.1rem;
      padding: var(--spacing-lg);
   }
   
   .module-user {
      font-size: 0.95rem;
      padding: var(--spacing-sm);
   }
}

/* Tablet view */
@media screen and (min-width: 769px) and (max-width: 1199px) {
   .module-grid {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: var(--spacing-md);
   }
}

/* Mobile-specific module styling */
@media screen and (max-width: 768px) {
   .module-grid {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: var(--spacing-xs);
      padding: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin: 0;
   }
   
   .module-card {
      padding: var(--spacing-sm);
      width: 100%;
      box-sizing: border-box;
   }
   
   .module-card-header {
      font-size: 0.85rem;
      padding: var(--spacing-sm);
   }
   
   .module-card-content {
      max-height: 300px;
   }
   
   .module-user {
      font-size: 0.8rem;
      padding: var(--spacing-xs);
      margin: 2px 0;
   }
}

@media screen and (max-width: 480px) {
   .module-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-xs);
      width: 100%;
      max-width: 100%;
      padding: 0;
      box-sizing: border-box;
      margin: 0;
   }
   
   .module-card {
      width: 100%;
      box-sizing: border-box;
   }
   
   .module-card-content {
      max-height: 250px;
   }
   
   .module-card-header {
      font-size: 0.75rem;
      padding: var(--spacing-xs);
   }
   
   .module-user {
      font-size: 0.75rem;
   }
}

/* Module Cards for Mobile - Better UX */
@media screen and (max-width: 768px) {
   .two-column-grid {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 100%;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
      gap: var(--spacing-sm);
   }
   
   .two-column-grid > * {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   
   /* Make cards central and full width */
   .glass-card,
   .listingtable {
      width: 100%;
      max-width: 100%;
      margin: 0;
      box-sizing: border-box;
   }
   
   .table-wrapper {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
   }
   
   /* Make module table scrollable horizontally on mobile */
   .module-table-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }
   
   /* Alternative: Stack modules vertically on very small screens */
   @media screen and (max-width: 480px) {
      .listingtable tr th:not(:first-child) {
         min-width: 120px;
      }
   }
}

/* ============================================
   Links & Buttons
   ============================================ */

a:link,
a:visited {
   color: var(--link-color, var(--accent-blue));
   transition: all 0.3s ease;
}

a:hover,
a:active {
   color: var(--link-hover, var(--light-blue));
   text-decoration: none;
}

.listinglink {
   color: var(--link-color, var(--accent-blue));
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
}

.listinglink:hover {
   color: var(--link-hover, var(--light-blue));
   text-decoration: underline;
}

.pl {
   color: var(--link-color, var(--accent-blue));
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
}

.pl:hover {
   color: var(--link-hover, var(--light-blue));
}

.smalllink {
   color: var(--accent-blue);
   text-decoration: none;
   font-size: 0.9rem;
   font-weight: 500;
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--radius-sm);
   background: rgba(135, 220, 252, 0.1);
   transition: all 0.3s ease;
}

.smalllink:hover {
   background: rgba(135, 220, 252, 0.2);
   color: var(--light-blue);
}

/* ============================================
   Forms & Filters
   ============================================ */

/* Filter Container - Flexbox Layout */
.filter-container {
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-sm);
   align-items: center;
   justify-content: space-between;
   width: 100%;
   padding: var(--spacing-xs) 0;
}

.filter-item {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
}

.filter-item form {
   display: flex;
   align-items: center;
   gap: var(--spacing-xs);
   flex-wrap: nowrap;
}

.filter-reset {
   flex-shrink: 0;
}

.FilterField {
   padding: var(--spacing-xs) var(--spacing-sm);
   border: 2px solid var(--glass-border);
   border-radius: var(--radius-sm);
   background: rgba(255, 255, 255, 0.9);
   color: #1a1a1a;
   font-size: 0.9rem;
   transition: all 0.3s ease;
   width: 150px;
   flex-shrink: 0;
}

.FilterField:focus {
   outline: none;
   border-color: var(--accent-blue);
   box-shadow: 0 0 0 3px rgba(135, 220, 252, 0.2);
}

.FilterField::placeholder {
   color: rgba(51, 51, 51, 0.5);
}

.FilterSubmit {
   padding: var(--spacing-xs) var(--spacing-md);
   border: none;
   border-radius: var(--radius-sm);
   background: linear-gradient(135deg, var(--accent-blue) 0%, var(--light-blue) 100%);
   color: #ffffff;
   font-size: 0.9rem;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   flex-shrink: 0;
}

.FilterSubmit:hover {
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.FilterSubmit:active {
   transform: translateY(0);
}

/* Responsive Filter Layout for Tablets */
@media screen and (max-width: 1024px) {
   .filter-container {
      gap: var(--spacing-xs);
   }
   
   .FilterField {
      width: 120px;
      font-size: 0.85rem;
   }
   
   .FilterSubmit {
      font-size: 0.85rem;
      padding: var(--spacing-xs) var(--spacing-sm);
   }
}

/* ============================================
   Tooltip
   ============================================ */

a.tip {
   text-decoration: none;
   position: relative;
}

a.tip span {
   display: none;
}

a.tip:hover span {
   display: block;
   position: absolute;
   background: rgba(0, 0, 0, 0.9);
   backdrop-filter: blur(10px);
   color: var(--text-light);
   padding: var(--spacing-xs) var(--spacing-sm);
   border-radius: var(--radius-sm);
   font-size: 0.85rem;
   white-space: nowrap;
   z-index: 1000;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   margin-top: var(--spacing-xs);
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
   animation: tooltipFade 0.3s ease;
}

@keyframes tooltipFade {
   from {
      opacity: 0;
      transform: translateX(-50%) translateY(-5px);
   }
   to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
   }
}

/* ============================================
   Error Messages
   ============================================ */

.error {
   background: rgba(255, 82, 82, 0.2);
   border: 2px solid rgba(255, 82, 82, 0.5);
   border-radius: var(--radius-md);
   padding: var(--spacing-md);
   margin: var(--spacing-md) 0;
   color: #ff5252;
   font-weight: 600;
   text-align: center;
   animation: shake 0.5s ease;
}

@keyframes shake {
   0%, 100% { transform: translateX(0); }
   25% { transform: translateX(-10px); }
   75% { transform: translateX(10px); }
}

/* ============================================
   Footer
   ============================================ */

footer {
   text-align: center;
   padding: var(--spacing-lg);
   margin-top: var(--spacing-xl);
   background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.2) 100%);
   color: var(--text-light);
   font-size: 0.85rem;
}

footer p {
   color: var(--text-light);
   margin: 0;
}

footer a {
   color: var(--accent-blue);
   text-decoration: none;
   font-weight: 500;
   transition: all 0.3s ease;
}

footer a:hover {
   color: var(--light-blue);
}

/* ============================================
   Status Indicators
   ============================================ */

.status-online {
   display: inline-block;
   width: 10px;
   height: 10px;
   background: #4caf50;
   border-radius: 50%;
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0%, 100% {
      opacity: 1;
      transform: scale(1);
   }
   50% {
      opacity: 0.7;
      transform: scale(1.2);
   }
}

/* ============================================
   Responsive Design - Mobile First
   ============================================ */

/* Tablets and below */
@media screen and (max-width: 1024px) {
   #content {
      padding: 0 var(--spacing-sm);
   }
   
   .header-info {
      font-size: 0.85rem;
   }
   
   .menulink,
   .menulinkactive {
      font-size: 0.85rem;
      padding: var(--spacing-xs) var(--spacing-sm);
   }
}

/* Mobile devices */
@media screen and (max-width: 768px) {
   :root {
      /* Override spacing variables for mobile - smaller spacing for compact mobile layout */
      --spacing-md: 1rem;
      --spacing-lg: 1.5rem;
      --spacing-xs: 0.5rem;
      --spacing-sm: 0.75rem;
      --mobile-padding: 0.5rem; /* Consistent padding for all mobile elements */
   }
   
   #content {
      padding: var(--mobile-padding);
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      margin: var(--spacing-sm) 0;
   }
   
   #top {
      padding: var(--spacing-sm);
   }
   
   #top img {
      max-width: 90%;
   }
   
   .header-info {
      flex-direction: column;
      font-size: 0.8rem;
      gap: var(--spacing-xs);
   }
   
   .header-info .separator {
      display: none;
   }
   
   #menubar {
      padding: var(--spacing-xs);
   }
   
   .mobile-menu-toggle {
      display: block;
   }
   
   .theme-toggle {
      font-size: 1rem;
      padding: 0.4rem 0.8rem;
   }
   
   #menu ul {
      flex-direction: column;
      gap: var(--spacing-xs);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
      width: 100%;
   }
   
   #menu ul.show {
      max-height: 1000px;
      margin-top: var(--spacing-sm);
      transition: max-height 0.5s ease-in;
   }
   
   #menu li {
      width: 100%;
   }
   
   .menulink,
   .menulinkactive {
      width: 100%;
      text-align: center;
      font-size: 0.9rem;
      padding: var(--spacing-sm);
   }
   
   .listingtable {
      font-size: 0.85rem;
   }
   
   .listingtable th,
   .listingtable td {
      padding: var(--spacing-xs);
      /* Allow text wrapping on mobile */
      word-wrap: break-word;
      word-break: break-word;
      overflow-wrap: break-word;
   }
   
   /* Stack table cells vertically on very small screens */
   .table-wrapper {
      overflow-x: auto;
      max-width: 100%;
      margin: 0;
      box-sizing: border-box;
   }
   
   /* Mobile Filter Layout - Stack Vertically */
   .filter-container {
      flex-direction: column;
      align-items: stretch;
      gap: var(--spacing-sm);
      padding: var(--spacing-sm);
   }
   
   .filter-item {
      width: 100%;
      justify-content: center;
   }
   
   .filter-item form {
      width: 100%;
      flex-direction: column;
      gap: var(--spacing-xs);
   }
   
   .FilterField {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      font-size: 1rem;
      padding: var(--spacing-sm);
   }
   
   .FilterSubmit {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      font-size: 1rem;
      padding: var(--spacing-sm);
   }
   
   .filter-reset {
      text-align: center;
      width: 100%;
   }
   
   .filter-reset .smalllink {
      display: block;
      width: 100%;
      text-align: center;
      padding: var(--spacing-sm);
   }
   
   /* Ensure filter row (with colspan) is always visible on mobile */
   .listingtable tr:first-child th[colspan] {
      display: table-cell !important;
      visibility: visible !important;
      opacity: 1 !important;
   }
}

/* Tablets and Mobile devices - Hide extra columns for better mobile experience */
@media screen and (max-width: 768px) {
   /* Hide DPRS, Suffix, and Via/Peer columns on tablets and mobile - Keep Flag, Callsign, Last heard, Module */
   .listingtable.users-table th:nth-child(4),
   .listingtable.users-table td:nth-child(4),
   .listingtable.users-table th:nth-child(5),
   .listingtable.users-table td:nth-child(5),
   .listingtable.users-table th:nth-child(6),
   .listingtable.users-table td:nth-child(6) {
      display: none;
   }
   
   /* Hide Band, Last Heard, Linked for, Protocol, and IP columns on repeaters table - Keep #, Flag, DV Station, Module */
   .listingtable.repeaters-table th:nth-child(4),
   .listingtable.repeaters-table td:nth-child(4),
   .listingtable.repeaters-table th:nth-child(5),
   .listingtable.repeaters-table td:nth-child(5),
   .listingtable.repeaters-table th:nth-child(6),
   .listingtable.repeaters-table td:nth-child(6),
   .listingtable.repeaters-table th:nth-child(7),
   .listingtable.repeaters-table td:nth-child(7),
   .listingtable.repeaters-table th:nth-child(9),
   .listingtable.repeaters-table td:nth-child(9) {
      display: none;
   }
   
   /* Hide # and Linked for columns on peers table - Keep XLX Peer, Last Heard, Protocol, Module, IP */
   .listingtable.peers-table th:nth-child(1),
   .listingtable.peers-table td:nth-child(1),
   .listingtable.peers-table th:nth-child(4),
   .listingtable.peers-table td:nth-child(4) {
      display: none;
   }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
   .listingtable th,
   .listingtable td {
      font-size: 0.75rem;
      padding: 0.3rem;
      /* Force text wrapping */
      white-space: normal;
      word-wrap: break-word;
      overflow-wrap: break-word;
   }
   
   .glass-card {
      padding: var(--spacing-sm);
   }
   
   /* Make fixed-width columns responsive */
   .listingtable th[width],
   .listingtable td[width] {
      width: auto !important;
      min-width: 0 !important;
   }
   
   /* Ensure filter forms stack properly */
   .listingtable th table td[align] {
      text-align: center !important;
   }
   
   /* Compact table layout for users - keep table structure but make it scrollable */
   .listingtable.users-table {
      font-size: 0.7rem;
      display: block;
      width: 100%;
   }
   
   .listingtable.users-table thead,
   .listingtable.users-table tbody,
   .listingtable.users-table tr {
      display: table;
      width: 100%;
      table-layout: fixed;
   }
   
   .listingtable.users-table th,
   .listingtable.users-table td {
      font-size: 0.65rem;
      padding: 0.25rem 0.15rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
   
   /* Prioritize important columns: #, Flag, Callsign, Last heard, Module */
   .listingtable.users-table th:nth-child(1),
   .listingtable.users-table td:nth-child(1) {
      width: 10%;
   }
   
   .listingtable.users-table th:nth-child(2),
   .listingtable.users-table td:nth-child(2) {
      width: 12%;
   }
   
   .listingtable.users-table th:nth-child(3),
   .listingtable.users-table td:nth-child(3) {
      width: 28%;
      font-weight: 600;
   }
   
   .listingtable.users-table th:nth-child(7),
   .listingtable.users-table td:nth-child(7) {
      width: 38%;
      font-size: 0.6rem;
   }
   
   .listingtable.users-table th:nth-child(8),
   .listingtable.users-table td:nth-child(8) {
      width: 12%;
      font-weight: 700;
   }
}

/* iPhone 13 Pro Max and similar (around 428px) */
@media screen and (max-width: 430px) {
   /* Ensure the table wrapper allows horizontal scroll if needed */
   .table-wrapper {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      /* Add scroll indicator */
      position: relative;
   }
   
   .table-wrapper::-webkit-scrollbar {
      height: 4px;
   }
   
   .table-wrapper::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1);
   }
   
   .table-wrapper::-webkit-scrollbar-thumb {
      background: var(--accent-blue);
      border-radius: 2px;
   }
   
   /* Even more compact for very narrow screens */
   .listingtable.users-table th,
   .listingtable.users-table td {
      font-size: 0.6rem;
      padding: 0.2rem 0.1rem;
   }
   
   .listingtable.users-table th:nth-child(7),
   .listingtable.users-table td:nth-child(7) {
      font-size: 0.55rem;
   }
   
   /* Repeaters table mobile optimizations */
   .listingtable.repeaters-table {
      font-size: 0.65rem;
   }
   
   .listingtable.repeaters-table th,
   .listingtable.repeaters-table td {
      font-size: 0.6rem;
      padding: 0.2rem 0.1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
   
   /* Prioritize: #, Flag, DV Station, Module */
   .listingtable.repeaters-table th:nth-child(1),
   .listingtable.repeaters-table td:nth-child(1) {
      width: 10%;
   }
   
   .listingtable.repeaters-table th:nth-child(2),
   .listingtable.repeaters-table td:nth-child(2) {
      width: 15%;
   }
   
   .listingtable.repeaters-table th:nth-child(3),
   .listingtable.repeaters-table td:nth-child(3) {
      width: 60%;
      font-weight: 600;
   }
   
   .listingtable.repeaters-table th:nth-child(8),
   .listingtable.repeaters-table td:nth-child(8) {
      width: 15%;
      font-weight: 700;
   }
   
   /* Peers table mobile optimizations */
   .listingtable.peers-table {
      font-size: 0.65rem;
   }
   
   .listingtable.peers-table th,
   .listingtable.peers-table td {
      font-size: 0.6rem;
      padding: 0.2rem 0.1rem;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
   }
   
   /* Hide # column on peers table to save space */
   .listingtable.peers-table th:nth-child(1),
   .listingtable.peers-table td:nth-child(1) {
      display: none;
   }
}

/* ============================================
   iOS & Android Specific Optimizations
   ============================================ */

/* iOS safe area support */
@supports (padding: max(0px)) {
   body {
      padding-left: max(0px, env(safe-area-inset-left));
      padding-right: max(0px, env(safe-area-inset-right));
   }
}

/* Smooth scrolling */
html {
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   max-width: 100%;
}

/* Smooth scroll for elements with overflow */
* {
   scroll-behavior: smooth;
}

/* Remove tap highlight on mobile */
* {
   -webkit-tap-highlight-color: transparent;
}

/* Improve touch targets */
button,
a {
   min-height: 44px;
   min-width: 44px;
}

/* Ensure buttons have proper touch targets without breaking form fields */
input[type="submit"],
input[type="button"],
button {
   min-height: 44px;
}

/* ============================================
   Utility Classes
   ============================================ */

.text-center {
   text-align: center;
}

.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }

.hidden-mobile {
   display: block;
}

@media screen and (max-width: 768px) {
   .hidden-mobile {
      display: none;
   }
}

.visible-mobile {
   display: none;
}

@media screen and (max-width: 768px) {
   .visible-mobile {
      display: block;
   }
}

/* ============================================
   Loading Animation
   ============================================ */

.loading {
   display: inline-block;
   width: 20px;
   height: 20px;
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   border-top-color: var(--accent-blue);
   animation: spin 1s linear infinite;
}

@keyframes spin {
   to { transform: rotate(360deg); }
}

/* Pulse animation for interactive elements */
@keyframes pulse-glow {
   0%, 100% {
      opacity: 1;
      box-shadow: 0 0 0 0 var(--accent-blue);
   }
   50% {
      opacity: 0.8;
      box-shadow: 0 0 0 10px transparent;
   }
}

.pulse-on-load {
   animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
   body {
      background: white;
      color: black;
   }
   
   #menubar,
   .FilterSubmit,
   .FilterField {
      display: none;
   }
   
   .listingtable {
      box-shadow: none;
      border: 1px solid #000;
   }
}