/* public/src/features/settings/settings.css - Settings Page Styles with Mobile Responsiveness */
/* CSS variables at themes.css */

/* ============================================================================
   BASE STYLES
   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
}

body {
  font-family: "IBM Plex Sans Arabic", "Inter", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding: 40px 24px;
  padding-right: calc(var(--sidebar-collapsed-width) + 16px);
  transition: padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--color-text-primary);
}

body.sidebar-expanded {
  padding-right: calc(var(--sidebar-expanded-width) + 16px);
}

/* ============================================================================
   SETTINGS PAGE CONTAINER
   ============================================================================ */

.settings-page {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ============================================================================
   HEADER
   ============================================================================ */

.settings-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 32px 24px;
  background: var(--color-surface);
  border-radius: 24px;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.settings-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
}

.settings-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 12px;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.settings-header p {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================================
   SETTINGS FORM
   ============================================================================ */

#settingsForm {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============================================================================
   SETTINGS CARD
   ============================================================================ */

.settings-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 32px;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.settings-card:hover {
  box-shadow: var(--shadow-lg);
}

.settings-card h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-card h2 span {
  font-size: 1.75rem;
}

.profile-hint {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* ============================================================================
   SETTINGS ROW
   ============================================================================ */

.settings-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.settings-row:last-child {
  margin-bottom: 0;
}

.settings-row label {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.settings-row input,
.settings-row select {
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: var(--color-background);
  color: var(--color-text-primary);
  transition: all 0.3s ease;
  width: 100%;
}

/* Custom dropdown chevron: the page is RTL, which puts the browser's native
   select arrow flush against the left border with almost no breathing room.
   Replacing it with our own SVG background lets us control that spacing
   directly instead of fighting the native (non-stylable) arrow's position. */
.settings-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-left: 40px;
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.settings-row input:focus,
.settings-row select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.settings-row input:hover,
.settings-row select:hover {
  border-color: var(--color-primary);
}

/* ============================================================================
   OPTION CARDS (Radio Buttons)
   ============================================================================ */

.option-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.option-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border: 2px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: var(--color-background);
}

.option-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  
}

.option-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: var(--shadow-md);
}

.option-card input[type="radio"] {
  margin-top: 2px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.option-card-content {
  flex: 1;
}

.option-card-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.option-card-desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ============================================================================
   COURSE LIST GRID
   ============================================================================ */

.course-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-height: 450px;
  overflow-y: auto;
  padding: 4px;
  margin-top: 16px;
}

/* Custom scrollbar */
.course-list-grid::-webkit-scrollbar {
  width: 8px;
}

.course-list-grid::-webkit-scrollbar-track {
  background: var(--color-background, #f5f5f5);
  border-radius: 4px;
}

.course-list-grid::-webkit-scrollbar-thumb {
  background: var(--color-border, #e0e0e0);
  border-radius: 4px;
  transition: background 0.2s;
}

.course-list-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #0088cc);
}

/* Firefox scrollbar */
.course-list-grid {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, #e0e0e0) var(--color-background, #f5f5f5);
}

/* Course items */
.course-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 460px);
  margin: 16px 0;
  padding: 0 14px;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
  background: var(--color-background, #f5f5f5);
  color: var(--color-text-secondary);
  transition: border-color .2s ease, box-shadow .2s ease;
}

