/* ============================================================
   KEY App — Home tiles v39
   Visual refresh for the 4 main service tiles + 2 wide action buttons.
   Additive layer only; does not touch layout, JS, or business logic.
   ============================================================ */

/* ---------- Shared base for every tile on the home menu ---------- */
#userMenu .mag-tile {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 0 !important;
  color: #fff !important;
  font-family: inherit !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .18) !important;
  transition:
    transform .25s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .25s ease,
    filter .2s ease !important;
}

/* soft glow in the top-left corner */
#userMenu .mag-tile::before {
  content: "";
  position: absolute;
  top: -55px;
  inset-inline-start: -55px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .32) 0%,
    rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* subtle grid pattern overlay */
#userMenu .mag-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

#userMenu .mag-tile > * {
  position: relative;
  z-index: 1;
}

#userMenu .mag-tile:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 22px 44px rgba(15, 23, 42, .26) !important;
  filter: brightness(1.04) !important;
}

#userMenu .mag-tile:active {
  transform: translateY(-1px) scale(.985) !important;
}

/* tile typography — light on colored gradients */
#userMenu .mag-tile .mag-tile-title {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 15.5px !important;
  line-height: 1.45 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .20) !important;
  letter-spacing: -.01em !important;
}

#userMenu .mag-tile .mag-tile-sub {
  color: rgba(255, 255, 255, .9) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .15) !important;
  margin-top: 4px;
}

/* SVG inline icons (from key-icons.js) stay white and crisp */
#userMenu .mag-tile .k-icon-inline {
  color: #fff !important;
  opacity: .95;
}

/* ============================================================
   THE FOUR SERVICE TILES — distinct color + shape per tile
   ============================================================ */

/* 1) کارشناسان ماهر — emerald → cyan, notched top-left */
#userMenu .mag-grid > .mag-tile:nth-child(1) {
  background: linear-gradient(135deg, #059669 0%, #06b6d4 100%) !important;
  border-radius: 6px 26px 26px 26px !important;
  box-shadow: 0 14px 32px rgba(6, 182, 212, .28) !important;
}

/* 2) حل مسایل درسی — indigo → violet, squircle */
#userMenu .mag-grid > .mag-tile:nth-child(2) {
  background: linear-gradient(135deg, #4f46e5 0%, #a855f7 100%) !important;
  border-radius: 26px !important;
  box-shadow: 0 14px 32px rgba(139, 92, 246, .28) !important;
}

/* 3) حل مشکلات روزمره — amber → rose, notch bottom-right */
#userMenu .mag-grid > .mag-tile:nth-child(3) {
  background: linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%) !important;
  border-radius: 26px 26px 6px 26px !important;
  box-shadow: 0 14px 32px rgba(244, 63, 94, .26) !important;
}

/* 4) تغییر شهر — teal → lime, notch top-right */
#userMenu .mag-grid > .mag-tile:nth-child(4) {
  background: linear-gradient(135deg, #0d9488 0%, #65a30d 100%) !important;
  border-radius: 26px 6px 26px 26px !important;
  box-shadow: 0 14px 32px rgba(13, 148, 136, .26) !important;
}

/* ============================================================
   THE TWO WIDE ACTION BUTTONS (direct children of #userMenu)
   ============================================================ */

/* unknown expert — amber → gold, diagonal stripes overlay */
#userMenu > .mag-tile.mag-tile-gold {
  background: linear-gradient(135deg,
    #b45309 0%,
    #f59e0b 60%,
    #fbbf24 100%) !important;
  border-radius: 26px !important;
  min-height: 84px !important;
  padding: 18px 22px !important;
  box-shadow: 0 16px 34px rgba(217, 119, 6, .30) !important;
}

#userMenu > .mag-tile.mag-tile-gold::after {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, .10) 0,
    rgba(255, 255, 255, .10) 2px,
    transparent 2px,
    transparent 16px
  ) !important;
  background-size: auto !important;
  opacity: 1 !important;
}

/* profile — emerald → deep teal, big radius, stronger shadow */
#userMenu > .mag-tile.mag-tile-primary {
  background: linear-gradient(135deg,
    #047857 0%,
    #065f46 55%,
    #0f766e 100%) !important;
  border-radius: 30px !important;
  min-height: 90px !important;
  padding: 18px 22px !important;
  box-shadow: 0 16px 34px rgba(6, 95, 70, .30) !important;
}

#userMenu > .mag-tile.mag-tile-gold .mag-tile-title,
#userMenu > .mag-tile.mag-tile-primary .mag-tile-title {
  font-size: 15px !important;
}

