/* =========================================================
   TABLE OF CONTENTS
   =========================================================
   1. Sidebar Filters: Container
   2. Sidebar Filters: Section Structure
   3. Sidebar Filters: Form Elements
   4. Sidebar Filters: Input Overwrites (scoped)
   5. Sidebar Filters: Buttons (Apply / Reset)
   6. Sidebar Filters: Collapse Toggle
   7. Sidebar Filters: Legacy Fix
   8. Data Notes Section (scoped)
   10. Custom Grade Fields (scoped to #custom-grade-fields)
       10.1 Sliders (range)
       10.2 Number Inputs (weights)
       10.3 Select (metric picker)
       10.4 Buttons (Apply / Reset / Add / Remove)
       10.5 Rows (label + controls)
       10.6 Responsive tweaks
   11. Misc. (potential typo selector)
   ========================================================= */


/* =========================================================
   1. SIDEBAR FILTERS: CONTAINER
   Used only for `.filters-column` layout
   ========================================================= */
.filters-column {
  background-color: #141414;
  color: #fff;
  padding: 20px;
  border-radius: 12px;
  max-width: 260px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 0 30px rgba(0, 255, 255, 0.3),
    0 10px 30px rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .filters-column {
    max-width: 100%;
    margin-bottom: 20px;
  }
}


/* =========================================================
   2. SIDEBAR FILTERS: SECTION STRUCTURE
   ========================================================= */
.filter-section { margin-bottom: 25px; }

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid #333;
  color: #1de1d1; /* teal highlight */
}
.filter-header i { margin-right: 8px; }


/* =========================================================
   3. SIDEBAR FILTERS: FORM ELEMENTS
   ========================================================= */
.filter-content {
  margin-top: 10px;
  display: block;
}
.filter-content label {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  color: #ccc;
}
.filter-content input,
.filter-content select {
  width: 100%;
  padding: 5px;
  border-radius: 6px;
  border: none;
  background: #222;
  color: #fff;
  font-size: 12px;
  box-shadow: inset 0 0 2px #000;
}
.filter-content input:focus,
.filter-content select:focus {
  outline: 2px solid #1de1d1;
}


/* =========================================================
   4. SIDEBAR FILTERS: INPUT OVERWRITES (SCOPED)
   These enforce a consistent teal-styled input inside the sidebar.
   ========================================================= */
.filters-column input,
.filters-column select {
  color: #ffffff !important;
  background-color: #111 !important;
  border: 1px solid #1de1d1 !important;
}
.filters-column input::placeholder { color: #cccccc !important; }


/* =========================================================
   5. SIDEBAR FILTERS: BUTTONS (APPLY / RESET)
   ========================================================= */
.apply-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1de1d1;
  color: #000;
  font-weight: 700;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  margin-top: 12px;
  cursor: pointer;
  transition: background 0.3s ease;
  width: 100%;
}
.apply-btn:hover { background: #11bfbf; }

.reset-btn {
  margin-top: 10px;
  background-color: transparent !important;
  color: #1de1d1 !important;
  border: 1px solid #1de1d1 !important;
  padding: 8px 12px;
  width: 100%;
  border-radius: 5px;
  font-weight: 700;
  font-style: normal !important; /* prevent accidental italics */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}
.reset-btn:hover {
  background-color: #1de1d1 !important;
  color: #000 !important;
}


/* =========================================================
   6. SIDEBAR FILTERS: COLLAPSE TOGGLE
   ========================================================= */
.collapse-toggle {
  background: none;
  border: none;
  color: #1de1d1;
  font-size: 14px;
  cursor: pointer;
}


/* =========================================================
   7. SIDEBAR FILTERS: LEGACY FIX
   Keep for backward compatibility with older markup.
   ========================================================= */
.filter-column { flex: 0 0 240px !important; }


/* =========================================================
   8. DATA NOTES SECTION (SCOPED)
   ========================================================= */
#dataNotesSection .filter-content {
  font-size: 13px;
  line-height: 1.4;
  color: #e0e0e0;
}
#dataNotesSection .filter-content h4 {
  font-size: 14px;
  font-weight: 600;
  color: #1de1d1;
  text-transform: uppercase;
  margin-top: 15px;
  margin-bottom: 8px;
}
#dataNotesSection .filter-content li { margin-bottom: 5px; }


/* =========================================================
   ========================================================= */


/* =========================================================
   10. CUSTOM GRADE FIELDS (SCOPED TO #custom-grade-fields)
   All controls inside the custom grading composer.
   ========================================================= */
#custom-grade-fields { /* intentionally empty wrapper */ }

