/*
 * Vifaa "Harbour" look: deep navy, a touch of red, and white. Plain CSS, loaded only when the look is harbour, and every
 * rule is scoped to html[data-theme="harbour"] so Joyful and Classic are untouched. No build step.
 * Blue leads, red is used sparingly (card edge tip, alerts), white carries the surfaces.
 */
html[data-theme="harbour"] {
    --h-blue: #1d4ed8;
    --h-navy: #1e3a8a;
    --h-red: #dc2626;
    --h-radius: 0.875rem;
    --h-gradient: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    --h-edge: linear-gradient(90deg, #1e3a8a 0%, #2563eb 82%, #dc2626 82%, #dc2626 100%);

    --h-bg: #f5f8fc;
    --h-glow: rgba(37, 99, 235, 0.10);
    --h-glow-2: rgba(220, 38, 38, 0.04);
    --h-card: #ffffff;
    --h-sidebar: #ffffff;
    --h-line: rgba(148, 163, 184, 0.35);
    --h-head: rgba(29, 78, 216, 0.06);
    --h-head-ink: #1e3a8a;
    --h-topbar: rgba(255, 255, 255, 0.85);
    --h-hover: rgba(29, 78, 216, 0.07);
    --h-group: #1e3a8a;
    --h-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px -14px rgba(30, 58, 138, 0.25);
    --h-ring: rgba(37, 99, 235, 0.25);

    /* Filament's primary colour (links, toggles, tabs, badges) becomes blue. */
    --primary-50: rgb(239 246 255);
    --primary-100: rgb(219 234 254);
    --primary-200: rgb(191 219 254);
    --primary-300: rgb(147 197 253);
    --primary-400: rgb(96 165 250);
    --primary-500: rgb(59 130 246);
    --primary-600: rgb(37 99 235);
    --primary-700: rgb(29 78 216);
    --primary-800: rgb(30 64 175);
    --primary-900: rgb(30 58 138);
    --primary-950: rgb(23 37 84);
}
html[data-theme="harbour"].dark {
    --h-bg: #0b1220;
    --h-glow: rgba(59, 130, 246, 0.14);
    --h-glow-2: rgba(248, 113, 113, 0.05);
    --h-card: #111a2e;
    --h-sidebar: #0e1627;
    --h-line: rgba(255, 255, 255, 0.08);
    --h-head: #16223b;
    --h-head-ink: #dbeafe;
    --h-topbar: rgba(11, 18, 32, 0.8);
    --h-hover: rgba(96, 165, 250, 0.12);
    --h-group: #93c5fd;
    --h-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -14px rgba(0, 0, 0, 0.6);
    --h-ring: rgba(96, 165, 250, 0.3);
    --h-edge: linear-gradient(90deg, #2563eb 0%, #60a5fa 82%, #f87171 82%, #f87171 100%);
}

/* Product mark and tagline follow the look: navy gradient "V" and a navy tag instead of teal. */
html[data-theme="harbour"] {
    --vifaa-logo-bg: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
}
html[data-theme="harbour"] .vifaa-tagline-tag {
    background: #1e3a8a;
}
html[data-theme="harbour"].dark .vifaa-tagline-tag {
    background: #2563eb;
}

/* Page: cool near-white (ink navy in dark) with a faint blue glow and a hint of red low left. */
html[data-theme="harbour"] body.fi-body,
html[data-theme="harbour"] .fi-body {
    background-color: var(--h-bg);
    background-image:
        radial-gradient(60rem 30rem at 100% -10%, var(--h-glow), transparent 60%),
        radial-gradient(50rem 26rem at -10% 110%, var(--h-glow-2), transparent 60%);
    background-attachment: fixed;
}

/* Cards: sections, tables, stat tiles and widgets. */
html[data-theme="harbour"] .fi-section:not(.fi-section-not-contained),
html[data-theme="harbour"] .fi-ta-ctn,
html[data-theme="harbour"] .fi-wi-stats-overview-stat,
html[data-theme="harbour"] .fi-wi-chart,
html[data-theme="harbour"] .fi-in-ctn {
    border-radius: var(--h-radius);
    border: 1px solid var(--h-line);
    background: var(--h-card);
    box-shadow: var(--h-shadow);
    position: relative;
    overflow: hidden;
}
html[data-theme="harbour"] .fi-section:not(.fi-section-not-contained)::before,
html[data-theme="harbour"] .fi-ta-ctn::before,
html[data-theme="harbour"] .fi-wi-stats-overview-stat::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--h-edge);
}
/* A card inside a card does not get a second edge. */
html[data-theme="harbour"] .fi-section .fi-section::before,
html[data-theme="harbour"] .fi-section .fi-ta-ctn::before {
    display: none;
}
html[data-theme="harbour"] .fi-wi-stats-overview-stat {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html[data-theme="harbour"] .fi-wi-stats-overview-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -14px rgba(30, 58, 138, 0.4);
}
html[data-theme="harbour"] .fi-section-header-heading,
html[data-theme="harbour"] .fi-header-heading {
    font-weight: 700;
    color: var(--h-navy);
}
html[data-theme="harbour"].dark .fi-section-header-heading,
html[data-theme="harbour"].dark .fi-header-heading {
    color: #fff;
}

