/* =====================================================================
   Patricia · admin panel theme — «لوحة باتريسيا الجديدة» (approved design)
   ---------------------------------------------------------------------
   Plain CSS on top of Filament's compiled stylesheet (no Vite build).
   Injected by AdminPanelProvider (PanelsRenderHook::HEAD_END) and scoped
   to the admin panel (body.fi-panel-admin); the provider panel is untouched.

   The pink-glass "control room": dark first with a mirrored light theme
   (Filament's theme switcher toggles html.dark), a stage behind everything
   (rose / pink / gold light, slats, the big Patricia «B», petals), a
   frosted icon rail (the collapsible sidebar, collapsed), a glass top bar,
   frosted cards (radius 30), rose pill buttons, chips, segmented tabs.

   Type   El Messiri (headings, local files) · IBM Plex Sans Arabic (body)
   Files  resources/views/filament/admin/** (stage, brand, rail toggle,
          dashboard bento), resources/views/filament/widgets/pending-reviews
   ===================================================================== */

/* ---------- fonts (served from public/fonts) ---------- */
@font-face { font-family: "El Messiri"; src: url("../fonts/patricia/ElMessiri-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "El Messiri"; src: url("../fonts/patricia/ElMessiri-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "El Messiri"; src: url("../fonts/patricia/ElMessiri-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "El Messiri"; src: url("../fonts/patricia/ElMessiri-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Patricia Cairo"; src: url("../fonts/cairo/Cairo-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Patricia Cairo"; src: url("../fonts/cairo/Cairo-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Patricia Cairo"; src: url("../fonts/cairo/Cairo-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Patricia Cairo"; src: url("../fonts/cairo/Cairo-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

/* =====================================================================
   1 · Tokens (the artifact's :root) — light, then dark (the default)
   ===================================================================== */
.fi-panel-admin {
    color-scheme: light;

    --pt-bg: #f8f1f4;
    --pt-bg-2: #fffafc;
    --pt-fg: #1d1a20;
    --pt-muted: #6c626c;
    --pt-faint: #9a8f99;
    --pt-line: rgba(29, 26, 32, .10);
    --pt-line-strong: rgba(29, 26, 32, .18);
    --pt-glass: rgba(255, 255, 255, .58);
    --pt-glass-strong: rgba(255, 255, 255, .86);
    --pt-glass-solid: rgba(255, 251, 253, .95);
    --pt-chip: rgba(29, 26, 32, .06);
    --pt-track: rgba(29, 26, 32, .10);
    --pt-field: rgba(255, 255, 255, .62);

    --pt-rose: #ff002c;
    --pt-rose-btn: #e8002a;
    --pt-rose-ink: #c90024;
    --pt-rose-soft: rgba(255, 0, 44, .10);
    --pt-pink: #d9486f;
    --pt-pink-soft: rgba(255, 143, 171, .22);
    --pt-gold: #dea700;
    --pt-gold-ink: #876300;
    --pt-gold-soft: rgba(222, 167, 0, .16);
    --pt-ok: #17834f;
    --pt-ok-soft: rgba(23, 131, 79, .12);
    --pt-warn: #9a6400;
    --pt-warn-soft: rgba(242, 179, 61, .20);
    --pt-bad: #c62f35;
    --pt-bad-soft: rgba(198, 47, 53, .12);
    --pt-info: #2f55d4;
    --pt-info-soft: rgba(53, 89, 230, .12);

    --pt-tile-mint: #23905a;
    --pt-tile-coral: #d4513f;
    --pt-tile-blue: #3559e6;

    --pt-blob-1: rgba(255, 0, 44, .14);
    --pt-blob-2: rgba(255, 143, 171, .30);
    --pt-blob-3: rgba(222, 167, 0, .14);
    --pt-wm-1: #ff7a99;
    --pt-wm-2: #ffd3de;
    --pt-wm-opacity: .55;
    --pt-stage-top: #ffe6ee;
    --pt-stage-bot: #f8eef2;
    --pt-slat: rgba(200, 60, 100, .05);
    --pt-shadow: 0 18px 44px rgba(120, 30, 60, .12);
    --pt-shadow-sm: 0 8px 22px rgba(120, 30, 60, .08);
    --pt-blur: blur(26px) saturate(150%);

    --pt-r-xl: 30px;
    --pt-r-lg: 22px;
    --pt-r-md: 14px;

    --pt-display: "El Messiri", "IBM Plex Sans Arabic", "Patricia Cairo", "Segoe UI", Tahoma, sans-serif;
    --pt-body: "IBM Plex Sans Arabic", "Patricia Cairo", "Segoe UI", Tahoma, "Geeza Pro", sans-serif;
    --pt-logo: url("../images/patricia-logo-mask.png");

    --pt-gap: 14px;
    --pt-rail: 64px;
    --pt-side: var(--pt-rail);
}

.dark .fi-panel-admin {
    color-scheme: dark;

    --pt-bg: #121014;
    --pt-bg-2: #19151a;
    --pt-fg: #f6eff2;
    --pt-muted: #ad9fa8;
    --pt-faint: #6f6570;
    --pt-line: rgba(255, 255, 255, .09);
    --pt-line-strong: rgba(255, 255, 255, .17);
    --pt-glass: rgba(40, 30, 37, .56);
    --pt-glass-strong: rgba(54, 40, 49, .80);
    --pt-glass-solid: rgba(33, 24, 30, .95);
    --pt-chip: rgba(255, 255, 255, .07);
    --pt-track: rgba(255, 255, 255, .10);
    --pt-field: rgba(255, 255, 255, .05);

    --pt-rose-ink: #ff5c78;
    --pt-rose-soft: rgba(255, 0, 44, .15);
    --pt-pink: #ff8fab;
    --pt-pink-soft: rgba(255, 143, 171, .16);
    --pt-gold-ink: #eab935;
    --pt-gold-soft: rgba(222, 167, 0, .15);
    --pt-ok: #3ccf86;
    --pt-ok-soft: rgba(60, 207, 134, .14);
    --pt-warn: #f2b33d;
    --pt-warn-soft: rgba(242, 179, 61, .15);
    --pt-bad: #ff5a5f;
    --pt-bad-soft: rgba(255, 90, 95, .15);
    --pt-info: #8ea6ff;
    --pt-info-soft: rgba(53, 89, 230, .20);

    --pt-blob-1: rgba(255, 0, 44, .34);
    --pt-blob-2: rgba(255, 143, 171, .26);
    --pt-blob-3: rgba(222, 167, 0, .16);
    --pt-wm-1: #ff4f7a;
    --pt-wm-2: #ffc2d1;
    --pt-wm-opacity: .62;
    --pt-stage-top: #24161d;
    --pt-stage-bot: #110d10;
    --pt-slat: rgba(255, 220, 230, .035);
    --pt-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --pt-shadow-sm: 0 8px 24px rgba(0, 0, 0, .30);
}

/* =====================================================================
   2 · The stage behind every page (resources/views/filament/admin/stage)
   ===================================================================== */
html:has(> body.fi-panel-admin) {
    background: #f8eef2;
}

html.dark:has(> body.fi-panel-admin) {
    background: #110d10;
}

.fi-panel-admin.fi-body {
    font-family: var(--pt-body);
    color: var(--pt-fg);
    background: transparent;
    background-color: transparent;
}

.pt-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(48% 40% at 90% 4%, var(--pt-blob-1), transparent 70%),
        radial-gradient(42% 38% at 4% 98%, var(--pt-blob-2), transparent 70%),
        radial-gradient(30% 30% at 50% 60%, var(--pt-blob-3), transparent 70%),
        linear-gradient(180deg, var(--pt-stage-top), var(--pt-stage-bot));
}

/* Never painted on the provider panel (the view is only hooked on admin, belt and braces). */
body:not(.fi-panel-admin) .pt-stage {
    display: none;
}

.pt-stage-slats {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 40%;
    background: repeating-linear-gradient(90deg, var(--pt-slat) 0 7px, transparent 7px 24px);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent);
    mask-image: linear-gradient(90deg, #000, transparent);
}

.pt-mark {
    position: absolute;
    aspect-ratio: 252 / 324;
    background: linear-gradient(160deg, var(--pt-wm-1), var(--pt-wm-2));
    -webkit-mask: var(--pt-logo) center / contain no-repeat;
    mask: var(--pt-logo) center / contain no-repeat;
}

.pt-mark-big {
    width: min(40vw, 470px);
    inset-inline-start: 7%;
    top: 4%;
    opacity: var(--pt-wm-opacity);
}

.pt-mark-small {
    width: min(14vw, 150px);
    inset-inline-end: 30%;
    bottom: 3%;
    opacity: calc(var(--pt-wm-opacity) * .6);
    transform: rotate(-10deg);
}

.pt-petal {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    background: radial-gradient(circle at 35% 35%, #ffd6e1, #ff5c86 60%, transparent 72%);
    opacity: .5;
}

.pt-petal-1 { width: 140px; height: 140px; top: 38%; right: 4%; }
.pt-petal-2 { width: 90px; height: 90px; bottom: 12%; left: 30%; }
.pt-petal-3 { width: 56px; height: 56px; top: 16%; left: 12%; opacity: .32; }

/* =====================================================================
   3 · Type
   ===================================================================== */
.fi-panel-admin h1,
.fi-panel-admin h2,
.fi-panel-admin h3,
.fi-panel-admin h4,
.fi-panel-admin .fi-header-heading,
.fi-panel-admin .fi-simple-header-heading,
.fi-panel-admin .fi-section-header-heading,
.fi-panel-admin .fi-modal-heading,
.fi-panel-admin .fi-ta-header-heading,
.fi-panel-admin .fi-wi-stats-overview-stat-value,
.fi-panel-admin .fi-sidebar-group-label,
.fi-panel-admin .fi-dropdown-header,
.fi-panel-admin .fi-no-notification-title,
.fi-panel-admin .fi-ta-empty-state-heading,
.fi-panel-admin .fi-fo-wizard-header-step-label,
.fi-panel-admin .fi-logo {
    font-family: var(--pt-display);
}

.fi-panel-admin .fi-header-heading {
    font-weight: 700;
    letter-spacing: 0;
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    line-height: 1.25;
}

.fi-panel-admin .fi-header-subheading,
.fi-panel-admin .fi-section-header-description,
.fi-panel-admin .fi-ta-header-description,
.fi-panel-admin .fi-wi-stats-overview-stat-label,
.fi-panel-admin .fi-breadcrumbs-item-label,
.fi-panel-admin .pt-muted {
    color: var(--pt-muted);
}

.fi-panel-admin .pt-num,
.fi-panel-admin .fi-wi-stats-overview-stat-value,
.fi-panel-admin .fi-ta-text-item {
    font-variant-numeric: tabular-nums;
}

.fi-panel-admin a.fi-link,
.fi-panel-admin .fi-link {
    color: var(--pt-rose-ink);
}

.fi-panel-admin :focus-visible {
    outline-color: var(--pt-rose-ink);
}

/* =====================================================================
   4 · Glass
   ===================================================================== */
.fi-panel-admin .pt-glass,
.fi-panel-admin .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-panel-admin .fi-section.fi-aside > .fi-section-content-ctn,
.fi-panel-admin .fi-ta-ctn,
.fi-panel-admin .fi-wi-stats-overview-stat,
.fi-panel-admin .fi-fo-repeater-item,
.fi-panel-admin .fi-in-repeatable-item,
.fi-panel-admin .fi-fo-builder-item,
.fi-panel-admin .fi-fo-wizard,
.fi-panel-admin .fi-sc-tabs.fi-contained,
.fi-panel-admin .fi-tabs.fi-contained {
    background: var(--pt-glass);
    -webkit-backdrop-filter: var(--pt-blur);
    backdrop-filter: var(--pt-blur);
    border: 1px solid var(--pt-line);
    box-shadow: var(--pt-shadow);
    --tw-ring-color: transparent;
}

.fi-panel-admin .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-panel-admin .fi-section.fi-aside > .fi-section-content-ctn,
.fi-panel-admin .fi-wi-stats-overview-stat,
.fi-panel-admin .fi-fo-wizard,
.fi-panel-admin .fi-sc-tabs.fi-contained {
    border-radius: var(--pt-r-xl);
}

.fi-panel-admin .fi-ta-ctn {
    border-radius: 26px;
}

.fi-panel-admin .fi-fo-repeater-item,
.fi-panel-admin .fi-in-repeatable-item,
.fi-panel-admin .fi-fo-builder-item {
    border-radius: var(--pt-r-lg);
    box-shadow: none;
}

.fi-panel-admin .fi-section.fi-section-has-header:not(.fi-collapsed) > .fi-section-content-ctn,
.fi-panel-admin .fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-footer,
.fi-panel-admin .fi-section-header {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-section-header-heading {
    font-size: 1.06rem;
    font-weight: 600;
}

.fi-panel-admin .fi-section-header .fi-icon {
    color: var(--pt-rose-ink);
}

/* =====================================================================
   5 · Layout: glass top bar, icon rail (desktop), drawer (phones)
   ===================================================================== */

/* -- top bar -- */
.fi-panel-admin .fi-topbar-ctn {
    padding: 10px 10px 0;
    background: transparent;
    overflow: visible;
}

/* a soft frosted strip behind the floating bar, so scrolled content fades under it */
.fi-panel-admin .fi-topbar-ctn::before {
    content: "";
    position: absolute;
    inset: 0 0 -14px;
    z-index: -1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}

.fi-panel-admin .fi-topbar {
    min-height: 62px;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--pt-r-xl);
    background: var(--pt-glass);
    -webkit-backdrop-filter: var(--pt-blur);
    backdrop-filter: var(--pt-blur);
    border: 1px solid var(--pt-line);
    box-shadow: var(--pt-shadow);
    --tw-ring-color: transparent;
}

.fi-panel-admin .fi-topbar-start {
    display: flex;
    margin-inline-end: 4px;
    min-width: 0;
}

.fi-panel-admin .fi-topbar-start > a {
    display: flex;
    align-items: center;
    border-radius: 16px;
}

.fi-panel-admin .fi-topbar-start .fi-logo {
    margin-inline-start: 0;
    height: auto !important;
}

/* The rail has its own toggle (filament/admin/rail-toggle); the bar's chevrons stay for keyboards on phones. */
.fi-panel-admin .fi-topbar-collapse-sidebar-btn-ctn {
    display: none;
}

.fi-panel-admin .fi-topbar-open-sidebar-btn,
.fi-panel-admin .fi-topbar-close-sidebar-btn {
    margin-inline-end: 0 !important;
}

.fi-panel-admin .fi-topbar-end {
    flex: 1;
    min-width: 0;
    gap: 4px;
    margin-inline-start: 0;
}

.fi-panel-admin .fi-topbar-end > .fi-global-search-ctn {
    flex: 1;
    min-width: 0;
    max-width: 640px;
    margin-inline-end: auto;
}

.fi-panel-admin .fi-topbar-end > .fi-user-menu { order: 20; }
.fi-panel-admin .fi-topbar-end > .pt-greeting { order: 21; }

/* search pill */
.fi-panel-admin .fi-global-search-field .fi-input-wrp {
    border-radius: 999px;
    background: var(--pt-chip);
    border: 0;
    box-shadow: none;
    --tw-ring-color: transparent;
    min-height: 42px;
    padding-inline: 6px;
}

.fi-panel-admin .fi-global-search-field .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 2px var(--pt-rose-soft);
}

.fi-panel-admin .fi-global-search-field .fi-input {
    font-size: .9rem;
    color: var(--pt-fg);
}

.fi-panel-admin .fi-global-search-field .fi-input::placeholder {
    color: var(--pt-muted);
}

.fi-panel-admin .fi-global-search-field .fi-input-wrp-suffix {
    border: 0;
    padding-inline: 4px 8px;
    color: var(--pt-muted);
}

.fi-panel-admin .fi-global-search-field .fi-input-wrp-suffix .fi-input-wrp-label,
.fi-panel-admin .fi-global-search-field .fi-input-wrp-suffix > span {
    font-size: 11.5px;
    line-height: 1.6;
    border: 1px solid var(--pt-line-strong);
    border-radius: 7px;
    padding: 0 6px;
    color: var(--pt-muted);
    white-space: nowrap;
}

.fi-panel-admin .fi-global-search-results-ctn {
    border-radius: var(--pt-r-lg);
    background: var(--pt-glass-solid);
    -webkit-backdrop-filter: var(--pt-blur);
    backdrop-filter: var(--pt-blur);
    border: 1px solid var(--pt-line);
    box-shadow: var(--pt-shadow);
    overflow: hidden;
}

/* round icon buttons of the bar: bell (red pip), activity log, language */
.fi-panel-admin .fi-topbar .fi-icon-btn,
.fi-panel-admin .pt-topbar-icon,
.fi-panel-admin .fi-topbar .language-switch-trigger {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    display: grid;
    place-items: center;
    color: var(--pt-muted) !important;
    background: transparent !important;
    transition: background .2s, color .2s;
}

.fi-panel-admin .fi-topbar .fi-icon-btn:hover,
.fi-panel-admin .pt-topbar-icon:hover,
.fi-panel-admin .fi-topbar .language-switch-trigger:hover {
    background: var(--pt-chip) !important;
    color: var(--pt-fg) !important;
}

.fi-panel-admin .pt-topbar-icon svg {
    width: 21px;
    height: 21px;
}

.fi-panel-admin .fi-topbar .language-switch-trigger span {
    font-size: 12.5px;
    font-weight: 600;
}

.fi-panel-admin .fi-topbar-database-notifications-btn .fi-icon-btn-badge-ctn {
    top: 4px;
    inset-inline-start: auto;
    inset-inline-end: 4px;
    translate: none;
}

.fi-panel-admin .fi-topbar-database-notifications-btn .fi-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 99px;
    font-size: 10.5px;
    font-weight: 600;
    background: var(--pt-rose) !important;
    color: #fff !important;
    box-shadow: 0 0 0 2px var(--pt-glass-strong);
}

/* avatar + greeting */
.fi-panel-admin .fi-user-menu-trigger .fi-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--pt-line-strong);
}

