/* ═══════════════════════════════════════════════════════════════
   PFI Admin — daisyUI 5 Theme-Aware Custom Styles
   Works with ANY daisyUI theme (dark default)
   Magic UI effects: shine-border, shimmer-button, border-beam
   ═══════════════════════════════════════════════════════════════ */

/* ── Base ── */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; max-width: 100vw; }
body { overflow-x: hidden; max-width: 100vw; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc) / 0.15); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / 0.3); }

/* ══════════════════════════════════════
   Magic UI: Animations
   ══════════════════════════════════════ */
@keyframes pfi-shine {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes pfi-beam-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes pfi-pulse-glow {
    0%, 100% { box-shadow: 0 0 15px oklch(var(--a) / 0.15), 0 0 40px oklch(var(--a) / 0.05); }
    50%      { box-shadow: 0 0 25px oklch(var(--a) / 0.3), 0 0 60px oklch(var(--a) / 0.1); }
}
@keyframes pfi-shimmer-btn {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pfi-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes pfiFadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pfiSpin {
    to { transform: rotate(360deg); }
}
@keyframes pfiPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.6); opacity: 0.4; }
}
@keyframes pfiShimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes tableRowIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes sortArrowIn {
    from { opacity: 0; transform: translateY(2px); }
    to   { opacity: 0.8; transform: translateY(0); }
}

/* ══════════════════════════════════════
   Magic UI: Shine Border
   ══════════════════════════════════════ */
.pfi-shine-border {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}
.pfi-shine-border::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: radial-gradient(transparent, transparent, #A07CFE, #FE8FB5, #FFBE7B, transparent, transparent);
    background-size: 300% 300%;
    animation: pfi-shine 6s ease infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* ── Shine border variant: gold (for sidebar logo) ── */
.pfi-shine-gold::before {
    background: radial-gradient(transparent, transparent, #D4A853, #F59E0B, #D97706, transparent, transparent);
}

/* ══════════════════════════════════════
   Magic UI: Shimmer Button
   ══════════════════════════════════════ */
.pfi-shimmer-btn {
    position: relative;
    overflow: hidden;
}
.pfi-shimmer-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.12) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: pfi-shimmer-btn 3s linear infinite;
    pointer-events: none;
}

/* ══════════════════════════════════════
   Magic UI: Border Beam (traveling light)
   ══════════════════════════════════════ */
.pfi-border-beam {
    position: relative;
    overflow: hidden;
}
.pfi-border-beam::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 300%; height: 300%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 335deg,
        oklch(var(--p) / 0.65) 348deg,
        oklch(var(--p) / 0.9) 354deg,
        transparent 360deg
    );
    animation: pfi-beam-spin 4s linear infinite;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.pfi-border-beam > * {
    position: relative;
    z-index: 2;
}

/* ══════════════════════════════════════
   Glassmorphism
   ══════════════════════════════════════ */
.pfi-glass {
    background: oklch(var(--b1) / 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid oklch(var(--bc) / 0.08);
}

/* ══════════════════════════════════════
   Admin Sidebar (dark neutral + PFI gold)
   ══════════════════════════════════════ */
.pfi-sidebar {
    background: oklch(var(--n));
    color: oklch(var(--nc));
}
.pfi-sidebar-logo {
    border-bottom: 1px solid oklch(var(--nc) / 0.1);
}
.pfi-sidebar-footer {
    border-top: 1px solid oklch(var(--nc) / 0.1);
}

/* Sidebar nav items — custom active style */
.pfi-sidebar .menu li > *:not(ul, .menu-title, details, .btn):active,
.pfi-sidebar .menu li > *:not(ul, .menu-title, details, .btn).active,
.pfi-sidebar .menu li > details > summary:active {
    background: oklch(var(--nc) / 0.1);
    color: oklch(var(--nc));
}
/* Active indicator bar: see "Enhanced Sidebar Navigation" section */
.pfi-sidebar .pfi-group-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: oklch(var(--nc) / 0.4);
    padding: 0.5rem 0.75rem;
}

