/* No CSS cascade layers: the library relies on source order + `!important` on
   utilities. Import order below is the priority order (later wins for equal
   specificity). Consumers override plain utilities with normal CSS, and
   override `!important` utilities by adding their own `!important`. */

/* Icon fonts — must load via the main stylesheet (not only inside Icon.vue's
   <style>), otherwise in Vite dev mode the @import is injected after other
   rules and the browser ignores it, so Material/Font Awesome icons render as
   raw ligature text. Keep these first so the @import rules stay valid. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');

/* Tokens — lowest priority, only custom properties */
@import "theme.css";
@import "dark.css";
@import "./fonts/Ploni.css";

/* Base / component styles (plain — utilities with !important win over these) */
@import "inputs.css";
@import "input-variants.css";
@import "buttons.css";
@import "scrollbar.css";
@import "transitions.css";
@import "motion.css";
@import "loginCard.css";
@import "app-layout.css";

/* Utilities — highest priority (carry !important) */
@import "base-colors.css";
@import "layout.css";
@import "mobilLayout.css";
@import "text.css";
@import "colors.css";
@import "mobileColors.css";
@import "appearance.css";
@import "gradients.css";
@import "color-variants.css";

/* Icon font-family bindings — mirrored from Icon.vue so icons work even when
   that component's injected <style> is not yet present (e.g. Vite dev mode). */
.bgl_icon-font {
    font-family: 'Material Symbols Outlined', serif !important;
}

.bgl_icon-font.fa {
    font-family: 'Font Awesome 6 Free', serif !important;
}

.bgl_icon-font.fa-brands {
    font-family: 'Font Awesome 6 Brands', serif !important;
}

/* Reset / base element styles */
:root {
        --bgl-transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
        --bgl-transition-ease-in: cubic-bezier(0.1, 0.5, 0.33, 1);
    }

    .grid>* {
        min-height: 0;
    }

    * {
        box-sizing: border-box;
    }

    html {
        text-size-adjust: 100%;
        height: 100%;
        background-attachment: scroll;
    }

    body {
        margin: 0;
        min-height: 100%;
        background-color: var(--bgl-bg);
        font-family: var(--bgl-font);
        font-size: var(--bgl-font-size);
        font-weight: 400;
        line-height: 1.65;
        width: auto;
        height: auto;
        color: var(--bgl-text-color);
    }

    a {
        background-color: transparent;
        cursor: pointer;
        display: inline-block;
        color: inherit;
    }

    a:active,
    a:hover {
        outline: 0;
    }

    b,
    strong {
        font-weight: bold;
    }

    hr {
        box-sizing: content-box;
    }

    img,
    video,
    canvas,
    audio,
    iframe,
    embed,
    object {
        max-width: 100%;
        vertical-align: middle;
        border: 0;
    }

    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
    }

    @media screen and (max-width: 910px) {
        body {
            min-height: 100vh;
            min-height: -webkit-fill-available;
            height: -webkit-fill-available;
        }

        html {
            height: -webkit-fill-available;
        }
    }