.pt-greeting {
    display: none;
    font-size: 14px;
    color: var(--pt-muted);
    white-space: nowrap;
    padding-inline: 0 6px;
}

.pt-greeting b {
    color: var(--pt-fg);
    font-weight: 600;
}

@media (min-width: 1180px) {
    .pt-greeting {
        display: inline;
    }
}

/* -- brand (filament/admin/brand) -- */
.pt-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--pt-fg, inherit);
    text-decoration: none;
}

.pt-brand-logo {
    flex: none;
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ff7a96, #ff002c 60%, #a8001d);
    box-shadow: 0 6px 16px rgba(255, 0, 44, .28);
}

.pt-brand-logo::after {
    content: "";
    position: absolute;
    inset: 6px;
    background: #fff;
    -webkit-mask: var(--pt-logo, url("../images/patricia-logo-mask.png")) center / contain no-repeat;
    mask: var(--pt-logo, url("../images/patricia-logo-mask.png")) center / contain no-repeat;
}

.pt-brand-text {
    display: grid;
    line-height: 1.2;
    min-width: 0;
}

.pt-brand-name {
    font-family: var(--pt-display, "El Messiri", serif);
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
}

.pt-brand-sub {
    font-family: var(--pt-body, sans-serif);
    font-size: 12px;
    color: var(--pt-muted, #ad9fa8);
    white-space: nowrap;
}

/* -- sidebar: shared look (rail, open panel, drawer) -- */
.fi-panel-admin .fi-main-sidebar {
    background: var(--pt-glass);
    -webkit-backdrop-filter: var(--pt-blur);
    backdrop-filter: var(--pt-blur);
    border: 1px solid var(--pt-line);
    box-shadow: var(--pt-shadow);
    --tw-ring-color: transparent;
}

.fi-panel-admin .fi-sidebar-nav {
    scrollbar-width: none;
    padding: 14px 12px;
    row-gap: 6px;
}

.fi-panel-admin .fi-sidebar-nav::-webkit-scrollbar {
    display: none;
}

.fi-panel-admin .fi-sidebar-nav-groups {
    margin-inline: 0;
    row-gap: 6px;
}

.fi-panel-admin .fi-sidebar-group-btn {
    padding: 8px 10px;
    border-radius: 14px;
    column-gap: 10px;
}

.fi-panel-admin .fi-sidebar-group-btn:hover {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-sidebar-group-btn > .fi-icon {
    color: var(--pt-muted);
    width: 20px;
    height: 20px;
}

.fi-panel-admin .fi-sidebar-group.fi-active > .fi-sidebar-group-btn > .fi-icon {
    color: var(--pt-rose-ink);
}

.fi-panel-admin .fi-sidebar-group-label {
    font-size: .9rem;
    font-weight: 600;
    color: var(--pt-fg);
}

.fi-panel-admin .fi-sidebar-group-collapse-btn {
    color: var(--pt-muted);
}

.fi-panel-admin .fi-sidebar-group-items {
    padding-inline-start: 18px;
    row-gap: 2px;
    padding-block-end: 4px;
}

.fi-panel-admin .fi-sidebar-item-btn {
    border-radius: 12px;
    padding-block: 7px;
    gap: 10px;
}

.fi-panel-admin .fi-sidebar-item-grouped-border-part-not-first,
.fi-panel-admin .fi-sidebar-item-grouped-border-part-not-last {
    background: var(--pt-line-strong);
}

.fi-panel-admin .fi-sidebar-item-grouped-border-part {
    background: var(--pt-faint);
}

.fi-panel-admin .fi-sidebar-item-label {
    color: var(--pt-muted);
    font-size: .875rem;
}

.fi-panel-admin .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-sidebar-item.fi-sidebar-item-has-url > .fi-sidebar-item-btn:hover .fi-sidebar-item-label {
    color: var(--pt-fg);
}

.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background: var(--pt-rose-soft);
}

.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-panel-admin .fi-sidebar-item.fi-active > .fi-sidebar-item-btn > .fi-icon {
    color: var(--pt-rose-ink);
    font-weight: 600;
}

.fi-panel-admin .fi-sidebar-item.fi-active .fi-sidebar-item-grouped-border-part {
    background: var(--pt-rose);
}

.fi-panel-admin .fi-sidebar-item-badge-ctn .fi-badge {
    background: var(--pt-pink) !important;
    color: #2a0a14 !important;
    min-width: 20px;
    padding: 0 6px;
    font-weight: 600;
}

/* group icon on the rail: 44 px round buttons, the active section in rose with a glow */
.fi-panel-admin .fi-sidebar-group > .fi-dropdown {
    display: flex;
    justify-content: center;
}

.fi-panel-admin .fi-sidebar-group > .fi-dropdown > .fi-dropdown-trigger {
    display: flex;
}

.fi-panel-admin .fi-sidebar-group-dropdown-trigger-btn {
    position: relative;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0 !important;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--pt-muted);
    transition: background .2s, color .2s, box-shadow .2s;
}