/* ============================================================
   DARK THEME — slightly deeper gradients for contrast
   ============================================================ */
[data-theme="dark"] #userMenu .mag-grid > .mag-tile:nth-child(1) {
  background: linear-gradient(135deg, #047857 0%, #0891b2 100%) !important;
}
[data-theme="dark"] #userMenu .mag-grid > .mag-tile:nth-child(2) {
  background: linear-gradient(135deg, #4338ca 0%, #9333ea 100%) !important;
}
[data-theme="dark"] #userMenu .mag-grid > .mag-tile:nth-child(3) {
  background: linear-gradient(135deg, #d97706 0%, #e11d48 100%) !important;
}
[data-theme="dark"] #userMenu .mag-grid > .mag-tile:nth-child(4) {
  background: linear-gradient(135deg, #0f766e 0%, #4d7c0f 100%) !important;
}
[data-theme="dark"] #userMenu > .mag-tile.mag-tile-gold {
  background: linear-gradient(135deg, #92400e 0%, #d97706 60%, #f59e0b 100%) !important;
}
[data-theme="dark"] #userMenu > .mag-tile.mag-tile-primary {
  background: linear-gradient(135deg, #065f46 0%, #064e3b 55%, #0f766e 100%) !important;
}
[data-theme="dark"] #userMenu .mag-tile::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
}

/* ============================================================
   MOBILE — tighter spacing, same visual identity
   ============================================================ */
@media (max-width: 560px) {
  #userMenu .mag-tile {
    padding: 18px 14px !important;
    border-radius: 22px !important;
  }
  #userMenu .mag-grid > .mag-tile:nth-child(1) {
    border-radius: 6px 22px 22px 22px !important;
  }
  #userMenu .mag-grid > .mag-tile:nth-child(3) {
    border-radius: 22px 22px 6px 22px !important;
  }
  #userMenu .mag-grid > .mag-tile:nth-child(4) {
    border-radius: 22px 6px 22px 22px !important;
  }
  #userMenu > .mag-tile.mag-tile-gold,
  #userMenu > .mag-tile.mag-tile-primary {
    border-radius: 22px !important;
    padding: 16px 18px !important;
    min-height: 76px !important;
  }
  #userMenu .mag-tile .mag-tile-title {
    font-size: 14px !important;
  }
  #userMenu .mag-tile .mag-tile-sub {
    font-size: 11.5px !important;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  #userMenu .mag-tile {
    transition: none !important;
  }
  #userMenu .mag-tile:hover {
    transform: none !important;
  }
}

/* ============================================================
   v39.1 — Fix stuck-together words in home tiles
   Persian/Arabic scripts are connected — negative letter-spacing
   makes letters inside a word touch. Remove it, add a touch of
   word-spacing so words are clearly separated, and reduce the
   subtitle font-size for better hierarchy.
   ============================================================ */

#userMenu .mag-tile .mag-tile-title {
  letter-spacing: 0 !important;
  word-spacing: 0.06em !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important;
}

#userMenu .mag-tile .mag-tile-sub {
  letter-spacing: 0 !important;
  word-spacing: 0.06em !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  line-height: 1.7 !important;
  opacity: .92 !important;
  margin-top: 6px !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .18) !important;
}

/* The wide action buttons have slightly different sizing */
#userMenu > .mag-tile.mag-tile-gold .mag-tile-title,
#userMenu > .mag-tile.mag-tile-primary .mag-tile-title {
  font-size: 14.5px !important;
  letter-spacing: 0 !important;
  word-spacing: 0.06em !important;
}

#userMenu > .mag-tile.mag-tile-gold .mag-tile-sub,
#userMenu > .mag-tile.mag-tile-primary .mag-tile-sub {
  font-size: 10.5px !important;
  letter-spacing: 0 !important;
  word-spacing: 0.06em !important;
}

/* Mobile — same rules, smaller numbers */
@media (max-width: 560px) {
  #userMenu .mag-tile .mag-tile-title {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }
  #userMenu .mag-tile .mag-tile-sub {
    font-size: 10.5px !important;
    line-height: 1.65 !important;
  }
  #userMenu > .mag-tile.mag-tile-gold .mag-tile-title,
  #userMenu > .mag-tile.mag-tile-primary .mag-tile-title {
    font-size: 13px !important;
  }
  #userMenu > .mag-tile.mag-tile-gold .mag-tile-sub,
  #userMenu > .mag-tile.mag-tile-primary .mag-tile-sub {
    font-size: 10px !important;
  }
}