/* ============================================================================
   Octavion — branded desktop theme (THEME-AWARE)
   Scoped to the .desktop-* landing classes only. Uses Frappe theme vars so it
   is LIGHT in Octavion Light and DARK in Octavion Dark — and NEVER leaks onto
   forms/lists/reports (no body:has() background overrides).
   Brand gold: #f4b91a
   ============================================================================ */

:root {
  --mp-gold: #f4b91a;
  --mp-gold-2: #ffd25e;
}

/* ---- canvas (adaptive; fills viewport, no white strip, no leak) --------- */
.desktop-wrapper,
.desktop-container {
  min-height: calc(100vh - 56px) !important;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(244, 185, 26, .06), transparent 60%),
    var(--bg-color) !important;
  color: var(--text-color);
}

/* ---- search ------------------------------------------------------------- */
.desktop-search-wrapper.search-bar,
.desktop-search-wrapper .form-control {
  background: var(--control-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  color: var(--text-color) !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.desktop-search-wrapper.search-bar:focus-within {
  border-color: rgba(244, 185, 26, .55) !important;
  box-shadow: 0 0 0 3px rgba(244, 185, 26, .14);
}

/* ---- the grid: wide horizontal cards ------------------------------------ */
.icons-container {
  width: 100% !important;
  max-width: 1080px !important;
  align-items: stretch !important;
}
.icons {
  display: grid !important;
  width: 100% !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 16px !important;
}

/* ---- a card: horizontal, icon left + label right ------------------------ */
a.desktop-icon {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  gap: 16px;
  height: auto !important;
  min-height: 88px;
  width: 100% !important;
  box-sizing: border-box !important;
  justify-self: stretch !important;
  padding: 20px 22px !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 16px !important;
  overflow: hidden;
  isolation: isolate;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1),
              border-color .22s ease, background .22s ease, box-shadow .22s ease;
  opacity: 0;
  animation: mp-rise .55s cubic-bezier(.22, 1, .36, 1) forwards;
}

/* soft gold light behind the content, fades in on hover */
a.desktop-icon::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(244, 185, 26, .20), transparent 70%);
  opacity: 0;
  transform: scale(.7);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}

a.desktop-icon:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 185, 26, .45) !important;
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .35),
              0 0 0 1px rgba(244, 185, 26, .14) inset;
}
a.desktop-icon:hover::before { opacity: 1; transform: scale(1); }

/* ---- icon (Vercel-style mono → colour on hover) ------------------------- */
.icon-container {
  display: grid !important;
  place-items: center !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  border: none !important;
  overflow: hidden;
  flex: 0 0 auto;
  filter: grayscale(1) brightness(1.04) contrast(1.02) !important;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), filter .25s ease;
}
.desktop-icon .icon-container img.app-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  display: block !important;
}
a.desktop-icon:hover .icon-container {
  transform: scale(1.08) rotate(-1.5deg);
  filter: grayscale(0) brightness(1) contrast(1) !important;
}

/* ---- label -------------------------------------------------------------- */
.icon-caption { margin: 0 !important; text-align: left !important; flex: 1 1 auto; }
.icon-title {
  color: var(--text-color) !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
}
.icon-subtitle { color: var(--text-muted) !important; }

/* a soft gold arrow that slides in on hover */
a.desktop-icon::after {
  content: "→";
  position: absolute;
  right: 18px;
  color: var(--mp-gold);
  font-size: 16px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .25s ease, transform .25s ease;
}
a.desktop-icon:hover::after { opacity: .9; transform: translateX(0); }

/* ---- staggered entrance ------------------------------------------------- */
@keyframes mp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
a.desktop-icon:nth-child(1)  { animation-delay: .03s; }
a.desktop-icon:nth-child(2)  { animation-delay: .06s; }
a.desktop-icon:nth-child(3)  { animation-delay: .09s; }
a.desktop-icon:nth-child(4)  { animation-delay: .12s; }
a.desktop-icon:nth-child(5)  { animation-delay: .15s; }
a.desktop-icon:nth-child(6)  { animation-delay: .18s; }
a.desktop-icon:nth-child(7)  { animation-delay: .21s; }
a.desktop-icon:nth-child(8)  { animation-delay: .24s; }
a.desktop-icon:nth-child(9)  { animation-delay: .27s; }
a.desktop-icon:nth-child(10) { animation-delay: .30s; }
a.desktop-icon:nth-child(11) { animation-delay: .33s; }
a.desktop-icon:nth-child(12) { animation-delay: .36s; }
a.desktop-icon:nth-child(n+13) { animation-delay: .39s; }

@media (prefers-reduced-motion: reduce) {
  a.desktop-icon { animation: none; opacity: 1; }
  a.desktop-icon, .icon-container, a.desktop-icon::before, a.desktop-icon::after { transition: none; }
}

/* ---- module drill-down modal: make it WIDE like the dashboard ----------- */
.modal-dialog:has(.desktop-modal-body) {
  max-width: 1120px !important;
  width: 94vw !important;
  margin: 32px auto !important;
}
.modal-content:has(.desktop-modal-body) { width: 100% !important; align-items: stretch !important; }
.desktop-modal-body { padding: 20px 24px !important; width: 100% !important; box-sizing: border-box !important; }
.desktop-modal-body .icons-container { width: 100% !important; max-width: 100% !important; }
.desktop-modal-body .icons {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  width: 100% !important;
}