/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, #f5d77f 0%, #d4af37 50%, #aa7c11 100%);
  color: #08090c;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.btn-accent {
  background: var(--accent);
  color: #08090c;
  font-weight: 700;
}

.btn-accent:hover:not(:disabled) {
  background: var(--accent-dark);
  color: #ffffff;
  transform: translateY(-1px);
}

.btn-success {
  background: var(--success);
  color: #fff;
}

.btn-success:hover:not(:disabled) {
  background: #219a52;
}

.btn-danger {
  background: var(--danger);
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: #c0392b;
}

.btn-warning {
  background: var(--warning);
  color: var(--primary-dark);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-light);
  color: var(--text-main);
}

.btn-outline:hover:not(:disabled) {
  border-color: var(--primary-light);
  background: rgba(212, 175, 55, 0.1);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  padding: 8px 12px;
}

.btn-ghost:hover:not(:disabled) {
  background: var(--bg-card);
  color: var(--text-main);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
}

.btn-lg {
  padding: 14px 28px;
  font-size: 1rem;
}

.btn-icon {
  padding: 8px;
  width: 36px;
  height: 36px;
}

.btn .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* ── Cards ───────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: all var(--transition);
}

.card:hover {
  border-color: var(--border-light);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: all var(--transition);
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-light);
  box-shadow: 0 8px 25px var(--shadow);
}

.stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.stat-card .stat-icon.blue { background: rgba(212, 175, 55, 0.2); color: var(--primary-light); }
.stat-card .stat-icon.gold { background: rgba(232, 184, 75, 0.2); color: var(--accent); }
.stat-card .stat-icon.green { background: rgba(39, 174, 96, 0.2); color: var(--success); }
.stat-card .stat-icon.red { background: rgba(231, 76, 60, 0.2); color: var(--danger); }
.stat-card .stat-icon.orange { background: rgba(243, 156, 18, 0.2); color: var(--warning); }

.stat-card .stat-value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-card .stat-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── Forms ───────────────────────────────────────── */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

/* RTL clipping rules — apply only to single-line text inputs.
   <select> is excluded because the browser's truncation of the
   selected option is already correct, and ellipsis on <select>
   prevents the field from auto-sizing to its longest option. */
.form-input {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

.form-input::placeholder {
  color: var(--text-muted);
  opacity: 0.6;
}

.form-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238fa3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  /* Reserve 36px on the LEFT for the chevron icon. In RTL the visual
     leading edge for the selected text is the right side, so giving
     the chevron its own 36px gutter on the left leaves all of the
     text width free for Arabic glyphs without clipping. */
  padding-left: 36px;
  padding-right: 14px;
}

/* ── Custom Select UI ────────────────────────────── */
.custom-select-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.custom-select-trigger {
  width: 100%;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Reusing the look of .form-select */
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  min-height: 40px;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.custom-select-trigger:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
  outline: none;
}