/* ══════════════════════════════════════
   App Shell Background
   ══════════════════════════════════════ */
.pfi-app-bg {
    background:
        radial-gradient(circle at top right, oklch(var(--a) / 0.06), transparent 26%),
        oklch(var(--b2));
}

/* ══════════════════════════════════════
   PFI Data Table (theme-aware)
   ══════════════════════════════════════ */
.pfi-table {
    width: 100%;
    font-size: 0.875rem;
}
.pfi-table thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: oklch(var(--bc) / 0.5);
    background-color: oklch(var(--b2));
    border-bottom: 1px solid oklch(var(--bc) / 0.1);
}
.pfi-table tbody td {
    padding: 0.75rem 1rem;
    color: oklch(var(--bc) / 0.75);
    border-bottom: 1px solid oklch(var(--bc) / 0.06);
}
.pfi-table tbody tr {
    background-color: oklch(var(--b1));
    transition: background-color 0.15s ease;
}
.pfi-table tbody tr:hover {
    background-color: oklch(var(--b2) / 0.7);
}
/* Row entrance animation */
.pfi-table tbody tr { animation: tableRowIn 0.25s ease-out both; }
.pfi-table tbody tr:nth-child(1) { animation-delay: 0ms; }
.pfi-table tbody tr:nth-child(2) { animation-delay: 20ms; }
.pfi-table tbody tr:nth-child(3) { animation-delay: 40ms; }
.pfi-table tbody tr:nth-child(4) { animation-delay: 60ms; }
.pfi-table tbody tr:nth-child(5) { animation-delay: 80ms; }
.pfi-table tbody tr:nth-child(6) { animation-delay: 100ms; }
.pfi-table tbody tr:nth-child(7) { animation-delay: 120ms; }
.pfi-table tbody tr:nth-child(8) { animation-delay: 140ms; }
.pfi-table tbody tr:nth-child(9) { animation-delay: 160ms; }
.pfi-table tbody tr:nth-child(10) { animation-delay: 180ms; }
.pfi-table tbody tr:nth-child(n+11) { animation-delay: 200ms; }

/* Sortable columns */
.pfi-table thead th[data-sort] {
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.pfi-table thead th[data-sort]:hover {
    background: oklch(var(--b3) / 0.5);
}
.pfi-table thead th[data-sort] .sort-arrow {
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
    opacity: 0.8;
    animation: sortArrowIn 0.2s ease-out;
}

/* ══════════════════════════════════════
   PFI Filter Card
   ══════════════════════════════════════ */
.pfi-filter-card {
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.08);
    border-radius: 0.875rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    z-index: 30;
    overflow: visible;
}
.pfi-filter-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
    border-color: oklch(var(--bc) / 0.15);
}
.pfi-filter-card .pfi-filter-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
}
.pfi-filter-card .pfi-filter-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background-color: oklch(var(--wa) / 0.1);
}
.pfi-filter-card .pfi-filter-icon svg {
    width: 1rem;
    height: 1rem;
    color: oklch(var(--wa));
}
.pfi-filter-card .pfi-filter-title {
    color: oklch(var(--bc));
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ══════════════════════════════════════
   PFI Card (theme-aware)
   ══════════════════════════════════════ */
.pfi-card {
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.08);
    border-radius: 0.875rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.pfi-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid oklch(var(--bc) / 0.06);
}
.pfi-card-body {
    padding: 1.25rem 1.5rem;
}

/* Table wrapper */
.pfi-table-wrap {
    background-color: oklch(var(--b1));
    border: 1px solid oklch(var(--bc) / 0.08);
    border-radius: 0.875rem;
}

/* PFI Stat Card — see "Neon Gradient Stat Card" section below */

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: oklch(var(--bc));
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
}

/* ══════════════════════════════════════
   Search & DataTable Controls
   ══════════════════════════════════════ */
