/* ===== ROOT ===== */

:root{
  --primary:#00e5ff;
  --secondary:#7a5cff;

  --bg:#050816;
  --bg2:#0b1020;

  --card:rgba(255,255,255,0.05);

  --border:rgba(255,255,255,0.08);

  --text:#e2e8f0;
  --muted:#94a3b8;
}

/* ===== RESET ===== */

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

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
}

/* ===== BODY ===== */

body{
  font-family:Inter,sans-serif;

  background:
    radial-gradient(circle at top left,#00e5ff15,transparent 30%),
    radial-gradient(circle at bottom right,#7a5cff15,transparent 30%),
    linear-gradient(135deg,#050816,#0b1020);

  color:var(--text);
}

/* ===== FLEX FIX ===== */

.flex,
.flex-col,
.grid{
  min-height:0;
}

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

.site-header{
  height:74px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding:0 24px;

  background:rgba(255,255,255,0.04);

  border-bottom:1px solid var(--border);

  backdrop-filter:blur(18px);

  flex-shrink:0;
}

/* LOGO */

.logo{
  display:flex;
  align-items:center;
  gap:15px;
}

.site-logo{
  width:58px;
  height:58px;

  object-fit:contain;

  border-radius:16px;

  box-shadow:
    0 0 25px rgba(0,229,255,0.35);
}

.logo h1{
  font-size:24px;
  font-weight:800;
}


/* ===== NAV ===== */

.nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.nav a,
.dropbtn{
  color:white;

  text-decoration:none;

  border:none;
  background:none;

  cursor:pointer;

  font-size:13px;
  font-weight:600;

  padding:10px 14px;

  border-radius:12px;

  transition:.25s;
}

.nav a:hover,
.dropbtn:hover{
  background:rgba(255,255,255,0.06);
}



/* =========================================
   DROPDOWN FIX
========================================= */

.dropdown{
  position:relative;
  display:flex;
  align-items:center;
}

/* DROPDOWN PANEL */

.dropdown-content{

  position:absolute;

  top:100%;
  left:0;

  /* FIXED GAP ISSUE */
  margin-top:0;

  min-width:280px;

  background:
    rgba(10,17,36,0.98);

  border:
    1px solid rgba(255,255,255,0.08);

  border-radius:20px;

  overflow:hidden;

  display:none;

  backdrop-filter:blur(20px);

  box-shadow:
    0 20px 40px rgba(0,0,0,0.45),
    0 0 40px rgba(0,229,255,0.08);

  animation:
    dropdownFade 0.25s ease;

  z-index:9999;

  /* HOVER SAFE AREA */
  padding-top:12px;
}

/* KEEP OPEN */

.dropdown:hover .dropdown-content,
.dropdown-content:hover{
  display:block;
}

/* MENU LINKS */

.dropdown-content a{

  display:block;

  padding:15px 20px;

  color:#dbe7ff;

  transition:0.3s;

  border-bottom:
    1px solid rgba(255,255,255,0.04);

  text-decoration:none;
}

.dropdown-content a:last-child{
  border-bottom:none;
}

.dropdown-content a:hover{

  background:
    rgba(0,229,255,0.12);

  color:#00e5ff;

  padding-left:28px;
}

/* ANIMATION */

@keyframes dropdownFade{

  from{
    opacity:0;
    transform:translateY(10px);
  }

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

/* ===== PANEL ===== */

.panel{
  display:flex;
  flex-direction:column;

  min-height:0;

  overflow:hidden;

  border-radius:18px;

  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.08);
}

/* ===== PANEL HEADER ===== */

.panel-header{
  padding:14px 16px;

  border-bottom:1px solid rgba(255,255,255,0.08);

  font-size:13px;
  font-weight:700;

  flex-shrink:0;
}

/* ===== EDITOR ===== */

.editor{
  display:flex;

  flex:1;

  min-height:0;

  overflow:hidden;
}

.editor-textarea{
  flex:1;

  width:100%;
  height:100%;

  border:none;
  outline:none;

  resize:none;

  padding:16px;

  background:#0b1120;

  color:#34ff9d;

  font-size:14px;
  line-height:1.7;

  overflow:auto;

  font-family:"JetBrains Mono",monospace;
}

/* ===== RESPONSE ===== */

.response-panel{
  min-height:0;
}

/* =========================================
   RESPONSE EDITOR FIX
========================================= */

#responseEditor{

  flex:1;

  height:100%;

  min-height:0;

  overflow:hidden;
}

.monaco-editor,
.monaco-editor .overflow-guard{

  border-radius:0 0 16px 16px;
}
.response-box{
  flex:1;

  width:100%;
  height:100%;

  overflow:auto;

  padding:16px;

  background:#020617;

  color:#34ff9d;

  white-space:pre-wrap;
  word-break:break-word;

  font-size:14px;
  line-height:1.7;

  font-family:"JetBrains Mono",monospace;
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:#071120;
}

::-webkit-scrollbar-thumb{
  background:#294061;
  border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
  background:#3d5d88;
}

/* ===== BUTTON ===== */

button{
  border:none;

  cursor:pointer;

  border-radius:12px;

  padding:10px 16px;

  color:white;

  font-size:13px;
  font-weight:700;
}

/* ===== TAB ===== */

.tab-btn{
  padding:6px 12px;

  border-radius:7px;

  cursor:pointer;

  font-size:13px;
  font-weight:700;

  color:white;
}

.tab-headers{
  background:linear-gradient(135deg,#00c6ff,#0072ff);
}

.tab-pre{
  background:linear-gradient(135deg,#7a5cff,#5b34ff);
}

.tab-body{
  background:linear-gradient(135deg,#00d68f,#00a86b);
}

.tab-tests{
  background:linear-gradient(135deg,#ff9800,#ff6b00);
}



/* =========================================
   AUTH TAB
========================================= */

.tab-auth{
  background:
    linear-gradient(
      135deg,
      #ff4d6d,
      #c9184a
    );
}

/* =========================================
   AUTH PANEL
========================================= */

#authTab{

  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,0.96),
      rgba(2,6,23,0.98)
    );

  overflow:auto;
}

/* =========================================
   AUTH LABEL
========================================= */

#authTab label{

  display:block;

  margin-bottom:8px;

  font-size:13px;

  font-weight:700;

  color:#67e8f9;

  letter-spacing:.4px;
}

/* =========================================
   AUTH INPUTS
========================================= */

#authTab input,
#authTab textarea,
#authTab select{

  width:100%;

  background:#020617;

  border:1px solid rgba(255,255,255,0.08);

  border-radius:12px;

  padding:12px 14px;

  color:white;

  outline:none;

  transition:.25s;

  font-size:13px;
}

/* =========================================
   AUTH INPUT FOCUS
========================================= */

#authTab input:focus,
#authTab textarea:focus,
#authTab select:focus{

  border-color:#00e5ff;

  box-shadow:
    0 0 0 3px rgba(0,229,255,0.15);
}

