/*
 * SKND brand restyle for the main Filament panel shell (sidebar, topbar)
 * and the dashboard's stat cards. Continues from filament-admin-login.css
 * (same STYLES_AFTER render hook, same reasoning for !important on
 * background colors — a belt-and-braces against Tailwind's dark: variants,
 * since this is one fixed brand look). That file is scoped to
 * .fi-simple-layout (auth pages only); this one targets .fi-sidebar,
 * .fi-topbar and the dashboard widgets, which only ever render inside the
 * authenticated app shell — so neither file can leak into the other's
 * pages.
 *
 * Real class names below were confirmed by reading Filament's own Blade
 * source (vendor/filament/filament/resources/views/components/sidebar/*,
 * topbar/*, and vendor/filament/widgets/resources/views/stats-overview-
 * widget/stat.blade.php) rather than guessed.
 */

/* ---------- Sidebar ---------- */
/* Width itself is set via the Panel's own ->sidebarWidth('264px') API in
   AdminPanelProvider, not CSS — that's the supported, documented way to
   change it (a CSS custom property Filament reads, --sidebar-width). */

.fi-sidebar,
.fi-sidebar-header {
    background-color: #14213D !important;
}

/* Filament's own brandLogo() component already renders the real SKND logo
   here (see AdminPanelProvider) — just keeping it from crowding the header
   edge in the narrow sidebar. */
.fi-sidebar-header .fi-logo {
    height: 2rem !important;
}

/* Group labels ("Overview" / "Content" / "Account" — see each Resource/
   Page's $navigationGroup). Filament's own gap-y-7 between .fi-sidebar-
   group elements already reads as consistent spacing above each group, so
   nothing extra needed there. */
.fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Every nav item: consistent rounded pill shape whether active or not
   (Filament's own px-6 on .fi-sidebar-nav already gives consistent
   horizontal margins, so no change needed there). */
.fi-sidebar-item-button {
    border-radius: 10px;
}