.pfi-search-wrap {
    position: relative;
}
.pfi-search-wrap .pfi-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: oklch(var(--bc) / 0.35);
    pointer-events: none;
    transition: color 0.2s ease, transform 0.2s ease;
}
.pfi-search-wrap input:focus ~ .pfi-search-icon,
.pfi-search-wrap input:focus + .pfi-search-icon {
    color: oklch(var(--p));
    transform: translateY(-50%) scale(1.05);
}
.pfi-search-input {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1px solid oklch(var(--bc) / 0.12);
    padding: 0.625rem 1rem 0.625rem 2.5rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    transition: all 0.2s ease;
}
.pfi-search-input:hover {
    border-color: oklch(var(--bc) / 0.2);
}
.pfi-search-input:focus {
    border-color: oklch(var(--p));
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--p) / 0.12);
}
.pfi-search-input::placeholder {
    color: oklch(var(--bc) / 0.3);
}

.pfi-per-page {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1.5px solid oklch(var(--bc) / 0.2);
    appearance: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    padding: 0.625rem 2rem 0.625rem 0.75rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), inset 0 0 0 0 oklch(var(--p) / 0);
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}
.pfi-per-page:hover { border-color: oklch(var(--p) / 0.35); }
.pfi-per-page:focus {
    border-color: oklch(var(--p));
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--p) / 0.15);
}

.pfi-dt-info {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: oklch(var(--b2));
    color: oklch(var(--bc) / 0.5);
    border: 1px solid oklch(var(--bc) / 0.06);
    transition: all 0.3s ease;
}
.pfi-dt-info .pfi-dt-info-num {
    color: oklch(var(--bc));
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════════════════
   Loading Overlay & Spinner
   ══════════════════════════════════════ */
.pfi-loader-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    background: oklch(var(--b1) / 0.8);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    transition: opacity 0.2s ease;
}
.pfi-loader-overlay.hidden { display: none !important; }

.pfi-spinner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pfi-spinner-ring {
    width: 40px;
    height: 40px;
    border: 3px solid oklch(var(--bc) / 0.1);
    border-top-color: oklch(var(--p));
    border-radius: 50%;
    animation: pfiSpin 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pfi-spinner-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: oklch(var(--wa));
    border-radius: 50%;
    animation: pfiPulse 0.7s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ══════════════════════════════════════
   PFI Skeleton Loader
   ══════════════════════════════════════ */
.pfi-skeleton {
    border-radius: 0.375rem;
    background: linear-gradient(90deg, oklch(var(--b2)) 25%, oklch(var(--b3)) 37%, oklch(var(--b2)) 63%);
    background-size: 400% 100%;
    animation: pfiShimmer 1.4s ease infinite;
}

/* ══════════════════════════════════════
   PFI Buttons (extends daisyUI btn)
   ══════════════════════════════════════ */
.pfi-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.pfi-btn:active { transform: scale(0.97); }
.pfi-btn-primary {
    background-color: oklch(var(--p));
    color: oklch(var(--pc));
}
.pfi-btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.pfi-btn-gold {
    background-color: oklch(var(--wa));
    color: oklch(var(--wac));
}
.pfi-btn-outline {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1px solid oklch(var(--bc) / 0.12);
}
.pfi-btn-outline:hover {
    background-color: oklch(var(--b2));
    border-color: oklch(var(--bc) / 0.2);
}

/* ══════════════════════════════════════
   Page Content Stagger Animation
   ══════════════════════════════════════ */
.pfi-page-content > * {
    animation: pfiFadeInUp 0.4s ease-out both;
}
.pfi-page-content > *:nth-child(1) { animation-delay: 0ms; }
.pfi-page-content > *:nth-child(2) { animation-delay: 60ms; }
.pfi-page-content > *:nth-child(3) { animation-delay: 120ms; }
.pfi-page-content > *:nth-child(4) { animation-delay: 180ms; }
.pfi-page-content > *:nth-child(5) { animation-delay: 240ms; }
.pfi-page-content > *:nth-child(n+6) { animation-delay: 300ms; }

/* ══════════════════════════════════════
   TomSelect — daisyUI Theme-Aware
   ══════════════════════════════════════ */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
    background-color: oklch(var(--b1)) !important;
    border: 1px solid oklch(var(--bc) / 0.12) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05) !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: oklch(var(--bc)) !important;
    min-height: 38px !important;
    transition: all 0.2s ease !important;
}
.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi .ts-control:hover {
    border-color: oklch(var(--bc) / 0.2) !important;
}
.ts-wrapper.single.focus .ts-control,
.ts-wrapper.multi.focus .ts-control {
    border-color: oklch(var(--p)) !important;
    box-shadow: 0 0 0 2px oklch(var(--p) / 0.12) !important;
}
.ts-wrapper .ts-control > input {
    font-size: 0.875rem !important;
    color: oklch(var(--bc)) !important;
}
.ts-wrapper .ts-control > input::placeholder {
    color: oklch(var(--bc) / 0.35) !important;
}