/* =========================================
   AUTH TEXTAREA
========================================= */

#authTab textarea{

  min-height:160px;

  resize:vertical;

  font-family:
    "JetBrains Mono",
    monospace;
}

/* =========================================
   AUTH FIELD BLOCKS
========================================= */

#basicAuthFields,
#bearerAuthFields{

  background:
    rgba(255,255,255,0.03);

  border:
    1px solid rgba(255,255,255,0.05);

  border-radius:16px;

  padding:16px;

  margin-top:12px;
}

/* =========================================
   AUTH PLACEHOLDER
========================================= */

#authTab input::placeholder,
#authTab textarea::placeholder{

  color:#64748b;
}

/* =========================================
   AUTH ANIMATION
========================================= */

#basicAuthFields,
#bearerAuthFields{

  animation:
    authFade .25s ease;
}

@keyframes authFade{

  from{
    opacity:0;
    transform:translateY(6px);
  }

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


/* ENVIRONMENT TAB */

.tab-environment{
  background:
    linear-gradient(
      135deg,
      #14b8a6,
      #0f766e
    );
}

/* GLOBAL TAB */

.tab-global{
  background:
    linear-gradient(
      135deg,
      #a855f7,
      #7e22ce
    );
}
/* ===== BOTTOM RESULTS ===== */

/* FIX STATUS VISIBILITY */

#statusMsg,
#testResults,
#collectionResults{
  color:white;
  overflow:auto;
  
}

