/*
 * Meso admin theme: the website's look (apps/web/app/globals.css) applied over Filament's own stylesheet.
 * Loaded after Filament's CSS (AdminPanelProvider, HEAD_END hook) and kept unlayered, so it wins over Filament's
 * layered rules without !important. Colours come from the panel palette (primary = harvest, gray = paper → night);
 * this file adds the brand fonts, chamfered (bevelled) corners, the forest glow, grain and the site's motion.
 *
 * Chamfers use `corner-shape: bevel`, which bevels the border, background and shadow without clipping anything
 * inside (dropdowns, select menus). Browsers without it simply show slightly rounded corners.
 */

:root {
  --meso-forest: #064731;
  --meso-leaf: #4c8f41;
  --meso-leaf-light: #7bc06e;
  --meso-harvest: #ee7d22;
  --meso-harvest-text: #a8520c;
  --meso-grain: #b17f35;
  --meso-ink: #161616;
  --meso-paper: #faf8f3;
  --meso-sand: #efe9dc;
  --meso-night: #0a1a14;
  --meso-night-2: #0f2a20;
  --meso-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --meso-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --meso-eyebrow: var(--meso-leaf);
  --meso-surface-line: rgb(10 26 20 / 0.08);
  /* Filament reads its corner sizes from these */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
}
:root.dark {
  --meso-eyebrow: var(--meso-leaf-light);
  --meso-surface-line: rgb(250 248 243 / 0.09);
}

/* ───────────────────────────── type ───────────────────────────── */

.fi-body {
  font-family: 'K2D', 'Cairo', 'Noto Kufi Arabic', ui-sans-serif, system-ui, sans-serif;
}
/* Arabic and Kurdish fields (dir="rtl" inputs on the translation fieldsets) */
.fi-body [dir='rtl'],
html[dir='rtl'] .fi-body {
  font-family: 'Cairo', 'Noto Kufi Arabic', 'K2D', sans-serif;
}
.fi-header-heading,
.fi-simple-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
.fi-ta-header-heading {
  font-family: 'Klapt', 'K2D', sans-serif;
  font-weight: 700;
  letter-spacing: 0.005em;
}
.fi-header-heading {
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1.05;
}
.fi-section-header-heading {
  font-weight: 600;
  letter-spacing: 0.01em;
}
/* eyebrow / caption style (the site's `caption`): uppercase, tracked, with the little octagon dot */
.fi-sidebar-group-label,
.fi-breadcrumbs,
.fi-ta-header-cell,
.fi-wi-stats-overview-stat-label,
.fi-fieldset > legend {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.7rem;
  font-weight: 600;
}
.fi-sidebar-group-label {
  color: var(--meso-eyebrow);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}
.fi-sidebar-group-label::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  flex: none;
  background: currentColor;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
::selection {
  background: rgb(238 125 34 / 0.35);
}

/* ───────────────────────────── backdrop: forest glow + grain (dark), paper (light) ───────────────────────────── */
/*
 * Painted on <html>, with the grain and the particle canvas (js/meso/admin.js) at z-index -1 above it: that keeps
 * them behind the page without giving Filament's layout a z-index of its own. (The topbar sits outside the layout,
 * so a layout z-index would trap modals underneath it.)
 */
