@font-face {
    font-family: 'Calibri';
    src: url('../fonts/calibri.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriB';
    src: url('../fonts/calibrib.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
.app-header-title,
th,
label,
.show-entries-label {
    font-family: 'CalibriB', sans-serif;
}

:root {
    --primary-color: #062E52;
    --secondary-color: #FF5C0A;
    --accent-color: #6366f1;
    --bg-color: #f4f6f8;
    --text-color: #111827;
    --text-heading: #062E52;
    --text-light: #f8fafc;

    --panel-border: #e5e7eb;
    --header-height: 40px;
    --footer-height: 30px;

    --card-shadow: rgba(0, 0, 0, 0.08);
    --button-hover-shadow: rgba(0, 0, 0, 0.1);
    --button-background: #26549E;
    --button-hover-background: #FF5C0A;
    --header-footer-bg: #26549E;
}

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: 'Calibri', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow: hidden;
}




#spa-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--secondary-color, #FF5C0A), #f59e0b);
    z-index: 9999;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(255, 92, 10, 0.6);
    transition: width 0.25s ease, opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
}

#spa-loader.loading {
    opacity: 1;
    width: 75%;
    transition: width 2.5s cubic-bezier(0.1, 0.3, 0.3, 1);
}

#spa-loader.done {
    width: 100% !important;
    transition: width 0.2s ease, opacity 0.4s ease 0.15s;
    opacity: 0;
}