/* ===== MAIN SCROLL ===== */

.main-content-scroll{
  overflow-y:auto;
  min-height:0;
}



/* =========================================
   MAIN PANELS DESKTOP
========================================= */

.main-panels{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:16px;

  flex:1;

  min-height:0;

  overflow:hidden;
}

/* LEFT + RIGHT PANELS */

.main-panels > .panel{

  min-width:0;

  min-height:0;
}

/* RESPONSE PANEL */

.response-panel{

  display:flex;

  flex-direction:column;

  min-height:0;

  overflow:hidden;
}

/* =========================================
   MOBILE RESPONSIVE FIX
========================================= */

@media(max-width:900px){

  body{
    overflow:auto;
  }

  /* MAIN LAYOUT */

  /* =========================================
   MAIN TWO COLUMN LAYOUT
========================================= */

.main-panels{

  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

  gap:16px;

  flex:1;

  height:100%;

  min-height:0;

  overflow:hidden;

  align-items:stretch;
}

/* BOTH PANELS */

.main-panels > .panel{

  min-width:0;

  min-height:0;

  height:100%;

  overflow:hidden;
}

  /* SIDEBAR */

  .w-72{

    width:100% !important;

    max-width:100%;
  }

  /* MAIN CONTENT */

  .flex.h-screen{

    flex-direction:column;

    height:auto;

    overflow:visible;
  }

  /* PANELS */

  .panel{

    min-height:500px;

    width:100%;
  }

  /* RESPONSE */

  .response-panel{

    min-height:500px;
  }

  /* TOP BAR */

  .flex.gap-2.mb-3.items-center{

    flex-wrap:wrap;
  }

  .flex.gap-2.mb-3.items-center input{

    width:100%;
  }

  /* TAB BUTTONS */

  .tabs{

    flex-wrap:wrap;

    gap:10px;
  }

  .tabs .flex{

    flex-wrap:wrap;
  }

  /* MONACO EDITORS */

  #bodyEditor,
  #preEditor,
  #testEditor,
  #responseEditor{

    min-height:400px;
  }
}

/* ===== COLLECTION RUNNER SCROLL ===== */

.collection-runner-wrapper{
  max-height:300px;   /* adjust height */
  overflow-y:auto;
  overflow-x:hidden;

  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;

  background:#020617;

  padding:12px;

  margin-top:10px;
}

/* Individual execution card */

.execution-card{
  background:rgba(255,255,255,0.04);

  border:1px solid rgba(255,255,255,0.06);

  border-radius:12px;

  padding:12px;

  margin-bottom:12px;

  overflow:auto;
}

/* Optional pretty scroll */

.collection-runner-wrapper::-webkit-scrollbar{
  width:8px;
}

.collection-runner-wrapper::-webkit-scrollbar-thumb{
  background:#3b82f6;
  border-radius:20px;
}

.tab-btn{
  padding:4px 10px;
  border-radius:7px;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  color:white;

  border:1px solid rgba(255,255,255,0.15);
}

/* Download Button */

.download-btn{
  padding:5px 10px;
  font-size:12px;

  transform:scale(0.85);
}

/* =========================================
   NAVIGATION
========================================= */

.nav{

  display:flex;

  align-items:center;

  justify-content:flex-end;

  gap:10px;

  margin-left:auto;
}

/* LINKS + BUTTONS */

.nav a,
.dropbtn{

  position:relative;

  display:inline-flex;

  align-items:center;

  justify-content:center;

  color:#dbe7ff;

  text-decoration:none;

  background:none;

  border:none;

  cursor:pointer;

  font-size:13px;

  font-weight:600;

  padding:8px 14px;

  border-radius:10px;

  transition:.3s;
}

/* HOVER EFFECT */