/* Buttons: pills, with a blue gradient for the main action. */
html[data-theme="harbour"] .fi-btn {
    border-radius: 999px;
    font-weight: 600;
}
html[data-theme="harbour"] .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-color-gray) {
    background-image: var(--h-gradient);
    background-color: var(--h-blue);
    color: #fff;
    border: 0;
    box-shadow: 0 6px 16px -6px rgba(30, 64, 175, 0.55);
}
html[data-theme="harbour"] .fi-btn.fi-color-primary:not(.fi-outlined):not(.fi-btn-color-gray):hover {
    filter: brightness(1.08);
}
html[data-theme="harbour"] .fi-btn.fi-color-danger:not(.fi-outlined) {
    background-color: var(--h-red);
    color: #fff;
}

/* Sidebar and top bar: white, with a navy pill for the active link and a soft blue tint on hover. */
html[data-theme="harbour"] .fi-sidebar {
    background: var(--h-sidebar);
    border-right: 1px solid var(--h-line);
}
html[data-theme="harbour"] .fi-sidebar-item-btn {
    border-radius: 0.8rem;
}
html[data-theme="harbour"] .fi-sidebar-item:not(.fi-active) > .fi-sidebar-item-btn:hover,
html[data-theme="harbour"] .fi-dropdown-list-item:hover {
    background-color: var(--h-hover);
}
html[data-theme="harbour"] .fi-sidebar-item.fi-active > .fi-sidebar-item-btn,
html[data-theme="harbour"] .fi-sidebar-item-btn.fi-active {
    background-image: var(--h-gradient);
    box-shadow: 0 6px 14px -8px rgba(30, 64, 175, 0.6);
}
html[data-theme="harbour"] .fi-sidebar-item.fi-active .fi-sidebar-item-label,
html[data-theme="harbour"] .fi-sidebar-item.fi-active .fi-sidebar-item-icon,
html[data-theme="harbour"] .fi-sidebar-item.fi-active svg {
    color: #ffffff;
}
html[data-theme="harbour"] .fi-sidebar-group-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.7rem;
    color: var(--h-group);
}
html[data-theme="harbour"] .fi-topbar > nav,
html[data-theme="harbour"] .fi-topbar {
    background: var(--h-topbar);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Inputs and tables. */
html[data-theme="harbour"] .fi-input-wrp {
    border-radius: 0.75rem;
}
html[data-theme="harbour"] .fi-input-wrp:focus-within {
    box-shadow: 0 0 0 4px var(--h-ring);
}
html[data-theme="harbour"] .fi-ta-header-cell {
    background: var(--h-head);
    color: var(--h-head-ink);
}
html[data-theme="harbour"] .fi-ta-row:hover {
    background: var(--h-hover);
}
html[data-theme="harbour"] .fi-badge {
    border-radius: 999px;
}

/* A little motion: the page rises in once. */
@media (prefers-reduced-motion: no-preference) {
    html[data-theme="harbour"] .fi-main {
        /* "backwards", never "both"/"forwards": a held transform makes this the containing block of position:fixed modals. */
        animation: h-rise 0.35s ease-out backwards;
    }
    @keyframes h-rise {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: none; }
    }
}