:root:has(> .fi-body) {
  background-color: var(--meso-paper);
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgb(239 233 220 / 0.9), transparent 70%);
  background-attachment: fixed;
}
:root.dark:has(> .fi-body) {
  background-color: var(--meso-night);
  background-image: radial-gradient(ellipse 90% 60% at 50% -15%, #12402e 0%, #0a1a14 60%, #050e0a 100%);
}
.fi-body,
:root.dark .fi-body {
  background: transparent;
}
:root.dark .fi-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.meso-dust {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ───────────────────────────── chamfered surfaces ───────────────────────────── */

.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-simple-main,
.fi-modal-window,
.fi-dropdown-panel,
.fi-fo-repeater-item,
.fi-in-repeatable-item,
.fi-global-search-results-ctn,
.fi-no-notification,
.fi-fieldset:not(.fi-fieldset-not-contained),
.fi-tabs,
.fi-fo-file-upload .filepond--panel-root {
  corner-shape: bevel;
}
.fi-section:not(.fi-section-not-contained),
.fi-ta-ctn,
.fi-wi-stats-overview-stat {
  --tw-ring-color: var(--meso-surface-line);
  transition: box-shadow 0.4s var(--meso-ease-out), transform 0.4s var(--meso-ease-out);
}
/*
 * No backdrop-filter (or lasting transform) on anything that can contain a modal or dropdown: it would become the
 * box those fixed-position layers are placed in (a slide-over would open inside the table instead of the screen).
 */
:root.dark .fi-section:not(.fi-section-not-contained),
:root.dark .fi-ta-ctn,
:root.dark .fi-wi-stats-overview-stat {
  background-color: rgb(15 42 32 / 0.9);
}
:root.dark .fi-modal-window,
:root.dark .fi-dropdown-panel {
  background-color: rgb(15 42 32 / 0.94);
  backdrop-filter: blur(10px) saturate(130%);
}
.fi-modal-window.fi-modal-slide-over {
  corner-shape: round;
}
.fi-btn,
.fi-icon-btn,
.fi-input-wrp,
.fi-badge,
.fi-sidebar-item-btn,
.fi-tabs-item,
.fi-pagination-item,
.fi-dropdown-list-item,
.fi-global-search-result-link,
.fi-topbar-item-btn,
.fi-fo-repeater-item-header,
.fi-checkbox-input {
  corner-shape: bevel;
}
/* avatars become the brand octagon */
.fi-avatar {
  border-radius: 30%;
  corner-shape: bevel;
}

/* ───────────────────────────── buttons: the site's colour sweep ───────────────────────────── */

.fi-btn {
  --meso-sweep: transparent;
  background-image: linear-gradient(var(--meso-sweep), var(--meso-sweep));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition:
    background-size 0.5s var(--meso-ease-in-out),
    background-color 0.3s var(--meso-ease-out),
    color 0.3s var(--meso-ease-out),
    transform 0.2s var(--meso-ease-out);
}
[dir='rtl'] .fi-btn {
  background-position: right center;
}
@media (hover: hover) {
  .fi-btn:not(.fi-disabled):not([disabled]):hover {
    background-size: 100% 100%;
  }
}
.fi-btn:not(.fi-disabled):not([disabled]):active,
.fi-icon-btn:active {
  transform: scale(0.97);
}
/* primary: harvest, sweeping to forest with a paper label (the site's primary button) */
.fi-btn.fi-color-primary:not(.fi-outlined) {
  --meso-sweep: var(--meso-forest);
  background-color: var(--meso-harvest);
  color: var(--meso-ink);
}
.fi-btn.fi-color-primary:not(.fi-outlined) .fi-icon {
  color: inherit;
}
@media (hover: hover) {
  .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-disabled):not([disabled]):hover {
    background-color: var(--meso-harvest);
    color: var(--meso-paper);
  }
}
/* gray (secondary / cancel): outlined, sweeping to forest (light) or paper (dark) */
.fi-btn:not(.fi-color) {
  --meso-sweep: var(--meso-forest);
}
@media (hover: hover) {
  .fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover {
    color: var(--meso-paper);
  }
  .fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover .fi-icon {
    color: inherit;
  }
}
:root.dark .fi-btn:not(.fi-color) {
  --meso-sweep: var(--meso-paper);
  background-color: rgb(250 248 243 / 0.05);
  --tw-ring-color: rgb(250 248 243 / 0.4);
}
@media (hover: hover) {
  :root.dark .fi-btn:not(.fi-color):not(.fi-disabled):not([disabled]):hover {
    color: var(--meso-ink);
  }
}
/* other solid colours keep Filament's colours, with a darker sweep */
.fi-btn.fi-color:not(.fi-color-primary):not(.fi-outlined) {
  --meso-sweep: rgb(10 26 20 / 0.28);
}

/* ───────────────────────────── inputs ───────────────────────────── */

.fi-input-wrp {
  transition: box-shadow 0.25s var(--meso-ease-out), background-color 0.25s var(--meso-ease-out);
}
:root.dark .fi-input-wrp {
  background-color: rgb(250 248 243 / 0.04);
}
.fi-input-wrp:focus-within {
  --tw-ring-color: var(--meso-harvest);
}
.fi-toggle.fi-toggle-on,
.fi-checkbox-input:checked {
  background-color: var(--meso-harvest);
}

/* ───────────────────────────── sidebar ───────────────────────────── */

:root.dark .fi-sidebar {
  background-color: rgb(10 26 20 / 0.55);
  border-inline-end: 1px solid rgb(250 248 243 / 0.07);
}
.fi-sidebar-item-btn {
  position: relative;
  transition: background-color 0.3s var(--meso-ease-out), box-shadow 0.3s var(--meso-ease-out);
}
.fi-sidebar-item-btn > .fi-icon,
.fi-sidebar-item-label {
  transition: transform 0.35s var(--meso-ease-out), color 0.3s var(--meso-ease-out);
}
@media (hover: hover) {
  .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    transform: translateX(3px);
  }
  [dir='rtl'] .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    transform: translateX(-3px);
  }
  .fi-sidebar-item-btn:hover > .fi-icon {
    color: var(--meso-harvest);
  }
}
/* active page: harvest wash from the start edge + an accent bar */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgb(238 125 34 / 0.16), rgb(238 125 34 / 0.02));
  box-shadow: inset 3px 0 0 var(--meso-harvest);
}
[dir='rtl'] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
  background-image: linear-gradient(270deg, rgb(238 125 34 / 0.16), rgb(238 125 34 / 0.02));
  box-shadow: inset -3px 0 0 var(--meso-harvest);
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
  color: var(--meso-harvest);
}
.fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: var(--meso-harvest-text);
}
:root.dark .fi-sidebar-item.fi-active .fi-sidebar-item-label {
  color: var(--meso-harvest);
}

