/*
 * NaviSafe Theme
 * Visual theme inspired by shipyard-dashboard-demo.html
 * Load via ->stylesheet(asset('css/navisafe-theme.css')) in panel providers.
 */

/* === Inter Font === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* === CSS Variables === */
:root {
    --ns-brand-50:  #eff7ff;
    --ns-brand-100: #dbeefe;
    --ns-brand-200: #b8ddfe;
    --ns-brand-300: #7ac3fd;
    --ns-brand-400: #38a3f9;
    --ns-brand-500: #0e83f0;
    --ns-brand-600: #0265ce;
    --ns-brand-700: #0251a8;
    --ns-brand-800: #07428a;
    --ns-brand-900: #0c3872;
    --ns-brand-950: #081f47;

    --ns-navy-50:  #f0f5ff;
    --ns-navy-100: #e0eaff;
    --ns-navy-200: #c0d2ff;
    --ns-navy-300: #93affa;
    --ns-navy-400: #6488f5;
    --ns-navy-500: #3f63ee;
    --ns-navy-600: #2846d9;
    --ns-navy-700: #1f35be;
    --ns-navy-800: #1e2d99;
    --ns-navy-900: #1e2b79;
    --ns-navy-950: #141a4d;

    --ns-sidebar-bg:  rgba(8, 14, 44, 0.97);
    --ns-page-bg:     #f0f4fb;
    --ns-topbar-bg:   rgba(255, 255, 255, 0.72);
    --ns-topbar-blur: blur(12px);

    /* Primary action color — lighter shade of the sidebar navy family */
    --ns-primary:       #1e2b79; /* navy-900: visible navy, white text */
    --ns-primary-hover: #1f35be; /* navy-700: brightens on hover */
    --ns-primary-ring:  rgba(30, 43, 121, 0.15);
}

/* === Base font === */
body,
.fi-body {
    font-family: 'Inter', sans-serif !important;
}

/* === Page / main background === */
.fi-main,
.fi-main-ctn,
.fi-body {
    background-color: var(--ns-page-bg) !important;
}

/* === Sidebar — dark navy === */
.fi-sidebar {
    background-color: var(--ns-sidebar-bg) !important;
    backdrop-filter: var(--ns-topbar-blur);
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Sidebar brand/header area */
.fi-sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Sidebar nav item — default */
.fi-sidebar-item-btn {
    border-radius: 0.5rem;
}
.fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #bfdbfe !important; /* blue-200 */
}
.fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item-btn svg {
    color: #93c5fd !important; /* blue-300 */
}

/* Sidebar nav item — hover */
.fi-sidebar-item-btn:hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
}
.fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar-item-btn:hover svg {
    color: #ffffff !important;
}

/* Sidebar nav item — active */
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: rgba(255, 255, 255, 0.12) !important;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label {
    color: #ffffff !important;
    font-weight: 500;
}
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar-item.fi-active > .fi-sidebar-item-btn svg {
    color: #ffffff !important;
}

/* Sidebar group heading */
.fi-sidebar-group-label {
    color: rgba(147, 197, 253, 0.55) !important;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Sidebar footer / tenant selector */
.fi-sidebar-footer,
.fi-tenant-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* === Topbar — glassmorphism === */
.fi-topbar {
    background: var(--ns-topbar-bg) !important;
    backdrop-filter: var(--ns-topbar-blur) !important;
    -webkit-backdrop-filter: var(--ns-topbar-blur) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.55) !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04) !important;
}

/* Topbar text */
.fi-topbar h1,
.fi-topbar .fi-breadcrumbs-item-label {
    color: #0f172a !important; /* slate-900 */
}

/* === Custom scrollbar === */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* === Utility classes from demo === */

/* Glassmorphism — light */
.glass {
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.30);
}

/* Glassmorphism — dark navy */
.glass-dark {
    background: rgba(8, 14, 44, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Gradient border */
.gradient-border {
    position: relative;
}
.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #3b82f6, #6366f1);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Scroll fade */
.scroll-fade {
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}

/* Pulse dot animation */
@keyframes ns-pulse-ring {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}
.pulse-dot {
    animation: ns-pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* === Stat card enhancements === */
/* Smooth lift on hover (complements existing .stat-card in tailwind-utilities.css) */
.stat-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.stat-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.14) !important;
}

/* === Filament widget / section cards — rounded & lighter shadow === */
.fi-wi,
.fi-section {
    border-radius: 1rem !important;
}

/* === Tables — subtle background === */
.fi-ta-ctn {
    border-radius: 1rem !important;
    overflow: hidden;
}

/* === All primary-colored elements — point icon/text shades to --ns-primary === */
/* .fi-color-primary sets --color-400/500/600 from the palette; override them here */
.fi-color-primary {
    --color-400: var(--ns-primary) !important;
    --color-500: var(--ns-primary) !important;
    --color-600: var(--ns-primary) !important;
}

/* === Primary buttons — use --ns-primary (sidebar navy) as single source of truth === */
.fi-btn.fi-color-primary {
    --bg: var(--ns-primary) !important;
    --hover-bg: var(--ns-primary-hover) !important;
    --dark-bg: var(--ns-primary) !important;
    --dark-hover-bg: var(--ns-primary-hover) !important;
    --text: #ffffff !important;
    --hover-text: #ffffff !important;
    --dark-text: #ffffff !important;
    --dark-hover-text: #ffffff !important;
}

/* === Outlined primary buttons === */
.fi-btn.fi-outlined.fi-color-primary {
    --tw-ring-color: var(--ns-primary) !important;
    color: var(--ns-primary) !important;
}
.fi-btn.fi-outlined.fi-color-primary:hover {
    background-color: var(--ns-primary-ring) !important;
    color: var(--ns-primary) !important;
}
.fi-btn.fi-outlined.fi-color-primary svg {
    color: var(--ns-primary) !important;
}

/* === Page subtitle (subheading) — smaller than Filament's default text-lg === */
.fi-header-subheading {
    font-size: 0.875rem !important;
    line-height: 1.25rem !important;
}