/* Fimi Data - Custom Styles */
/* Brand tokens (mirror Tailwind config in Pages/Shared/_Layout.cshtml):
   Navy #0D1B3E   Ink #141619   Cream #F8F7F4   Albert Sans (all type)
   The brand-* Tailwind scale reads the --fimi-brand-N channels below, so the
   same class is deep navy in light mode and a readable blue in dark mode.
*/

:root {
    --fimi-navy: #0D1B3E;
    --fimi-navy-mid: #1F3360;
    --fimi-accent: #0D1B3E;
    --fimi-accent-soft: #7088BD;
    --fimi-cream: #F8F7F4;

    --fimi-brand-50: 241 244 249;
    --fimi-brand-100: 226 231 241;
    --fimi-brand-200: 201 211 230;
    --fimi-brand-300: 167 182 212;
    --fimi-brand-400: 124 146 190;
    --fimi-brand-500: 61 90 143;
    --fimi-brand-600: 13 27 62;
    --fimi-brand-700: 8 18 43;
    --fimi-brand-800: 6 14 34;
    --fimi-brand-900: 4 10 24;

    /* Light-mode greys: warmer borders and darker secondary text for contrast on white. */
    --fimi-gray-50: 244 243 240;
    --fimi-gray-100: 233 232 228;
    --fimi-gray-200: 217 216 211;
    --fimi-gray-300: 196 195 189;
    --fimi-gray-500: 71 78 91;

    /* Card surface on the white page (light mode). */
    --fimi-surface: 245 244 240;
    --fimi-surface-border: 231 229 223;
}

.dark {
    --fimi-brand-400: 157 176 214;
    --fimi-brand-500: 112 136 189;
    --fimi-brand-600: 88 116 176;
    --fimi-brand-700: 74 100 160;
    --fimi-brand-800: 31 51 96;
    --fimi-brand-900: 27 43 82;

    /* Dark mode keeps Tailwind's default greys. */
    --fimi-gray-50: 249 250 251;
    --fimi-gray-100: 243 244 246;
    --fimi-gray-200: 229 231 235;
    --fimi-gray-300: 209 213 219;
    --fimi-gray-500: 107 114 128;
}

/* The HTML hidden attribute must beat Tailwind's display utilities (grid, flex, block...).
   Tailwind's preflight sets [hidden] { display: none } at class specificity, so it loses to a
   `grid` or `flex` class on the same element: the dashboard Getting-started "Hide" button set
   el.hidden on a `grid` list and only the subtitle disappeared. */