.course-search:focus-within {
  border-color: var(--color-primary, #0088cc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #0088cc) 16%, transparent);
}

.course-search > span { font-size: 1.4rem; line-height: 1; }
.course-search input {
  width: 100%; min-width: 0; height: 46px; border: 0; outline: 0;
  background: transparent; color: var(--color-text-primary); font: inherit;
}
.course-list-empty {
  grid-column: 1 / -1; text-align: center; padding: 20px;
  color: var(--color-text-secondary);
}

.course-item {
  background: var(--color-background, #f5f5f5);
  border: 2px solid var(--color-border, #e0e0e0);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: all 0.25s ease;
  min-height: 80px;
}

.course-item:hover {
  border-color: var(--color-primary, #0088cc);
  box-shadow: 0 4px 12px rgba(0, 136, 204, 0.1);
  background: var(--color-surface, #ffffff);
  
}

.course-info {
  flex: 1;
  min-width: 0;
  /* Allow text truncation */
}

.course-info h4 {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.course-details {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* ============================================================================
   TOGGLE SWITCH (Scoped to course items to avoid conflicts with side-menu.css)
   ============================================================================ */

/* Container for the toggle - scoped to course items */
.course-item .toggle-container {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
  align-self: center;
}

/* Hide the default checkbox */
.course-item .toggle-container input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* The toggle background track */
.course-item .toggle-switch {
  position: relative;
  display: block;
  width: 48px;
  height: 26px;
  border-radius: 100px;
  background: var(--color-border, #ccc);
  transition: background 0.3s ease;
  cursor: pointer;
}

/* The toggle circle/knob */
.course-item .toggle-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* Checked state */
.course-item .toggle-container input[type="checkbox"]:checked+.toggle-switch {
  background: var(--color-primary, #6366f1);
}

.course-item .toggle-container input[type="checkbox"]:checked+.toggle-switch::after {
  left: 25px;
}

/* Focus state for accessibility */
.course-item .toggle-container input[type="checkbox"]:focus+.toggle-switch {
  outline: 2px solid var(--color-primary, #6366f1);
  outline-offset: 2px;
}

/* Disabled state */
.course-item .toggle-container input[type="checkbox"]:disabled+.toggle-switch {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Hover effect */
.course-item .toggle-container:hover .toggle-switch {
  opacity: 0.9;
}

/* ============================================================================
   SAVE BUTTON
   ============================================================================ */

.btn-save {
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 700;
  color: white;
  background: var(--gradient-accent);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-md);
  margin-top: 24px;
  display: none;
  /* Hidden by default for auto-save */
}

.btn-save:hover {
  
  box-shadow: var(--shadow-lg);
}

.btn-save:active {
  transform: translateY(0);
}

.btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================================
   SITE FOOTER
   ============================================================================ */

.site-footer {
  background: var(--color-surface);
  color: var(--color-text-primary);
  margin-top: 80px;
  /* Bust out of body's own padding to span full width. body's right
     padding isn't just this file's 24px — side-menu.css adds the
     sidebar's reserved width on top of it (padding-right: sidebar-width +
     16px, layered via a separate `padding-right` declaration, not this
     file's shorthand `padding`). Compensating only -24px here left a strip
     of body background showing between the footer's right edge and the
     sidebar equal to that reserved width. Mirroring the exact same
     sidebar-width expression used there keeps this in sync with it
     instead of hardcoding a value that only matched by coincidence. */
  margin-left: -24px;
  margin-right: calc(-24px - var(--sidebar-collapsed-width, 64px) - 16px);
  margin-bottom: -40px;
  /* The negative margin above only re-extends the footer's background
     under the sidebar's reserved rail — without pushing the content back
     in by the same amount, the footer's own content (links, columns)
     would sit under the fixed sidebar, not just the background. This
     padding restores the content's right boundary to the sidebar's edge
     while the background still bleeds under it. */
  padding-right: calc(var(--sidebar-collapsed-width, 64px) + 16px);
  transition: margin-right 250ms cubic-bezier(0.4, 0, 0.2, 1),
    padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded .site-footer {
  margin-right: calc(-24px - var(--sidebar-expanded-width, 240px) - 16px);
  padding-right: calc(var(--sidebar-expanded-width, 240px) + 16px);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 28px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 44px;
}

.footer-col {
  padding: 0 32px;
  border-right: 1px solid #2a2a2a;
}

.footer-col:first-child {
  padding-right: 3;
}

.footer-col-label {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #2a2a2a;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-links li {
  margin: 0;
  padding: 0;
}

.footer-links li::marker {
  display: none;
  content: "";
}

.footer-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d1d5db;
  text-decoration: none;
  font-size: 0.88rem;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  padding: 7px 0;
  border-radius: 4px;
  transition: color 0.15s ease;
  line-height: 1.3;
}

.footer-links a:hover {
  color: #ffffff;
}

.footer-links a svg {
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s ease;
}

.footer-links a:hover svg {
  opacity: 1;
}

/* Bottom bar */
.footer-bottom-outer {
  border-top: 1px solid #2a2a2a;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 28px;
  max-width: 1100px;
  margin: 0 auto;
}

.footer-copyright {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.6;
  text-align: center;
}

/* ============================================================================
   FOOTER THEME OVERRIDES
   ============================================================================ */

[data-theme="light"] .footer-grid,
[data-theme="light"] .footer-col,
[data-theme="light"] .footer-col-label,
[data-theme="light"] .footer-bottom-outer {
  border-color: #e5e7eb;
}

[data-theme="light"] .footer-col-label {
  color: #9ca3af;
  border-color: #e5e7eb;
}

[data-theme="light"] .footer-links a {
  color: #374151;
}

[data-theme="light"] .footer-links a:hover {
  color: #111827;
}

[data-theme="light"] .footer-links a svg {
  opacity: 0.4;
}

[data-theme="light"] .footer-links a:hover svg {
  opacity: 0.85;
}

[data-theme="light"] .footer-copyright {
  color: #9ca3af;
}


/* Dark-slate theme — shift footer toward deep blue-slate */
[data-theme="dark-slate"] .footer-grid,
[data-theme="dark-slate"] .footer-col,
[data-theme="dark-slate"] .footer-col-label,
[data-theme="dark-slate"] .footer-bottom-outer,
[data-theme="dark-slate"] .footer-col-label {
  border-color: #1e293b;
}

[data-theme="dark-slate"] .footer-col-label,
[data-theme="dark-slate"] .footer-copyright {
  color: #475569;
}

/* ============================================================================
   SAVE FEEDBACK (Auto-save indicator)
   ============================================================================ */

.save-feedback {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 16px;
  padding: 12px 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.save-feedback.saving {
  background: var(--color-primary-light);
  color: var(--color-primary);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* ============================================================================
   MOBILE RESPONSIVE STYLES
   ============================================================================ */

/* Tablet styles (768px and below) */
@media (max-width: 768px) {
  body {
    padding: 24px 16px;
    padding-right: 16px;
    padding-bottom: calc(var(--bottom-nav-height, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  body.sidebar-expanded {
    padding-right: 16px;
  }

  .settings-page {
    max-width: 100%;
  }

  .settings-header {
    margin-bottom: 32px;
    padding: 24px 20px;
  }

  .settings-header h1 {
    font-size: 2rem;
  }

  .settings-header p {
    font-size: 1rem;
  }

  .settings-card {
    padding: 24px 20px;
  }

  .settings-card h2 {
    font-size: 1.35rem;
  }

  .settings-card h2 span {
    font-size: 1.5rem;
  }

  .profile-hint {
    font-size: 0.9rem;
  }

  .settings-row label {
    font-size: 0.9rem;
  }

  .settings-row input,
  .settings-row select {
    font-size: 0.95rem;
    padding: 12px 14px;
  }

  .settings-row select {
    padding-left: 38px;
    background-position: left 12px center;
  }

  .option-card {
    padding: 16px;
  }

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

  .option-card-desc {
    font-size: 0.85rem;
  }

  /* Course list - 2 columns on tablet */
  .course-list-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
  }

  .course-item {
    padding: 14px;
  }

  .course-info h4 {
    font-size: 0.95rem;
  }

  .course-details {
    font-size: 0.8rem;
  }

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

  .save-feedback {
    font-size: 0.9rem;
  }

  /* Footer on tablet */
  .site-footer {
    margin-left: -16px;
    margin-right: -16px;
    margin-bottom: -24px;
    padding-right: 16px;
  }
}

/* Mobile styles (640px and below) */
@media (max-width: 640px) {
  html {
    font-size: 15px;
  }

  body {
    padding: 20px 12px;
  }

  .settings-header {
    margin-bottom: 24px;
    padding: 20px 16px;
    border-radius: 16px;
  }

  .settings-header h1 {
    font-size: 1.75rem;
    margin-bottom: 8px;
  }

  .settings-header p {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  #settingsForm {
    gap: 20px;
  }

  .settings-card {
    padding: 20px 16px;
    border-radius: 12px;
  }

  .settings-card h2 {
    font-size: 1.25rem;
    gap: 10px;
    margin-bottom: 6px;
  }

  .settings-card h2 span {
    font-size: 1.35rem;
  }

  .profile-hint {
    font-size: 0.85rem;
    margin-bottom: 20px;
  }

  .settings-row {
    margin-bottom: 16px;
  }

  .settings-row label {
    font-size: 0.85rem;
  }

  .settings-row input,
  .settings-row select {
    font-size: 0.9rem;
    padding: 10px 12px;
  }

  .settings-row select {
    padding-left: 34px;
    background-position: left 10px center;
    background-size: 14px;
  }

  .option-cards {
    gap: 12px;
  }

  .option-card {
    padding: 14px;
    gap: 12px;
  }

  .option-card input[type="radio"] {
    width: 18px;
    height: 18px;
  }

  .option-card-title {
    font-size: 0.95rem;
  }

  .option-card-desc {
    font-size: 0.8rem;
  }

  /* Course list - single column on mobile */
  .course-list-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-height: 400px;
  }

  .course-item {
    padding: 14px 12px;
    min-height: auto;
    gap: 12px;
  }

  .course-info h4 {
    font-size: 0.9rem;
  }

  .course-details {
    font-size: 0.75rem;
  }

  /* Keep toggle size consistent on mobile */
  .course-item .toggle-container {
    width: 48px;
    height: 26px;
  }

  .course-item .toggle-switch {
    width: 48px;
    height: 26px;
  }

  .course-item .toggle-switch::after {
    width: 20px;
    height: 20px;
    top: 3px;
    left: 3px;
  }

  .course-item .toggle-container input[type="checkbox"]:checked+.toggle-switch::after {
    left: 25px;
  }

  .btn-save {
    font-size: 0.95rem;
    padding: 14px 24px;
    margin-top: 20px;
  }

  .save-feedback {
    font-size: 0.85rem;
    padding: 10px 16px;
    min-height: 40px;
  }

  /* Footer on mobile */
  .site-footer {
    margin-left: -12px;
    margin-right: -12px;
    margin-bottom: -20px;
    padding-right: 12px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    padding-bottom: 32px;
  }

  .footer-col {
    border-right: none;
    padding: 0;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 24px;
  }

  .footer-col:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .footer-inner {
    padding: 36px 20px 0;
  }
}

/* Very small screens (380px and below) */
@media (max-width: 380px) {
  html {
    font-size: 14px;
  }

  body {
    padding: 16px 10px;
  }

  .settings-header {
    padding: 16px 12px;
  }

  .settings-header h1 {
    font-size: 1.5rem;
  }

  .settings-header p {
    font-size: 0.85rem;
  }

  .settings-card {
    padding: 16px 12px;
  }

  .settings-card h2 {
    font-size: 1.15rem;
    gap: 8px;
  }

  .settings-card h2 span {
    font-size: 1.25rem;
  }

  .profile-hint {
    font-size: 0.8rem;
  }

  .settings-row label {
    font-size: 0.8rem;
  }

  .settings-row input,
  .settings-row select {
    font-size: 0.85rem;
    padding: 10px;
  }

  .settings-row select {
    padding-left: 32px;
    background-position: left 10px center;
    background-size: 14px;
  }

  .option-card {
    padding: 12px;
    gap: 10px;
  }

  .option-card input[type="radio"] {
    width: 16px;
    height: 16px;
  }

  .option-card-title {
    font-size: 0.9rem;
  }

  .option-card-desc {
    font-size: 0.75rem;
  }

  /* Course list on very small screens */
  .course-list-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    max-height: 350px;
  }

  .course-item {
    padding: 12px 10px;
    gap: 10px;
  }

  .course-info h4 {
    font-size: 0.85rem;
  }

  .course-details {
    font-size: 0.7rem;
  }

  /* Slightly smaller toggle on very small screens */
  .course-item .toggle-container {
    width: 44px;
    height: 24px;
  }

  .course-item .toggle-switch {
    width: 44px;
    height: 24px;
  }

  .course-item .toggle-switch::after {
    width: 18px;
    height: 18px;
    top: 3px;
    left: 3px;
  }

  .course-item .toggle-container input[type="checkbox"]:checked+.toggle-switch::after {
    left: 23px;
  }

  .btn-save {
    font-size: 0.9rem;
    padding: 12px 20px;
  }

  .save-feedback {
    font-size: 0.8rem;
    padding: 8px 12px;
    min-height: 36px;
  }

  /* Footer on very small screens */
  .site-footer {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: -16px;
    padding-right: 10px;
  }
}

/* ============================================================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================================================ */

/* Reduced motion is handled globally by themes.css's html[data-motion="reduced"]
   kill switch, which already excludes loading skeletons and the sidebar icon
   hover animation from being disabled. A blanket `html[data-motion="reduced"] *`
   rule used to live here with no exclusions of its own, which silently
   re-crushed those excluded animations on this page specifically. */

/* High contrast mode support */
@media (prefers-contrast: high) {

  .settings-card,
  .option-card,
  .course-item {
    border-width: 3px;
  }

  .option-card:hover,
  .course-item:hover {
    border-width: 3px;
  }
}

/* ─────────────────────────────────────────
    FOOTER
───────────────────────────────────────── */
.ft-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}

.footer-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid #374151;
  color: var(--ft-text);
  padding: 8px 20px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.copyright {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: 0.78rem;
  color: var(--ft-muted);
  line-height: 1.6;
}

.footer-back-btn:hover {
  background: #1f2937;
  border-color: #4b5563;
  color: #ffffff;
}

/* ============================================================================
   LOADING SKELETON
   ============================================================================
   Shown in place of #settingsForm until settings.js has resolved both the
   saved profile (localStorage) and the quiz manifest (network), so the page
   never flashes false/placeholder values (default dropdown options, "جاري
   التحميل..." text) before snapping to the user's real settings. See
   settings.js's init(): the skeleton is removed and .settings-content loses
   .is-loading in the same tick that every field is actually populated.
   ============================================================================ */

.settings-skeleton {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-content.is-loading {
  display: none !important;
}

.settings-content {
  animation: settings-content-in 0.35s ease;
}

@keyframes settings-content-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes skeleton-pulse {

  0%,
  100% {
    opacity: 0.55;
  }

  50% {
    opacity: 1;
  }
}

.skeleton-line,
.skeleton-select,
.skeleton-course-item,
.skeleton-option-card {
  background: var(--color-border);
  border-radius: 8px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}

.skeleton-line {
  height: 1em;
  border-radius: 6px;
}

.skeleton-heading {
  width: 55%;
  height: 1.5rem;
  margin-bottom: 10px;
}

.skeleton-hint {
  width: 75%;
  height: 0.95rem;
  margin-bottom: 24px;
}

.skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.skeleton-row:last-child {
  margin-bottom: 0;
}

.skeleton-label {
  width: 30%;
  height: 0.95rem;
}

.skeleton-select {
  height: 46px;
  border-radius: 12px;
}

.skeleton-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.skeleton-course-item {
  min-height: 80px;
  border-radius: 12px;
}

.skeleton-option-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 20px;
}

.skeleton-option-card {
  height: 76px;
  border-radius: 12px;
}

@media (max-width: 640px) {
  .skeleton-course-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

/* ============================================================================
   ALL-COURSES NOTICE
   ============================================================================
   Shown above the course subscription list when the user has an academic
   stage/college set but hasn't subscribed to any specific course yet — in
   that state the home page falls back to showing every course, so this
   clarifies why. See settings.js. */

.all-courses-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 10px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  line-height: 1.5;
}