/* Inactive items: light gray label, dimmer icon, readable on navy —
   replacing Filament's default dark-gray-on-white styling. */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-label {
    color: rgba(255, 255, 255, 0.72) !important;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-icon {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Hover (inactive items only — .fi-active has its own background below,
   and shouldn't dim on hover): subtle lighter-navy fill, text/icon
   brightening to full white. */
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover {
    background-color: #1E2B4D !important;
}

.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-label,
.fi-sidebar-item:not(.fi-active) .fi-sidebar-item-button:hover .fi-sidebar-item-icon {
    color: #fff !important;
}

/* Active nav item: solid indigo pill, white text/icon, slightly bolder
   label — Filament's default here is just a light gray background with
   indigo text, not a filled pill. */
.fi-sidebar-item.fi-active .fi-sidebar-item-button {
    background-color: #4F46E5 !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-sidebar-item-icon {
    color: #fff !important;
}

.fi-sidebar-item.fi-active .fi-sidebar-item-label {
    font-weight: 600;
}

/* Divider between the "Content" and "Account" groups. Dashboard sits
   standalone above both (no $navigationGroup, so it's never a
   .fi-sidebar-group itself), so this adjacent-sibling selector only ever
   matches the one real boundary — between Content and Account — not above
   Content. */
.fi-sidebar-group + .fi-sidebar-group {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 1.25rem;
}

/* Branded card at the very bottom of the sidebar (see
   PanelsRenderHook::SIDEBAR_FOOTER in AdminPanelProvider, which renders
   with no wrapper of its own — .skn-sidebar-footer is this partial's own
   wrapper div, not a Filament class). The collapse-sidebar control is
   Filament's own existing button (enabled via
   ->sidebarCollapsibleOnDesktop() on the Panel, not rebuilt here) — it
   already renders separately inside the sidebar header. */
.skn-sidebar-footer {
    padding: 0 1.5rem 1.5rem;
    margin-top: auto;
}

.skn-sidebar-brand-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.skn-sidebar-brand-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 8px;
    background: rgba(79, 70, 229, 0.25);
    color: #8891E8;
}

.skn-sidebar-brand-icon svg {
    width: 1rem;
    height: 1rem;
}

.skn-sidebar-brand-name {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
}

.skn-sidebar-brand-tagline {
    font-size: 0.6875rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
}

/* ---------- Sidebar: collapsed (desktop icon-rail) state ----------
 * ->sidebarCollapsibleOnDesktop() ships this toggle already — Filament's
 * own x-show bindings correctly hide the logo, nav labels, group labels
 * and group chevrons when $store.sidebar.isOpen is false (confirmed via
 * computed-style inspection, not assumed). The one real gap: the <aside>
 * itself carries no width utility in the closed state (Filament lets it
 * shrink-to-fit instead), and our own .skn-sidebar-footer brand card
 * (SIDEBAR_FOOTER hook, not a Filament element — see sidebar-footer.
 * blade.php) has no collapse-awareness, so its one-line tagline text
 * forces that shrink-to-fit width back out to ~290px. Net effect: a
 * wide, mostly-empty bar instead of a clean icon rail. Fixed here with
 * an explicit width plus hiding the footer's text, both gated to the
 * same lg (1024px) breakpoint Filament itself uses for this feature, so
 * the mobile off-canvas drawer (full width, translated off-screen when
 * closed) is untouched. Filament also explicitly disables its own
 * transition at this breakpoint (lg:transition-none, in sidebar/index.
 * blade.php) — restoring it so the width change animates instead of
 * snapping.
 */
@media (min-width: 1024px) {
    .fi-sidebar {
        transition: width 0.2s ease !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) {
        width: 76px !important;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-header {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    .fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-nav {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .skn-sidebar-footer {
        padding: 0 0.5rem 1rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .skn-sidebar-brand-card {
        align-items: center;
        padding: 0.75rem 0.5rem;
    }

    .fi-sidebar:not(.fi-sidebar-open) .skn-sidebar-brand-name,
    .fi-sidebar:not(.fi-sidebar-open) .skn-sidebar-brand-tagline {
        display: none;
    }
}

/* ---------- Topbar ---------- */
/* Stays white/light per the brief — Filament's default already is, so
   nothing to override here beyond the pieces below. The user avatar's
   indigo background comes from App\Filament\AvatarProviders\
   BrandAvatarProvider (registered via ->defaultAvatarProvider() in
   AdminPanelProvider), not CSS: it's a generated external image
   (ui-avatars.com), so its background can't be recolored after the fact
   with a stylesheet. */

/* Name + "Admin" role text, injected via USER_MENU_BEFORE (see
   resources/views/filament/partials/topbar-user-extra.blade.php). */
.skn-topbar-user-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.skn-topbar-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
}

.skn-topbar-user-role {
    font-size: 0.75rem;
    color: #64748B;
}

/* ---------- Page background ---------- */
/* Filament's own default here is bg-gray-50 (.fi-body); overriding to the
   brand's exact off-white rather than Tailwind's closest gray. */
.fi-body {
    background-color: #F6F8FC !important;
}

/* ---------- Content area: decorative gradient blob behind the page
   header (every resource page — .fi-header is shared, not Clients-
   specific) ---------- */

.fi-header {
    position: relative;
}

.fi-header::before {
    content: "";
    position: absolute;
    top: -3rem;
    right: -4rem;
    width: 26rem;
    height: 18rem;
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.16), rgba(79, 70, 229, 0.16));
    filter: blur(64px);
    pointer-events: none;
    z-index: -1;
}

/* ---------- Table toolbar: merge the header-actions row (Sort by) and
 * the search/filter/column-toggle row into a single flex row.
 *
 * Filament renders these as two separate sibling boxes inside
 * .fi-ta-header-ctn — .fi-ta-header for ->headerActions() (Sort by),
 * then .fi-ta-header-toolbar for search/filters/column-toggle (see
 * vendor/filament/tables/resources/views/index.blade.php) — and there's
 * no Table-builder option to combine them into one row. Forking that
 * ~1,300-line vendor view for a layout-only change would mean manually
 * re-merging it on every Filament update, so instead this flattens both
 * boxes with display:contents: their children become direct flex items
 * of .fi-ta-header-ctn itself (CSS still sees display:contents elements
 * for selector-matching purposes, they just stop rendering their own
 * box), then `order` puts those items in the requested sequence. No
 * Blade/Livewire wiring is touched by this — every element keeps the
 * exact same DOM node, wire:click binding and Alpine state; only where
 * it's drawn changes. ---------- */

.fi-ta-header-ctn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0.75rem 1rem;
}

.fi-ta-header-ctn > .fi-ta-header,
.fi-ta-header-ctn > .fi-ta-header-toolbar,
.fi-ta-header-ctn > .fi-ta-header-toolbar > div {
    display: contents;
}

/* Search: flex:1 so it's the widest element, flush left. */
.fi-ta-header-ctn .fi-ta-search-field {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
}

/* Sort by (a ->headerActions() entry, wrapped in .fi-ta-actions — the
   same class Filament uses for row-level Edit/Delete, so this is scoped
   to .fi-ta-header-ctn's own descendants, not every .fi-ta-actions on
   the page). */
.fi-ta-header-ctn .fi-ta-actions {
    order: 2;
    flex-shrink: 0;
}

.fi-ta-header-ctn .fi-ta-filters-dropdown,
.fi-ta-header-ctn .fi-ta-filters-modal {
    order: 3;
    flex-shrink: 0;
}

.fi-ta-header-ctn .fi-ta-col-toggle {
    order: 4;
    flex-shrink: 0;
}

/* Sort by / Filter / Columns as pill buttons — the default is a plain
   icon-and-label button with square-ish rounding. */
.fi-ta-header-ctn .fi-btn {
    border-radius: 9999px;
}

/* ---------- Table logo chip ----------
 * Shared by any resource whose ImageColumn opts in via
 * ->extraImgAttributes(['class' => 'skn-logo-chip']) — currently Clients
 * and Partners. Size itself is set per-column in PHP via ->size(38), so
 * this class doesn't fight the inline width/height Filament sets on the
 * <img>; it only adds the bordered light-background "chip" look. */

.skn-logo-chip {
    box-sizing: border-box;
    padding: 4px;
    border-radius: 9px;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
}

/* ---------- Table "Order" column number badge ----------
 * Shared by any resource whose sort_order column renders this markup
 * via ->html()->formatStateUsing() — currently Clients and Projects.
 * Deliberately just the number: an earlier pass included a drag-handle
 * icon next to it, but neither table has real drag-and-drop reordering
 * (both have a separate "Sort by" action instead), so the icon implied
 * an interaction that didn't exist and was removed. */

.skn-order-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 24px;
    padding: 0 6px;
    border-radius: 6px;
    background-color: #F3F4F6;
    color: #111827;
    font-weight: 700;
    font-size: 0.75rem;
}

/* ---------- Table "Status" column: pill badge with a leading dot ----------
 * Shared by any resource with an `is_active` column (currently Clients
 * and Partners) formatted as ->badge()->color('success'|'gray'). Filament's
 * own badge colors already match the brief exactly — 'success' renders
 * bg-green-50/text-green-600, 'gray' renders bg-gray-50/text-gray-600 (see
 * vendor/filament/support/resources/views/components/badge.blade.php) —
 * so only the dot needs adding. currentColor picks up whichever of those
 * two text colors is already active, no second color mapping to keep in
 * sync. */

.fi-table-cell-is-active .fi-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: currentColor;
    flex-shrink: 0;
}

