/*
 * SolarOS brand polish for the Filament admin panel.
 *
 * Hand-written and committed on purpose: Hostinger Cloud Enterprise has no Node
 * build step, so this file must never require `npm run build`. Everything here is
 * plain CSS layered on top of Filament's pre-compiled app.css, and it only uses
 * the `--primary-*` / `--gray-*` custom properties Filament already emits at
 * runtime from AdminPanelProvider::panel()->colors().
 *
 * Palette source: brand/tokens.json (mirrored in App\Support\Brand).
 */

:root {
    --solaros-solar-blue: #1d70ac;
    --solaros-leaf-green: #2e7d46;
    --solaros-sun-orange: #f9880b;
    --solaros-sun-gold: #fdce47;
}

/* ---------------------------------------------------------------- typography */

/* Brand rule: Inter 600/700 with tabular figures for money and kW readings, so
   columns of numbers line up and are scannable. */
.fi-wi-stats-overview-stat-value,
.solaros-figure,
.fi-ta-text-item-label.solaros-figure,
td .solaros-figure {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Sidebar group headings read as section labels rather than list items. */
.fi-sidebar-group-label {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ brand bar */

/* A 3px Solar Blue rule under the topbar so the panel is recognisably Virat's
   even on a screenshot with no logo in frame. */
.fi-topbar > nav,
.fi-topbar nav.fi-topbar-nav {
    box-shadow: inset 0 -3px 0 0 var(--solaros-solar-blue);
}

.solaros-wordmark {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    line-height: 1;
}

.solaros-wordmark-mark {
    height: 2.25rem;
    width: 2.25rem;
    flex: none;
}

.solaros-wordmark-lockup {
    height: 3.25rem;
    width: auto;
    max-width: 11rem;
    object-fit: contain;
}

.solaros-wordmark-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.solaros-wordmark-primary {
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--solaros-leaf-green);
}

.solaros-wordmark-primary .solaros-wordmark-solar {
    color: var(--solaros-sun-orange);
}

.solaros-wordmark-secondary {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--solaros-leaf-green);
}

.dark .solaros-wordmark-primary,
.dark .solaros-wordmark-secondary {
    color: #7fc294;
}

/* ------------------------------------------------------------------ stat cards */

/* Filament hard-codes the stat icon to gray-400. These modifier classes let a stat
   carry its brand colour on the icon as well as the description. */
.solaros-stat .fi-wi-stats-overview-stat-icon {
    height: 1.375rem;
    width: 1.375rem;
}

.solaros-stat-primary .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--primary-500));
}

.solaros-stat-success .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--success-500));
}

.solaros-stat-sun .fi-wi-stats-overview-stat-icon {
    color: var(--solaros-sun-orange);
}

.solaros-stat-danger .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--danger-500));
}

.solaros-stat-info .fi-wi-stats-overview-stat-icon {
    color: rgb(var(--info-500));
}

/* Clickable stat cards should say so. */
a.fi-wi-stats-overview-stat {
    transition:
        box-shadow 150ms ease,
        transform 150ms ease;
}

a.fi-wi-stats-overview-stat:hover {
    box-shadow:
        0 1px 2px 0 rgb(var(--gray-950) / 0.05),
        0 0 0 1px rgb(var(--primary-500) / 0.4);
    transform: translateY(-1px);
}

/* --------------------------------------------------------------- login screen */

.solaros-login-hint {
    margin-top: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    border-radius: 0.625rem;
    border: 1px solid rgb(var(--primary-200));
    background-color: rgb(var(--primary-50));
    padding: 0.75rem 0.875rem;
    font-size: 0.8125rem;
    line-height: 1.35rem;
    color: rgb(var(--gray-700));
}

.dark .solaros-login-hint {
    border-color: rgb(var(--gray-700));
    background-color: rgb(var(--gray-800));
    color: rgb(var(--gray-300));
}

.solaros-login-hint svg {
    height: 1.125rem;
    width: 1.125rem;
    flex: none;
    margin-top: 0.125rem;
    color: rgb(var(--primary-600));
}

.dark .solaros-login-hint svg {
    color: rgb(var(--primary-400));
}

.solaros-login-hint strong {
    font-weight: 600;
}

.solaros-login-footer {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: rgb(var(--gray-500));
}