/* =========================================================
   🎞 MOTION.CSS – Unified Hover / Focus / Transition Effects
   ========================================================= */

/* === 1️⃣ Buttons – Global Subtle Animation ======================== */
.btn {
  transition: all 0.2s ease-in-out !important;
}
.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Primary Button Glow */
.btn.primary {
  background: var(--primary);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(46, 160, 67, 0.25);
}
.btn.primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 4px 12px rgba(46, 160, 67, 0.35);
}

/* Danger Button Hover */
.btn.danger:hover {
  box-shadow: 0 3px 10px rgba(255, 93, 93, 0.25);
}

/* === 2️⃣ Filter Area & Small Buttons ============================== */
.filter-column:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 180, 255, 0.2);
}
.filter-controls .btn.btn-xs:hover {
  background: var(--interactive-hover);
  box-shadow: 0 0 6px rgba(97, 218, 251, 0.25);
}
.controls .btn-invoice:hover { background-color: var(--interactive-hover); }

/* === 3️⃣ Booking Card Hover Enhancements ========================== */
.booking-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.08);
}
.booking-card.created:hover {
  box-shadow: 0 4px 12px rgba(255, 234, 0, 0.3);
}
.booking-card.confirmed:hover {
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.25);
}
.booking-card.checked-out:hover {
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

/* === 4️⃣ Top Actions & Table Rows ================================= */
#patientSearch:hover { border-color: var(--accent); }
.top-actions .btn:hover {
  background: var(--surface-alt);
  box-shadow: 0 0 6px rgba(0, 191, 255, 0.2);
  transform: translateY(-1px);
}
.section .table tbody tr:hover {
  background-color: var(--table-row-hover);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* === 5️⃣ Misc Buttons & Headers =================================== */
.btn-page:hover,
.bulk-controls button:hover {
  background-color: var(--surface-alt);
}
th[data-key]:hover { background: var(--surface-tint); }
.date-input:hover { border-color: var(--muted-text); }
.section-header:hover { background: var(--surface-tint); }
.collapsible-header:hover { background: var(--surface-alt); }

/* === 6️⃣ Holiday & Leave Animations ================================ */
.leave-pill:hover { background: var(--warning); }
.leave-pill-mini:hover {
  background-color: var(--warning);
  transform: translateY(-1px);
}
.holiday-badge:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  transition: all 0.2s ease;
}

/* === 7️⃣ Specialized Buttons ====================================== */
.btn-therapy-toggle:hover { background-color: var(--interactive-hover); }
#envSwitcher.minimized:hover { background-color: var(--chip); }
.custom-select .options div:hover { background-color: var(--surface-alt); }
#envSwitcher button:hover { background-color: var(--highlight); }
.btn.btn-therapy-toggle:hover { background: var(--chip); }

/* === 8️⃣ Focus States – Inputs & Interactive Fields =============== */
.date-input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
#patientSearch:focus {
  outline: none;
  background: var(--surface-tint);
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.patient-search-box:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
}
.editable-input[data-field="feeBase"]:focus {
  border-color: var(--highlight);
  box-shadow: 0 0 6px rgba(255, 217, 102, 0.4);
  outline: none;
}
.vc-select:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
  outline: none;
}
.editable-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 5px rgba(46, 160, 67, 0.4);
}
.editable-textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow-focus);
  outline: none;
}

/* === 9️⃣ Dialog & Section Field Focus ============================== */
dialog input[type="time"]:focus,
.section input[type="time"] {
  background: var(--surface-tint);
  color: var(--text);
  border: 1px solid var(--border);
}
.section select#select-員工:focus,
.section select#select-療程:focus {
  border-color: var(--accent) !important;
  background-color: var(--input-bg) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-focus);
}
.section .table select:focus,
.section .table input:focus,
.section .table textarea:focus {
  border-color: var(--accent);
  outline: none;
}
dialog.section input[type="text"]:focus,
dialog.section input[type="number"]:focus,
dialog.section input[list]:focus,
dialog.section input#patientName:focus {
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-focus);
}

/* === 🔟 Therapy Scroll‑box (General State) ======================== */
.therapy-scroll-box {
  max-height: 180px;
  overflow-y: auto;
  padding: 8px 10px;
  background-color: var(--surface-tint);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 12px;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.therapy-scroll-box.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.filter-scroll-box,
.therapy-scroll-box {
  max-height: 150px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--surface-tint);
}

.therapy-scroll-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  line-height: 1.5;
}

/* === Therapy Toggle Buttons ================================== */
.btn-therapy-toggle {
  background-color: var(--interactive);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  margin-bottom: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn.btn-therapy-toggle {
  display: inline-block;
  margin-bottom: 6px;
  padding: 4px 10px;
  font-size: 13px;
  background: var(--chip);
  color: var(--text);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
}