/* ---------- 10.1 Sliders (range) ---------- */
#custom-grade-fields input[type="range"]{
  -webkit-appearance: none;
  width: 260px;
  height: 10px;
  border-radius: 999px;
  background: #0e1419;
  border: 1px solid #1c2a33;
  outline: none;
  transition: box-shadow .15s ease;
}
/* filled track (webkit) */
#custom-grade-fields input[type="range"]::-webkit-slider-runnable-track{
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg,#00bfa5 0,var(--cg-fill, #00bfa5) 0,#0e1419 0);
}
/* track (moz) */
#custom-grade-fields input[type="range"]::-moz-range-track{
  height: 10px;
  border-radius: 999px;
  background: #0e1419;
  border: 1px solid #1c2a33;
}
/* thumb */
#custom-grade-fields input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  height: 18px; width: 18px;
  margin-top: -4px; /* center on track */
  border-radius: 50%;
  background: #00bfa5;
  box-shadow: 0 0 0 3px rgba(0,191,165,.15);
  border: 0;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
#custom-grade-fields input[type="range"]::-moz-range-thumb{
  height: 18px; width: 18px;
  border-radius: 50%;
  background: #00bfa5;
  border: 0;
  box-shadow: 0 0 0 3px rgba(0,191,165,.15);
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}
#custom-grade-fields input[type="range"]:hover::-webkit-slider-thumb,
#custom-grade-fields input[type="range"]:hover::-moz-range-thumb{
  transform: scale(1.06);
}
#custom-grade-fields input[type="range"]:focus{
  box-shadow: 0 0 0 3px rgba(0,191,165,.15);
}
#custom-grade-fields input[type="range"]:active::-webkit-slider-thumb,
#custom-grade-fields input[type="range"]:active::-moz-range-thumb{
  background:#12d3bd;
}
/* disabled */
#custom-grade-fields input[type="range"]:disabled{
  opacity:.5; cursor:not-allowed;
}

/* ---------- 10.2 Number Inputs (weights) ---------- */
#custom-grade-fields input[type="number"]{
  width: 72px;
  padding: 8px 10px;
  background:#0b1116;
  color:#e9f9f5;
  border:1px solid #1c2a33;
  border-radius:10px;
  outline:none;
  transition:border-color .12s ease, box-shadow .12s ease;
}
#custom-grade-fields input[type="number"]:focus{
  border-color:#00bfa5;
  box-shadow: 0 0 0 3px rgba(0,191,165,.15);
}

/* ---------- 10.3 Select (metric picker) ---------- */
#custom-grade-fields select{
  padding:8px 10px;
  background:#0b1116;
  color:#e9f9f5;
  border:1px solid #1c2a33;
  border-radius:10px;
  outline:none;
}
#custom-grade-fields select:focus{
  border-color:#00bfa5;
  box-shadow:0 0 0 3px rgba(0,191,165,.15);
}

/* ---------- 10.4 Buttons (Apply / Reset / Add / Remove) ---------- */
#custom-grade-fields .btn,
#custom-grade-fields button {
  border-radius: 10px;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.15s ease;
  cursor: pointer;
}
/* Primary teal buttons (Apply / Add) */
#custom-grade-fields #cgSave,
#custom-grade-fields #cgAddMetric {
  background: #00bfa5;
  color: #001313;
  border: 1px solid #00bfa5;
}
#custom-grade-fields #cgSave:hover,
#custom-grade-fields #cgAddMetric:hover {
  background: #12d3bd;
  border-color: #12d3bd;
}
/* Secondary dark buttons (Reset) */
#custom-grade-fields #cgReset {
  background: #0b1116;
  color: #d8efe9;
  border: 1px solid #1c2a33;
}
#custom-grade-fields #cgReset:hover {
  border-color: #00bfa5;
  color: #00bfa5;
}
/* Remove buttons (X) */
#custom-grade-fields .btn-outline-danger,
#custom-grade-fields [data-remove] {
  background: #1a0f14;
  color: #ff7fa0;
  border: 1px solid #3a1c29;
}
#custom-grade-fields .btn-outline-danger:hover,
#custom-grade-fields [data-remove]:hover {
  background: #ff4772;
  color: #16060c;
  border-color: #ff4772;
}

/* ---------- 10.5 Rows (label + controls) ---------- */
#custom-grade-fields .cg-row{
  padding:10px 12px;
  border:1px solid #1c2a33;
  border-radius:12px;
  background:#0e1419;
}
#custom-grade-fields .cg-row small{ color:#98aaa6; }

/* ---------- 10.6 Responsive tweaks ---------- */
@media (max-width:700px){
  #custom-grade-fields input[type="range"]{ width: 100%; }
}


/* =========================================================
   11. MISC. (Potential Typo Selector)
   =========================================================
   NOTE: The selector `.sidebar cgbudget` targets an element
   <cgbudget> inside `.sidebar`. If you intended a class,
   change to `.sidebar .cgbudget`.
   ========================================================= */
.sidebar cgbudget {
  display: block;
  margin: 10px 0 4px;
  font-size: 12px;
  color: #ccc;
}