/* ───────────────────────────── topbar ───────────────────────────── */

/* (solid rather than blurred: the user menu and search results open inside it) */
.fi-topbar {
  background-color: rgb(250 248 243 / 0.94);
  box-shadow: 0 1px 0 rgb(10 26 20 / 0.06);
}
:root.dark .fi-topbar {
  background-color: rgb(10 26 20 / 0.9);
  box-shadow: 0 1px 0 rgb(250 248 243 / 0.07);
}
.fi-logo {
  transition: opacity 0.3s var(--meso-ease-out);
}
.fi-sidebar-header .fi-logo:hover,
.fi-topbar .fi-logo:hover {
  opacity: 0.85;
}

/* ───────────────────────────── stats, tables, tabs ───────────────────────────── */

.fi-wi-stats-overview-stat {
  position: relative;
}
.fi-wi-stats-overview-stat::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 1.5rem;
  width: 2.5rem;
  height: 3px;
  background: var(--meso-harvest);
  transition: width 0.5s var(--meso-ease-out);
}
.fi-wi-stats-overview-stat-value {
  font-size: 2.1rem;
  line-height: 1.1;
}
@media (hover: hover) {
  .fi-wi-stats-overview-stat:hover {
    transform: translateY(-3px);
    --tw-ring-color: rgb(238 125 34 / 0.45);
  }
  .fi-wi-stats-overview-stat:hover::before {
    width: 5rem;
  }
}
.fi-ta-header-cell {
  color: var(--gray-500);
}
.fi-ta-row {
  transition: background-color 0.25s var(--meso-ease-out);
}
@media (hover: hover) {
  .fi-ta-row:hover {
    background-color: rgb(238 125 34 / 0.05);
  }
}
.fi-tabs-item.fi-active {
  box-shadow: inset 0 -2px 0 var(--meso-harvest);
}