.fi-panel-admin .fi-sidebar-group-dropdown-trigger-btn .fi-icon {
    color: inherit !important;
    width: 21px;
    height: 21px;
}

.fi-panel-admin .fi-sidebar-group-dropdown-trigger-btn:hover,
.fi-panel-admin .fi-sidebar-group-dropdown-trigger-btn:focus-visible,
.fi-panel-admin .fi-sidebar-group-dropdown-trigger-btn[aria-expanded="true"] {
    background: var(--pt-chip) !important;
    color: var(--pt-fg);
}

.fi-panel-admin .fi-sidebar-group.fi-active .fi-sidebar-group-dropdown-trigger-btn {
    background: var(--pt-rose-btn) !important;
    color: #fff;
    box-shadow: 0 6px 18px rgba(255, 0, 44, .35);
}

.fi-panel-admin .fi-sidebar-group-dropdown-trigger-btn[data-pt-badge]::after {
    content: attr(data-pt-badge);
    position: absolute;
    top: 3px;
    inset-inline-end: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 99px;
    background: var(--pt-pink);
    color: #2a0a14;
    font: 600 10.5px/16px var(--pt-body);
    text-align: center;
    box-shadow: 0 0 0 2px var(--pt-glass-solid);
}

/* rail foot: show / hide the labels */
.pt-rail-foot {
    display: none;
}

