/* ==============================
   ProwessApps Practice Common CSS
   Used for Coding Practice pages
================================= */

.coding-practice-page {
  margin-top: 75px;
}

.practice-about-box {
  background: linear-gradient(135deg, #eef6ff, #f8fffb);
  border: 1px solid #e3efff;
  border-radius: 16px;
  padding: 16px 20px;
}

.practice-about-box h1 {
  font-size: 1.9rem;
  font-weight: 700;
}

.practice-about-box p {
  font-size: 0.98rem;
}

.practice-workspace {
  margin-bottom: 20px;
}

.practice-question-panel,
.practice-main-panel,
.practice-ad-panel {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 14px;
}

/* ==============================
   Left Question Panel
================================= */

.practice-question-panel {
  position: sticky;
  top: 85px;
  height: calc(100vh - 105px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.panel-title-box {
  flex-shrink: 0;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 8px;
}

.panel-title-box h5 {
  font-size: 0.95rem;
  font-weight: 700;
}

/* ==============================
   Filter Box
================================= */

.practice-filter-box {
  flex-shrink: 0;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 8px;
  margin-top: 10px;
  margin-bottom: 8px;
}

.practice-filter-box label {
  font-size: 0.72rem;
  margin-bottom: 3px;
}

.practice-filter-box .form-select,
.practice-filter-box .form-control {
  font-size: 0.75rem;
  padding: 4px 7px;
}

/* ==============================
   Question List Scroll
================================= */

.question-list-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
  margin-top: 5px;
}

.question-list-scroll::-webkit-scrollbar {
  width: 5px;
}

.question-list-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.question-list-scroll::-webkit-scrollbar-thumb {
  background: #b8c2cc;
  border-radius: 10px;
}

.question-list-scroll::-webkit-scrollbar-thumb:hover {
  background: #8fa1b3;
}

/* ==============================
   Question Card
================================= */

.practice-card {
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background: #ffffff;
  border: 1px solid #e9ecef;
  padding: 8px 9px;
  margin-bottom: 7px;
  border-radius: 9px;
}

.practice-card:hover {
  transform: translateY(-1px);
  background: #f8f9fa;
}

.practice-card.active-question {
  border-left: 4px solid #198754;
  background: #f1fff6;
  color: #198754;
}

.practice-card .question-title {
  font-size: 0.78rem;
  line-height: 1.25;
  font-weight: 600;
}

.practice-card .badge {
  font-size: 0.62rem;
  padding: 4px 6px;
  font-weight: 500;
}

.practice-card .mt-2 {
  margin-top: 5px !important;
}

/* ==============================
   Main Practice Panel
================================= */

.practice-main-panel {
  min-height: calc(100vh - 105px);
  padding: 12px;
}

.problem-box {
  background: linear-gradient(135deg, #f8fbff, #f7fff9);
  border: 1px solid #e3efff;
  border-radius: 14px;
  padding: 14px;
}

.problem-box h3 {
  font-size: 1.35rem;
  font-weight: 700;
}

.problem-box p {
  font-size: 0.95rem;
}

/* ==============================
   Expected Output
================================= */

.expected-output-box {
  background: #ffffff;
  border-left: 4px solid #198754;
  padding: 10px 12px;
  border-radius: 8px;
}

.expected-output-box pre {
  white-space: pre-wrap;
  margin-top: 5px;
}

/* ==============================
   Practice Action Buttons
================================= */

.practice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==============================
   Compiler
================================= */

.compiler-box {
  border: 1px solid #ddd;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
}

.editor-frame {
  width: 100%;
  min-height: 620px;
  border: 0;
  display: block;
}

/* ==============================
   Advertisement Panel
================================= */

.practice-ad-panel {
  position: sticky;
  top: 85px;
  min-height: 320px;
  padding: 10px;
}

/* ==============================
   Solution Box
================================= */

.solution-box {
  background: #f8fff9;
  border: 1px solid #cfead6;
  border-left: 4px solid #198754;
  border-radius: 10px;
  padding: 12px;
}

.solution-box pre {
  background: #111827;
  color: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  overflow-x: auto;
  font-size: 0.86rem;
  line-height: 1.45;
}

.solution-box code {
  color: #f8f9fa;
}

/* ==============================
   Mobile Responsive
================================= */

@media (max-width: 991.98px) {
  .coding-practice-page {
    margin-top: 70px;
  }

  .practice-about-box h1 {
    font-size: 1.6rem;
  }

  .practice-question-panel,
  .practice-ad-panel {
    position: static;
    height: auto;
    max-height: none;
  }

  .question-list-scroll {
    max-height: 320px;
    overflow-y: auto;
  }

  .practice-main-panel {
    min-height: auto;
  }

  .editor-frame {
    min-height: 560px;
  }
}