/* ---------- Table row hover tint ----------
 * Filament's .fi-ta-row already ships hover:bg-gray-50 by default on
 * every resource's table; this just pins the exact tint to the brand's
 * off-white rather than Tailwind's closest gray, site-wide. */

.fi-ta-row:hover {
    background-color: #F8FAFC;
}

/* ---------- Table rows: Edit / Delete as light colored pill chips, not
   Filament's default solid-filled buttons. Scoped to .fi-ta-actions so the
   page's own solid "+ New client" button (outside the table entirely) is
   untouched. ---------- */

.fi-ta-actions .fi-btn.fi-color-primary {
    background-color: rgba(79, 70, 229, 0.1);
    color: #4F46E5;
    border-radius: 8px;
}

.fi-ta-actions .fi-btn.fi-color-primary:hover {
    background-color: rgba(79, 70, 229, 0.18);
}

.fi-ta-actions .fi-btn.fi-color-danger {
    background-color: rgba(220, 38, 38, 0.1);
    color: #DC2626;
    border-radius: 8px;
}

.fi-ta-actions .fi-btn.fi-color-danger:hover {
    background-color: rgba(220, 38, 38, 0.18);
}

/* ---------- Pagination: indigo-filled current-page pill ---------- */

.fi-pagination-item.fi-active .fi-pagination-item-button {
    background-color: #4F46E5;
    border-radius: 8px;
}

.fi-pagination-item.fi-active .fi-pagination-item-label {
    color: #fff !important;
}

/* ---------- Table column headers: centered titles ----------
 * .fi-ta-header-cell is the shared <th> every column type (text, image,
 * icon, the bulk-select checkbox) renders through — see vendor/filament/
 * tables/resources/views/components/header-cell.blade.php — so this one
 * rule covers every table's header row across every resource. The inner
 * flex wrapper's own justify-* class already mirrors each column's PHP
 * ->alignment() setting (default: justify-start); overriding only the
 * header here, not .fi-ta-cell, keeps body text left-aligned and
 * readable while just the header label/sort-icon centers. ---------- */

.fi-ta-header-cell > span {
    justify-content: center;
}

/* ---------- Sortable column headers: chevron detached from the label ----------
 * Filament renders the sort chevron (.fi-ta-header-cell-sort-icon) as a
 * second flex child alongside the label (.fi-ta-header-cell-label)
 * inside that same centered flex row — so centering the row centers the
 * icon+label pair *together*, visibly shifting the label text off the
 * column's true center (the data below has no such icon to balance
 * against). Taking the icon out of the flex flow leaves the label as
 * the row's only flex child, so centering it lines up with the data. */

.fi-ta-header-cell {
    position: relative;
}

.fi-ta-header-cell-sort-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- Dashboard stat cards ---------- */
/* Filament's own .fi-wi-stats-overview-stat already ships rounded-xl
   (12px)/bg-white/shadow-sm/ring-1 — exactly the card look the brief asks
   for, and the same classes Filament's Section component (used by the
   Welcome and Filament-info widgets) uses, so those two stay visually
   consistent for free. Only the label/value typography needed pinning to
   the exact spec below. */

.fi-wi-stats-overview-stat-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
}

.fi-wi-stats-overview-stat-value {
    font-weight: 700;
}