/**
 * =========================================================================
 * منصة وأكاديمية جدير التعليمية - Jadeer LMS
 * نظام التوكنات الموحد لمربعات البحث وفلاتر النظام (Token Design System)
 * =========================================================================
 * يُوحد تصميم كافة حقول البحث، الفلاتر، القوائم المنسدلة، والأزرار الشرائحية
 * وفق مصفوفة التوكنات القياسية للأكاديمية:
 * - الألوان: زمردي سيادي #046c4e / #059669 مع تدرجات مضيئة
 * - الحواف: نصف قطر ناعم (Smooth Radius 8px / 12px / 9999px)
 * - حلقة التركيز: Glowing Ring (0 0 0 3.5px rgba(5, 150, 105, 0.15))
 * - التفاعل: تمدد ناعم عند التركيز (Smooth Expanding Search)
 * - توافق كامل مع الوضعين الفاتح والداكن (Light & Dark Theme Tokens)
 */

/* =========================================================================
   1. Master Search Input Tokens & Classes
   ========================================================================= */

.jadeer-search-wrapper,
.search-input-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

/* Unified Tokenized Search Input */
.jadeer-search-input,
.search-input-pro,
.form-control-compact,
.exm-filter-input,
.form-input-pro,
#driveSearchInput,
#coursesSearchInput,
#attSearchInput,
#enrollSearchInput,
#allStudentsSearchInput,
#subsSearchInput,
#exmSearchInput,
#asgnSearchInput,
#ansExamQSearchInput {
  background-color: var(--input-bg, #ffffff) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--input-border, #cbd5e1) !important;
  border-radius: var(--radius-md, 10px) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
  height: 36px !important;
  padding: 0 38px 0 14px !important;
  outline: none !important;
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
}

/* Hover State */
.jadeer-search-input:hover,
.search-input-pro:hover,
.form-control-compact:hover,
.exm-filter-input:hover,
.form-input-pro:hover,
#driveSearchInput:hover,
#coursesSearchInput:hover,
#allStudentsSearchInput:hover {
  border-color: var(--accent-emerald, #059669) !important;
  background-color: var(--surface-elevated-hover, #f8fafc) !important;
}

/* Active & Focus Ring State (Luxury Emerald Glow) */
.jadeer-search-input:focus,
.search-input-pro:focus,
.form-control-compact:focus,
.exm-filter-input:focus,
.form-input-pro:focus,
#driveSearchInput:focus,
#coursesSearchInput:focus,
#attSearchInput:focus,
#enrollSearchInput:focus,
#allStudentsSearchInput:focus,
#subsSearchInput:focus,
#exmSearchInput:focus,
#asgnSearchInput:focus,
#ansExamQSearchInput:focus {
  border-color: var(--accent-emerald, #059669) !important;
  background-color: var(--bg-card, #ffffff) !important;
  box-shadow: 0 0 0 3.5px var(--accent-emerald-light, rgba(5, 150, 105, 0.16)), 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Smooth Expanding Toolbar Search (e.g. Drive, Courses, Students) */
#driveSearchInput,
#allStudentsSearchInput,
#coursesSearchInput {
  border-radius: 9999px !important;
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

#driveSearchInput:focus {
  width: 320px !important;
}

#allStudentsSearchInput:focus {
  max-width: 320px !important;
  width: 300px !important;
}

#coursesSearchInput:focus {
  box-shadow: 0 0 0 3.5px rgba(5, 150, 105, 0.18) !important;
}

/* Placeholder Styling */
.jadeer-search-input::placeholder,
.search-input-pro::placeholder,
.form-control-compact::placeholder,
.exm-filter-input::placeholder,
.form-input-pro::placeholder,
#driveSearchInput::placeholder {
  color: var(--text-muted, #94a3b8) !important;
  font-weight: 500 !important;
  font-size: 0.81rem !important;
}

/* Search Icon inside Input (Right side for RTL) */
.search-icon-adornment {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-emerald, #059669);
  pointer-events: none;
  font-size: 0.95rem;
  z-index: 2;
  transition: color 0.2s ease;
}

