/* ==========================================================================
   Dashlyra - a dashboard template for the clients' panel.
   Design after the "Dashlyra Tailwind SaaS Dashboard" theme (nextsoftdev.com): a white sidebar with soft rounded menu rows and a tinted
   active row, a white top bar, a pale slate page, white rounded cards with a hairline border, slate text, rounded controls, and a
   light and a dark mode. Flat colours only.

   Presentation only: it loads AFTER public/css/nero-sidebar.css (the default look) and restyles the same Filament classes, so every
   page, form and permission works as before. It is scoped to <html data-dash-template="dashlyra"> (set by App\Services\DashboardTemplates),
   so with another template active none of it applies. The accent colour is the user's own colour theme (--primary-*), as everywhere.
   Logical properties are used so right-to-left languages mirror correctly.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens (the default look reads these, so most of it follows) */

html.fi[data-dash-template='dashlyra'] {
    --topbar-height: 4rem;

    /* "navy" is the sidebar: white here, with slate text. */
    --ynex-navy: #ffffff;
    --ynex-navy-hover: #f1f5f9;
    --ynex-navy-active: rgba(var(--primary-500), 0.1);
    --ynex-navy-text: #475569;
    --ynex-navy-muted: #94a3b8;
    --ynex-navy-line: #e2e8f0;

    --ynex-body: #f8fafc;
    --ynex-card: #ffffff;
    --ynex-line: #e2e8f0;
    --ynex-heading: #0f172a;
    --ynex-muted: #64748b;
    --ynex-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    --ynex-radius: 0.75rem;

    --dy-radius-card: 1rem;
    --nf-card-radius: var(--dy-radius-card); /* the list tabs (public/css/nero-lists.css) use the corner size of the cards */
    --dy-active-text: rgb(var(--primary-600));
    --dy-ring: rgba(var(--primary-500), 0.2);
}

html.fi.dark[data-dash-template='dashlyra'] {
    --ynex-navy: #0f172a;
    --ynex-navy-hover: #1e293b;
    --ynex-navy-active: rgba(var(--primary-500), 0.2);
    --ynex-navy-text: #cbd5e1;
    --ynex-navy-muted: #64748b;
    --ynex-navy-line: #1e293b;

    --ynex-body: #020617;
    --ynex-card: #0f172a;
    --ynex-line: #1e293b;
    --ynex-heading: #f1f5f9;
    --ynex-muted: #94a3b8;
    --ynex-shadow: none;

    --dy-active-text: rgb(var(--primary-300));
}