.ts-dropdown {
    background-color: oklch(var(--b1)) !important;
    border: 1px solid oklch(var(--bc) / 0.12) !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
    margin-top: 0.25rem !important;
    font-size: 0.875rem !important;
    z-index: 70 !important;
}
.ts-dropdown .ts-dropdown-content {
    max-height: 220px !important;
    padding: 4px !important;
}
.ts-dropdown .option {
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    color: oklch(var(--bc) / 0.75) !important;
    cursor: pointer !important;
    transition: all 0.1s ease !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
    background-color: oklch(var(--p) / 0.08) !important;
    color: oklch(var(--bc)) !important;
}
.ts-dropdown .option.selected {
    background-color: oklch(var(--p)) !important;
    color: oklch(var(--pc)) !important;
}
.ts-dropdown .option.selected:hover {
    filter: brightness(1.1) !important;
}

.ts-dropdown .dropdown-input-wrap {
    padding: 0.5rem !important;
    border-bottom: 1px solid oklch(var(--bc) / 0.06) !important;
}
.ts-dropdown .dropdown-input-wrap input {
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    border: 1px solid oklch(var(--bc) / 0.12) !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    background-color: oklch(var(--b2)) !important;
    color: oklch(var(--bc)) !important;
    transition: all 0.15s ease !important;
}
.ts-dropdown .dropdown-input-wrap input:focus {
    background-color: oklch(var(--b1)) !important;
    border-color: oklch(var(--p)) !important;
    outline: none !important;
    box-shadow: 0 0 0 1px oklch(var(--p) / 0.2) !important;
}

.ts-wrapper.multi .ts-control > .item {
    color: oklch(var(--pc)) !important;
    background-color: oklch(var(--p) / 0.15) !important;
    border: 1px solid oklch(var(--p) / 0.25) !important;
    border-radius: 0.375rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    padding: 0.125rem 0.5rem !important;
    margin-right: 0.25rem !important;
    transition: all 0.15s ease !important;
}
.ts-wrapper.multi .ts-control > .item .remove {
    border: none !important;
    color: oklch(var(--bc) / 0.4) !important;
}
.ts-wrapper.multi .ts-control > .item .remove:hover {
    color: oklch(var(--er)) !important;
}

.ts-dropdown .no-results {
    padding: 1rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: oklch(var(--bc) / 0.35) !important;
    text-align: center !important;
}

.ts-wrapper {
    position: relative;
    z-index: 40;
}
.ts-dropdown,
.ts-wrapper.single .ts-dropdown,
.ts-wrapper.multi .ts-dropdown {
    z-index: 70 !important;
}

/* ══════════════════════════════════════
   Pagination — Theme-Aware
   ══════════════════════════════════════ */