/* ───────────────────────────── login and other single-card pages ───────────────────────────── */

.fi-simple-main {
  --tw-ring-color: var(--meso-surface-line);
  animation: meso-rise 0.9s var(--meso-ease-out) backwards;
}
:root.dark .fi-simple-main {
  background-color: rgb(15 42 32 / 0.72);
  backdrop-filter: blur(14px) saturate(140%);
}
.fi-simple-main::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 3rem;
  width: 3rem;
  height: 3px;
  background: var(--meso-harvest);
}
.fi-simple-main {
  position: relative;
}
.fi-simple-header .fi-logo {
  height: 3.6rem !important;
  margin-block-end: 0.5rem;
}
.fi-simple-header-heading {
  font-size: 2rem;
}

/* ───────────────────────────── entrance motion (the site's reveal) ───────────────────────────── */
/*
 * `backwards`, not `both`: a finished animation must not leave its last transform behind, or the element becomes
 * the box that fixed-position modals inside it are placed in.
 */

@keyframes meso-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes meso-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fi-header {
  animation: meso-rise 0.8s var(--meso-ease-out) backwards;
}
.fi-page-content > *,
.fi-wi > *,
.fi-wi-stats-overview-stat {
  animation: meso-rise 0.8s var(--meso-ease-out) backwards;
}
.fi-page-content > :nth-child(1) { animation-delay: 0.06s; }
.fi-page-content > :nth-child(2) { animation-delay: 0.12s; }
.fi-page-content > :nth-child(3) { animation-delay: 0.18s; }
.fi-page-content > :nth-child(n + 4) { animation-delay: 0.24s; }
.fi-wi-stats-overview-stat:nth-child(1) { animation-delay: 0.1s; }
.fi-wi-stats-overview-stat:nth-child(2) { animation-delay: 0.16s; }
.fi-wi-stats-overview-stat:nth-child(3) { animation-delay: 0.22s; }
.fi-wi-stats-overview-stat:nth-child(4) { animation-delay: 0.28s; }
.fi-wi-stats-overview-stat:nth-child(5) { animation-delay: 0.34s; }
.fi-wi-stats-overview-stat:nth-child(n + 6) { animation-delay: 0.4s; }
/* rows fade in one after another on page load (Livewire keeps existing rows, so filtering doesn't replay it) */
.fi-ta-row {
  animation: meso-fade 0.5s var(--meso-ease-out) backwards;
}
.fi-ta-row:nth-child(2) { animation-delay: 0.03s; }
.fi-ta-row:nth-child(3) { animation-delay: 0.06s; }
.fi-ta-row:nth-child(4) { animation-delay: 0.09s; }
.fi-ta-row:nth-child(5) { animation-delay: 0.12s; }
.fi-ta-row:nth-child(6) { animation-delay: 0.15s; }
.fi-ta-row:nth-child(7) { animation-delay: 0.18s; }
.fi-ta-row:nth-child(8) { animation-delay: 0.21s; }
.fi-ta-row:nth-child(n + 9) { animation-delay: 0.24s; }

/* ───────────────────────────── focus and scrollbars ───────────────────────────── */

.fi-btn:focus-visible,
.fi-icon-btn:focus-visible,
.fi-sidebar-item-btn:focus-visible {
  outline: 2px solid var(--meso-harvest);
  outline-offset: 2px;
}
.fi-body {
  scrollbar-color: rgb(177 127 53 / 0.5) transparent;
}

@media (prefers-reduced-motion: reduce) {
  .fi-body *,
  .fi-body *::before,
  .fi-body *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}