/* Minimal, framework-free CSS */

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
  --primary-contrast: 222.2 84% 98%;
  --accent-strong: 256 85% 60%;
  --accent-soft: 256 85% 92%;
  --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--accent-strong)) 60%, hsl(var(--ring)));
  --gradient-muted: linear-gradient(180deg, hsl(var(--background)), hsl(var(--muted) / 0.6));
  --shadow-elevated: 0 12px 40px -12px hsl(var(--primary) / 0.25);
  --shadow-soft: 0 6px 20px -8px hsl(var(--foreground) / 0.08);
  --transition-smooth: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: all 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 47.4% 11.2%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
  --sidebar-background: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 224.3 76.3% 48%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

.hs-table-container {
  display: block;
  overflow: auto;
  max-height: 600px;/* lock free pan */
}

.hs-table-scroll {
  width: 100%;
  overflow: auto;
  scroll-behavior: smooth;
  position: relative;
  z-index: 1;
  border-radius: 12px;
  background: hsl(var(--card));
}




.hs-main { 
    min-height: 60vh; 
      flex: 1;
  overflow: hidden;
  position: relative;

}
.hs-header { 
    text-align: center; 
    margin-bottom: 24px; 
    padding-top: 40px;
}

.hs-subtitle { font-size: 16px; line-height: 1.6; max-width: 680px; margin: 8px auto 0; }

/* Controls */
.hs-controls {
    display: grid;
    gap: 12px;
    align-items: center;
    grid-template-columns: 1fr 1fr 1fr;
    margin-bottom: 1rem;
}

.hs-info-group {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* Adjust spacing as needed */
}

.hs-input { 
    background: hsl(var(--card)); 
    border: 1px solid hsl(var(--border)); 
    padding: 0.55rem 1rem; 
    border-radius: 8px; 
    outline: none;
    transition: var(--transition-smooth);
    box-shadow: 0 1px 1px hsl(var(--foreground) / 0.06) inset;
    font-family: poppins;
    cursor: pointer;
}
.hs-input:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 4px hsl(var(--sidebar-ring) / 0.15); }
.hs-result-info { color: hsl(var(--muted-foreground));
margin-left: auto; }

/* Card & table */
.hs-card {
    padding: 20px;
    background: #e6f0f0;
    border-radius: 1rem;

}
.hs-table { 
    width: 100%;
    border-collapse: collapse; 
    font-weight: normal;
      position: relative;
  overflow: auto;

}

th, td { 
    border: 1px solid #e5f4f4; 
    padding: 8px; 
    text-align: left; 
    
}

/* Improved UI */
.hs-table { 
    width: 100%; 
    border-collapse: separate; 
    border-spacing: 0; 
    background: hsl(var(--card)); 
    font-family: poppins;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
tr.hs-thead {
    position: sticky;
    top: -30px;
    z-index: 30;
}

.hs-th { position: sticky; background: hsl(var(--muted)); font-weight: 600; padding: 10px; border-bottom: 1px solid hsl(var(--border)); left: auto; z-index: 30;}
.hs-td { padding: 10px; border-bottom: 1px solid hsl(var(--border)); font-weight: normal!important; }
.hs-name {
    font-weight: normal
    }
.hs-link:hover { text-decoration: underline; }
.hs-sort { cursor: pointer; user-select: none; }
.hs-sort:hover { background: hsl(var(--accent)); }
.hs-td:nth-child(1) { text-align: center; font-weight: 600; }
.hs-td:nth-child(2) { width: 40%; }
.hs-td:nth-child(3) { width: 18%; }
.hs-td:nth-child(4), .hs-td:nth-child(5) { width: 17%; white-space: nowrap; }
/* Root */
#hotel-scout-root {
    min-height: 60vh;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden; /* Prevent horizontal scroll on the full page */
  overscroll-behavior-x: none; 
}

.hs-card{
height: 100%; 
width: 100%; 
overflow: auto;

}

/* Info button */
.hs-info-btn { 
  background: none; 
  border: none; 
  cursor: pointer; 
  border-radius: 4px; 
  transition: background-color 0.2s; 
}
.hs-info-btn:hover { background-color: hsl(var(--muted)); }

/* Modal styles */
.hs-modal-overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: rgba(0, 0, 0, 0.5); 
  z-index: 9999; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  padding: 16px; 
}
.hs-modal-overlay.hs-flex { display: flex; }
.hs-modal-overlay.hs-hidden { display: none; }

.hs-modal-content { 
  background: hsl(var(--card)); 
  border-radius: 8px; 
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); 
  max-width: 400px; 
  width: 100%; 
  padding: 24px; 
  transform: scale(0.95); 
  transition: transform 0.15s ease-out; 
}
.hs-modal-content.hs-scale-100 { transform: scale(1); }
.hs-modal-content.hs-scale-95 { transform: scale(0.95); }

.hs-modal-title { margin-bottom: 16px; }
.hs-modal-title-text { 
  font-size: 18px; 
  font-weight: 600; 
  color: hsl(var(--foreground)); 
  margin: 0; 
}

.hs-modal-body { 
  margin-bottom: 24px; 
  font-size: 14px; 
  color: hsl(var(--muted-foreground)); 
  line-height: 1.6; 
}
.hs-modal-body p { margin: 0 0 12px 0; }
.hs-modal-body p:last-child { margin-bottom: 0; }

.hs-modal-close-btn { 
  width: 100%; 
  background: hsl(var(--primary)); 
  color: hsl(var(--primary-foreground)); 
  border: none; 
  padding: 12px 16px; 
  border-radius: 6px; 
  font-weight: 500; 
  cursor: pointer; 
  transition: background-color 0.2s; 
}
.hs-modal-close-btn:hover { background: hsl(var(--primary) / 0.9); }

.hs-print-button{    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    font-family: 'Poppins';
    background: transparent;
    border: 1px solid #d1d5db;
    color: #4b5563;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 16px;
    margin-top: 20px;
    gap: 10px;
}


.hs-table-container::after { pointer-events: none; }

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

@media (max-width: 600px) {
    .hs-table-container{
        padding: 0;
    }
    
    
    .hs-card{
        padding: 10px
    }
    
    .hs-thead{
        top: 0!important;
          z-index: 2;
  background: hsl(var(--muted));

    }
    
    .hs-th{
        font-size: 14px;
        padding: 4px 8px;
    }
    
    .hs-td{
        font-size: 14px;
        padding: 4px 8px;

    }
    
    .hs-name{
        font-size: 14px;
        margin: 0;
    }
    
      .hs-input {
    width: 100%;
    font-size: 16px;
  }
    
    
  .hs-controls {
    flex-direction: column;
    display: flex;
    align-items: flex-end;
    gap: 10px;
  }
  
  .hs-result-info {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

}