nav[aria-label="Pagination Navigation"] span[aria-current="page"] span {
    background-color: oklch(var(--p)) !important;
    color: oklch(var(--pc)) !important;
    border-color: oklch(var(--p)) !important;
    font-weight: 600 !important;
}
nav[aria-label="Pagination Navigation"] a {
    color: oklch(var(--bc) / 0.6) !important;
    border-color: oklch(var(--bc) / 0.12) !important;
    background-color: oklch(var(--b1)) !important;
    transition: all 0.15s ease !important;
}
nav[aria-label="Pagination Navigation"] a:hover {
    background-color: oklch(var(--p) / 0.08) !important;
    color: oklch(var(--p)) !important;
    border-color: oklch(var(--p) / 0.3) !important;
}

/* ══════════════════════════════════════
   Native Inputs — Theme-Aware
   ══════════════════════════════════════ */
select,
input[type="month"],
input[type="text"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border-color: oklch(var(--bc) / 0.12);
}
select:focus, input:focus, textarea:focus {
    border-color: oklch(var(--p));
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--p) / 0.12);
}

/* ══════════════════════════════════════
   Native <select> color-scheme fix
   Chrome renders the popup dropdown using OS native UI.
   color-scheme: dark forces the browser to open a dark popup.
   color-scheme: light forces the browser to open a light popup.
   This must match the current daisyUI theme.
   ══════════════════════════════════════ */
[data-theme="dark"] select,
[data-theme="night"] select,
[data-theme="business"] select,
[data-theme="luxury"] select,
[data-theme="dracula"] select,
[data-theme="forest"] select,
[data-theme="synthwave"] select {
    color-scheme: dark;
}
[data-theme="light"] select,
[data-theme="autumn"] select,
[data-theme="cyberpunk"] select {
    color-scheme: light;
}

/* <option> explicit colors — works in Firefox, partially in Chrome */
select option {
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
}

/* ══════════════════════════════════════
   pfi-table-select — inline selects inside table cells
   ══════════════════════════════════════ */
.pfi-table-select {
    width: 100%;
    background-color: oklch(var(--b1));
    color: oklch(var(--bc));
    border: 1.5px solid oklch(var(--bc) / 0.25);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    padding: 0.375rem 1.75rem 0.375rem 0.625rem;
    appearance: none;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
}
.pfi-table-select:hover {
    border-color: oklch(var(--p) / 0.4);
}
.pfi-table-select:focus {
    border-color: oklch(var(--p));
    outline: none;
    box-shadow: 0 0 0 2px oklch(var(--p) / 0.15);
}

/* ══════════════════════════════════════
   Magic UI: Avatar Glow Ring
   ══════════════════════════════════════ */
@keyframes pfi-avatar-ring-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
@keyframes pfi-avatar-pulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(var(--p) / 0.4); }
    50%      { box-shadow: 0 0 0 6px oklch(var(--p) / 0); }
}

.pfi-avatar-pro {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Animated gradient ring around avatar */
.pfi-avatar-pro::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(
        from 0deg,
        oklch(var(--p)),
        oklch(var(--s)),
        oklch(var(--a)),
        oklch(var(--wa)),
        oklch(var(--p))
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: pfi-avatar-ring-spin 4s linear infinite;
    z-index: 0;
}
/* Online status dot */
.pfi-avatar-pro .pfi-avatar-status {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: oklch(var(--su));
    border: 2px solid oklch(var(--b1));
    z-index: 3;
}
.pfi-avatar-pro .pfi-avatar-status::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: oklch(var(--su));
    animation: pfi-avatar-pulse 2s ease-out infinite;
    z-index: -1;
}
/* The actual avatar circle */
.pfi-avatar-pro .pfi-avatar-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    background: linear-gradient(135deg, oklch(var(--p)), oklch(var(--s)));
    color: oklch(var(--pc));
    box-shadow: 0 2px 8px oklch(var(--p) / 0.3);
}
.pfi-avatar-pro .pfi-avatar-inner.avatar-sm {
    width: 2rem;
    height: 2rem;
    font-size: 0.75rem;
}
.pfi-avatar-pro .pfi-avatar-inner.avatar-md {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.875rem;
}