.pt-rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--pt-muted);
    transition: background .2s, color .2s;
}

.pt-rail-toggle:hover,
.pt-rail-toggle:focus-visible {
    background: var(--pt-chip);
    color: var(--pt-fg);
}

.pt-rail-toggle .fi-icon,
.pt-rail-toggle svg {
    width: 20px;
    height: 20px;
}

.pt-rail-toggle-icon {
    display: grid;
    place-items: center;
}

.pt-rail-toggle-label {
    font-size: .85rem;
}

@media (min-width: 64rem) {
    .fi-panel-admin:has(.fi-main-sidebar.fi-sidebar-open) {
        --pt-side: 17.5rem;
    }

    /* the top bar sits beside the rail, as in the design */
    .fi-panel-admin .fi-topbar-ctn {
        padding: var(--pt-gap) var(--pt-gap) 0;
        padding-inline-start: calc(var(--pt-side) + 2 * var(--pt-gap));
        transition: padding .25s ease;
    }

    .fi-panel-admin .fi-layout {
        padding-inline-start: calc(var(--pt-side) + var(--pt-gap));
        transition: padding .25s ease;
    }

    .fi-panel-admin .fi-main-sidebar {
        position: fixed !important;
        top: var(--pt-gap) !important;
        bottom: auto !important;
        inset-inline-start: var(--pt-gap) !important;
        height: auto !important;
        max-height: calc(100dvh - 2 * var(--pt-gap)) !important;
        width: var(--pt-side) !important;
        translate: none !important;
        z-index: 31;
        transition: width .25s ease, border-radius .25s ease;
    }

    /* collapsed: the frosted pill rail */
    .fi-panel-admin .fi-main-sidebar:not(.fi-sidebar-open) {
        border-radius: 40px;
    }

    .fi-panel-admin .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding: 9px 0 4px !important;
        row-gap: 0;
        scrollbar-gutter: auto !important;
    }

    .fi-panel-admin .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav-groups {
        max-width: none !important;
        width: 100%;
        align-items: center;
        row-gap: 5px;
    }

    .fi-panel-admin .fi-main-sidebar:not(.fi-sidebar-open) .fi-sidebar-group {
        row-gap: 0;
        align-items: center;
    }

    /* open: a glass panel with the section names */
    .fi-panel-admin .fi-main-sidebar.fi-sidebar-open {
        border-radius: var(--pt-r-xl);
        bottom: var(--pt-gap) !important;
    }

    .pt-rail-foot {
        display: flex;
        justify-content: center;
        flex: none;
        padding: 6px 9px 9px;
        border-top: 1px solid var(--pt-line);
        margin-inline: 8px;
    }

    .fi-main-sidebar.fi-sidebar-open .pt-rail-foot {
        justify-content: stretch;
        margin-inline: 12px;
        padding-inline: 0;
    }

    .fi-main-sidebar.fi-sidebar-open .pt-rail-toggle {
        width: 100%;
        border-radius: 14px;
        justify-content: flex-start;
        padding-inline: 12px;
    }

    .fi-panel-admin .fi-sidebar-close-overlay,
    .fi-panel-admin .fi-topbar-open-sidebar-btn,
    .fi-panel-admin .fi-topbar-close-sidebar-btn {
        display: none !important;
    }
}

/* -- phones and tablets: the sidebar is a glass drawer opened from the bar -- */
@media (max-width: 63.999rem) {
    .fi-panel-admin .fi-main-sidebar {
        top: 10px !important;
        bottom: 10px !important;
        height: auto !important;
        inset-inline-start: 10px;
        border-radius: var(--pt-r-xl);
        background: var(--pt-glass-solid);
        max-width: calc(100vw - 20px);
        z-index: 40;
    }

    .fi-panel-admin .fi-main-sidebar:not(.fi-sidebar-open) {
        inset-inline-start: 0;
    }

    .fi-panel-admin .fi-sidebar-close-overlay {
        background: rgba(10, 6, 8, .45);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        z-index: 39;
    }

    .fi-panel-admin .fi-topbar {
        min-height: 58px;
        padding: 7px 8px;
        gap: 6px;
    }

    .fi-panel-admin .pt-brand-logo {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }
}

@media (max-width: 640px) {
    .fi-panel-admin .pt-brand-sub,
    .fi-panel-admin .fi-global-search-field .fi-input-wrp-suffix {
        display: none;
    }

    .fi-panel-admin .pt-brand-name {
        font-size: 16px;
    }

    .fi-panel-admin .fi-topbar-end > .fi-global-search-ctn {
        max-width: none;
    }

    .fi-panel-admin .fi-topbar .language-switch-trigger,
    .fi-panel-admin .pt-topbar-icon {
        display: none !important;
    }
}

@media (max-width: 420px) {
    .fi-panel-admin .pt-brand-text {
        display: none;
    }
}

/* -- content column -- */
.fi-panel-admin .fi-main {
    padding-block-start: 6px;
}

@media (min-width: 64rem) {
    .fi-panel-admin .fi-main {
        padding-inline: 18px calc(var(--pt-gap) + 10px);
    }
}

.fi-panel-admin .fi-page-header-main-ctn {
    row-gap: 18px;
    padding-block: 16px 28px;
}

/* =====================================================================
   6 · Menus, modals, toasts, tooltips
   ===================================================================== */
.fi-panel-admin .fi-dropdown-panel,
.fi-panel-admin .fi-modal-window,
.fi-panel-admin .fi-no-notification {
    background: var(--pt-glass-solid);
    -webkit-backdrop-filter: var(--pt-blur);
    backdrop-filter: var(--pt-blur);
    border: 1px solid var(--pt-line);
    box-shadow: var(--pt-shadow);
    --tw-ring-color: transparent;
}

.fi-panel-admin .fi-dropdown-panel {
    border-radius: var(--pt-r-lg);
    padding: 4px;
    overflow: hidden;
}

.fi-panel-admin .fi-dropdown-header {
    font-size: .95rem;
    font-weight: 600;
    padding: 10px 12px 6px;
    color: var(--pt-fg);
}

.fi-panel-admin .fi-dropdown-list {
    padding: 4px;
}

