/* SafeView — brand face for the Filament admin panel, mirroring the public
   frontend: IBM Plex Sans Arabic for everything, headings included.

   One family on purpose. The brief asks for "a modern, clear Arabic face" and a
   matching Latin one; Plex Arabic carries both scripts in the same design, so the
   panel never mixes two typefaces across an RTL/LTR boundary — a table of Arabic
   labels and Latin ids reads as one grid.

   Self-hosted from `public/fonts/plex/`, split into the Arabic and Latin subsets
   exactly as Google serves them, so a screen only fetches the script it renders.
   `font-display: swap` everywhere, with Arabic-capable fallbacks behind it. */

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-arabic-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-latin-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-arabic-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-latin-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-arabic-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-latin-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-arabic-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
  font-family: 'IBM Plex Sans Arabic';
  src: url('/fonts/plex/IBMPlexSansArabic-latin-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* `--font-family` and `--serif-font-family` — the vars Filament inlines into
       Tailwind's `--default-font-family` and its `fi-font-sans` / `fi-font-serif`
       utilities — are deliberately NOT set here. The base layout writes its own
       unlayered `:root` block for them *after* this stylesheet, so anything declared
       here loses. They are configured on the panel instead, via `->font()` /
       `->serifFont()` in `AdminPanelProvider`; the Arabic fallbacks that those
       single-family values can't carry are supplied by the rules below.

       The Tailwind tokens behind the plain `font-sans` / `font-serif` utilities do
       belong here: Filament's theme declares them inside `@layer theme`, and an
       unlayered rule beats any layer regardless of source order. */
    --font-sans: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
    --font-serif: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
    /* Brand constants, also used as the fallback palette before the settings row
       exists: the logo's tech blue and the navy ink behind it. */
    --brand-blue: #0186ff;
    --brand-navy: #02244a;
}

.fi-body,
.fi-simple-layout {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
}

/* Arabic is a connected script, so letter-spacing is never right in this panel:
   positive tracking tears the joining strokes apart and negative tracking crushes
   them. Filament ships `tracking-tight` on page and section headings, the logo,
   badges, stat values and prose h1/h2, so neutralise the lot rather than chasing each
   selector as the framework adds them. An unlayered rule outranks anything in a
   `@layer` whatever its specificity, so no `!important` is needed.

   The one-time-code input is the deliberate exception: its letter-spacing spreads
   Latin digits into their boxes, which is layout rather than typography. */
*:not(.fi-one-time-code-input) {
    letter-spacing: normal;
}

/* Page and section headings pick up the serif face, matching the public site's
   editorial hierarchy. */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
}

/* FilePond (FileUpload dropzone) ships its own font-family on `.filepond--root`,
   so the brand face never reaches the drop label or any inner text. Re-apply the
   stack to the root and let every descendant inherit it. */
.filepond--root,
.filepond--root * {
    font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif !important;
}

/* Make the whole rich editor area tall and clickable, not just the first line.
   Targets the TipTap contenteditable element directly. */
.fi-fo-rich-editor .tiptap,
.fi-fo-rich-editor [contenteditable="true"] {
    min-height: 24rem;
}

/* Stronger visual hierarchy in infolists: by default Filament paints both the
   entry label and its value with the same color (gray-950 / white), so they
   read as one block. Mute the label so the value stands out as the answer.
   Selectors match the core specificity and win on source order (this file is
   loaded after the framework theme). */
.fi-in-entry .fi-in-entry-label {
    color: #52525b; /* zinc-600 */
    font-weight: 600;
}

.dark .fi-in-entry .fi-in-entry-label {
    color: #a1a1aa; /* zinc-400 */
}

/* Iconify icon previews (icon picker options, table and infolist) are served
   as monochrome black SVGs from the Iconify API via <img>, so `currentColor`
   can't reach them. Invert them in dark mode so they read as light-on-dark.
   Scoped to the `safeview-iconify-icon` class so uploaded photo thumbnails are
   never inverted. */
.dark .safeview-iconify-icon {
    filter: invert(1);
}