/* ═══════════════════════════════════════════════════════════════
   Sprint 34 — UI/UX Final Fix
   1. Login mobile: compact — hide auth-side, clean card
   2. Teacher dashboard mobile: card compacting + better nav
   3. Parent dashboard: nav polish + back buttons
   4. AI assistant button: repositioned & redesigned
   5. Back to dashboard buttons in sub-pages
   ═══════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────
   1. LOGIN PAGE — MOBILE REDESIGN
   ────────────────────────────────────────────────────────────── */

/* Mobile: hide big auth-side, show compact card only */
@media (max-width: 700px) {
  body:has(.auth-shell) {
    padding: 0 !important;
    align-items: flex-start !important;
    background:
      radial-gradient(circle at 20% 5%, rgba(15,123,95,.13), transparent 42%),
      linear-gradient(180deg, #f4faf7 0%, #ebf6f0 100%) !important;
  }

  .auth-shell {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100svh !important;
    border-radius: 0 !important;
  }

  /* إخفاء auth-side الجانبية على الجوال */
  .auth-side {
    display: none !important;
  }

  .auth-card {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    min-height: 100svh !important;
    justify-content: flex-start !important;
  }

  /* Header bar */
  .auth-top {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: rgba(244,250,247,.95) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(15,123,95,.1) !important;
    padding: 12px 18px !important;
    margin: 0 !important;
  }

  /* محتوى البطاقة */
  .auth-card > *:not(.auth-top) {
    padding-inline: 22px !important;
  }

  /* Brand compact */
  .auth-card-brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 20px 22px 0 !important;
  }

  .role-badge {
    margin-top: 16px !important;
    margin-bottom: 0 !important;
  }

  .auth-card h2 {
    font-size: 26px !important;
    margin: 10px 0 6px !important;
  }

  .auth-desc {
    font-size: 14px !important;
    margin-bottom: 18px !important;
  }

  .role-tabs {
    margin-top: 0 !important;
    border-radius: 14px !important;
    padding: 4px !important;
  }

  .role-tabs a {
    padding: 10px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  .input-wrap input {
    height: 48px !important;
    font-size: 15px !important;
  }

  .login-btn {
    height: 50px !important;
    font-size: 16px !important;
    margin-top: 4px !important;
  }

  .actions {
    margin-top: 14px !important;
  }

  .mini {
    padding-bottom: 28px !important;
  }
}

/* Brand inside auth-card for mobile */
@media (max-width: 700px) {
  .auth-card::before {
    content: '';
    display: block;
    height: 0;
  }
}

/* ──────────────────────────────────────────────────────────────
   2. PARENT DASHBOARD — NAV POLISH
   ────────────────────────────────────────────────────────────── */

/* Top nav compact on mobile */
@media (max-width: 640px) {
  .topnav .container {
    padding-inline: 12px !important;
    gap: 8px !important;
  }

  /* إخفاء Search bar على الجوال الصغير — اختياري */
  .topnav .container > div[style*="search"] {
    display: none !important;
  }

  /* Nav actions compact */
  .topnav .container > div:last-child {
    gap: 6px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   3. TEACHER DASHBOARD — MOBILE CARD COMPACTING
   ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* Welcome bar */
  .td-wb {
    padding: 18px 16px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }

  /* Dashboard cards grid */
  .td-grid,
  [class*="td-grid"] {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* بطاقات teacher على الجوال */
  .td-card,
  [class*="td-section"] {
    border-radius: 16px !important;
    padding: 16px !important;
    margin-bottom: 10px !important;
  }

  /* عنوان البطاقة */
  .td-card h2,
  .td-card h3,
  [class*="td-section"] h2 {
    font-size: 17px !important;
    margin-bottom: 8px !important;
  }

  /* links داخل البطاقات */
  .td-card a,
  [class*="td-link"] {
    padding: 11px 14px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  /* Student strip compact */
  .td-student-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   4. AI ASSISTANT BUTTON — REDESIGN (لكل الصفحات)
   ────────────────────────────────────────────────────────────── */

/* Override القديم */
.tmk-ai-assistant {
  position: fixed !important;
  /* يمين بدل يسار — أفضل على RTL */
  right: 18px !important;
  left: auto !important;
  inset-inline-end: 18px !important;
  inset-inline-start: unset !important;
  bottom: 22px !important;
  z-index: 2147483000 !important;
  direction: rtl !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
}

.tmk-ai-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px 10px 14px !important;
  background: var(--tm-primary, #0F7B5F) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(15,123,95,.35) !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
  white-space: nowrap !important;
  letter-spacing: -.1px !important;
}

.tmk-ai-toggle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(15,123,95,.45) !important;
}

.tmk-ai-toggle:active {
  transform: translateY(0) !important;
}

.tmk-ai-icon {
  display: inline-flex !important;
  width: 22px !important;
  height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.2) !important;
  font-size: 13px !important;
  flex-shrink: 0 !important;
}

/* Panel: يفتح من اليمين */
.tmk-ai-panel {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  inset-inline-end: 0 !important;
  inset-inline-start: unset !important;
  bottom: 52px !important;
  width: min(340px, calc(100vw - 36px)) !important;
  background: var(--tm-card, #fff) !important;
  border: 1px solid rgba(15,123,95,.15) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.12) !important;
  overflow: hidden !important;
}

/* Dark mode AI */
body.dark .tmk-ai-panel {
  background: #1e2420 !important;
  border-color: rgba(15,123,95,.25) !important;
}

body.dark .tmk-ai-toggle {
  box-shadow: 0 4px 20px rgba(15,123,95,.5) !important;
}

/* Mobile AI */
@media (max-width: 480px) {
  .tmk-ai-assistant {
    right: 12px !important;
    bottom: 16px !important;
  }

  .tmk-ai-toggle {
    padding: 9px 14px 9px 12px !important;
    font-size: 12.5px !important;
  }

  .tmk-ai-panel {
    width: calc(100vw - 24px) !important;
    right: 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   5. BACK BUTTONS — زر الرجوع للوحة
   ────────────────────────────────────────────────────────────── */

/* زر رجوع عام موحّد */
.back-to-dashboard {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 9px 16px !important;
  background: var(--tm-surface, #f4f4f2) !important;
  border: 1.5px solid var(--tm-border, rgba(0,0,0,.1)) !important;
  border-radius: 100px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--tm-text, #1a1a17) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  font-family: 'Tajawal', system-ui, sans-serif !important;
  transition: background .15s ease, border-color .15s ease !important;
}

.back-to-dashboard:hover {
  background: var(--tm-primary-soft, #e6f5ee) !important;
  border-color: var(--tm-primary, #0F7B5F) !important;
  color: var(--tm-primary, #0F7B5F) !important;
}

body.dark .back-to-dashboard {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #eee !important;
}

body.dark .back-to-dashboard:hover {
  background: rgba(15,123,95,.15) !important;
  border-color: rgba(15,123,95,.4) !important;
  color: #4ade80 !important;
}

/* Top bar للصفحات الداخلية */
.sub-page-topbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 20px !important;
  background: var(--tm-surface, rgba(244,244,242,.95)) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--tm-border, rgba(0,0,0,.07)) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 500 !important;
}

.sub-page-topbar .page-title {
  flex: 1 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--tm-heading, #1a1a17) !important;
}

/* ──────────────────────────────────────────────────────────────
   6. PARENT DASHBOARD — children strip + nav mobile
   ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* welcome bar */
  .pd-wb {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .pd-children-strip {
    gap: 8px !important;
    margin: 12px 0 !important;
  }

  .pd-child-btn {
    padding: 9px 12px !important;
    border-radius: 12px !important;
    min-width: 80px !important;
    font-size: 12px !important;
  }

  /* bento grid: single column */
  .pd-bento {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .pd-bc {
    padding: 14px !important;
    border-radius: 14px !important;
  }
}

/* ──────────────────────────────────────────────────────────────
   7. GENERAL MOBILE POLISH
   ────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  /* ضمان عدم overflow أفقي */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Modal width */
  .pd-modal,
  .td-modal {
    width: calc(100vw - 24px) !important;
    border-radius: 20px !important;
    max-height: 90svh !important;
    overflow-y: auto !important;
  }
}