.custom-select-trigger .trigger-text {
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.custom-select-trigger .trigger-icon {
  margin-right: 8px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.custom-select-wrapper.open .custom-select-trigger .trigger-icon {
  transform: rotate(180deg);
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
  padding: 4px 0;
}

.custom-select-wrapper.open .custom-select-options {
  display: block;
  animation: fadeIn 0.2s ease;
}

.custom-select-option {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-main);
  transition: background var(--transition);
}

.custom-select-option:hover {
  background: var(--bg-card-hover);
}

.custom-select-option.selected {
  background: rgba(212, 175, 55, 0.15);
  color: var(--accent);
  font-weight: 600;
}

/* Ensure the wrapper doesn't force line breaks inside flex rows like .filters-bar */
.filters-bar .custom-select-wrapper {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  flex: 0 1 auto;
}

/* In mobile view, still anchor to trigger button but allow slightly wider min-width */
@media (max-width: 768px) {
  .custom-select-options {
    min-width: 100%;
  }
}


.form-textarea {
  resize: vertical;
  min-height: 100px;
  /* Textareas wrap, override the input ellipsis rules */
  white-space: pre-wrap;
  overflow: auto;
  text-overflow: clip;
}

/* Form labels should never truncate Arabic text. */
.form-label {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.form-error {
  font-size: 0.8rem;
  color: var(--danger);
  margin-top: 4px;
}

/* ── Modal content overflow guards ─────────────────
   Inline styles set most of the dialog look in modal.js,
   but we add safety rails here so deep children (long
   tables, code blocks, Arabic phrases) can't push the
   dialog past the viewport on phones. */
.modal-content {
  overflow-x: hidden;
}
.modal-body {
  overflow-wrap: anywhere;
  word-break: break-word;
  /* horizontal scroll is fine for explicit children, like .table-container */
  overflow-x: hidden;
}
.modal-body .table-container {
  /* Tables inside modals get their own horizontal scroll. */
  overflow-x: auto;
  max-width: 100%;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 600px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary-light);
}

/* ── Tables ──────────────────────────────────────── */
.table-container {
  /* Scroll horizontally inside the container only, so wide tables
     never push the whole page sideways on mobile. */
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  /* Subtle inset shadow on the right edge hints "swipe me" on mobile */
  background:
    linear-gradient(to left, var(--bg-card) 30%, rgba(255,255,255,0)) right center / 30px 100% no-repeat,
    var(--bg-card);
}

.data-table {
  /* width:max-content lets the table size to its content so .table-container
     becomes the scroll axis on mobile, instead of the table stretching past
     the viewport. */
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.data-table th,
.data-table td {
  padding: 12px 16px;
  text-align: right;
  white-space: nowrap;
}

.data-table th {
  background: var(--bg-sidebar);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}

.data-table td {
  border-bottom: 1px solid var(--border);
}

.data-table tbody tr {
  transition: background var(--transition);
}

.data-table tbody tr:hover {
  background: var(--bg-card-hover);
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── Badges ──────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.badge-success { background: rgba(39, 174, 96, 0.15); color: var(--success-light); }
.badge-danger { background: rgba(231, 76, 60, 0.15); color: var(--danger-light); }
.badge-warning { background: rgba(243, 156, 18, 0.15); color: var(--warning-light); }
.badge-info { background: rgba(52, 152, 219, 0.15); color: var(--info); }
.badge-muted { background: rgba(143, 163, 184, 0.15); color: var(--text-muted); }

/* ── Progress Bar ────────────────────────────────── */
.progress-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-input);
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar .fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-bar .fill.green { background: var(--success); }
.progress-bar .fill.gold { background: var(--accent); }
.progress-bar .fill.red { background: var(--danger); }

/* ── Empty State ─────────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}

.empty-state .icon {
  font-size: 3rem;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state .title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 8px;
}

.empty-state .description {
  font-size: 0.9rem;
  max-width: 400px;
  margin: 0 auto;
}

/* ── Loading Skeleton ────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

.skeleton-text {
  height: 16px;
  margin-bottom: 8px;
}

.skeleton-title {
  height: 24px;
  width: 60%;
  margin-bottom: 12px;
}

.skeleton-card {
  height: 120px;
}

/* ── Filters Bar ─────────────────────────────────── */
.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
}

.filters-bar .search-input {
  flex: 1;
  min-width: 200px;
  max-width: 350px;
}

/* Filter dropdowns: size to their widest option (auto), with a
   generous floor so common Arabic placeholders like "كل الأساتذة"
   or "— اختر الدورة —" never have to truncate. */
/* fix: filter label truncation #arabic-rtl */
.filters-bar .form-select {
  width: auto;
  min-width: max-content;
  max-width: 100%;
  /* Belt-and-braces: don't squeeze the select below its content,
     and keep its label on a single, full-height line. */
  flex: 0 1 auto;
}

/* Filters bar inputs (month picker, date pickers) also need a
   floor so their localized text never clips. */
.filters-bar .form-input:not(.search-input) {
  width: auto;
  min-width: 170px;
}

/* If the page passes its own labels above filters, allow them to wrap
   onto multiple lines instead of cutting Arabic glyphs at the edge. */
.filters-bar .filter-label,
.filters-bar label {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.3;
  max-width: 100%;
}

/* ── Pagination ──────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.pagination .page-btn {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  transition: all var(--transition);
}

.pagination .page-btn:hover {
  border-color: var(--primary-light);
  color: var(--text-main);
}

.pagination .page-btn.active {
  background: var(--primary-light);
  color: #fff;
  border-color: var(--primary-light);
}

/* ── Tabs ────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
}

.tab-btn:hover {
  color: var(--text-main);
}

.tab-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Animations ──────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade { animation: fadeIn 0.3s ease; }
.animate-slide { animation: slideInRight 0.3s ease; }
.animate-down { animation: slideDown 0.3s ease; }

/* ── Schedule Grid ───────────────────────────────── */
.schedule-grid {
  display: grid;
  grid-template-columns: 80px repeat(7, 1fr);
  gap: 1px;
  background: var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.schedule-grid .header-cell,
.schedule-grid .time-cell,
.schedule-grid .session-cell {
  padding: 8px;
  background: var(--bg-card);
  font-size: 0.82rem;
}

.schedule-grid .header-cell {
  background: var(--bg-sidebar);
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
}

.schedule-grid .time-cell {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-align: center;
}

.schedule-grid .session-cell.has-session {
  background: rgba(212, 175, 55, 0.15);
  border-right: 3px solid var(--primary);
  cursor: pointer;
}

.schedule-grid .session-cell.has-session:hover {
  background: rgba(212, 175, 55, 0.25);
}

.schedule-grid .session-cell .course-name {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-main);
}

.schedule-grid .session-cell .room-label {
  font-size: 0.72rem;
  color: var(--text-muted);
}