/* sql-lab-style.css */
body { font-family: Arial, sans-serif; margin: 0; background: #f4f7fb; }
header { padding: 15px 25px; background: #0073aa; color: #fff; font-size: 20px; font-weight: bold; }
.container { display: flex; height: calc(100vh - 60px); }

.sidebar { width: 171px; min-width: 171px; background: #fff; border-right: 1px solid #ddd; padding: 15px; overflow-y: auto; }
.sidebar h3 { margin-top: 0; font-size: 16px; color: #333; }
.table-item { padding: 8px; cursor: pointer; border-bottom: 1px solid #eee; font-size: 14px; }
.table-item:hover { background: #e6f3ff; }
.table-item b { color: #0073aa; }

.task { background: #f2f7fa; padding: 10px; border-radius: 6px; margin-bottom: 8px; cursor: pointer; border: 1px solid #e1e1e1; font-size: 13px; }
.task.active { background: #e6f3ff; border-left: 5px solid #0073aa; }

.main { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
#questionBox { background: white; padding: 10px; border-radius: 6px; border-left: 5px solid #0073aa; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
#editor { height: 180px; border: 2px solid #0073aa; border-radius: 8px; font-size: 14px; }

button { background: #0073aa; color: white; padding: 8px 15px; border: none; border-radius: 6px; cursor: pointer; margin-right: 6px; }
button.secondary { background: #444; }

#result { flex: 1; background: white; padding: 12px; border-radius: 8px; border: 1px solid #ddd; overflow: auto; position: relative; }

.copy-btn { position: absolute; top: 10px; right: 10px; background: #0073aa; color: white; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; border: none; z-index: 10; }
.copy-btn:hover { background: #005a87; }

.reveal-box { background:#fff8e1; border:1px solid #ffecb3; padding:10px; border-radius:6px; position: relative; }
pre { margin: 5px 0; font-family: monospace; white-space: pre-wrap; background: #fff; padding: 8px; border: 1px solid #eee; font-size: 13px; line-height: 1.5; }

table { width: max-content; min-width: 100%; border-collapse: collapse; }
th { background: #0073aa; color: white; padding: 8px; position: sticky; top: 0; text-align: left; }
td { padding: 8px; border: 1px solid #ddd; }




  /* Layout Styling */
  .container { display: flex; gap: 20px; max-width: 1200px; margin: 20px auto; padding: 0 15px; align-items: flex-start; }
  .sidebar { flex: 0 0 280px; background: #f8f9fa; padding: 20px; border-radius: 8px; border: 1px solid #ddd; position: sticky; top: 20px; }
  .main { flex: 1; background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #ddd; min-width: 0; } /* min-width prevents flex items from overflowing */
  
  #editor { height: 250px; border: 1px solid #0073aa; border-radius: 4px; margin-bottom: 10px; }
  
  /* FIXED RESULT SECTION */
  #result { 
    background: #fff; 
    padding: 0; 
    border: 1px solid #ddd; 
    margin-top: 15px;
    max-height: 400px;   /* Table is height ko cross nahi karegi */
    overflow-y: auto;    /* Vertical scrollbar */
    overflow-x: auto;    /* Horizontal scrollbar for wide tables */
    position: relative;
    border-radius: 4px;
  }

  /* Sticky Table Styling */
  table { width: 100%; border-collapse: collapse; font-family: sans-serif; font-size: 14px; }
  th { 
    background: #0073aa; 
    color: white; 
    padding: 12px 10px; 
    text-align: left; 
    position: sticky;   /* Header hamesha top par rahega */
    top: 0; 
    z-index: 2;
  }
  td { padding: 10px; border-bottom: 1px solid #eee; color: #333; }
  tr:nth-child(even) { background-color: #fcfcfc; }
  
  .sql-error { 
    color: #ff0000 !important; 
    font-weight: bold; 
    background: #fff0f0; 
    padding: 15px; 
    border-left: 5px solid #ff0000; 
    margin: 10px;
  }
  
  .reveal-box { background: #fff8e1; border: 1px solid #ffe082; padding: 15px; border-radius: 5px; margin: 10px; }
  .success-msg { background:#f0fff4; border:1px solid #48bb78; padding:12px; border-radius:6px; color:#2f855a; margin: 10px; font-weight:bold; }
  
  /* Task List Styling */
  .task { padding: 10px; background: #eee; margin-bottom: 5px; border-radius: 4px; cursor: pointer; transition: 0.3s; }
  .task:hover { background: #ddd; }
  .task.active { background: #0073aa; color: white; font-weight: bold; }
  
  .btn-group { margin-top: 10px; display: flex; gap: 10px; }
  button { background: #0073aa; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; }
  button.secondary { background: #444; }
  button:hover { opacity: 0.9; }

.ld-content-actions:nth-of-type(2) a:nth-child(2) {
    margin-top: 40px;
}
.ld-content-actions:nth-of-type(2) {
    margin-top: 40px;
}
.error-red{
    color:red;
    font-weight:bold;
}

@media (max-height: 720px) {
      /* Margin-bottom ko 405px se kam karke 180px-200px ke beech rakha hai */
      .container { 
          margin: 10px auto 405px auto !important; 
          min-height: auto !important; 
          gap: 10px !important; 
      }
  }
  @media (min-height: 720px) {
      /* Margin-bottom ko 405px se kam karke 180px-200px ke beech rakha hai */
      .container { 
          margin: 10px auto 309px auto !important; 
          min-height: auto !important; 
          gap: 10px !important; 
      }
  }