/* The font of the template (Plus Jakarta Sans), unless an admin chose another one for the dashboard under Platform settings > Appearance. */
html.fi[data-dash-template='dashlyra'][data-dash-font='template'] body {
    font-family: 'Plus Jakarta Sans', 'Zain Arabic', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html.fi[data-dash-template='dashlyra'] code,
html.fi[data-dash-template='dashlyra'] kbd,
html.fi[data-dash-template='dashlyra'] pre {
    font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ sidebar: white, hairline border, rounded rows */

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar.fi-main-sidebar {
    border-inline-end: 1px solid var(--ynex-navy-line);
}

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-header {
    border-bottom-color: var(--ynex-navy-line);
}

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-header .fi-logo,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-header a,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-header div {
    color: var(--ynex-heading);
}

html.fi[data-dash-template='dashlyra'] .nf-brand-name .nf-name-head { color: var(--ynex-heading); }
html.fi[data-dash-template='dashlyra'] .nf-brand-name .nf-name-tail { color: var(--dy-active-text); }

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-header .fi-icon-btn:hover {
    color: var(--ynex-heading);
}

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-nav {
    scrollbar-color: #cbd5e1 transparent;
}

html.fi.dark[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-nav {
    scrollbar-color: #334155 transparent;
}

/* Menu rows: rounded-xl, a little taller, like the theme's. */
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item-button,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-group-button {
    padding: 0.5625rem 0.75rem;
    border-radius: 0.75rem;
}

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-label,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-group-label {
    font-weight: 500;
}

/* Hover: a slate wash and darker text (the default look turns the text white, which is invisible on white). */
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-label,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item .fi-sidebar-item-button:hover .fi-sidebar-item-icon,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-group-collapse-button:hover {
    color: var(--ynex-heading);
}

/* The page you are on: a tinted row with a thin ring and the accent colour (the theme's "bg-brand/10 text-brand ring-1 ring-brand/20"). */
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button:hover {
    box-shadow: inset 0 0 0 1px var(--dy-ring), 0 1px 2px rgba(15, 23, 42, 0.06);
}

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label,
html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-group.fi-active .fi-dropdown-trigger button svg {
    color: var(--dy-active-text);
}

html.fi[data-dash-template='dashlyra'] aside.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-grouped-border .rounded-full {
    background-color: var(--dy-active-text);
}

/* ------------------------------------------------------------------ top bar: white, hairline border, a little taller */

html.fi[data-dash-template='dashlyra'] .fi-topbar > nav {
    border-bottom-color: var(--ynex-line);
}

html.fi[data-dash-template='dashlyra'] .fi-topbar .fi-icon-btn:hover {
    background-color: var(--ynex-navy-hover);
}

html.fi[data-dash-template='dashlyra'] .fi-topbar .fi-avatar {
    box-shadow: 0 0 0 2px var(--ynex-line);
}

/* ------------------------------------------------------------------ page header */

html.fi[data-dash-template='dashlyra'] .fi-header-heading {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

html.fi[data-dash-template='dashlyra'] .fi-breadcrumbs-item-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ cards: rounded-2xl, hairline border, soft shadow */

html.fi[data-dash-template='dashlyra'] .fi-section,
html.fi[data-dash-template='dashlyra'] .fi-ta-ctn,
html.fi[data-dash-template='dashlyra'] .fi-wi-stats-overview-stat,
html.fi[data-dash-template='dashlyra'] .fi-simple-main,
html.fi[data-dash-template='dashlyra'] .fi-modal-window,
html.fi[data-dash-template='dashlyra'] .fi-fo-tabs {
    border-radius: var(--dy-radius-card);
    border: 1px solid var(--ynex-line);
    box-shadow: var(--ynex-shadow);
}

/* The language picker of a form wraps fields, it is not a card: no border, radius or shadow. */
html.fi[data-dash-template='dashlyra'] .fi-fo-tabs.nf-lang-tabs {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The figures of the dashboard: a quiet label, a big semibold value (as the theme's KPI cards). */
html.fi[data-dash-template='dashlyra'] .fi-wi-stats-overview-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ynex-muted);
}

html.fi[data-dash-template='dashlyra'] .fi-wi-stats-overview-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

html.fi[data-dash-template='dashlyra'] .fi-section-header-heading {
    font-weight: 600;
}

/* ------------------------------------------------------------------ tables: a pale header row with small uppercase labels */

html.fi[data-dash-template='dashlyra'] .fi-ta-table thead {
    background-color: rgba(248, 250, 252, 0.7);
}

html.fi.dark[data-dash-template='dashlyra'] .fi-ta-table thead {
    background-color: rgba(30, 41, 59, 0.4);
}

html.fi[data-dash-template='dashlyra'] .fi-ta-header-cell {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ynex-muted);
}

html.fi[data-dash-template='dashlyra'] .fi-ta-header-cell-label,
html.fi[data-dash-template='dashlyra'] .fi-ta-header-cell button,
html.fi[data-dash-template='dashlyra'] .fi-ta-header-cell button span {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

html.fi[data-dash-template='dashlyra'] .fi-ta-row:hover {
    background-color: rgba(241, 245, 249, 0.6);
}

html.fi.dark[data-dash-template='dashlyra'] .fi-ta-row:hover {
    background-color: rgba(30, 41, 59, 0.5);
}

/* ------------------------------------------------------------------ controls: rounded-xl buttons and inputs, slate borders, accent focus ring */

html.fi[data-dash-template='dashlyra'] .fi-btn {
    border-radius: 0.75rem;
    font-weight: 600;
}

html.fi[data-dash-template='dashlyra'] .fi-btn.fi-size-sm {
    border-radius: 0.5rem;
}

html.fi[data-dash-template='dashlyra'] .fi-input-wrp,
html.fi[data-dash-template='dashlyra'] .fi-fo-select .fi-input-wrp {
    border-radius: 0.75rem;
    --tw-ring-color: #e2e8f0;
}

html.fi.dark[data-dash-template='dashlyra'] .fi-input-wrp {
    --tw-ring-color: #334155;
    background-color: #1e293b;
}

html.fi[data-dash-template='dashlyra'] .fi-input-wrp:focus-within {
    --tw-ring-color: rgb(var(--primary-600));
    box-shadow: 0 0 0 1px rgb(var(--primary-600)), 0 0 0 4px var(--dy-ring);
}

html.fi[data-dash-template='dashlyra'] .fi-fo-field-wrp-label span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ynex-muted);
}

html.fi[data-dash-template='dashlyra'] .fi-dropdown-panel {
    border-radius: 0.875rem;
}

html.fi[data-dash-template='dashlyra'] .fi-badge {
    font-weight: 600;
}

/* ------------------------------------------------------------------ thin scrollbars, as in the theme */

html.fi[data-dash-template='dashlyra'],
html.fi[data-dash-template='dashlyra'] body {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 rgba(148, 163, 184, 0.2);
}

html.fi.dark[data-dash-template='dashlyra'],
html.fi.dark[data-dash-template='dashlyra'] body {
    scrollbar-color: #64748b rgba(51, 65, 85, 0.55);
}

html.fi[data-dash-template='dashlyra'] ::-webkit-scrollbar {
    width: 0.6875rem;
    height: 0.6875rem;
}

html.fi[data-dash-template='dashlyra'] ::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.2);
}

html.fi[data-dash-template='dashlyra'] ::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border: 2px solid transparent;
    border-radius: 999px;
    background-clip: padding-box;
}

html.fi.dark[data-dash-template='dashlyra'] ::-webkit-scrollbar-track {
    background: rgba(51, 65, 85, 0.55);
}

html.fi.dark[data-dash-template='dashlyra'] ::-webkit-scrollbar-thumb {
    background-color: #64748b;
}