/* Small brand override for the New API dashboard and landing page. */
:root,
:host {
    --font-sans: "Trebuchet MS", Arial, sans-serif;
    --font-serif: Georgia, "Times New Roman", serif;
    --default-font-family: var(--font-sans);
    --background: #f7fbfa;
    --card: #ffffff;
    --primary: #0f766e;
    --primary-foreground: #ffffff;
    --accent: #e6f5f2;
    --accent-foreground: #0f5e58;
    --ring: #0f766e;
    --sidebar-primary: #0f766e;
    --sidebar-accent: #e6f5f2;
    --sidebar-accent-foreground: #0f5e58;
    --overview-accent-1: #0f766e;
    --overview-accent-2: #14b8a6;
    --overview-accent-3: #99f6e4;
}

.dark {
    --background: #111c1b;
    --card: #172625;
    --primary: #2dd4bf;
    --primary-foreground: #042f2e;
    --accent: #173f3b;
    --accent-foreground: #99f6e4;
    --ring: #2dd4bf;
    --sidebar-primary: #2dd4bf;
    --sidebar-accent: #173f3b;
    --sidebar-accent-foreground: #99f6e4;
    --overview-accent-1: #2dd4bf;
    --overview-accent-2: #14b8a6;
    --overview-accent-3: #0f766e;
}

html,
body,
button,
input,
textarea,
select {
    font-family: var(--font-sans);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-serif);
}

body {
    background-color: var(--background);
}

/* Keep the public footer readable on narrow screens. */
html,
body,
#root {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    [data-slot="sidebar-inset"],
    [data-slot="sidebar-inset"] > *,
    main,
    section,
    article {
        min-width: 0;
        max-width: 100%;
    }

    footer,
    [data-slot="footer"] {
        width: 100%;
        min-width: 0;
        gap: 0.75rem !important;
        padding: 1rem !important;
        text-align: center;
        flex-wrap: wrap;
    }

    footer > *,
    [data-slot="footer"] > * {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
    }

    pre,
    code {
        max-width: 100%;
        overflow-x: auto;
        overflow-wrap: anywhere;
    }

    img,
    svg {
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: anywhere;
    }
}