/* ==========================================================================
   Components
   ========================================================================== */


/* --- Dashboard cards --- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}


.module-card {

  background: var(--surface);

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

  border-radius: var(--radius-lg);

  padding: 20px;

  cursor: pointer;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    border-color 0.12s ease;

}


.module-card:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-md);

  border-color: var(--teal-500);

}


.module-card .icon {

  font-size: 26px;

  margin-bottom: 14px;

  display: inline-block;

}


.module-card h3 {

  margin-bottom: 4px;

}


.module-card .desc {

  font-size: 12.5px;

  color: var(--ink-500);

  line-height: 1.5;

}



/* --- Buttons --- */

.btn {

  font-family: var(--font-ui);

  font-size: 13.5px;

  font-weight: 600;

  padding: 9px 16px;

  border-radius: var(--radius-sm);

  border: 1px solid transparent;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  gap: 7px;

  transition:
    opacity 0.1s ease,
    background 0.1s ease;

}


.btn:disabled {

  opacity: 0.5;

  cursor: not-allowed;

}


.btn-primary {

  background: var(--teal-600);

  color: white;

}


.btn-primary:hover:not(:disabled) {

  background: var(--teal-700);

}


.btn-secondary {

  background: var(--surface);

  color: var(--ink-700);

  border-color: var(--line);

}


.btn-secondary:hover:not(:disabled) {

  background: var(--surface-sunken);

}


.btn-danger {

  background: var(--surface);

  color: var(--coral-600);

  border-color: var(--coral-100);

}


.btn-danger:hover:not(:disabled) {

  background: var(--coral-100);

}


.btn-ghost {

  background: none;

  color: var(--ink-500);

}


.btn-ghost:hover {

  color: var(--ink-900);

}


.btn-sm {

  padding: 5px 10px;

  font-size: 12px;

}



/* --- Forms --- */

.field {

  margin-bottom: 14px;

}


.field label {

  display: block;

  font-size: 12.5px;

  font-weight: 600;

  color: var(--ink-700);

  margin-bottom: 6px;

}


.field .hint {

  font-size: 11.5px;

  color: var(--ink-500);

  margin-top: 4px;

}



input[type="text"],
input[type="number"],
select,
textarea {

  width: 100%;

  font-family: var(--font-ui);

  font-size: 13.5px;

  padding: 9px 11px;

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

  border-radius: var(--radius-sm);

  background: var(--surface);

  color: var(--ink-900);

}


textarea {

  resize: vertical;

  min-height: 90px;

  font-family: var(--font-display);

  line-height: 1.6;

}


input:focus,
select:focus,
textarea:focus {

  outline: 2px solid var(--teal-500);

  outline-offset: 1px;

  border-color: var(--teal-500);

}


.form-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 14px;

}



/* --- Panels --- */

.workspace {

  display: grid;

  grid-template-columns: 340px 1fr;

  gap: 24px;

  align-items: start;

}


.panel {

  background: var(--surface);

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

  border-radius: var(--radius-lg);

  padding: 20px;

}


.panel + .panel {

  margin-top: 16px;

}



/* --- Content --- */

.content-block {

  font-family: var(--font-display);

  font-size: 15.5px;

  line-height: 1.75;

  color: var(--ink-900);

  white-space: pre-wrap;

}


.qa-card {

  background: var(--surface);

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

  border-radius: var(--radius-md);

  padding: 16px;

  margin-bottom: 12px;

}


.qa-card .q {

  font-weight: 600;

  margin-bottom: 8px;

}



/* --- Library / Search --- */

.list-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 13px 14px;

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

  border-radius: var(--radius-md);

  background: var(--surface);

  margin-bottom: 8px;

}


.list-row .title {

  font-weight: 600;

  font-size: 13.5px;

}


.snippet mark {

  background: var(--teal-100);

  color: var(--teal-700);

}



.empty-state {

  padding:40px 20px;

  text-align:center;

  color:var(--ink-500);

}


.spinner {

  width:16px;

  height:16px;

  border:2px solid var(--teal-100);

  border-top-color:var(--teal-600);

  border-radius:50%;

  animation:spin .7s linear infinite;

  display:inline-block;

}


@keyframes spin {

  to {

    transform:rotate(360deg);

  }

}





/* ==========================================================================
   YouTube Medical Lecture Cards
   ========================================================================== */


.youtube-grid {

  display:grid;

  grid-template-columns:
    repeat(auto-fill,minmax(320px,1fr));

  gap:22px;

  margin-top:24px;

}



.youtube-card {

  background:var(--surface);

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

  border-radius:var(--radius-lg);

  overflow:hidden;

  display:flex;

  flex-direction:column;

  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;

}



.youtube-card:hover {

  transform:translateY(-4px);

  box-shadow:var(--shadow-md);

  border-color:var(--teal-500);

}



/* Thumbnail */

.youtube-image-wrapper {

  position:relative;

  width:100%;

  aspect-ratio:16 / 9;

  overflow:hidden;

  background:var(--surface-sunken);

}



.youtube-thumbnail {

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

  transition:transform .25s ease;

}



.youtube-card:hover .youtube-thumbnail {

  transform:scale(1.05);

}



/* Play button overlay */

.youtube-play {

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%);

  width:55px;

  height:55px;

  border-radius:50%;

  background:rgba(0,0,0,.65);

  color:white;

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:24px;

  opacity:0;

  transition:.2s ease;

}



.youtube-card:hover .youtube-play {

  opacity:1;

}



/* Content */

.youtube-content {

  padding:16px;

  display:flex;

  flex-direction:column;

  flex:1;

}



.youtube-title {

  font-size:15px;

  font-weight:700;

  line-height:1.45;

  color:var(--ink-900);

  margin-bottom:10px;


  display:-webkit-box;

  -webkit-line-clamp:2;

  -webkit-box-orient:vertical;

  overflow:hidden;

}



.youtube-channel {

  font-size:12.5px;

  color:var(--ink-500);

  margin-bottom:18px;

}



/* Button */

.youtube-button {

  margin-top:auto;

  display:flex;

  justify-content:center;

  align-items:center;

  padding:10px 14px;

  border-radius:var(--radius-sm);

  background:var(--teal-600);

  color:white;

  text-decoration:none;

  font-size:13px;

  font-weight:600;

}



.youtube-button:hover {

  background:var(--teal-700);

}



@media(max-width:700px){

  .youtube-grid {

    grid-template-columns:1fr;

  }

}

/* =========================================================
   SIDEBAR SCROLLING
   ========================================================= */

#sidebar {
    height: 100vh;
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    display: flex;
    flex-direction: column;
}

/* Keep the sidebar scrollbar usable */
#sidebar::-webkit-scrollbar {
    width: 7px;
}

#sidebar::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45);
    border-radius: 999px;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.7);
}

/* The spacer should not consume more space than available */
#sidebar .sidebar-spacer {
    flex: 1 1 auto;
    min-height: 20px;
}