/* ShopIQ application styles (loaded after compiled tailwind.css) */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Minimalist flat inputs */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: none !important;
    border-color: #000e23 !important;
}

/* Keyboard focus visibility (screen readers / keyboard nav) */
:focus-visible {
    outline: 2px solid #0B3C6E;
    outline-offset: 2px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #0B3C6E;
    outline-offset: 2px;
}
.swiss-table :focus-visible,
.material-symbols-outlined:focus-visible {
    outline-offset: 0;
}

/* Skip-to-content link (hidden until focused) */
.skip-link {
    position: fixed;
    top: -100px;
    left: 12px;
    z-index: 100;
    padding: 10px 16px;
    background: #0B3C6E;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 0 0 6px 6px;
    transition: top .15s ease;
}
.skip-link:focus {
    top: 0;
    outline: none;
}

.bg-off-white { background-color: #F5F6F7; }
.text-ink { color: #1A1D21; }

.tag-returning { border: 1px solid #2E7D32; color: #2E7D32; background: #ffffff; }
.tag-new { border: 1px solid #0B3C6E; color: #0B3C6E; background: #ffffff; }
.tag-blocked { border: 1px solid #ba1a1a; color: #ba1a1a; background: #ffffff; }
.tag-pending { border: 1px solid #b8a36c; color: #9c8529; background: #ffffff; }

/* Chart containers */
.chart-box { position: relative; height: 280px; }

/* Tables */
.swiss-table th, .swiss-table td { border: 1px solid #E1E4E8; padding: 12px 16px; }
.swiss-table { border-collapse: collapse; width: 100%; }

/* Dropdown (More) */
.more-menu[data-open="1"] { display: block; }

/* Mobile nav transition */
.mobile-nav-link { position: relative; }

/* Flash toasts */
@keyframes toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}
.toast { animation: toast-in .18s ease-out; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .toast { animation: none; }
}