/* ══════════════════════════════════════════════════════════════════════════
   BMS UI — modern dashboard skin: vibrant gradient stat cards, motion,
   report-table polish, clearer buttons. Pure CSS over Filament .fi-* classes.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Entrance / motion keyframes ─────────────────────────────────────────── */
@keyframes bmsFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bmsPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .45); }
    50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}
@keyframes bmsPop {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* ══ FIX: Filament "custom" colour utilities ════════════════════════════════
   When a panel remaps `primary`, Filament renders primary buttons/badges with
   `fi-color-custom` + `bg-custom-*` utilities that are generated only by a
   Tailwind build. This app ships no build, so those classes were missing and
   primary buttons rendered TRANSPARENT. Each fi-color-custom element sets its
   own --c-* vars inline (from its semantic colour), so redefining the utilities
   to read --c-* restores every primary button/badge across the whole app.      */
.bg-custom-50  { background-color: rgb(var(--c-50))  !important; }
.bg-custom-100 { background-color: rgb(var(--c-100)) !important; }
.bg-custom-400 { background-color: rgb(var(--c-400)) !important; }
.bg-custom-500 { background-color: rgb(var(--c-500)) !important; }
.bg-custom-600 { background-color: rgb(var(--c-600)) !important; }
.bg-custom-700 { background-color: rgb(var(--c-700)) !important; }
.hover\:bg-custom-500:hover { background-color: rgb(var(--c-500)) !important; }
.hover\:bg-custom-400:hover { background-color: rgb(var(--c-400)) !important; }
.text-custom-50  { color: rgb(var(--c-50))  !important; }
.text-custom-400 { color: rgb(var(--c-400)) !important; }
.text-custom-500 { color: rgb(var(--c-500)) !important; }
.text-custom-600 { color: rgb(var(--c-600)) !important; }
.text-custom-700 { color: rgb(var(--c-700)) !important; }
.border-custom-600 { border-color: rgb(var(--c-600)) !important; }
.ring-custom-600 { --tw-ring-color: rgb(var(--c-600)); }
.fi-color-custom.fi-badge { background-color: rgb(var(--c-50)); color: rgb(var(--c-700)); }
.dark .dark\:bg-custom-400 { background-color: rgb(var(--c-400)) !important; }
.dark .dark\:bg-custom-500 { background-color: rgb(var(--c-500)) !important; }
.dark .dark\:hover\:bg-custom-400:hover { background-color: rgb(var(--c-400)) !important; }
.dark .dark\:text-custom-400 { color: rgb(var(--c-400)) !important; }

/* ══ Dashboard stat cards — colourful gradients ══════════════════════════ */
.fi-wi-stats-overview-stat {
    position: relative;
    overflow: hidden;
    border: none !important;
    border-radius: 1.15rem;
    padding: 1.15rem 1.25rem;
    color: #fff;
    box-shadow: 0 10px 22px -8px rgba(17, 24, 39, .35), 0 2px 6px rgba(17, 24, 39, .12);
    background-image: linear-gradient(135deg, #6366f1 0%, #3b82f6 100%);
    animation: bmsFadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fi-wi-stats-overview-stat::after {           /* soft light orb, top-inline-end */
    content: "";
    position: absolute;
    inset-block-start: -40%;
    inset-inline-end: -12%;
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.fi-wi-stats-overview-stat:hover {
    transform: translateY(-5px);
    filter: saturate(1.06);
    box-shadow: 0 20px 34px -10px rgba(17, 24, 39, .45), 0 4px 10px rgba(17, 24, 39, .16);
}
/* force all inner text/icons to read on the gradient */
.fi-wi-stats-overview-stat-label,
.fi-wi-stats-overview-stat-value,
.fi-wi-stats-overview-stat-description,
.fi-wi-stats-overview-stat-description-icon,
.fi-wi-stats-overview-stat .fi-icon {
    color: #fff !important;
}
.fi-wi-stats-overview-stat-value {
    font-weight: 800;
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-block: .15rem;
}
.fi-wi-stats-overview-stat-label {
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .01em;
    opacity: .96;
}
.fi-wi-stats-overview-stat-description {
    font-weight: 500;
    opacity: .92;
}

/* Per-position gradient palette (cycles every 6 cards, staggered entrance) */
.fi-wi-stats-overview-stat:nth-child(6n+1){ background-image:linear-gradient(135deg,#6366f1,#3b82f6); animation-delay:.00s; }
.fi-wi-stats-overview-stat:nth-child(6n+2){ background-image:linear-gradient(135deg,#10b981,#059669); animation-delay:.06s; }
.fi-wi-stats-overview-stat:nth-child(6n+3){ background-image:linear-gradient(135deg,#f43f5e,#e11d48); animation-delay:.12s; }
.fi-wi-stats-overview-stat:nth-child(6n+4){ background-image:linear-gradient(135deg,#f59e0b,#f97316); animation-delay:.18s; }
.fi-wi-stats-overview-stat:nth-child(6n+5){ background-image:linear-gradient(135deg,#8b5cf6,#a855f7); animation-delay:.24s; }
.fi-wi-stats-overview-stat:nth-child(6n+6){ background-image:linear-gradient(135deg,#06b6d4,#0ea5e9); animation-delay:.30s; }

/* ══ Section / chart / table containers ══════════════════════════════════ */
.fi-section,
.fi-wi-chart,
.fi-ta-ctn {
    border-radius: 1rem;
    box-shadow: 0 1px 3px rgba(17, 24, 39, .07), 0 1px 2px rgba(17, 24, 39, .04);
    transition: box-shadow .18s ease, transform .18s ease;
}
.fi-section:hover,
.fi-wi-chart:hover {
    box-shadow: 0 10px 24px -8px rgba(17, 24, 39, .14);
}
.fi-wi-chart { animation: bmsPop .45s ease both; }

/* Widget/section headings get a small accent bar before the title */
.fi-section-header-heading,
.fi-wi-chart .fi-wi-chart-header-heading {
    position: relative;
    padding-inline-start: .65rem;
}
.fi-section-header-heading::before,
.fi-wi-chart .fi-wi-chart-header-heading::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block: .1rem;
    width: 4px;
    border-radius: 4px;
    background: rgb(var(--primary-500));
}

/* ══ Tables (reports/lists) — cleaner header, zebra, hover ════════════════ */
.fi-ta-header-cell {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .7rem;
    font-weight: 700;
    color: rgb(var(--primary-700));
    background: rgb(var(--primary-50) / .6);
}
.dark .fi-ta-header-cell {
    color: rgb(var(--primary-300));
    background: rgb(var(--primary-500) / .1);
}
.fi-ta-row {
    transition: background-color .12s ease;
}
.fi-ta-row:nth-child(even) {
    background: rgba(148, 163, 184, .05);
}
.fi-ta-row:hover {
    background: rgb(var(--primary-50) / .7);
}
.dark .fi-ta-row:hover {
    background: rgb(var(--primary-500) / .12);
}

/* Danger badges (overdue / SLA breach) gently pulse to draw the eye */
.fi-badge.fi-color-danger {
    animation: bmsPulse 2.2s ease-in-out infinite;
}

/* ══ Buttons — more presence ═════════════════════════════════════════════ */
.fi-btn {
    font-weight: 600;
    transition: transform .1s ease, box-shadow .14s ease, filter .14s ease;
}
.fi-btn:active { transform: translateY(1px); }
/* solid/primary buttons: lift + subtle shadow */
.fi-btn.fi-color-primary,
.fi-btn.fi-color-success,
.fi-btn.fi-color-danger,
.fi-btn.fi-color-warning {
    box-shadow: 0 4px 12px -4px rgba(17, 24, 39, .35);
}
.fi-btn.fi-color-primary:hover,
.fi-btn.fi-color-success:hover,
.fi-btn.fi-color-danger:hover,
.fi-btn.fi-color-warning:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 18px -6px rgba(17, 24, 39, .4);
}
/* outlined / ghost buttons: give the outline real weight so it's visible */
.fi-btn-outlined { border-width: 1.5px; }

/* Header action buttons: force PRIMARY ones to a vivid solid fill (some render
   washed-out/outlined on custom pages) so the main call-to-action always pops. */
.fi-header-actions .fi-btn.fi-color-primary,
.fi-header-actions a.fi-btn.fi-color-primary {
    background-color: rgb(var(--primary-600)) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px -6px rgb(var(--primary-600) / .7) !important;
}
.fi-header-actions .fi-btn.fi-color-primary:hover {
    background-color: rgb(var(--primary-700)) !important;
}
.fi-header-actions .fi-btn.fi-color-primary .fi-icon,
.fi-header-actions .fi-btn.fi-color-primary svg { color: #fff !important; }

/* ══ Sidebar — distinct branded tint (clearly different from the white app bg) ══
   Light branded panel: text stays dark/readable, active item goes solid brand.  */
.fi-sidebar,
.fi-sidebar-nav {
    background: linear-gradient(180deg, rgb(var(--primary-600) / .13) 0%, rgb(var(--primary-600) / .05) 100%) !important;
}
.fi-sidebar {
    border-inline-end: 1px solid rgb(var(--primary-600) / .16);
    box-shadow: 2px 0 14px rgba(17, 24, 39, .05);
}
.fi-sidebar-header { background: transparent !important; }
.fi-sidebar-group-label { letter-spacing: .03em; }
.fi-sidebar-item-button:hover { background: rgb(var(--primary-600) / .10) !important; }
/* active item — solid brand accent with white text */
.fi-sidebar-item-button[aria-current="page"],
.fi-sidebar-item.fi-active > .fi-sidebar-item-button,
.fi-sidebar-item-active > .fi-sidebar-item-button {
    background: rgb(var(--primary-600)) !important;
    box-shadow: 0 6px 14px -6px rgb(var(--primary-700) / .8);
}
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-label,
.fi-sidebar-item-button[aria-current="page"] .fi-sidebar-item-icon,
.fi-sidebar-item-button[aria-current="page"] .fi-icon,
.fi-sidebar-item.fi-active .fi-sidebar-item-label,
.fi-sidebar-item.fi-active .fi-icon { color: #fff !important; }
/* dark mode: deepen the tint so it still separates from the dark canvas */
.dark .fi-sidebar,
.dark .fi-sidebar-nav {
    background: linear-gradient(180deg, rgb(var(--primary-500) / .18) 0%, rgba(17, 24, 39, .25) 100%) !important;
}

/* ══ Kanban board add-buttons (var-based so they work without a Tailwind build) ══ */
.bms-col-add {
    background: rgb(var(--primary-600));
    color: #fff;
}
.bms-col-add:hover { background: rgb(var(--primary-700)); }
.bms-newtask-btn {
    background: rgb(var(--primary-50));
    color: rgb(var(--primary-700));
    border: 1px dashed rgb(var(--primary-300));
    font-weight: 600;
}
.bms-newtask-btn:hover { background: rgb(var(--primary-100)); }

/* ══ Nicer scrollbars ════════════════════════════════════════════════════ */
.fi-main::-webkit-scrollbar { width: 10px; height: 10px; }
.fi-main::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .4); border-radius: 8px; }
.fi-main::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .6); }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .fi-wi-stats-overview-stat,
    .fi-wi-chart,
    .fi-badge.fi-color-danger { animation: none !important; }
}