html,
body {
    min-width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;
}

body {
    position: absolute;
    min-height: 100vh;

    color: var(--color-primary);

    background-size: var(--app-background-size);
    background-position: var(--app-background-position);
    background-image: var(--app-background-image);
    background-color: var(--app-background-color);
}

navigation-drawer[state="open"]+#page {
    margin-left: 288px;
}

navigation-drawer[state="mini"]+#page {
    margin-left: 88px;
}

#page {
    position: relative;
    min-height: calc(100vh - 20px * 2);

    margin: 0px;
    padding: 20px;

    transition: margin-left 0.35s cubic-bezier(.4, 0, .2, 1), margin-top 0.35s cubic-bezier(.4, 0, .2, 1);
}

a:-webkit-any-link {
    text-decoration: none !important;
    color: var(--color-primary);
}

/* Navigation links with icons */
navigation-drawer li a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    color: var(--color-text, currentColor);
    font-weight: 500;
}

navigation-drawer li a:hover {
    background: var(--color-primary, #1976d2);
    color: var(--color-text-primary-contrast, white);
    transform: translateX(4px);
}

navigation-drawer li a:hover svg-icon {
    --svg-fill: var(--color-text-primary-contrast, white);
}

navigation-drawer li {
    list-style: none;
    margin: 0.25rem 0;
}

@media (max-width: 600px) {
    /* On phones the content should be full width when sidebar is hidden */
    navigation-drawer[state="open"]+#page,
    navigation-drawer[state="mini"]+#page,

    app-layout[sidebar="mini"]+#page,
    app-layout[sidebar="open"]+#page,
    app-layout[sidebar="full"]+#page,
    app-layout[sidebar="hidden"]+#page {
        margin-left: 0 !important;
    }

    /* Reduce vertical spacing on small screens */
    #page {
        padding: 12px;
    }
}