/*:root {
    --nav-hover-bg: rgba(255, 255, 255, 0.15);
    --nav-bg-2:#eec0d3;
    --nav-bg-1: #cba2d6;
    --footer-bg: #f4f4f4;
    --nav-font-family: 'Arial';
    --nav-font-weight: 600;
    --body-bg: #f9d3e9;
    --form-btn: #d8b4e2;
    --form-btn-hover: #c499d1;
    --shopping-item-bg: #f6c0db;
    --shopping-item-bg-in-cart: #b97284;
    --border-focus-bg: #d8b4e2;
}*/

:root {
    --nav-hover-bg: rgba(255, 255, 255, 0.15);
    --nav-bg-2:#0d4d91;
    --nav-bg-1: #619ed6;
    --footer-bg: #f4f4f4;
    --nav-font-weight: 600;
    --body-bg: #fdfef6;
    --form-btn: #69bfa4;
    --form-btn-hover: #f39120;
    --shopping-item-bg: #619ed6;
    --shopping-item-bg-in-cart: #b97284;
    --border-focus-bg: #69bfa4;
    --icon-grid-svg: #0d4d91;
}

body { background: var(--body-bg); font-family: Jost;}

.offcanvas, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
    min-width: 300px; 
    background: #f5f8fa !important;
}
nav {background: linear-gradient(to right, var(--body-bg), var(--nav-bg-1), var(--nav-bg-2)); font-family: Jost; font-weight: var(--nav-font-weight);}
nav a.nav-link{color: white !important;}
.nav-item svg { height: 15px; width: 15px; fill: white; }
.nav-item .nav-link svg { height: 20px; width: 20px; fill: white; }

/* mobil nézet */
@media (max-width: 768px) {
    nav .dropdown-menu{border-radius: 0px !important; border: none !important;}
    nav .dropdown-item:active { background: linear-gradient(to right, var(--nav-bg-1), var(--nav-bg-2)) !important; }

    .dashboard-container {
        flex-direction: column;
    }
    
}

/* asztali nézet */
@media (min-width: 768px) {
    nav .dropdown-menu {background: linear-gradient(to right, var(--nav-bg-1), var(--nav-bg-2)); font-family: var(--nav-font-family); font-weight: var(--nav-font-weight);}
    nav .dropdown-item {font-family: var(--nav-font-family); font-weight: var(--nav-font-weight);color:white !important;}
    nav .custom-hover {transition: background-color 0.2s ease;}
    nav .custom-hover:hover {background-color: var(--nav-hover-bg); cursor: pointer;}

    .resp-content {
        width: 75% !important; /* Itt jön be a fókuszált szélesség */
    }
}

footer {background: var(--footer-bg);}

.resp-content {
    width: 100%;
    margin: 0 auto;
    transition: width 0.3s ease;
}

/* Kifejezetten a Dashboard (sidebaros) oldalakhoz */
.dashboard-container {
    display: flex;
    width: 100%;
}

input, select, textarea {
    padding: 10px !important;
    border: 2px solid #eee !important;
    transition: border-color 0.3s !important;
}
input:focus, select:focus, textarea:focus, [contenteditable="true"]:focus {
    box-shadow: none !important;
    border: 2px solid var(--border-focus-bg) !important;
}

.offcanvas-title { color: var(--nav-bg-2) }

/*input:focus, select:focus, textarea:focus { border-color: var(--form-btn); }*/
label { font-weight: bold; color: var(--bs-secondary-color);; font-size: 14px; }
.btn.btn-primary {
    background: var(--form-btn) !important;
    color: white !important;
    border: none !important;
    
}

.btn.btn-primary:hover {
    background-color: var(--form-btn-hover) !important; 
}

.btn.btn-primary svg { width: 20px !important; height: 20px !important; fill: white; }
.btn.btn-primary i { width: 20px !important; height: 20px !important; color: white; }

.flatpickr-calendar {
    box-sizing: content-box !important;
    line-height: 1.15 !important;
}

.flatpickr-months {
    height: 45px !important; /* Emelt magasság */
    display: flex !important;
    align-items: center !important;
}

.flatpickr-months .flatpickr-month {
    height: 45px !important;
}

.flatpickr-weekdays {
    height: 30px !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
}

.flatpickr-current-month {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
}

.flatpickr-prev-month, .flatpickr-next-month {
    height: 45px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
}