[hidden]:not([hidden="until-found"]) {
    display: none !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Reserve the vertical scrollbar gutter on the main scroll container.
   Without this, pages whose content height sits near the viewport boundary
   (e.g. the wide Vendors list, whose flex-wrap cells reflow when width changes)
   can flip the scrollbar on and off, shifting the mx-auto-centered content
   left/right repeatedly. Reserving the gutter keeps the content width stable
   regardless of scrollbar presence. */
main.overflow-y-auto {
    scrollbar-gutter: stable;
}

/* Custom focus ring — brand navy */
*:focus-visible {
    outline: 2px solid var(--fimi-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Table hover effects */
.table-row-hover:hover {
    background-color: #F8F7F4;
}
.dark .table-row-hover:hover {
    background-color: #1f2937;
}

/* Card hover lift */
.card-hover {
    transition: transform 150ms ease, box-shadow 150ms ease;
}
.card-hover:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.dark .card-hover:hover {
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

/* Status badge animations */
.status-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Toast animations */
.toast-enter {
    animation: slideInRight 300ms ease-out;
}

.toast-exit {
    animation: slideOutRight 200ms ease-in forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Compliance score ring */
.score-ring {
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Subtle gradient backgrounds — brand warm */
.bg-gradient-subtle {
    background: linear-gradient(135deg, var(--fimi-cream) 0%, #E8ECF4 100%);
}
.dark .bg-gradient-subtle {
    background: linear-gradient(135deg, #030712 0%, #0f172a 100%);
}

/* Navy gradient with a soft silver glow — hero & CTA sections */
.bg-gradient-navy {
    background: var(--fimi-navy);
    background-image:
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(159, 176, 204, 0.14) 0%, transparent 70%),
        linear-gradient(165deg, #0D1B3E 0%, #1F3360 50%, #0D1B3E 100%);
}

/* Navy dark footer */
.bg-gradient-navy-dark {
    background: linear-gradient(180deg, #0A1633 0%, #040A18 100%);
}

/* Form input refinements — navy focus */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
select,
textarea {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
    border-color: #3D5A8F;
    box-shadow: 0 0 0 3px rgba(61, 90, 143, 0.18);
}

.dark input[type="text"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="date"]:focus,
.dark input[type="search"]:focus,
.dark select:focus,
.dark textarea:focus {
    border-color: var(--fimi-accent-soft);
    box-shadow: 0 0 0 3px rgba(112, 136, 189, 0.28);
}

/* Empty state styling */
.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
}

/* Mobile drawer transition */
#mobile-drawer {
    transition: transform 300ms ease-in-out;
}

/* Mobile backdrop fade */
#mobile-backdrop {
    transition: opacity 200ms ease;
}

/* Dark focus ring — softer blue for dark bg */
.dark *:focus-visible {
    outline-color: var(--fimi-accent-soft);
}

/* Breathing focus animation for decorative imagery */
@keyframes breathe {
    0%, 100% { filter: blur(0px); opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
    50% { filter: blur(2px); opacity: 0.5; transform: translate(-50%, -50%) scale(1.04); }
}
.animate-breathe {
    animation: breathe 6s ease-in-out infinite;
}

/* Flag icon-chip tooltip — body-level, position:fixed (set in site.js) so it escapes the
   table's overflow-x-auto clipping. Instant, styled; replaces the laggy native title. */
.flag-tooltip {
    position: fixed;
    z-index: 60;
    max-width: 16rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    background: #111827;            /* gray-900 */
    color: #f9fafb;                 /* gray-50 */
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.25), 0 4px 6px -4px rgb(0 0 0 / 0.25);
    pointer-events: none;           /* never intercept the hover */
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 120ms ease, transform 120ms ease;
}
.flag-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.flag-tooltip-title {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1rem;
}
.flag-tooltip-desc {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    line-height: 0.95rem;
    color: #d1d5db;                 /* gray-300 */
}
.dark .flag-tooltip {
    background: #1f2937;            /* gray-800 */
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.06), 0 10px 15px -3px rgb(0 0 0 / 0.5);
}

/* Light mode surfaces: white page, warm-grey cards.
   Cards (bg-white + border + rounded-xl/2xl) take the surface tint; anything holding a
   table stays white so rows read crisply. Buttons, form fields, small
   text-sized controls, dialogs and floating menus are excluded. Dark mode is untouched. */
html:not(.dark) :is(.rounded-xl, .rounded-2xl).bg-white.border:not(button, a.text-sm, input, select, textarea, dialog, .text-sm, .text-xs, .shadow-lg, .shadow-xl, .shadow-2xl, .absolute, .fixed) {
    background-color: rgb(var(--fimi-surface));
    border-color: rgb(var(--fimi-surface-border));
}
html:not(.dark) :is(.rounded-xl, .rounded-2xl).bg-white.border:not(button, a.text-sm, input, select, textarea, dialog, .text-sm, .text-xs, .shadow-lg, .shadow-xl, .shadow-2xl, .absolute, .fixed):has(table) {
    background-color: #FFFFFF;
    border-color: rgb(var(--fimi-gray-200));
}
html:not(.dark) :is(.rounded-xl, .rounded-2xl).bg-white.border[class*="hover:border-brand"]:hover {
    border-color: rgb(var(--fimi-brand-500));
}

/* Status badges (rounded-full text-xs pills): a thin outline in their own colour so they
   scan at a glance on white and tinted surfaces. */
html:not(.dark) span.inline-flex.rounded-full.text-xs:not([class*="bg-transparent"]) {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}