/* GKaim Student Dashboard - Custom Dropdown UI (plugin pages only) */

.gkaim-sd-dd{
  position:relative;
  display:inline-block;
  width:100%;
}

/*
  Desktop width rules
  - Default filter dropdowns (Period) stay compact
  - Course & Chapter dropdowns are wider
  This avoids relying on :nth-child() (which can break when markup changes).
*/
@media (min-width: 769px){
  /* Filters row: allow each dropdown to size itself */
  .gkaim-sd-filters .gkaim-sd-dd{ width:auto; }
  .gkaim-sd-filters .gkaim-sd-dd-btn{
    width:auto;
    min-width: 220px; /* Period (and other normal filters) */
  }

  /* Course + Chapter should be wider */
  .gkaim-sd-filters .gkaim-sd-dd > select[name="course"] + .gkaim-sd-dd-btn,
  .gkaim-sd-filters .gkaim-sd-dd > select[name="chapter"] + .gkaim-sd-dd-btn{
    min-width: 380px;
  }
}

/* Table controls (Per page) should stay compact (desktop + mobile) */
.gkaim-sd-table-controls-right .gkaim-sd-dd,
.gkaim-sd-table-controls .gkaim-sd-dd{
  width:auto;
}
.gkaim-sd-table-controls-right .gkaim-sd-dd-btn,
.gkaim-sd-table-controls .gkaim-sd-dd-btn{
  width:auto;
}

/* Hide the native select but keep it in DOM for forms/change events */
.gkaim-sd-dd > select{
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Closed state button */
.gkaim-sd-dd-btn{
  width:100%;
  text-align:left;
  cursor:pointer;
  border:1px solid rgba(48,48,48,0.12);
  border-radius:10px;
  padding:7px 34px 7px 10px;
  background: rgba(245,247,255,0.55);
  color:#303030;
  box-shadow:0 10px 26px rgba(15,23,42,0.08);
  line-height:1.2;
  -webkit-tap-highlight-color: transparent;
}

/* Keep existing sizing rules for special selects (ex: perpage) */
.gkaim-sd-dd-btn.gkaim-sd-perpage{
  min-width:74px;
  height:30px;
  padding:4px 28px 4px 8px;
  font-size:13px;
  border-radius:10px;
}

.gkaim-sd-dd-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

/* Chevron */
.gkaim-sd-dd-btn::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:8px;
  height:8px;
  border-right:2px solid rgba(48,48,48,0.55);
  border-bottom:2px solid rgba(48,48,48,0.55);
  transform: translateY(-55%) rotate(45deg);
  pointer-events:none;
}

.gkaim-sd-dd.is-open .gkaim-sd-dd-btn::after{
  transform: translateY(-40%) rotate(-135deg);
}

/* Open list panel */
.gkaim-sd-dd-panel{
  position:absolute;
  left:0;
  right:0;
  top: calc(100% + 2px);
  z-index: 9999;
  background: rgba(245,247,255,0.98);
  color:#303030;
  border-radius:10px;
  box-shadow: 0px 0px 5px 5px rgb(103 148 255 / 22%);
  padding:6px;
  max-height: 320px;
  overflow:auto;
}

.gkaim-sd-dd-opt{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  padding:10px 10px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.gkaim-sd-dd-opt:hover,
.gkaim-sd-dd-opt:focus{
  outline:none;
  background: rgba(59,130,246,0.10);
  color: #000;
}

.gkaim-sd-dd-btn:hover,
.gkaim-sd-dd-btn:focus{
  outline:none;
  background: rgba(59,130,246,0.10);
  color: #000;;
}


.gkaim-sd-dd-opt.is-active{
  background: rgba(59,130,246,0.16);
}

/* Mobile: keep within viewport */
@media (max-width: 768px){
  .gkaim-sd-dd-panel{
    max-height: 45vh;
  }
}