/* =========================================================================
   Ariana CMS - admin theme
   =========================================================================

   Plain CSS on purpose. No Tailwind directives, no @apply, no build step.

   It is registered through Filament's own asset system in
   ArianaServiceProvider and published by `php artisan filament:assets`, so a
   fresh install renders correctly without Node ever being present. An earlier
   version was a Vite theme, which meant a missing `npm run build` took the
   whole panel down with a VideManifestNotFoundException.

   Everything below either overrides Filament's own classes or defines the
   `ariana-` components used by the custom Blade views.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typeface.

   This file used to declare @font-face for Geist and Geist Mono, pointing at
   /fonts/Geist-Variable.woff2 and /fonts/GeistMono-Variable.woff2 — files
   Ariana has never shipped. Every panel page therefore fetched two 404s. The
   panel's real typeface is declared once in public/ariana-assets/panel.css —
   Vazirmatn for the Arabic script, the Apple system face on Apple hardware,
   Inter (which DOES ship) everywhere else — and the variable below is that
   same stack, word for word (invariant 263).
   ------------------------------------------------------------------------- */

:root {
    --ariana-font: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Inter', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
    --ariana-mono: ui-monospace, 'SFMono-Regular', monospace;

    --ariana-surface-0: #09090b;
    --ariana-surface-1: #101013;
    --ariana-surface-2: #17171b;
    --ariana-surface-3: #1f1f24;
    /* Lines and ink follow the panel's MODE-AWARE layer (panel.css, --ar-*),
       with the old fixed values as the fallback for a sheet that loads alone.
       They were fixed dark-mode zinc before 1.72.6, so on the light panel
       every row separator drew near-black and muted text sat at 2.6:1 on
       white (invariant 265). */
    --ariana-border-1:  var(--ar-line, #26262c);
    --ariana-border-2:  var(--ar-line-strong, #34343c);

    --ariana-text:      var(--ar-ink, #e4e4e7);
    --ariana-text-dim:  var(--ar-ink-dim, #a1a1aa);
    --ariana-text-faint:var(--ar-ink-mute, #71717a);

    --ariana-good: #22c55e;
    --ariana-ok:   #f59e0b;
    --ariana-bad:  #ef4444;
    --ariana-link: var(--ar-accent-ink, #818cf8);

    --ariana-radius: 0.625rem;
    --ariana-ease:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.fi-body {
    font-family: var(--ariana-font);
    /* No character variants and no tracking here (invariant 263). cv11 gave
       Inter a single-storey "a" and cv02–04 open digits — San Francisco has
       neither — and on a Mac the same tags and a negative tracking land on
       the SYSTEM face, which already tracks itself by size. Inter's -0.011em
       is added by the panel provider for the machines that use Inter. */
    font-feature-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: normal;
}

.dark .fi-body {
    background-color: var(--ariana-surface-0);
}

.fi-header-heading {
    font-weight: 600;
    letter-spacing: normal;
}

code, kbd, pre, samp {
    font-family: var(--ariana-mono);
}

/* -------------------------------------------------------------------------
   Sidebar and topbar
   ------------------------------------------------------------------------- */
.dark .fi-sidebar {
    background-color: var(--ariana-surface-1);
    border-inline-end: 1px solid var(--ariana-border-1);
}

.dark .fi-topbar > nav {
    background-color: rgba(9, 9, 11, 0.82);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ariana-border-1);
    box-shadow: none;
}

.fi-sidebar-item-button {
    border-radius: var(--ariana-radius);
    font-weight: 400;
    transition: background-color 0.15s var(--ariana-ease), color 0.15s var(--ariana-ease);
}

.dark .fi-sidebar-item-button:hover {
    background-color: var(--ariana-surface-3);
}

.dark .fi-sidebar-item-active .fi-sidebar-item-button {
    background-color: rgba(99, 102, 241, 0.14);
    color: #a5b4fc;
}

/* No opacity here. `opacity: .55` on top of a muted ink measured 2.81:1 —
   the collapsed sidebar, where these headings ARE the navigation, was
   unreadable (field report, 1.72.7). Colour and size live in panel.css. */
.fi-sidebar-group-label {
    font-weight: 600;
}

/* -------------------------------------------------------------------------
   Surfaces
   ------------------------------------------------------------------------- */
.dark .fi-section,
.dark .fi-wi-stats-overview-stat,
.dark .fi-ta-ctn,
.dark .fi-modal-window {
    background-color: var(--ariana-surface-1);
    border: 1px solid var(--ariana-border-1);
    box-shadow: none;
    border-radius: calc(var(--ariana-radius) * 1.2);
}

.dark .fi-ta-header-cell {
    background-color: var(--ariana-surface-2);
    font-weight: 500;
    font-size: var(--ar-fs-footnote, .75rem);
    letter-spacing: normal;
    text-transform: uppercase;
    opacity: 0.7;
}

.dark .fi-ta-row {
    transition: background-color 0.12s var(--ariana-ease);
}

.dark .fi-ta-row:hover {
    background-color: var(--ariana-surface-2);
}

.dark .fi-input,
.dark .fi-select-input,
.dark .fi-fo-textarea textarea {
    background-color: var(--ariana-surface-2);
    border-color: var(--ariana-border-2);
    border-radius: var(--ariana-radius);
}

.dark .fi-input:focus,
.dark .fi-select-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.22);
}

.fi-btn {
    border-radius: var(--ariana-radius);
    font-weight: 500;
    letter-spacing: normal;
}

/* =========================================================================
   Ariana components
   These replace the Tailwind utility classes the custom Blade views used to
   rely on. Utilities with arbitrary values were never present in Filament's
   precompiled stylesheet, so those views rendered unstyled without a build.
   ========================================================================= */

/* ---- layout helpers ---- */
.ariana-stack      { display: flex; flex-direction: column; gap: 1rem; }
.ariana-row        { display: flex; align-items: center; gap: 0.75rem; }
.ariana-row--between { justify-content: space-between; }
.ariana-grid-2     { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.ariana-mt-sm      { margin-top: 0.5rem; }
.ariana-mt         { margin-top: 1rem; }
.ariana-muted      { color: var(--ariana-text-dim); }
.ariana-faint      { color: var(--ariana-text-faint); }
.ariana-small      { font-size: var(--ar-fs-sub, .8125rem); line-height: var(--ar-lh-text, 1.45); }
.ariana-tiny       { font-size: var(--ar-fs-footnote, .75rem); }
.ariana-label      { font-size: var(--ar-fs-footnote, .75rem); text-transform: uppercase; letter-spacing: var(--ar-tracking-caps, .03em); color: var(--ariana-text-faint); }

/* ---- SEO traffic lights ---- */
.ariana-seo-bullet {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

.ariana-seo-bullet--bad  { background: var(--ariana-bad);  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); }
.ariana-seo-bullet--ok   { background: var(--ariana-ok);   box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18); }
.ariana-seo-bullet--good { background: var(--ariana-good); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }

.ariana-seo-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.5rem 0;
    font-size: var(--ar-fs-sub, .8125rem);
    line-height: var(--ar-lh-text, 1.45);
    border-bottom: 1px solid var(--ariana-border-1);
    color: var(--ariana-text-dim);
}

.ariana-seo-check:last-child { border-bottom: 0; }
.ariana-seo-check__bullet    { margin-top: 0.25rem; }

/* ---- score cards ---- */
.ariana-score {
    border: 1px solid var(--ariana-border-1);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--ariana-radius);
    padding: 0.75rem 0.875rem;
}

.ariana-score__value {
    margin-top: 0.25rem;
    font-size: var(--ar-fs-title2, 1.375rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ariana-text);
}

.ariana-score__max   { font-size: var(--ar-fs-body, .875rem); color: var(--ariana-text-faint); }
.ariana-score__grade { font-size: var(--ar-fs-footnote, .75rem); color: var(--ariana-text-faint); }

/* ---- Google result preview ---- */
.ariana-serp {
    background: var(--ariana-surface-2);
    border: 1px solid var(--ariana-border-1);
    border-radius: var(--ariana-radius);
    padding: 1rem 1.125rem;
    font-family: arial, sans-serif;
}

.ariana-serp__url   { color: #8ab4f8; font-size: var(--ar-fs-sub, .8125rem); }
.ariana-serp__title { color: #99c3ff; font-size: var(--ar-fs-title3, 1.0625rem); line-height: var(--ar-lh-ui, 1.35); margin: 0.25rem 0; }
.ariana-serp__desc  { color: #bdc1c6; font-size: var(--ar-fs-sub, .8125rem); line-height: var(--ar-lh-text, 1.45); }

.ariana-counts      { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: var(--ar-fs-footnote, .75rem); color: var(--ariana-text-faint); }
.ariana-count-over  { color: var(--ariana-bad); font-weight: 600; }

/* ---- health widget ---- */
.ariana-issues        { list-style: none; margin: 0; padding: 0; }
.ariana-issues__item  {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--ariana-border-1);
}
.ariana-issues__item:last-child { border-bottom: 0; }
.ariana-issues__link  { flex-shrink: 0; font-size: var(--ar-fs-footnote, .75rem); font-weight: 500; color: var(--ariana-link); text-decoration: none; }
.ariana-issues__link:hover { text-decoration: underline; }
.ariana-issues__ok    { display: flex; align-items: center; gap: 0.5rem; font-size: var(--ar-fs-body, .875rem); color: var(--ariana-good); }

/* ---- media grid ---- */
.ariana-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.ariana-media-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ariana-radius);
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--ariana-surface-2);
    cursor: pointer;
    transition: border-color 0.15s var(--ariana-ease), transform 0.15s var(--ariana-ease);
}

.ariana-media-item:hover { transform: translateY(-2px); }
.ariana-media-item[aria-selected='true'] { border-color: #6366f1; }
.ariana-media-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- helper list used on the theme upload page ---- */
.ariana-help        { padding-inline-start: 1.25rem; list-style: disc outside; margin: 0; color: var(--ariana-text-dim); font-size: var(--ar-fs-sub, .8125rem); line-height: var(--ar-lh-prose, 1.6); }
.ariana-help li     { margin-bottom: 0.25rem; }
/* The contract Help modals number their steps. */
.ariana-help-modal ol.ariana-help { list-style: decimal outside; }
.ariana-help-modal ol.ariana-help li { margin-bottom: 0.6rem; }
.ariana-help-modal p { margin: 0 0 0.75rem; font-size: var(--ar-fs-body, .875rem); line-height: var(--ar-lh-text, 1.45); }
.ariana-help code   { font-family: var(--ariana-mono); font-size: 0.78em; background: var(--ariana-surface-2); padding: 0.1em 0.35em; border-radius: 0.25rem; }

/* ---- form action bar ---- */
.ariana-actions     { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap; }
.ariana-actions__note { font-size: var(--ar-fs-sub, .8125rem); color: var(--ariana-text-faint); }

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .fi-main { padding-inline: 1rem; }
    .ariana-media-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}

@media (max-width: 640px) {
    .fi-header-heading { font-size: var(--ar-fs-title2, 1.375rem); }
    .ariana-serp       { padding: 0.75rem; }
    .ariana-grid-2     { grid-template-columns: 1fr; }
    .ariana-issues__item { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
}

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