@import url('https://api.fontshare.com/v2/css?f[]=general-sans@500,600,700&f[]=satoshi@400,500,700&display=swap');
@import "tailwindcss";
@import "./theme.css";
@import "./typography.css";

@plugin "@tailwindcss/typography";
@plugin "tailwindcss-react-aria-components";
@plugin "tailwindcss-animate";

@custom-variant dark (&:where(.dark-mode, .dark-mode *));
@custom-variant label (& [data-label]);
@custom-variant focus-input-within (&:has(input:focus));

@utility scrollbar-hide {
    /* For Webkit-based browsers (Chrome, Safari and Opera) */
    &::-webkit-scrollbar {
        display: none;
        -webkit-appearance: none;
    }

    /* For IE, Edge and Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

@utility transition-inherit-all {
    transition-property: inherit;
    transition-duration: inherit;
    transition-timing-function: inherit;
}

@utility bg-sidebar {
    background-color: var(--color-sidebar-bg);
}

@utility bg-sidebar-active {
    background-color: var(--color-sidebar-nav-item-active-bg);
}

@utility bg-sidebar-hover {
    background-color: var(--color-sidebar-nav-item-hover-bg);
}

@utility text-sidebar-active {
    color: var(--color-sidebar-nav-item-active-text);
}

@utility text-sidebar-hover {
    color: var(--color-sidebar-nav-item-hover-text);
}

/* FontAwesome duotone — icons inherit color from parent via currentColor.
   Secondary layer opacity controls the duotone effect. */
:root {
    --fa-secondary-opacity: 0.4;
}

html,
body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-variant-ligatures: contextual;
    font-variant-ligatures: contextual;
    -webkit-font-kerning: normal;
    font-kerning: normal;
}

/* Hide the default expand arrow on Safari.  */
details summary::-webkit-details-marker {
    display: none;
}

/* Hide default arrows from number inputs. */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/* Hide the default clear button (X) from search inputs. */
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* Hide the default outline on chart elements. */
.recharts-surface,
.recharts-surface g,
.recharts-surface path {
    outline: none;
}
