/* Minara admin panel — brand layer over Filament: sidebar, dashboard widgets and motion.
   Brand colors and fonts come from brand.css (generated from minara.config.json).
   Chart status colors are validated (dataviz checker): #0E8C6B #B9770F #C2302A #3B6CC4. */
:root {
  --mn-brown: var(--brand-primary);
  --mn-brown-dark: var(--brand-primary-dark);
  --mn-brown-deep: var(--brand-primary-deep);
  --mn-gold: var(--brand-gold);
  --mn-gold-soft: var(--brand-gold-soft);
  --mn-cream: var(--brand-background);
  --mn-border: var(--brand-border);
  --mn-ink: var(--brand-ink);
  --mn-muted: var(--brand-muted);
  --mn-track: var(--brand-track);
  --mn-card: #fff;
  --mn-ease: cubic-bezier(.16, 1, .3, 1);
  --mn-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07' stroke-width='1.2'%3E%3Crect x='22' y='22' width='28' height='28'/%3E%3Crect x='22' y='22' width='28' height='28' transform='rotate(45 36 36)'/%3E%3Ccircle cx='36' cy='36' r='6'/%3E%3C/g%3E%3C/svg%3E");
}
.dark {
  --mn-card: #1f1a14;
  --mn-border: #3a3025;
  --mn-ink: #f3ece0;
  --mn-muted: #b9a88f;
  --mn-track: #3a3025;
}

/* ================================================================ Sidebar */
.fi-sidebar.fi-main-sidebar {
  background: var(--mn-pattern), linear-gradient(175deg, var(--mn-brown-deep) 0%, var(--mn-brown-dark) 55%, #6f5232 100%);
  border-inline-end: 0;
  box-shadow: -10px 0 30px rgba(59, 42, 23, .12);
}
.fi-sidebar .fi-sidebar-header {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  box-shadow: none;
}
.fi-sidebar .fi-sidebar-header .fi-logo { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3)); }
.fi-sidebar .fi-sidebar-header .fi-icon-btn { color: rgba(255, 255, 255, .7); }
.fi-sidebar .fi-sidebar-nav { padding-inline: .75rem; gap: .25rem; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .2) transparent; }

/* Identity card (render hook) */
.mn-side-intro {
  display: flex; align-items: center; gap: .7rem;
  margin: .25rem 0 .75rem; padding: .75rem .8rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  animation: mn-rise .6s var(--mn-ease) both;
}
.mn-side-medal {
  flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 2px var(--mn-gold), 0 6px 16px rgba(0, 0, 0, .3);
}
.mn-side-medal img { width: 1.8rem; height: 1.8rem; object-fit: contain; }
.mn-side-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.mn-side-text b { color: #fff; font-size: .95rem; }
.mn-side-text small { color: rgba(255, 255, 255, .6); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fi-sidebar:not(.fi-sidebar-open) .mn-side-text { display: none; }
.fi-sidebar:not(.fi-sidebar-open) .mn-side-intro { justify-content: center; padding: .5rem; }

/* Groups */
.fi-sidebar .fi-sidebar-group { animation: mn-rise .55s var(--mn-ease) both; }
.fi-sidebar .fi-sidebar-group:nth-child(2) { animation-delay: .04s; }
.fi-sidebar .fi-sidebar-group:nth-child(3) { animation-delay: .08s; }
.fi-sidebar .fi-sidebar-group:nth-child(4) { animation-delay: .12s; }
.fi-sidebar .fi-sidebar-group:nth-child(5) { animation-delay: .16s; }
.fi-sidebar .fi-sidebar-group:nth-child(6) { animation-delay: .2s; }
.fi-sidebar .fi-sidebar-group:nth-child(7) { animation-delay: .24s; }
.fi-sidebar .fi-sidebar-group-btn { padding-block: .65rem .35rem; gap: .5rem; }
.fi-sidebar .fi-sidebar-group-label {
  color: var(--mn-gold-soft);
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  display: flex; align-items: center; gap: .5rem; flex: 1;
}
.fi-sidebar .fi-sidebar-group-label::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to left, rgba(188, 146, 80, .55), transparent);
}
.fi-sidebar .fi-sidebar-group-collapse-btn { color: rgba(255, 255, 255, .45); }
.fi-sidebar .fi-sidebar-group-collapse-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }

/* Items */
.fi-sidebar .fi-sidebar-item-btn {
  position: relative;
  border-radius: .85rem;
  padding: .55rem .7rem;
  transition: background-color .25s ease, transform .25s var(--mn-ease), color .25s ease;
}
.fi-sidebar .fi-sidebar-item-label { color: rgba(255, 255, 255, .82); font-weight: 600; }
.fi-sidebar .fi-sidebar-item-icon { color: rgba(255, 255, 255, .55); transition: transform .35s var(--mn-ease), color .25s ease; }
.fi-sidebar .fi-sidebar-item-btn:hover { background: rgba(255, 255, 255, .08); transform: translateX(-2px); }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon { color: var(--mn-gold-soft); transform: scale(1.08); }
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label { color: #fff; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
  content: ""; position: absolute; inset-block: .55rem; inset-inline-start: -.75rem;
  width: 4px; border-radius: 0 4px 4px 0;
  background: var(--mn-gold);
  box-shadow: 0 0 12px rgba(188, 146, 80, .8);
}
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-label { color: var(--mn-brown-deep); font-weight: 800; }
.fi-sidebar .fi-sidebar-item.fi-active .fi-sidebar-item-icon { color: var(--mn-brown); }
.fi-sidebar .fi-badge { background: var(--mn-gold); color: #fff; }

/* Footer (render hook) */
.mn-side-footer {
  margin: 0; padding: .8rem 1.5rem 1rem;
  background: linear-gradient(to top, rgba(43, 30, 16, .95), rgba(59, 42, 23, .7));
  border-top: 1px solid rgba(188, 146, 80, .25);
  display: flex; flex-direction: column; gap: .35rem;
}
.mn-side-footer a { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .75); font-size: .82rem; font-weight: 600; }
.mn-side-footer a:hover { color: #fff; }
.mn-side-footer-icon { width: 1.1rem; height: 1.1rem; color: var(--mn-gold-soft); }
.mn-side-footer small { color: rgba(255, 255, 255, .4); font-size: .7rem; }
.fi-sidebar:not(.fi-sidebar-open) .mn-side-footer { display: none; }

/* ================================================================ Top bar
   Same brown as the sidebar: the two form one frame around the content. */
.fi-topbar-ctn { position: sticky; top: 0; z-index: 30; }
.fi-topbar {
  background: var(--mn-pattern), linear-gradient(90deg, #6f5232 0%, var(--mn-brown-dark) 45%, var(--mn-brown-deep) 100%);
  border-bottom: 0;
  box-shadow: 0 10px 30px rgba(59, 42, 23, .18);
  position: relative;
}
.fi-topbar::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(188, 146, 80, .9), transparent);
}
.fi-topbar .fi-icon-btn { color: rgba(255, 255, 255, .8); }
.fi-topbar .fi-icon-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.fi-topbar .fi-logo {
  background: #fff; border-radius: 999px; padding: .2rem;
  box-shadow: 0 0 0 2px var(--mn-gold), 0 6px 14px rgba(0, 0, 0, .3);
}
.fi-topbar-end { gap: .75rem; }

/* Date pill */
.mn-top-date {
  display: none; align-items: center; gap: .45rem;
  padding: .4rem .85rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .88); font-size: .82rem; font-weight: 600; white-space: nowrap;
}
@media (min-width: 64rem) { .mn-top-date { display: inline-flex; } }
.mn-top-date-icon { width: 1rem; height: 1rem; color: var(--mn-gold-soft); }
.mn-live-dot {
  width: .5rem; height: .5rem; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: mn-live 2s ease-out infinite;
}
@keyframes mn-live { 70%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } }

/* Search: translucent pill on the brown */
.fi-topbar .fi-global-search-field .fi-input-wrp {
  min-width: 18rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: none; transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.fi-topbar .fi-global-search-field .fi-input-wrp:focus-within {
  background: rgba(255, 255, 255, .16); border-color: var(--mn-gold);
  box-shadow: 0 0 0 4px rgba(188, 146, 80, .25);
}
.fi-topbar .fi-global-search-field .fi-input { color: #fff; }
.fi-topbar .fi-global-search-field .fi-input::placeholder { color: rgba(255, 255, 255, .6); }
.fi-topbar .fi-global-search-field .fi-input-wrp-prefix .fi-icon { color: var(--mn-gold-soft); }

/* Notifications bell */
.fi-topbar .fi-topbar-database-notifications-btn {
  width: 2.5rem; height: 2.5rem; border-radius: .85rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
}
.fi-topbar .fi-topbar-database-notifications-btn .fi-badge { background: var(--mn-gold); color: #fff; }

/* User */
.mn-top-user { display: none; flex-direction: column; align-items: flex-end; line-height: 1.25; }
@media (min-width: 48rem) { .mn-top-user { display: flex; } }
.mn-top-user b { color: #fff; font-size: .85rem; }
.mn-top-user small { color: var(--mn-gold-soft); font-size: .72rem; font-weight: 700; }
.fi-topbar .fi-user-avatar { box-shadow: 0 0 0 2px var(--mn-gold), 0 4px 12px rgba(0, 0, 0, .3); }

/* ================================================================ Dashboard */
.fi-page-dashboard .fi-header-heading { color: var(--mn-brown-deep); }
.dark .fi-page-dashboard .fi-header-heading { color: #fff; }

.mn-card {
  background: var(--mn-card);
  border: 1px solid var(--mn-border);
  border-radius: 1.4rem;
  padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 12px 30px rgba(94, 68, 38, .06);
  animation: mn-rise .7s var(--mn-ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
.mn-card > header { display: flex; align-items: center; gap: .5rem; margin-bottom: .9rem; }
.mn-card > header h3 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--mn-ink); }
.mn-card-icon { width: 1.25rem; height: 1.25rem; color: var(--mn-brown); }

/* Hero */
.mn-hero {
  position: relative; overflow: hidden;
  border-radius: 1.7rem;
  padding: 1.6rem 1.8rem;
  color: #fff;
  background: linear-gradient(120deg, var(--mn-brown-deep), var(--mn-brown-dark) 45%, var(--mn-brown) 80%, #a9875a);
  box-shadow: 0 22px 50px rgba(59, 42, 23, .28);
  animation: mn-rise .7s var(--mn-ease) both;
}
.mn-hero-pattern { position: absolute; inset: 0; background: var(--mn-pattern); opacity: 1; pointer-events: none; }
.mn-hero::after {
  content: ""; position: absolute; inset: -40% -10%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 255, 255, .09) 80%, transparent 90%);
  animation: mn-spin 16s linear infinite;
}
.mn-hero-mark {
  position: absolute; inset-inline-end: -1.5rem; top: 50%; translate: 0 -50%;
  width: 13rem; height: 13rem; object-fit: contain; opacity: .14;
  animation: mn-float 7s ease-in-out infinite;
}
.mn-hero-body { position: relative; z-index: 1; }
.mn-hero-date { margin: 0; color: rgba(255, 255, 255, .7); font-size: .85rem; }
.mn-hero-title { margin: .2rem 0 0; font-size: 1.55rem; font-weight: 800; }
.mn-hero-center { margin: .1rem 0 0; color: var(--mn-gold-soft); font-weight: 700; font-size: .9rem; }
.mn-hero-figure { display: flex; align-items: baseline; gap: .6rem; margin: 1rem 0 .9rem; }
.mn-hero-figure strong { font-size: 3.2rem; line-height: 1; font-weight: 900; font-variant-numeric: tabular-nums; }
.mn-hero-figure span { color: rgba(255, 255, 255, .75); }
.mn-hero-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.mn-hero-pills li {
  display: flex; align-items: center; gap: .45rem;
  padding: .4rem .8rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18);
  font-size: .85rem; font-weight: 600;
  animation: mn-rise .6s var(--mn-ease) both; animation-delay: calc(.25s + var(--i) * 90ms);
}
.mn-hero-pills b { font-weight: 900; }
.mn-pill-icon { width: 1rem; height: 1rem; color: var(--mn-gold-soft); }

/* Indicators */
.mn-indicators { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mn-indicator { display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform .35s var(--mn-ease), box-shadow .35s ease; }
.mn-indicator > header { align-self: stretch; }
.mn-indicator:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(94, 68, 38, .12); }
.mn-caption { margin: .6rem 0 0; color: var(--mn-muted); font-size: .82rem; }

/* Ring meter */
.mn-ring { position: relative; width: var(--size); height: var(--size); }
.mn-ring svg { display: block; overflow: visible; }
.mn-track { stroke: var(--mn-track); }
.mn-arc { animation: mn-draw 1.2s var(--mn-ease) both; }
.mn-glow { animation: mn-draw 1.2s var(--mn-ease) both, mn-breathe 3.4s ease-in-out 1.2s infinite; }
.mn-sheen { opacity: .9; mix-blend-mode: soft-light; }
.mn-ring-center, .mn-donut-center {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.mn-ring-value { font-size: 1.45rem; font-weight: 900; color: var(--mn-ink); font-variant-numeric: tabular-nums; }
.mn-ring-sub { font-size: .72rem; color: var(--mn-muted); }

/* Donut */
.mn-charts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.mn-donut { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.mn-donut-chart { position: relative; flex: none; }
.mn-donut-chart svg { display: block; overflow: visible; }
.mn-seg { animation: mn-seg 1s var(--mn-ease) both; transition: opacity .25s ease, stroke-width .25s var(--mn-ease); }
.mn-seg.is-dim { opacity: .28; }
.mn-seg.is-focus { stroke-width: 30; }
.mn-legend { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 210px; display: flex; flex-direction: column; gap: .25rem; }
.mn-legend li {
  display: grid; grid-template-columns: auto auto 1fr auto 3rem; align-items: center; gap: .55rem;
  padding: .45rem .6rem; border-radius: .75rem; cursor: pointer;
  transition: background-color .2s ease, opacity .2s ease;
}
.mn-legend li:hover, .mn-legend li.is-focus { background: var(--mn-cream); }
.dark .mn-legend li:hover, .dark .mn-legend li.is-focus { background: #2a231b; }
.mn-legend li.is-dim { opacity: .45; }
.mn-swatch { width: .8rem; height: .8rem; border-radius: .25rem; }
.mn-legend-icon { width: 1rem; height: 1rem; color: var(--mn-muted); }
.mn-legend-label { color: var(--mn-ink); font-size: .9rem; }
.mn-legend-value { color: var(--mn-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.mn-legend-share { color: var(--mn-muted); font-size: .8rem; text-align: end; }
.mn-empty { margin: 0; color: var(--mn-muted); font-size: .9rem; }

/* Follow-up */
.mn-follow { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.mn-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.mn-alerts li {
  display: flex; align-items: center; gap: .8rem; padding: .75rem .9rem;
  border-radius: 1rem; border: 1px solid var(--mn-border);
  border-inline-start: 4px solid #0E8C6B;
  animation: mn-rise .6s var(--mn-ease) both; animation-delay: calc(.1s + var(--i) * 80ms);
}
.mn-alerts li.is-active { border-inline-start-color: #C2302A; }
.mn-alert-icon {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  color: #0E8C6B; background: rgba(14, 140, 107, .1);
}
.mn-alert-icon svg { width: 1.3rem; height: 1.3rem; }
.is-active .mn-alert-icon { color: #C2302A; background: rgba(194, 48, 42, .1); animation: mn-pulse 1.8s ease-out infinite; }
.mn-alert-text { flex: 1; display: flex; flex-direction: column; }
.mn-alert-text b { color: var(--mn-ink); font-size: .9rem; }
.mn-alert-text small { color: var(--mn-muted); }
.mn-alert-count { background: #C2302A; color: #fff; font-weight: 900; border-radius: 999px; padding: .1rem .7rem; }
.mn-quick { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mn-quick a {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem;
  border-radius: 1rem; border: 1px solid var(--mn-border);
  color: var(--mn-ink); font-weight: 700; font-size: .88rem;
  transition: transform .3s var(--mn-ease), box-shadow .3s ease, border-color .3s ease;
  animation: mn-rise .6s var(--mn-ease) both; animation-delay: calc(.15s + var(--i) * 60ms);
}
.mn-quick a:hover { transform: translateY(-3px); border-color: var(--mn-gold); box-shadow: 0 10px 24px rgba(94, 68, 38, .12); }
.mn-quick-icon {
  flex: none; width: 2.2rem; height: 2.2rem; border-radius: .7rem;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--mn-brown), var(--mn-brown-dark));
}
.mn-quick-icon svg { width: 1.15rem; height: 1.15rem; }

/* Stats widgets (e.g. assistant overview) in the same visual language */
.fi-wi-stats-overview-stat {
  border-radius: 1.4rem !important;
  border: 1px solid var(--mn-border);
  box-shadow: 0 12px 30px rgba(94, 68, 38, .06) !important;
  transition: transform .35s var(--mn-ease), box-shadow .35s ease;
  animation: mn-rise .7s var(--mn-ease) both;
}
.fi-wi-stats-overview-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(94, 68, 38, .12) !important; }
.fi-wi-stats-overview-stat-value { color: var(--mn-brown-dark); font-weight: 900; }
.dark .fi-wi-stats-overview-stat-value { color: #fff; }
.fi-wi-stats-overview-header-heading { color: var(--mn-brown-deep); font-weight: 800; }


/* Hijri date */
.mn-top-sep { width: 1px; height: 1rem; background: rgba(255, 255, 255, .25); }
.mn-top-hijri { color: var(--mn-gold-soft); font-weight: 700; }
.mn-hero-hijri {
  display: inline-block; margin-inline-start: .6rem; padding: .05rem .6rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: var(--mn-gold-soft); font-weight: 700;
}

/* ================================================================ Footer (every page) */
.mn-footer {
  position: relative; margin-top: 2rem;
  background: var(--mn-pattern), linear-gradient(90deg, var(--mn-brown-deep), var(--mn-brown-dark) 55%, #6f5232);
  color: rgba(255, 255, 255, .78);
}
.mn-footer-line { height: 2px; background: linear-gradient(90deg, transparent, var(--mn-gold), transparent); }
.mn-footer-inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 1.5rem;
  padding: 1.1rem 1.5rem 1.2rem;
}
.mn-footer-brand { display: flex; align-items: center; gap: .7rem; }
.mn-footer-brand b { display: block; color: #fff; font-size: 1rem; }
.mn-footer-brand small { color: rgba(255, 255, 255, .6); font-size: .75rem; }
.mn-footer-medal {
  width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: #fff;
  box-shadow: 0 0 0 2px var(--mn-gold), 0 6px 14px rgba(0, 0, 0, .3);
}
.mn-footer-medal img { width: 1.7rem; height: 1.7rem; object-fit: contain; }
.mn-footer-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.mn-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  font-size: .78rem; font-weight: 600;
}
.mn-chip b { color: #fff; }
.mn-chip-icon { width: .95rem; height: .95rem; color: var(--mn-gold-soft); }
.mn-footer-rights { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; font-size: .78rem; text-align: end; }
.mn-footer-dev { display: inline-flex; align-items: center; gap: .35rem; color: rgba(255, 255, 255, .6); }
.mn-footer-dev b, .mn-footer-dev a { color: var(--mn-gold-soft); font-weight: 800; }
.mn-footer-dev a:hover { color: #fff; }

/* ================================================================ Phones & tablets */
@media (max-width: 1023.98px) {
  .fi-topbar .fi-global-search-field .fi-input-wrp { min-width: 0; width: 11rem; }
  .mn-footer-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .mn-footer-rights { align-items: center; text-align: center; }
  .mn-hero-mark { width: 9rem; height: 9rem; opacity: .1; }
}
@media (max-width: 639.98px) {
  .fi-topbar .fi-global-search-ctn { display: none; }
  .fi-topbar-end { gap: .5rem; }
  .mn-hero { padding: 1.2rem 1.1rem; border-radius: 1.3rem; }
  .mn-hero-title { font-size: 1.2rem; }
  .mn-hero-figure strong { font-size: 2.5rem; }
  .mn-hero-hijri { display: block; margin: .3rem 0 0; width: fit-content; }
  .mn-hero-pills li { font-size: .78rem; padding: .35rem .65rem; }
  .mn-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .mn-indicator { padding: .85rem .6rem; }
  .mn-indicator .mn-ring { --size: 96px !important; }
  .mn-indicator .mn-ring svg { width: 96px; height: 96px; }
  .mn-indicator .mn-ring-value { font-size: 1.1rem; }
  .mn-card > header h3 { font-size: .9rem; }
  .mn-caption { font-size: .72rem; }
  .mn-charts, .mn-follow { grid-template-columns: minmax(0, 1fr); }
  .mn-donut { flex-direction: column; align-items: stretch; }
  .mn-donut-chart { align-self: center; }
  .mn-legend { min-width: 0; }
  .mn-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .mn-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-charts, .mn-follow { grid-template-columns: minmax(0, 1fr); }
}
/* Wide screens: four indicators always on one row. */
@media (min-width: 1280px) {
  .mn-indicators { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================================================================ Modals (every popup in the panel)
   Brand frame: cream header with a gold line, roomy body, footer actions pinned to the end. Filament
   animates the window itself, so only colours, spacing and shape are changed here. */
.fi-modal-close-overlay { background: rgba(43, 30, 16, .55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.fi-modal-window {
  border-radius: 1.4rem; overflow: hidden;
  border: 1px solid var(--mn-border);
  box-shadow: 0 30px 70px -20px rgba(43, 30, 16, .45), 0 0 0 1px rgba(188, 146, 80, .08);
}
.fi-modal:not(.fi-modal-slide-over) .fi-modal-window { max-height: calc(100dvh - 3rem); }
.fi-modal-header {
  position: relative; padding: 1.15rem 1.5rem 1rem;
  background: linear-gradient(180deg, var(--mn-cream), #fff);
  border-bottom: 1px solid var(--mn-border);
}
.fi-modal-header::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--mn-gold), var(--mn-brown), var(--mn-gold));
}
.fi-modal-heading { color: var(--mn-brown-deep); font-weight: 800; font-size: 1.1rem; }
.fi-modal-description { color: var(--mn-muted); }
.fi-modal-icon-bg { box-shadow: 0 0 0 6px rgba(188, 146, 80, .12); }
.fi-modal-close-btn { border-radius: .7rem; transition: background-color .2s ease, transform .2s var(--mn-ease); }
.fi-modal-close-btn:hover { background: rgba(140, 106, 67, .1); transform: rotate(90deg); }
.fi-modal-content { padding: 1.35rem 1.5rem; row-gap: 1.1rem; }
.fi-modal-footer {
  padding: .9rem 1.5rem; background: var(--mn-cream);
  border-top: 1px solid var(--mn-border);
}
.fi-modal-footer-actions { justify-content: flex-start; gap: .6rem; }
.fi-modal-footer-actions .fi-btn { min-width: 6.5rem; justify-content: center; border-radius: .8rem; }
/* Confirmations (delete, archive…) stay compact and centred. */
.fi-modal-window-has-icon .fi-modal-header { background: #fff; border-bottom: 0; padding-bottom: .4rem; }
.fi-modal-window-has-icon .fi-modal-footer { background: #fff; border-top: 0; }
.fi-modal-window-has-icon .fi-modal-footer-actions { justify-content: center; }
/* Fields inside modals: brand focus ring. */
.fi-modal .fi-input-wrp { border-radius: .75rem; transition: box-shadow .2s ease; }
.fi-modal .fi-input-wrp:focus-within { box-shadow: 0 0 0 3px rgba(188, 146, 80, .28); }
.fi-modal .fi-fo-field-label-content { color: var(--mn-brown-dark); font-weight: 700; }
.dark .fi-modal-header { background: linear-gradient(180deg, #2a221a, var(--mn-card)); }
.dark .fi-modal-heading { color: var(--mn-gold-soft); }
.dark .fi-modal-footer, .dark .fi-modal-window-has-icon .fi-modal-header, .dark .fi-modal-window-has-icon .fi-modal-footer { background: var(--mn-card); }
.dark .fi-modal .fi-fo-field-label-content { color: var(--mn-gold-soft); }
@media (max-width: 639.98px) {
  .fi-modal:not(.fi-modal-slide-over) .fi-modal-window { border-radius: 1.2rem; max-height: calc(100dvh - 1.5rem); }
  .fi-modal-header, .fi-modal-content, .fi-modal-footer { padding-inline: 1rem; }
  .fi-modal-footer-actions { flex-direction: column-reverse; align-items: stretch; }
  .fi-modal-footer-actions .fi-btn { width: 100%; }
}

/* ================================================================ Sign-in page
   Two halves: the brand panel (pattern, logo, ayah, features) on the right and the form on the
   left. Phones get a short brand band above the form. */
.fi-simple-layout:has(.mn-login-aside) {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch; min-height: 100dvh;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(188, 146, 80, .13), transparent 60%),
    radial-gradient(700px 500px at 50% 100%, rgba(140, 106, 67, .10), transparent 60%),
    var(--mn-cream);
}
.fi-simple-layout:has(.mn-login-aside) .fi-simple-main-ctn { order: 2; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.fi-simple-layout:has(.mn-login-aside) .fi-simple-main {
  width: 100%; max-width: 27rem; margin: 0; padding: 2.4rem 2.2rem 1.8rem;
  background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px);
  border: 1px solid var(--mn-border); border-radius: 1.75rem; box-shadow: 0 30px 60px -28px rgba(59, 42, 23, .35);
  position: relative; animation: mn-rise .8s var(--mn-ease) both;
}
.fi-simple-layout:has(.mn-login-aside) .fi-simple-main::before {
  content: ""; position: absolute; inset: 0 2rem auto; height: 3px; border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, transparent, var(--mn-gold), var(--mn-brown), var(--mn-gold), transparent);
}
.fi-simple-layout:has(.mn-login-aside) .fi-simple-header { align-items: flex-start; text-align: start; }
.fi-simple-layout:has(.mn-login-aside) .fi-simple-header .fi-logo { display: none; }
.fi-simple-layout:has(.mn-login-aside) .fi-simple-header-heading { font-size: 1.65rem; font-weight: 800; color: var(--mn-brown-deep); }
.fi-simple-layout:has(.mn-login-aside) .fi-simple-header-subheading { color: var(--mn-muted); margin-top: .35rem; }
.fi-simple-layout:has(.mn-login-aside) .fi-fo-field-label-content { color: var(--mn-brown-dark); font-weight: 700; }
.fi-simple-layout:has(.mn-login-aside) .fi-input-wrp { border-radius: .95rem; min-height: 3.1rem; background: #fff; transition: box-shadow .25s ease, transform .25s var(--mn-ease); }
.fi-simple-layout:has(.mn-login-aside) .fi-input-wrp:focus-within { box-shadow: 0 0 0 4px rgba(188, 146, 80, .22); transform: translateY(-1px); }
.fi-simple-layout:has(.mn-login-aside) .fi-input-wrp-prefix .fi-icon { color: var(--mn-gold); }
.fi-simple-layout:has(.mn-login-aside) .fi-input { font-size: 1.02rem; letter-spacing: .04em; }
.fi-simple-layout:has(.mn-login-aside) form button[type=submit].fi-btn {
  min-height: 3.2rem; border-radius: 1rem; font-size: 1.02rem; font-weight: 800; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--mn-brown) 0%, var(--mn-brown-dark) 100%) !important; color: #fff !important;
  box-shadow: 0 14px 26px -12px rgba(94, 68, 38, .7); transition: transform .25s var(--mn-ease), box-shadow .25s ease;
}
.fi-simple-layout:has(.mn-login-aside) form button[type=submit].fi-btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .3) 50%, transparent 70%);
  transform: translateX(120%); transition: transform .9s var(--mn-ease);
}
.fi-simple-layout:has(.mn-login-aside) form button[type=submit].fi-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 30px -12px rgba(94, 68, 38, .8); }
.fi-simple-layout:has(.mn-login-aside) form button[type=submit].fi-btn:hover::after { transform: translateX(-120%); }
.mn-login-help { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; font-size: .85rem; }
.mn-login-help a { display: inline-flex; align-items: center; gap: .35rem; color: var(--mn-brown); font-weight: 700; }
.mn-login-help a:hover { color: var(--mn-gold); }
.mn-login-forgot { display: inline-flex; align-items: center; gap: .35rem; color: var(--mn-muted); cursor: help; }
/* Temporary password reminder (every panel page until it is changed). */
.mn-temp-pass {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; padding: .75rem 1rem;
  border-radius: 1rem; border: 1px solid rgba(185, 119, 15, .35); background: linear-gradient(90deg, rgba(185, 119, 15, .12), rgba(185, 119, 15, .04));
  color: #7a4f0a; font-weight: 700; font-size: .9rem;
}
.mn-temp-pass .mn-chip-icon { width: 1.2rem; height: 1.2rem; color: #B9770F; }
.mn-temp-pass a { margin-inline-start: auto; padding: .3rem .8rem; border-radius: 99px; background: #B9770F; color: #fff; font-size: .82rem; }
.dark .mn-temp-pass { color: #f0c987; }
.mn-login-secure { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--mn-border); color: var(--mn-muted); font-size: .76rem; text-align: center; }

.mn-login-aside {
  order: 1; position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.6rem 3rem;
  color: #fff; margin: .9rem; border-radius: 2rem;
  background: var(--mn-pattern), linear-gradient(160deg, var(--mn-brown-deep) 0%, var(--mn-brown-dark) 50%, #7a5a37 100%);
  box-shadow: 0 30px 60px -30px rgba(59, 42, 23, .6);
}
.mn-login-star { position: absolute; width: 34rem; height: 34rem; inset-inline-end: -11rem; top: -9rem; color: var(--mn-gold); opacity: .22; z-index: -1; animation: mn-spin 120s linear infinite; }
.mn-login-orb { position: absolute; border-radius: 50%; filter: blur(50px); z-index: -1; }
.mn-login-orb.one { width: 18rem; height: 18rem; background: rgba(188, 146, 80, .35); bottom: -5rem; inset-inline-start: -4rem; animation: mn-float 14s ease-in-out infinite; }
.mn-login-orb.two { width: 12rem; height: 12rem; background: rgba(230, 203, 143, .18); top: 40%; inset-inline-end: 10%; animation: mn-float 18s ease-in-out -5s infinite reverse; }
.mn-login-brand { display: flex; align-items: center; gap: .9rem; animation: mn-rise .7s var(--mn-ease) both; }
.mn-login-medal { display: grid; place-items: center; flex: none; width: 4.2rem; height: 4.2rem; border-radius: 1.3rem; background: #fff; box-shadow: 0 0 0 5px rgba(230, 203, 143, .25), 0 12px 24px rgba(0, 0, 0, .25); }
.mn-login-medal img { width: 3.2rem; height: 3.2rem; object-fit: contain; }
.mn-login-brand b { display: block; font-size: 1.5rem; font-weight: 800; }
.mn-login-brand small { color: var(--mn-gold-soft); font-size: .88rem; }
.mn-login-copy { animation: mn-rise .8s var(--mn-ease) .12s both; }
.mn-login-eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .85rem; border-radius: 99px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(230, 203, 143, .3); font-size: .8rem; color: var(--mn-gold-soft); }
.mn-login-copy h2 { margin: 1rem 0 .6rem; font-size: clamp(1.9rem, 2.6vw, 2.7rem); line-height: 1.35; font-weight: 800; }
.mn-login-copy h2 em {
  font-style: normal; background: linear-gradient(90deg, var(--mn-gold-soft), var(--mn-gold), var(--mn-gold-soft));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: mn-sheen-text 6s linear infinite;
}
.mn-login-ayah { display: flex; align-items: center; gap: .8rem; font-size: 1.25rem; color: var(--mn-gold-soft); margin-bottom: 1.6rem; }
.mn-login-ayah::before, .mn-login-ayah::after { content: ""; width: 2.2rem; height: 1px; background: linear-gradient(90deg, transparent, var(--mn-gold)); }
.mn-login-ayah::after { transform: scaleX(-1); }
.mn-login-features { display: grid; gap: .75rem; max-width: 30rem; }
.mn-login-features li {
  display: flex; align-items: center; gap: .9rem; padding: .8rem 1rem; border-radius: 1.1rem;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(4px);
  animation: mn-rise .7s var(--mn-ease) both; animation-delay: calc(var(--i) * 110ms + 300ms);
  transition: transform .3s var(--mn-ease), background-color .3s ease;
}
.mn-login-features li:hover { transform: translateX(-6px); background: rgba(255, 255, 255, .12); }
.mn-login-features li > span { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: .85rem; background: linear-gradient(135deg, var(--mn-gold), #a07a3c); }
.mn-login-features li > span .fi-icon { width: 1.3rem; height: 1.3rem; color: #fff; }
.mn-login-features b { display: block; font-size: .95rem; }
.mn-login-features small { color: rgba(255, 255, 255, .68); font-size: .8rem; }
.mn-login-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; font-size: .78rem; animation: mn-rise .8s var(--mn-ease) .5s both; }
.mn-login-rights { color: rgba(255, 255, 255, .6); }
.mn-login-rights b { color: var(--mn-gold-soft); }
@keyframes mn-sheen-text { to { background-position: -200% center; } }
.dark .fi-simple-layout:has(.mn-login-aside) { background: #17120d; }
.dark .fi-simple-layout:has(.mn-login-aside) .fi-simple-main { background: rgba(31, 26, 20, .9); }
.dark .fi-simple-layout:has(.mn-login-aside) .fi-simple-header-heading { color: var(--mn-gold-soft); }
.dark .fi-simple-layout:has(.mn-login-aside) .fi-input-wrp { background: transparent; }

@media (max-width: 1023.98px) {
  .fi-simple-layout:has(.mn-login-aside) { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .mn-login-aside { order: 0; margin: .75rem .75rem 0; padding: 1.4rem 1.4rem 1.5rem; border-radius: 1.5rem; gap: 1rem; }
  .mn-login-copy h2 { font-size: 1.3rem; margin: .7rem 0 .2rem; }
  .mn-login-copy h2 br { display: none; }
  .mn-login-ayah { margin: 0; font-size: 1.05rem; }
  .fi-simple-layout:has(.mn-login-aside) .mn-login-aside { align-self: start; }
  .mn-login-features, .mn-login-meta { display: none; }
  .mn-login-star { width: 20rem; height: 20rem; top: -6rem; inset-inline-end: -7rem; }
  .mn-login-medal { width: 3.4rem; height: 3.4rem; border-radius: 1rem; }
  .mn-login-medal img { width: 2.6rem; height: 2.6rem; }
  .fi-simple-layout:has(.mn-login-aside) .fi-simple-main-ctn { padding: 0 .75rem 1.5rem; margin-top: -.6rem; align-items: flex-start; }
  .fi-simple-layout:has(.mn-login-aside) .fi-simple-main { max-width: 32rem; padding: 1.8rem 1.3rem 1.4rem; border-radius: 1.5rem; }
}

/* ================================================================ Motion */
@keyframes mn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes mn-draw { from { stroke-dashoffset: var(--c); } }
@keyframes mn-seg { from { stroke-dasharray: 0 var(--c); } }
@keyframes mn-breathe { 0%, 100% { filter: drop-shadow(0 0 2px var(--glow)); } 50% { filter: drop-shadow(0 0 9px var(--glow)); } }
@keyframes mn-spin { to { transform: rotate(1turn); } }
@keyframes mn-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes mn-pulse { 0% { box-shadow: 0 0 0 0 rgba(194, 48, 42, .45); } 80%, 100% { box-shadow: 0 0 0 12px rgba(194, 48, 42, 0); } }

@media (prefers-reduced-motion: reduce) {
  .fi-sidebar *, .mn-card, .mn-hero, .mn-hero *, .mn-hero::after, .mn-arc, .mn-glow, .mn-seg, .mn-alerts li, .mn-quick a, .mn-side-intro, .fi-modal-close-btn,
  .mn-login-aside, .mn-login-aside *, .fi-simple-main, .fi-simple-main::before {
    animation: none !important; transition: none !important;
  }
  .mn-sheen { display: none; }
  .mn-live-dot { animation: none !important; }
}

/* ───────────────────────── Tables: aligned, clear, consistent ─────────────────────────
   1. Numbers are shown left-to-right (dir="ltr") so «-380.000» reads right; that flipped the
      meaning of «end» inside them. Pin them to the same side as their RTL header.
   2. A calm header row, steady spacing, tabular digits, gentle row hover.
   3. Row actions as real (small, bordered) buttons instead of faint links / a lone «⋮». */
[dir="rtl"] .fi-ta-text[dir="ltr"].fi-align-end,
[dir="rtl"] .fi-ta-cell.fi-align-end .fi-ta-col,
[dir="rtl"] .fi-ta-cell.fi-align-end .fi-ta-text,
[dir="rtl"] .fi-ta-header-cell.fi-align-end { text-align: left; justify-content: flex-end; }
[dir="rtl"] .fi-ta-cell.fi-align-end .fi-ta-col { display: flex; flex-direction: column; align-items: flex-end; }
[dir="rtl"] .fi-ta-cell:not(.fi-align-end):not(.fi-align-center) .fi-ta-text[dir="ltr"] { text-align: right; }
.fi-ta-text[dir="ltr"] { unicode-bidi: isolate; }
.fi-ta-cell.fi-align-center .fi-ta-col { display: flex; flex-direction: column; align-items: center; }

.fi-ta-table { font-variant-numeric: tabular-nums; }
.fi-ta-table thead tr { background: color-mix(in srgb, var(--mn-gold) 8%, var(--mn-card)); }
.fi-ta-table thead th { border-bottom: 2px solid color-mix(in srgb, var(--mn-gold) 45%, transparent); }
.fi-ta-header-cell {
  padding-block: .8rem !important; white-space: nowrap; vertical-align: middle;
  font-size: .82rem; font-weight: 800; color: var(--mn-brown-dark);
  border-bottom: 2px solid color-mix(in srgb, var(--mn-gold) 45%, transparent);
}
.dark .fi-ta-header-cell { color: var(--mn-gold-soft); }
.fi-ta-cell { vertical-align: middle; }
.fi-ta-table tbody tr { transition: background-color .15s ease; }
.fi-ta-table tbody tr:hover { background: color-mix(in srgb, var(--mn-gold) 6%, transparent); }
.fi-ta-text-description, .fi-ta-col .fi-ta-text + .fi-ta-text { font-size: .78rem; }

/* Row actions */
.fi-ta-actions { gap: .4rem !important; flex-wrap: nowrap; }
.fi-ta-actions .fi-ac-link-action.fi-link {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  padding: .32rem .7rem; border-radius: .6rem; font-size: .8rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: color-mix(in srgb, currentColor 6%, var(--mn-card));
  text-decoration: none !important; transition: background-color .15s ease, border-color .15s ease;
}
.fi-ta-actions .fi-ac-link-action.fi-link:hover { background: color-mix(in srgb, currentColor 14%, var(--mn-card)); border-color: currentColor; }
.fi-ta-actions .fi-ac-link-action.fi-link .fi-link-label { text-decoration: none !important; }
.fi-ta-actions .fi-ac-icon-btn-group {
  border: 1px solid var(--mn-border); border-radius: .6rem; background: var(--mn-card); color: var(--mn-brown-dark);
}
.fi-ta-actions .fi-ac-icon-btn-group:hover { border-color: var(--mn-gold); }

/* «مشاهدة الموقع» — beside the bell, same size and glass look; the label shows on wide screens. */
.mn-top-site {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 2.5rem; min-width: 2.5rem; padding-inline: .7rem; border-radius: .85rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14);
  color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}
.mn-top-site:hover { background: rgba(255, 255, 255, .18); border-color: var(--mn-gold-soft); }
.mn-top-site:focus-visible { outline: 2px solid var(--mn-gold-soft); outline-offset: 2px; }
.mn-top-site-icon { width: 1.25rem; height: 1.25rem; color: var(--mn-gold-soft); }
.mn-top-site-label { display: none; }
@media (min-width: 80rem) { .mn-top-site-label { display: inline; } }