/* =========================================================
   Amal Nameh — Mobile CSS
   Overrides and touch-friendly styles for small screens
   (safe, minimal, non-conflicting)
   ========================================================= */

/* Apply only to mobile widths if not enqueued with media query */
@media (max-width: 767px) {

  /* Ensure main site container has comfortable padding */
  .site {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Header adjustments */
  .site-header {
    padding: 10px 6px;
  }
  .site-logo img {
    width: 40px;
    height: 40px;
  }
  .site-title {
    font-size: 18px;
  }

  /* Hide desktop nav on mobile (keeps markup accessible) */
  .main-navigation { display: none !important; }

  /* Home / Primary Actions: stack vertically, large touch targets */
  .home-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0;
  }
  .action-btn {
    width: 100% !important;
    padding: 18px 14px !important;
    font-size: 18px !important;
    border-radius: 12px !important;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .action-btn .icon { width:34px; height:34px; }

  /* Cards, lists full-width */
  .card, .deed-item, .marhoom-card {
    padding: 12px;
    margin: 10px 0;
    border-radius: 12px;
  }

  /* Deeds-list layout: single column */
  .deeds-list, .deeds-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .deed-item .meta { margin-left: 0; }

  /* Buttons and touch targets */
  .deed-btn, .done-btn, .mark-done, .mark-done-bad {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border-radius: 10px;
    display: inline-block;
    text-align: center;
  }
  .deed-btn.small {
    display: inline-block;
    width: auto;
    padding: 8px 10px;
  }

  /* Bottom navigation: fixed, safe-area aware */
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 8px;
    padding: calc(env(safe-area-inset-bottom, 0px)) 8px;
    background: #ffffff;
    border-top: 1px solid rgba(11,19,32,0.05);
    z-index: 9999;
  }
  /* Ensure content not hidden behind nav */
  body, .site {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px);
  }
  .bottom-nav a { display:flex; flex-direction:column; align-items:center; font-size:11px; color:var(--muted); }

  /* Dashboard grid — stack on mobile */
  #amal-dashboard {
    grid-template-columns: 1fr;
  }

  /* Analytics chart: set minimum heights for small screens */
  .chart-container, .analytics-card {
    min-height: 180px;
  }
  .analytics-body { grid-template-columns: 1fr; }

  /* Profile form: bigger inputs for touch */
  #amal-profile-form input[type="text"],
  #amal-profile-form input[type="email"],
  #amal-profile-form input[type="file"],
  #amal-profile-form textarea {
    font-size: 15px;
    padding: 10px;
  }

  /* Fateha ticker: reduce font-size and spacing */
  .fateha-ticker, .fateha-scroll-container {
    font-size: 13px;
    padding: 8px;
    border-radius: 10px;
  }
  .fateha-ticker .item, .fateha-inner .item {
    padding: 8px 14px;
  }

  /* Marhoomeen task list: readable spacing */
  .tasks-list .card {
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .task-actions { display:flex; gap:8px; justify-content:flex-end; }

  /* 404 / search suggestions: stack and enlarge CTA's */
  .error-suggestions .deed-btn,
  .search-block .deed-btn {
    width: 100%;
  }

  /* Make focus outlines more visible on mobile */
  :focus {
    outline: 3px solid rgba(15,138,63,0.14);
    outline-offset: 3px;
  }

  /* Reduce motion for users who prefer it */
  @media (prefers-reduced-motion: reduce) {
    .fateha-inner, .fateha-scroll-text, .deed-card { animation: none !important; transition: none !important; }
  }

  /* Small utility tweaks */
  .small { font-size: 13px; }
  h1, h2, h3 { line-height: 1.2; }
}