.search-kbd-badge {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-secondary, #e2e8f0);
  color: var(--text-muted, #64748b);
  border: 1px solid var(--border-medium, #cbd5e1);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-family: monospace;
  font-weight: 700;
  pointer-events: none;
}

/* =========================================================================
   2. Segmented Filter Tabs & Modern Filter Chips
   ========================================================================= */

.filter-tabs,
.courses-toolbar .btn-secondary {
  border-radius: var(--radius-md, 10px) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  transition: all 0.2s ease !important;
}

.filter-tab,
.courses-toolbar .btn-action-compact {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: 1px solid var(--border-subtle, #e2e8f0) !important;
  background: var(--bg-card, #ffffff) !important;
  color: var(--text-secondary, #475569) !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.filter-tab:hover,
.courses-toolbar .btn-action-compact:hover {
  background: var(--bg-hover, #f1f5f9) !important;
  color: var(--accent-emerald, #059669) !important;
  border-color: var(--accent-emerald-border, rgba(5, 150, 105, 0.3)) !important;
}

.filter-tab.active,
.courses-toolbar .btn-action-compact.active {
  background: var(--accent-emerald, #059669) !important;
  color: #ffffff !important;
  border-color: var(--accent-emerald, #059669) !important;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
}

/* =========================================================================
   3. Modern Dropdown Selects (Token Select System)
   ========================================================================= */

select.form-select-pro,
select.search-input-pro,
.course-select-box select,
.track-filter-select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: var(--input-bg, #ffffff) !important;
  color: var(--text-primary, #0f172a) !important;
  border: 1px solid var(--input-border, #cbd5e1) !important;
  border-radius: var(--radius-md, 10px) !important;
  height: 36px !important;
  padding: 0 14px 0 36px !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
  background-repeat: no-repeat !important;
  background-position: left 12px center !important;
  background-size: 14px !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

select.form-select-pro:hover,
select.search-input-pro:hover {
  border-color: var(--accent-emerald, #059669) !important;
  background-color: var(--surface-elevated-hover, #f8fafc) !important;
}

select.form-select-pro:focus,
select.search-input-pro:focus {
  border-color: var(--accent-emerald, #059669) !important;
  outline: none !important;
  box-shadow: 0 0 0 3.5px var(--accent-emerald-light, rgba(5, 150, 105, 0.16)) !important;
}

/* =========================================================================
   4. Dark Theme Token Inversions
   ========================================================================= */

[data-theme="dark"] .jadeer-search-input,
[data-theme="dark"] .search-input-pro,
[data-theme="dark"] .form-control-compact,
[data-theme="dark"] .exm-filter-input,
[data-theme="dark"] .form-input-pro,
[data-theme="dark"] #driveSearchInput,
[data-theme="dark"] #coursesSearchInput,
[data-theme="dark"] #allStudentsSearchInput {
  background-color: var(--input-bg, #141e32) !important;
  color: var(--text-primary, #e8edf5) !important;
  border-color: var(--input-border, #243044) !important;
}

[data-theme="dark"] .jadeer-search-input:focus,
[data-theme="dark"] .search-input-pro:focus,
[data-theme="dark"] .form-control-compact:focus,
[data-theme="dark"] #driveSearchInput:focus,
[data-theme="dark"] #coursesSearchInput:focus,
[data-theme="dark"] #allStudentsSearchInput:focus {
  border-color: var(--accent-emerald, #10b981) !important;
  box-shadow: 0 0 0 3.5px rgba(16, 185, 129, 0.22) !important;
}

[data-theme="dark"] select.form-select-pro,
[data-theme="dark"] select.search-input-pro {
  background-color: var(--input-bg, #141e32) !important;
  color: var(--text-primary, #e8edf5) !important;
  border-color: var(--input-border, #243044) !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .filter-tab,
[data-theme="dark"] .courses-toolbar .btn-action-compact {
  background: var(--bg-card, #111a2e) !important;
  color: var(--text-secondary, #9caabd) !important;
  border-color: var(--border-subtle, #1c2a42) !important;
}

[data-theme="dark"] .filter-tab.active,
[data-theme="dark"] .courses-toolbar .btn-action-compact.active {
  background: var(--accent-emerald, #10b981) !important;
  color: #0f172a !important;
  border-color: var(--accent-emerald, #10b981) !important;
}