.fi-panel-admin .fi-dropdown-list + .fi-dropdown-list,
.fi-panel-admin .fi-dropdown-header + .fi-dropdown-list {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-dropdown-list-item {
    border-radius: 12px;
    padding: 8px 10px;
}

.fi-panel-admin .fi-dropdown-list-item:hover,
.fi-panel-admin .fi-dropdown-list-item:focus-visible {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-dropdown-list-item[aria-current="page"],
.fi-panel-admin .fi-dropdown-list-item.fi-color-primary {
    background: var(--pt-rose-soft);
}

.fi-panel-admin .fi-dropdown-list-item .fi-badge {
    background: var(--pt-pink) !important;
    color: #2a0a14 !important;
}

.fi-panel-admin .fi-modal-window {
    border-radius: var(--pt-r-xl);
}

.fi-panel-admin .fi-modal-close-overlay {
    background: rgba(10, 6, 8, .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fi-panel-admin .fi-modal-heading {
    font-size: 1.2rem;
    font-weight: 700;
}

.fi-panel-admin .fi-modal-header,
.fi-panel-admin .fi-modal-footer {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-modal-icon-bg {
    background: var(--pt-rose-soft);
}

.fi-panel-admin .fi-no-notification {
    border-radius: var(--pt-r-lg);
}

.fi-panel-admin .fi-no-notification-title {
    font-weight: 600;
}

.fi-panel-admin .fi-no-database .fi-modal-window,
.fi-panel-admin .fi-no-database .fi-no-notification {
    background: var(--pt-glass-solid);
}

.fi-panel-admin .fi-no-database .fi-no-notification.fi-unread,
.fi-panel-admin .fi-no-notification.fi-unread::before {
    background: var(--pt-rose-soft);
}

.tippy-box[data-theme~="dark"],
.tippy-box[data-theme~="light"] {
    border-radius: 10px;
    font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    font-size: 12.5px;
}

/* =====================================================================
   7 · Controls: buttons, inputs, tabs, badges, toggles, pagination
   ===================================================================== */
.fi-panel-admin .fi-btn {
    border-radius: 999px;
    font-weight: 500;
    transition: transform .15s, background .2s, box-shadow .2s;
    --tw-ring-color: var(--pt-line-strong);
}

.fi-panel-admin .fi-btn:active {
    transform: scale(.97);
}

.fi-panel-admin .fi-btn:not(.fi-outlined):not(.fi-color) ,
.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-gray {
    background: var(--pt-chip) !important;
    color: var(--pt-fg) !important;
    box-shadow: none;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-gray:hover {
    background: var(--pt-line-strong) !important;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-primary {
    background: var(--pt-rose-btn) !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(232, 0, 42, .25);
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-primary:hover {
    background: var(--pt-rose) !important;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-primary > .fi-icon {
    color: #fff !important;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-danger {
    background: var(--pt-bad-soft) !important;
    color: var(--pt-bad) !important;
    box-shadow: none;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-danger > .fi-icon {
    color: var(--pt-bad) !important;
}

.fi-panel-admin .fi-modal-footer .fi-btn:not(.fi-outlined).fi-color-danger,
.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-danger:hover {
    background: #d92b33 !important;
    color: #fff !important;
}

.fi-panel-admin .fi-modal-footer .fi-btn:not(.fi-outlined).fi-color-danger > .fi-icon,
.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-danger:hover > .fi-icon {
    color: #fff !important;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-success {
    background: var(--pt-ok-soft) !important;
    color: var(--pt-ok) !important;
    box-shadow: none;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-success > .fi-icon {
    color: var(--pt-ok) !important;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-warning {
    background: var(--pt-warn-soft) !important;
    color: var(--pt-warn) !important;
    box-shadow: none;
}

.fi-panel-admin .fi-btn:not(.fi-outlined).fi-color-warning > .fi-icon {
    color: var(--pt-warn) !important;
}

.fi-panel-admin .fi-btn.fi-outlined {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pt-line-strong);
}

.fi-panel-admin .fi-icon-btn {
    border-radius: 999px;
}

.fi-panel-admin .fi-link {
    font-weight: 500;
}

/* inputs: pill fields, rounded areas */
.fi-panel-admin .fi-input-wrp {
    border-radius: 999px;
    background: var(--pt-field);
    box-shadow: none;
    border: 1px solid var(--pt-line-strong);
    --tw-ring-color: transparent;
    transition: border-color .2s, box-shadow .2s;
}

.fi-panel-admin .fi-input-wrp:focus-within {
    border-color: var(--pt-rose-ink);
    box-shadow: 0 0 0 3px var(--pt-rose-soft);
}

.fi-panel-admin .fi-input-wrp:has(textarea),
.fi-panel-admin .fi-input-wrp:has(.fi-fo-rich-editor),
.fi-panel-admin .fi-input-wrp:has(.fi-fo-markdown-editor),
.fi-panel-admin .fi-input-wrp:has(.fi-fo-key-value),
.fi-panel-admin .fi-input-wrp:has(.fi-fo-tags-input-tags-ctn),
.fi-panel-admin .fi-input-wrp:has(.fi-select-input-multiple),
.fi-panel-admin .fi-fo-rich-editor,
.fi-panel-admin .fi-fo-markdown-editor {
    border-radius: 18px;
}

.fi-panel-admin .fi-input-wrp-prefix,
.fi-panel-admin .fi-input-wrp-suffix {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-input-wrp.fi-disabled {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-input,
.fi-panel-admin .fi-select-input,
.fi-panel-admin textarea.fi-input {
    color: var(--pt-fg);
}

.fi-panel-admin .fi-input::placeholder {
    color: var(--pt-faint);
}

.fi-panel-admin .fi-fo-field-label-content,
.fi-panel-admin .fi-fo-field-wrp-label {
    font-weight: 500;
}

.fi-panel-admin .fi-fo-field-wrp-helper-text,
.fi-panel-admin .fi-fo-field-wrp-hint {
    color: var(--pt-muted);
}

.fi-panel-admin .fi-fo-file-upload .filepond--panel-root {
    border-radius: 18px;
    background: var(--pt-field);
    border: 1px dashed var(--pt-line-strong);
}

.fi-panel-admin .fi-fo-file-upload .filepond--drop-label {
    color: var(--pt-muted);
}

/* checkboxes (the design's .tick), radios, toggles */
.fi-panel-admin .fi-checkbox-input {
    border-radius: 7px;
    border: 1.5px solid var(--pt-line-strong);
    background-color: transparent;
    --tw-ring-color: transparent;
}

.fi-panel-admin .fi-checkbox-input:checked,
.fi-panel-admin .fi-checkbox-input:indeterminate {
    background-color: var(--pt-rose-btn);
    border-color: var(--pt-rose-btn);
}

.fi-panel-admin .fi-radio-input:checked {
    background-color: var(--pt-rose-btn);
    border-color: var(--pt-rose-btn);
}

.fi-panel-admin .fi-toggle.fi-toggle-on,
.fi-panel-admin .fi-toggle.fi-color.fi-toggle-on {
    background-color: var(--pt-rose-btn) !important;
}

.fi-panel-admin .fi-toggle.fi-toggle-off {
    background-color: var(--pt-track) !important;
}

/* tabs: the design's segmented control (.seg) */
.fi-panel-admin .fi-tabs:not(.fi-vertical) {
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--pt-chip);
    border: 0;
    box-shadow: none;
    width: fit-content;
    max-width: 100%;
    scrollbar-width: none;
}

.fi-panel-admin .fi-tabs:not(.fi-vertical).fi-contained {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    margin: 12px 12px 4px;
}

.fi-panel-admin .fi-tabs-item {
    border-radius: 999px;
    padding: 7px 14px;
}

.fi-panel-admin .fi-tabs-item .fi-tabs-item-label {
    color: var(--pt-muted);
}

.fi-panel-admin .fi-tabs-item:hover {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-tabs-item.fi-active {
    background: var(--pt-glass-strong);
    box-shadow: var(--pt-shadow-sm);
}

.fi-panel-admin .fi-tabs-item.fi-active .fi-tabs-item-label,
.fi-panel-admin .fi-tabs-item.fi-active > .fi-icon {
    color: var(--pt-fg);
}

.fi-panel-admin .fi-tabs-item.fi-active::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pt-rose);
    flex: none;
}

.fi-panel-admin .fi-tabs-item .fi-badge {
    min-width: 20px;
}

/* badges: the design's chips (.tag) */
.fi-panel-admin .fi-badge {
    border-radius: 999px;
    --tw-ring-color: transparent !important;
    box-shadow: none;
    padding-inline: 9px;
    font-weight: 500;
    background: var(--pt-chip);
    color: var(--pt-muted);
}

.fi-panel-admin .fi-badge.fi-color-primary,
.fi-panel-admin .fi-badge.fi-color-danger {
    background: var(--pt-rose-soft);
    color: var(--pt-rose-ink);
}

.fi-panel-admin .fi-badge.fi-color-danger {
    background: var(--pt-bad-soft);
    color: var(--pt-bad);
}

.fi-panel-admin .fi-badge.fi-color-success {
    background: var(--pt-ok-soft);
    color: var(--pt-ok);
}

.fi-panel-admin .fi-badge.fi-color-warning {
    background: var(--pt-warn-soft);
    color: var(--pt-warn);
}

.fi-panel-admin .fi-badge.fi-color-info {
    background: var(--pt-info-soft);
    color: var(--pt-info);
}

.fi-panel-admin .fi-badge.fi-color-gold,
.fi-panel-admin .fi-badge.fi-color-secondary {
    background: var(--pt-gold-soft);
    color: var(--pt-gold-ink);
}

.fi-panel-admin .fi-badge .fi-icon {
    color: currentColor !important;
}

/* pagination */
.fi-panel-admin .fi-pagination-items,
.fi-panel-admin .fi-pagination-item-btn {
    border-radius: 999px;
}

.fi-panel-admin .fi-pagination-items {
    background: var(--pt-chip);
    box-shadow: none;
    --tw-ring-color: transparent;
}

.fi-panel-admin .fi-pagination-item.fi-active .fi-pagination-item-btn {
    background: var(--pt-rose-btn);
}

.fi-panel-admin .fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #fff;
}

/* breadcrumbs */
.fi-panel-admin .fi-breadcrumbs-item-separator {
    color: var(--pt-faint);
}

/* =====================================================================
   8 · Tables (glass, chip header row) and infolists
   ===================================================================== */
.fi-panel-admin .fi-ta-header {
    padding: 16px 18px 6px;
}

.fi-panel-admin .fi-ta-header-heading {
    font-size: 1.06rem;
    font-weight: 600;
}

.fi-panel-admin .fi-ta-header-toolbar {
    border-color: var(--pt-line);
    background: transparent;
}

.fi-panel-admin .fi-ta-content-ctn,
.fi-panel-admin .fi-ta-content {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-ta-table {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-ta-table > thead > tr {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-ta-table > thead > tr > th {
    background: transparent;
}

.fi-panel-admin .fi-ta-header-cell,
.fi-panel-admin .fi-ta-header-cell-label {
    color: var(--pt-muted);
    font-weight: 500;
    font-size: 12.5px;
}

.fi-panel-admin .fi-ta-table > tbody,
.fi-panel-admin .fi-ta-table > tbody > tr,
.fi-panel-admin .fi-ta-table > thead > tr {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-ta-table > tbody > tr:hover > td,
.fi-panel-admin .fi-ta-row.fi-clickable:hover {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-ta-row.fi-selected,
.fi-panel-admin .fi-ta-table > tbody > tr.fi-selected > td {
    background: var(--pt-pink-soft);
}

.fi-panel-admin .fi-ta-row.fi-striped {
    background: var(--pt-chip);
}

.fi-panel-admin .fi-ta-selection-indicator,
.fi-panel-admin .fi-ta-group-header {
    background: var(--pt-chip);
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-ta-footer,
.fi-panel-admin .fi-pagination {
    border-color: var(--pt-line);
}

.fi-panel-admin .fi-ta-empty-state-icon-bg {
    background: var(--pt-rose-soft);
}

.fi-panel-admin .fi-ta-empty-state-icon-bg .fi-icon {
    color: var(--pt-rose-ink);
}

.fi-panel-admin .fi-ta-empty-state-description {
    color: var(--pt-muted);
}

.fi-panel-admin .fi-ta-filters-dropdown .fi-dropdown-panel,
.fi-panel-admin .fi-ta-col-manager-dropdown .fi-dropdown-panel {
    padding: 8px;
}

.fi-panel-admin .fi-ta-image img,
.fi-panel-admin .fi-ta-image .fi-ta-image-item {
    border-radius: 12px;
}

/* infolists (the review page: each fact a chip, as the design's .fact; sections as glass) */
.fi-panel-admin .fi-in-entry {
    height: 100%;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--pt-chip);
    row-gap: 4px;
}

.fi-panel-admin .fi-in-entry .fi-in-entry,
.fi-panel-admin .fi-in-entry:has(.fi-in-repeatable, .fi-in-image, .fi-in-key-value, .fi-in-code, iframe, .fi-ta-ctn, .fi-section) {
    padding: 0;
    background: transparent;
}

.fi-panel-admin .fi-in-entry-label,
.fi-panel-admin .fi-in-entry-wrp-label {
    color: var(--pt-muted);
    font-size: 12.5px;
    font-weight: 500;
}

.fi-panel-admin .fi-in-image img {
    border-radius: 14px;
}

.fi-panel-admin .fi-in-key-value,
.fi-panel-admin .fi-fo-key-value {
    border-radius: 16px;
    border-color: var(--pt-line);
}

/* =====================================================================
   9 · Dashboard bento (filament/admin/dashboard/*, widgets/pending-reviews)
   ===================================================================== */
.pt-card {
    border-radius: var(--pt-r-xl);
    padding: 18px;
    min-width: 0;
    color: var(--pt-fg);
    text-decoration: none;
}

a.pt-card,
a.pt-mini,
a.pt-tile {
    transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

a.pt-card:hover,
a.pt-mini:hover,
a.pt-tile:hover {
    transform: translateY(-2px);
}

a.pt-card:focus-visible,
a.pt-mini:focus-visible,
a.pt-tile:focus-visible {
    outline: 2px solid var(--pt-rose-ink);
    outline-offset: 3px;
}

.pt-card-h {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.pt-card-h h3 {
    font-family: var(--pt-display);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.pt-sub {
    display: block;
    font-size: 12px;
    color: var(--pt-muted);
    line-height: 1.5;
}

.pt-eyebrow {
    display: block;
    font-size: 12.5px;
    color: var(--pt-muted);
}

.pt-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    background: var(--pt-chip);
    color: var(--pt-muted);
    white-space: nowrap;
}

.pt-tag.is-ok { background: var(--pt-ok-soft); color: var(--pt-ok); }
.pt-tag.is-bad { background: var(--pt-bad-soft); color: var(--pt-bad); }
.pt-tag.is-warn { background: var(--pt-warn-soft); color: var(--pt-warn); }
.pt-rose { color: var(--pt-rose-ink); }

.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    background: var(--pt-chip);
    color: var(--pt-fg);
    white-space: nowrap;
    text-decoration: none;
    transition: transform .15s, background .2s;
}

.pt-btn:hover { background: var(--pt-line-strong); }
.pt-btn:active { transform: scale(.97); }
.pt-btn.is-primary { background: var(--pt-rose-btn); color: #fff; box-shadow: 0 6px 18px rgba(232, 0, 42, .28); }
.pt-btn.is-primary:hover { background: var(--pt-rose); }
.pt-btn.is-sm { padding: 6px 13px; font-size: 12.5px; }

/* the widgets' own wrappers carry no chrome: the cards inside are the glass */
.fi-panel-admin .pt-dash-overview,
.fi-panel-admin .pt-pending-reviews,
.fi-panel-admin .pt-chat-alert {
    min-width: 0;
}

/* The design's dashboard opens on the live alert and the bento, under the top bar that
   already reads «باتريسيا · لوحة الإدارة»: the page title stays for screen readers only. */
.fi-panel-admin .fi-page:has(.pt-dash-overview, .pt-chat-alert) .fi-header {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.fi-panel-admin .fi-page:has(.pt-dash-overview, .pt-chat-alert) .fi-page-header-main-ctn {
    padding-block-start: 10px;
    row-gap: 14px;
}

.fi-panel-admin .fi-page:has(.pt-dash-overview, .pt-chat-alert) .fi-page-content,
.fi-panel-admin .fi-grid:has(> .fi-sc-liberated > .pt-dash-overview) {
    gap: 14px;
}

/* -- live alert bar (ChatAlertBar) -- */
.pt-alert-live {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 10px 12px;
    border-radius: var(--pt-r-lg);
    border: 1px solid rgba(255, 0, 44, .45) !important;
}

.pt-alert-live.is-clear {
    border-color: var(--pt-line) !important;
    padding-block: 8px;
}

.pt-pulse {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--pt-rose-btn);
    color: #fff;
    box-shadow: 0 0 0 6px var(--pt-rose-soft);
    animation: pt-pulse 2.4s ease-in-out infinite;
}

.pt-pulse svg {
    width: 19px;
    height: 19px;
}

.pt-alert-live.is-clear .pt-pulse {
    background: var(--pt-ok-soft);
    color: var(--pt-ok);
    box-shadow: none;
    animation: none;
}

@keyframes pt-pulse {
    0%, 100% { box-shadow: 0 0 0 6px var(--pt-rose-soft); }
    50% { box-shadow: 0 0 0 10px rgba(255, 0, 44, .06); }
}

.pt-alert-t {
    flex: 1;
    min-width: 0;
    font-size: 14px;
}

.pt-alert-t b {
    font-weight: 600;
    display: block;
}

.pt-alert-t span {
    display: block;
    font-size: 12.5px;
    color: var(--pt-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* -- bento grid -- */
@media (min-width: 80rem) {
    .fi-panel-admin .fi-grid:has(> .fi-sc-liberated > .pt-dash-overview) {
        --cols-xl: minmax(0, 1fr) minmax(0, 1.35fr) !important;
    }

    .fi-panel-admin .fi-grid:has(> .fi-sc-liberated > .pt-dash-overview) > .fi-sc-liberated > .pt-dash-overview {
        grid-row: span 2;
    }
}

.pt-dash-col {
    display: grid;
    gap: 14px;
    align-content: start;
    height: 100%;
}

/* gauge card */
.pt-gauge {
    position: relative;
    margin-block: 8px 4px;
    max-width: 380px;
    margin-inline: auto;
}

.pt-gauge svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.pt-gauge-dots {
    fill: none;
    stroke: var(--pt-faint);
    stroke-width: 5;
    stroke-dasharray: 1.2 7;
    opacity: .7;
}

.pt-gauge-track {
    fill: none;
    stroke: var(--pt-track);
    stroke-width: 13;
    stroke-linecap: round;
}

.pt-gauge-value {
    fill: none;
    stroke-width: 13;
    stroke-linecap: round;
}

.pt-gauge-knob {
    fill: var(--pt-glass-strong);
    stroke: #ff2f55;
    stroke-width: 5;
}

.pt-gauge-tick {
    font-size: 9.5px;
    fill: var(--pt-muted);
    font-family: var(--pt-body);
}

.pt-gauge-center {
    position: absolute;
    inset-inline: 0;
    bottom: 6%;
    text-align: center;
}

.pt-gauge-lbl {
    font-size: 11.5px;
    color: var(--pt-muted);
}

.pt-gauge-val {
    font-family: var(--pt-display);
    font-size: clamp(34px, 3.4vw, 46px);
    font-weight: 700;
    line-height: 1.1;
}

.pt-gauge-val small {
    font-size: .42em;
    color: var(--pt-muted);
    font-weight: 500;
}

.pt-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--pt-muted);
}

.pt-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--pt-chip);
    color: var(--pt-fg);
    font-size: 13px;
}

.pt-pill svg {
    width: 16px;
    height: 16px;
    color: var(--pt-muted);
}

.pt-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-block-start: 14px;
    padding: 10px;
    border-radius: var(--pt-r-lg);
    background: var(--pt-chip);
}

.pt-split > div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pt-pct {
    font-family: var(--pt-display);
    font-size: 19px;
    font-weight: 700;
}

.pt-pct small {
    font-size: 12px;
    color: var(--pt-muted);
}

.pt-bar {
    flex: 1;
    height: 30px;
    border-radius: 999px;
    background: var(--pt-track);
    position: relative;
    overflow: hidden;
}

.pt-bar i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    border-radius: 999px;
    min-width: 30px;
}

.pt-bar.is-rose i { background: linear-gradient(90deg, #ff9ab0, var(--pt-rose)); }
.pt-bar.is-gold i { background: linear-gradient(90deg, #f3d37a, var(--pt-gold)); }

[dir="rtl"] .pt-bar.is-rose i { background: linear-gradient(270deg, #ff9ab0, var(--pt-rose)); }
[dir="rtl"] .pt-bar.is-gold i { background: linear-gradient(270deg, #f3d37a, var(--pt-gold)); }

.pt-bar em {
    position: absolute;
    inset-block: 0;
    inset-inline-end: calc(100% - var(--pt-bar-at, 100%));
    display: flex;
    align-items: center;
    padding-inline: 10px;
    font-style: normal;
    font-size: 11.5px;
    color: #fff;
    white-space: nowrap;
}

.pt-bar.is-gold em { color: #1d1a20; }

.pt-bar.is-label-out em {
    inset-inline-end: auto;
    inset-inline-start: calc(var(--pt-bar-at, 0%) + 2px);
    color: var(--pt-muted);
}

.pt-card-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-block-start: 12px;
    padding: 10px 12px;
    border-radius: 18px;
    background: var(--pt-chip);
    color: var(--pt-fg);
    text-decoration: none;
    font-size: 13px;
    transition: background .2s;
}

a.pt-card-foot:hover {
    background: var(--pt-line-strong);
}

.pt-card-foot-t {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.pt-card-foot-t > span {
    color: var(--pt-muted);
}

.pt-card-foot-t b {
    font-family: var(--pt-display);
    font-size: 16px;
    font-weight: 700;
}

.pt-card-foot-d {
    color: var(--pt-gold-ink);
    font-size: 12.5px;
}

.pt-go {
    margin-inline-start: auto;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--pt-chip);
    color: var(--pt-muted);
}

.pt-go svg {
    width: 16px;
    height: 16px;
}

/* «today» card */
.pt-today {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px dashed var(--pt-line-strong) !important;
    position: relative;
    overflow: hidden;
}

.pt-cal {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    flex: none;
    display: grid;
    place-content: center;
    text-align: center;
    background: linear-gradient(160deg, #ffd0dc, #ff6f91);
    color: #4a0418;
    font-family: var(--pt-display);
    line-height: 1;
    box-shadow: 0 8px 18px rgba(255, 92, 134, .25);
}

.pt-cal b {
    display: block;
    font-size: 28px;
}

.pt-cal span {
    font-size: 11px;
}

.pt-today-t {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 2px;
}

.pt-big {
    font-family: var(--pt-display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
}

.pt-today .pt-muted {
    font-size: 13.5px;
}

.pt-spark {
    width: 110px;
    height: 34px;
    flex: none;
    overflow: visible;
}

.pt-spark polyline {
    fill: none;
    stroke: var(--pt-pink);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.pt-spark.is-mini {
    width: 100%;
    height: 34px;
    margin-block: 6px 2px;
}

/* minis (glass or blue tile) */
.pt-minis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pt-mini {
    border-radius: var(--pt-r-xl);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 150px;
    min-width: 0;
    color: var(--pt-fg);
    text-decoration: none;
}

.pt-mini-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 6px;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}

.pt-mini-row b {
    font-family: var(--pt-display);
    font-size: 22px;
    line-height: 1.1;
}

.pt-mini-ico {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .18);
    margin-inline: auto;
    margin-block-start: 4px;
}

.pt-mini-ico svg {
    width: 21px;
    height: 21px;
}

.pt-mini.pt-glass .pt-mini-ico {
    background: var(--pt-rose-soft);
    color: var(--pt-rose-ink);
}

.pt-mini-lab {
    text-align: center;
    font-size: 12px;
    opacity: .9;
    margin-block-start: auto;
    line-height: 1.5;
}

.pt-mini.pt-glass .pt-mini-lab {
    color: var(--pt-muted);
    opacity: 1;
}

.pt-mini.is-alert {
    border-color: rgba(255, 0, 44, .35) !important;
}

/* coloured tiles */
.pt-dash-tiles {
    display: grid;
    gap: 12px;
    height: 100%;
    align-content: start;
}

.pt-dash-tiles-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 14px;
    flex-wrap: wrap;
    padding-inline: 6px;
}

.pt-dash-tiles-h h3 {
    font-family: var(--pt-display);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

.pt-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.pt-span1 { grid-column: span 1; }
.pt-span2 { grid-column: span 2; }

.pt-tile {
    border-radius: var(--pt-r-xl);
    padding: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 196px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--pt-shadow);
    text-decoration: none;
}

.pt-tile.is-mint { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), var(--pt-tile-mint); }
.pt-tile.is-coral { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .18), transparent 60%), var(--pt-tile-coral); }
.pt-tile.is-blue { background: radial-gradient(120% 90% at 100% 0%, rgba(255, 255, 255, .2), transparent 60%), var(--pt-tile-blue); min-height: 150px; }

.pt-tile .pt-card-h h3 {
    font-size: 16.5px;
    color: #fff;
}

.pt-tile .pt-sub {
    color: rgba(255, 255, 255, .85);
}

.pt-tile.pt-mini .pt-mini-lab {
    color: #fff;
}

.pt-count {
    font-family: var(--pt-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.pt-tile-amount {
    font-family: var(--pt-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.pt-tile-note {
    font-size: 12.5px;
    opacity: .85;
}

.pt-foot {
    margin-block-start: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .18);
    font-size: 12.5px;
}

.pt-foot a,
.pt-foot-link {
    color: #fff;
    text-decoration: none;
}

.pt-foot-link:hover {
    text-decoration: underline;
}

.pt-foot-btn {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .2);
    color: #fff;
    flex: none;
    transition: background .2s;
}

.pt-foot-btn:hover {
    background: rgba(255, 255, 255, .32);
}

.pt-foot-btn svg {
    width: 16px;
    height: 16px;
}

.pt-stack {
    display: flex;
}

.pt-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--pt-display);
    font-weight: 600;
    font-size: 15px;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .7);
    background: linear-gradient(135deg, #f6b6c6, #c2486a);
}

.pt-avatar + .pt-avatar {
    margin-inline-start: -10px;
}

.pt-avatar.is-1 { background: linear-gradient(135deg, #ffe2a3, #c28a10); }
.pt-avatar.is-2 { background: linear-gradient(135deg, #bfe3ff, #3d6fb8); }

/* other queues */
.pt-queue {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
}

.pt-queue-h {
    font-size: 12.5px;
    color: var(--pt-muted);
    padding: 2px 6px 4px;
}

.pt-queue-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 14px;
    color: var(--pt-fg);
    text-decoration: none;
    font-size: 13.5px;
    transition: background .15s;
}

a.pt-queue-row:hover {
    background: var(--pt-chip);
}

.pt-queue-ico {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--pt-pink-soft);
    color: var(--pt-pink);
}

.pt-queue-ico svg {
    width: 17px;
    height: 17px;
}

.pt-queue-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pt-chip-count {
    min-width: 28px;
    padding: 1px 8px;
    border-radius: 999px;
    text-align: center;
    font-weight: 600;
    font-size: 12.5px;
    background: var(--pt-chip);
    color: var(--pt-muted);
}

.pt-chip-count.is-warn {
    background: var(--pt-gold-soft);
    color: var(--pt-gold-ink);
}

/* chart widget (CardScansChart) and the flagged table as glass cards */
.fi-panel-admin .fi-wi-chart .fi-section {
    border-radius: var(--pt-r-xl);
    height: 100%;
}

.fi-panel-admin .fi-wi-chart .fi-section-header-heading {
    font-size: 17px;
}

.fi-panel-admin .fi-wi-chart .fi-section-content-ctn,
.fi-panel-admin .fi-wi-chart .fi-section-header {
    border-color: transparent;
}

.fi-panel-admin .fi-wi-chart .fi-section-content {
    padding-block-start: 0;
}

/* stat cards used elsewhere (reports page) */
.fi-panel-admin .fi-wi-stats-overview-stat {
    padding: 18px 20px;
}

.fi-panel-admin .fi-wi-stats-overview-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
}

/* legacy queue rows (kept for any page still using them) */
.pt-review-list { display: grid; gap: 8px; }
.pt-count.is-warn { color: var(--pt-gold-ink); }
.pt-count.is-alert { color: var(--pt-bad); }

/* settings page hints */
.pt-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--pt-gold-soft);
    color: var(--pt-fg);
    font-size: .85rem;
    line-height: 1.7;
}

.pt-note.is-pink {
    background: var(--pt-rose-soft);
}

/* =====================================================================
   10 · Sign-in page (simple layout)
   ===================================================================== */
.fi-panel-admin .fi-simple-layout {
    background: transparent;
}

.fi-panel-admin .fi-simple-main-ctn {
    padding-block: 32px;
}

.fi-panel-admin .fi-simple-main {
    background: var(--pt-glass);
    -webkit-backdrop-filter: var(--pt-blur);
    backdrop-filter: var(--pt-blur);
    border: 1px solid var(--pt-line);
    box-shadow: var(--pt-shadow);
    border-radius: var(--pt-r-xl);
    --tw-ring-color: transparent;
    padding: 34px 32px 30px;
}

.fi-panel-admin .fi-simple-header {
    margin-block-end: 6px;
}

.fi-panel-admin .fi-simple-header .fi-logo {
    height: auto !important;
    margin-block-end: 14px;
}

.fi-panel-admin .fi-simple-header .pt-brand {
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.fi-panel-admin .fi-simple-header .pt-brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 20px;
}

.fi-panel-admin .fi-simple-header .pt-brand-logo::after {
    inset: 9px;
}

.fi-panel-admin .fi-simple-header .pt-brand-name {
    font-size: 24px;
    font-weight: 700;
}

.fi-panel-admin .fi-simple-header-heading {
    font-size: 1.45rem;
    font-weight: 700;
}

.fi-panel-admin .fi-simple-main .fi-btn.fi-color-primary {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
}

@media (max-width: 640px) {
    .fi-panel-admin .fi-simple-main {
        padding: 26px 18px 22px;
        margin-inline: 12px;
    }
}

/* =====================================================================
   11 · Smaller screens
   ===================================================================== */
@media (max-width: 79.999rem) {
    .pt-gauge-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 48rem) and (max-width: 79.999rem) {
    /* one column of widgets: the overview lays its cards side by side */
    .pt-dash-col {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .pt-dash-col > .pt-gauge-card {
        grid-row: span 2;
    }
}

@media (max-width: 860px) {
    .pt-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pt-tiles > .pt-span2 {
        grid-column: span 2;
    }

    .pt-mark-big {
        width: 70vw;
        inset-inline-start: -8%;
        top: 14%;
    }

    .pt-mark-small,
    .pt-stage-slats {
        display: none;
    }

    .pt-greeting {
        display: none !important;
    }
}

@media (max-width: 520px) {
    .pt-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .pt-today {
        gap: 12px;
    }

    .pt-today .pt-spark {
        display: none;
    }

    .pt-cal {
        width: 60px;
        height: 60px;
        border-radius: 18px;
    }

    .pt-big {
        font-size: 30px;
    }

    .pt-tile {
        min-height: 170px;
    }

    .pt-count {
        font-size: 34px;
    }

    .pt-alert-live .pt-btn {
        width: 100%;
    }

    .fi-panel-admin .fi-header-heading {
        font-size: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-panel-admin *,
    .pt-pulse {
        transition: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .fi-panel-admin .pt-glass,
    .fi-panel-admin .fi-topbar,
    .fi-panel-admin .fi-main-sidebar,
    .fi-panel-admin .fi-section,
    .fi-panel-admin .fi-ta-ctn,
    .fi-panel-admin .fi-wi-stats-overview-stat,
    .fi-panel-admin .fi-modal-window,
    .fi-panel-admin .fi-dropdown-panel,
    .fi-panel-admin .fi-simple-main {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--pt-bg-2);
    }
}