/* =========================================================================
   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 Plus Jakarta Sans, declared once in
   public/ariana-assets/panel.css from the static weights that DO ship, so the
   variables below simply name that family and fall back to the system stack.
   ------------------------------------------------------------------------- */

:root {
    --ariana-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', 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;
    --ariana-border-1:  #26262c;
    --ariana-border-2:  #34343c;

    --ariana-text:      #e4e4e7;
    --ariana-text-dim:  #a1a1aa;
    --ariana-text-faint:#71717a;

    --ariana-good: #22c55e;
    --ariana-ok:   #f59e0b;
    --ariana-bad:  #ef4444;
    --ariana-link: #818cf8;

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

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */
.fi-body {
    font-family: var(--ariana-font);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.011em;
}

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

.fi-header-heading {
    font-weight: 620;
    letter-spacing: -0.025em;
}

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: 450;
    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;
}

.fi-sidebar-group-label {
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    font-weight: 600;
    opacity: 0.55;
}

/* -------------------------------------------------------------------------
   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: 550;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    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: 520;
    letter-spacing: -0.005em;
}

/* =========================================================================
   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: 0.8125rem; line-height: 1.5; }
.ariana-tiny       { font-size: 0.75rem; }
.ariana-label      { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; 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: 0.8125rem;
    line-height: 1.5;
    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: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ariana-text);
}

.ariana-score__max   { font-size: 0.875rem; color: var(--ariana-text-faint); }
.ariana-score__grade { font-size: 0.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: 0.8125rem; }
.ariana-serp__title { color: #99c3ff; font-size: 1.125rem; line-height: 1.35; margin: 0.25rem 0; }
.ariana-serp__desc  { color: #bdc1c6; font-size: 0.8125rem; line-height: 1.55; }

.ariana-counts      { display: flex; gap: 1rem; margin-top: 0.5rem; font-size: 0.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: 0.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: 0.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: 0.8125rem; line-height: 1.7; }
.ariana-help li     { margin-bottom: 0.25rem; }
.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: 0.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: 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;
    }
}