/* Sidebar avatar variant (gold) */
.pfi-avatar-gold::before {
    background: conic-gradient(
        from 0deg,
        oklch(var(--wa)),
        oklch(var(--a)),
        oklch(var(--er)),
        oklch(var(--wa))
    );
}
.pfi-avatar-gold .pfi-avatar-inner {
    background: linear-gradient(135deg, oklch(var(--wa)), oklch(var(--a)));
    color: oklch(var(--wac));
    box-shadow: 0 2px 8px oklch(var(--wa) / 0.3);
}

/* ══════════════════════════════════════
   Magic UI: Notification Bell Pulse
   ══════════════════════════════════════ */
@keyframes pfi-bell-ring {
    0%   { transform: rotate(0deg); }
    5%   { transform: rotate(14deg); }
    10%  { transform: rotate(-13deg); }
    15%  { transform: rotate(12deg); }
    20%  { transform: rotate(-10deg); }
    25%  { transform: rotate(7deg); }
    30%  { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
@keyframes pfi-notif-ping {
    0%   { transform: scale(1); opacity: 1; }
    75%  { transform: scale(2.5); opacity: 0; }
    100% { transform: scale(2.5); opacity: 0; }
}

.pfi-notif-btn:hover .pfi-bell-icon {
    animation: pfi-bell-ring 1.5s ease-in-out;
    transform-origin: top center;
}
.pfi-notif-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pfi-notif-badge .pfi-notif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: oklch(var(--er));
}
.pfi-notif-badge .pfi-notif-ping {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: oklch(var(--er));
    animation: pfi-notif-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ══════════════════════════════════════
   Magic UI: Enhanced Sidebar Navigation
   ══════════════════════════════════════ */
@keyframes pfi-nav-glow {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
}

.pfi-sidebar .menu li > a {
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease;
}
/* Hover shimmer sweep */
.pfi-sidebar .menu li > a::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 33%, oklch(var(--nc) / 0.06) 50%, transparent 67%);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.pfi-sidebar .menu li > a:hover::after {
    opacity: 1;
    animation: pfi-shimmer-btn 1.5s linear;
}
/* Active item left glow bar (enhanced) */
.pfi-sidebar .menu li > .active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.5rem;
    background: linear-gradient(180deg, oklch(var(--wa)), oklch(var(--a)));
    border-radius: 0 9999px 9999px 0;
    box-shadow: 0 0 8px oklch(var(--wa) / 0.5), 0 0 16px oklch(var(--wa) / 0.2);
}
/* Active item background glow */
.pfi-sidebar .menu li > .active {
    background: oklch(var(--nc) / 0.12) !important;
    box-shadow: inset 0 0 20px oklch(var(--wa) / 0.05);
}

/* ══════════════════════════════════════
   Magic UI: Neon Gradient Stat Card
   ══════════════════════════════════════ */
@keyframes pfi-neon-border {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.stat-card {
    position: relative;
    overflow: hidden;
    background-color: oklch(var(--b1));
    border-radius: 0.875rem;
    border: 1px solid oklch(var(--bc) / 0.08);
    padding: 1.25rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    background: linear-gradient(135deg, oklch(var(--p) / 0.06), oklch(var(--a) / 0.03), transparent);
}
.stat-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, oklch(var(--p) / 0), oklch(var(--p) / 0), oklch(var(--p) / 0));
    background-size: 200% 200%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: all 0.4s ease;
    pointer-events: none;
    z-index: 0;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 25px -5px oklch(var(--p) / 0.15),
        0 0 0 1px oklch(var(--p) / 0.1);
}
.stat-card:hover::before { opacity: 1; }
.stat-card:hover::after {
    background: linear-gradient(120deg, oklch(var(--p) / 0.5), oklch(var(--s) / 0.5), oklch(var(--a) / 0.5));
    background-size: 200% 200%;
    animation: pfi-neon-border 3s ease infinite;
}