.nav a:hover,
.dropbtn:hover{

  background:
    rgba(255,255,255,0.06);

  color:#00e5ff;
}

/* UNDERLINE EFFECT */

.nav a::after,
.dropbtn::after{

  content:'';

  position:absolute;

  left:14px;

  bottom:4px;

  width:0;

  height:2px;

  background:#00e5ff;

  border-radius:20px;

  transition:.3s ease;
}

/* SHOW UNDERLINE */

.nav a:hover::after,
.dropbtn:hover::after,
.nav a.active::after{

  width:calc(100% - 28px);
}

/* ACTIVE MENU */

.nav a.active{

  color:#00e5ff;

  background:
    rgba(255,255,255,0.05);
}

/* =========================================
   RESPONSE VALIDATION FIX
========================================= */

/* MAIN CARD */

.response-validation-card{

  margin-top:16px;

  border-radius:18px;

  overflow:hidden;

  background:
    linear-gradient(
      180deg,
      rgba(15,23,42,0.96),
      rgba(2,6,23,0.98)
    );

  border:
    1px solid rgba(255,255,255,0.08);
}

/* HEADER */

.response-validation-header{

  display:flex;

  align-items:center;

  justify-content:space-between;

  padding:18px;

  border-bottom:
    1px solid rgba(255,255,255,0.06);
}

/* TITLE */

.response-validation-title{

  font-size:20px;

  font-weight:800;

  color:white;
}

/* TOGGLE BUTTON */

.validation-toggle-btn{

  background:
    linear-gradient(
      135deg,
      #00d68f,
      #00a86b
    );

  border:none;

  color:white;

  padding:8px 16px;

  border-radius:10px;

  cursor:pointer;

  font-size:12px;

  font-weight:700;
}

/* BODY */

.response-validation-body{

  padding:16px;
}

/* SUMMARY */

.validation-summary{

  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:14px;

  font-size:16px;

  font-weight:800;
}

/* COUNTS */

.validation-passed{

  color:#22c55e;
}

.validation-failed{

  color:#ef4444;
}

/* SCROLL AREA */

.validation-scroll{

  max-height:420px;

  overflow-y:auto;

  overflow-x:hidden;

  padding-right:4px;
}

/* SCROLLBAR */

.validation-scroll::-webkit-scrollbar{

  width:7px;
}

.validation-scroll::-webkit-scrollbar-thumb{

  background:#334155;

  border-radius:20px;
}

/* VALIDATION ITEM */

.validation-item{

  background:
    rgba(34,197,94,0.15);

  border:
    1px solid rgba(34,197,94,0.2);

  color:#d1fae5;

  padding:14px;

  border-radius:12px;

  margin-bottom:10px;

  font-size:14px;

  font-weight:600;

  line-height:1.5;
}

/* FAIL */

.validation-item.fail{

  background:
    rgba(239,68,68,0.12);

  border:
    1px solid rgba(239,68,68,0.2);

  color:#fecaca;
}

/* HIDDEN */

.response-validation-body.hidden{

  display:none;
}


/* =========================================
   ENVIRONMENT BUTTON
========================================= */

.env-save-btn{

  background:
    linear-gradient(
      135deg,
      #00d68f,
      #00a86b
    );

  color:white;

  font-weight:700;

  padding:10px 18px;

  border-radius:12px;

  transition:.25s;

  box-shadow:
    0 0 18px rgba(0,214,143,.35);

}

.env-save-btn:hover{

  transform:translateY(-2px);

  box-shadow:
    0 0 28px rgba(0,214,143,.6);

}

/* =========================================
   GLOBAL BUTTON
========================================= */

.global-save-btn{

  background:
    linear-gradient(
      135deg,
      #7a5cff,
      #5b34ff
    );

  color:white;

  font-weight:700;

  padding:10px 18px;

  border-radius:12px;

  transition:.25s;

  box-shadow:
    0 0 18px rgba(122,92,255,.35);

}

.global-save-btn:hover{

  transform:translateY(-2px);

  box-shadow:
    0 0 28px rgba(122,92,255,.6);

}