/* ══════════════════════════════════════
   Magic UI: Pulsating Button
   ══════════════════════════════════════ */
@keyframes pfi-pulsate {
    0%   { box-shadow: 0 0 0 0 oklch(var(--p) / 0.5); }
    70%  { box-shadow: 0 0 0 10px oklch(var(--p) / 0); }
    100% { box-shadow: 0 0 0 0 oklch(var(--p) / 0); }
}
.pfi-pulsate-btn {
    animation: pfi-pulsate 2s infinite;
}
.pfi-pulsate-btn:hover {
    animation: none;
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* ══════════════════════════════════════
   Magic UI: Rainbow Button
   ══════════════════════════════════════ */
@keyframes pfi-rainbow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.pfi-rainbow-btn {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.pfi-rainbow-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(90deg,
        oklch(var(--p)),
        oklch(var(--s)),
        oklch(var(--a)),
        oklch(var(--wa)),
        oklch(var(--er)),
        oklch(var(--p))
    );
    background-size: 300% 100%;
    animation: pfi-rainbow 4s linear infinite;
    border-radius: inherit;
    z-index: -2;
}
.pfi-rainbow-btn::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: oklch(var(--b1));
    border-radius: inherit;
    z-index: -1;
}
.pfi-rainbow-btn:hover::after {
    background: oklch(var(--b1) / 0.85);
}

/* ══════════════════════════════════════
   Enhanced Header Elements
   ══════════════════════════════════════ */
/* Theme switcher button glow on hover */
.pfi-theme-btn:hover {
    background: oklch(var(--p) / 0.08);
    box-shadow: 0 0 12px oklch(var(--p) / 0.1);
}

/* User dropdown trigger enhancement */
.pfi-user-trigger {
    transition: all 0.2s ease;
    border-radius: 0.75rem;
    padding: 0.25rem 0.5rem;
}
.pfi-user-trigger:hover {
    background: oklch(var(--p) / 0.06);
}

/* ══════════════════════════════════════
   Enhanced Card Hover Effects
   ══════════════════════════════════════ */
.pfi-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pfi-card:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 12px -2px oklch(var(--p) / 0.08),
        0 0 0 1px oklch(var(--bc) / 0.06);
}

/* Filter card shine on hover */
.pfi-filter-card {
    transition: all 0.3s ease;
}
.pfi-filter-card:hover {
    border-color: oklch(var(--p) / 0.15);
    box-shadow: 0 4px 15px -3px oklch(var(--p) / 0.1);
}

/* ══════════════════════════════════════
   Enhanced Footer
   ══════════════════════════════════════ */
.pfi-footer-text {
    background: linear-gradient(90deg, oklch(var(--bc) / 0.3), oklch(var(--bc) / 0.5), oklch(var(--bc) / 0.3));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pfi-gradient-shift 6s ease infinite;
}

/* ══════════════════════════════════════
   Magic UI: Animated Shiny Text
   ══════════════════════════════════════ */
@keyframes pfi-shiny-text {
    0%   { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.pfi-shiny-text {
    background: linear-gradient(
        110deg,
        oklch(var(--bc)) 35%,
        oklch(var(--p)) 50%,
        oklch(var(--bc)) 65%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pfi-shiny-text 3s linear infinite;
}

/* ══════════════════════════════════════
   Sidebar Logo Enhanced
   ══════════════════════════════════════ */
@keyframes pfi-logo-float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-2px); }
}
.pfi-logo-icon {
    animation: pfi-logo-float 3s ease-in-out infinite;
}

/* Group label line decoration */
.pfi-group-label {
    position: relative;
}
.pfi-group-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, oklch(var(--nc) / 0.15), transparent);
    margin-left: 0.5rem;
    display: none;
}

/* ══════════════════════════════════════
   Utility
   ══════════════════════════════════════ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }