.h-5{height:1.25rem}.w-5{width:1.25rem}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::before,::after{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}h1,h2,h3,h4,p,button,input,select,label{margin:0}h1,h2,h3,h4{font-size:inherit;font-weight:inherit}button,select{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;padding:0;text-transform:none}button,label{cursor:pointer}button{background-color:transparent;background-image:none}button:focus-visible{outline:2px solid transparent;outline-offset:2px}button:-moz-focusring{outline:auto}select{padding:0.5rem 2.5rem 0.5rem 0.75rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em}input,button,select{-webkit-appearance:none;-moz-appearance:none;appearance:none}input:not([type=button]):not([type=reset]):not([type=submit]){border-radius:0}input[type="checkbox"]:checked + .toggle-checkbox {
    background-color: #22c55e;
    border-color: #22c55e;
}

input[type="checkbox"]:checked + .toggle-checkbox svg {
    display: block !important;
}

html.dark input[type="checkbox"]:checked + .toggle-checkbox {
    background-color: #16a34a;
    border-color: #16a34a;
}

/* Nyelvválasztó gombok SVG zászlókkal */
.language-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    text-decoration: none;
    color: #374151;
}

.language-btn:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.language-btn.active {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #1d4ed8;
}

.flag-icon {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

html.dark .language-btn {
    background: #374151;
    color: #f3f4f6;
    border-color: #6b7280;
}

html.dark .language-btn:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

html.dark .language-btn.active {
    background: #1e3a8a;
    border-color: #3b82f6;
    color: #bfdbfe;
}type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;outline-offset:-2px}input[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}svg,canvas{display:block;vertical-align:middle}
.btn-primary{background-color:#3b82f6;color:#fff;padding:.5rem 1rem;border-radius:.5rem}.btn-primary:hover{background-color:#2563eb}.btn-secondary{background-color:#6b7280;color:#fff;padding:.5rem 1rem;border-radius:.5rem}.btn-secondary:hover{background-color:#4b5563}.input-group{display:flex;align-items:center;gap:.5rem}
.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.z-10{z-index:10}.z-20{z-index:20}.z-50{z-index:50}.mx-auto{margin-left:auto;margin-right:auto}.mx-4{margin-left:1rem;margin-right:1rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mr-4{margin-right:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-6{height:1.5rem}.h-10{height:2.5rem}.h-16{height:4rem}.min-h-screen{min-height:100vh}.w-6{width:1.5rem}.w-1\/2{width:50%}.w-2\/3{width:66.666667%}.w-11\/12{width:91.666667%}.w-16{width:4rem}.w-full{width:100%}.max-w-md{max-width:28rem}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.scale-\[1\.02\]{--tw-scale-x:1.02;--tw-scale-y:1.02}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.grid-cols-\[1fr_auto_1fr_auto\]{grid-template-columns:1fr auto 1fr auto}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-3{column-gap:.75rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.space-y-1>*{margin-top:.25rem}.space-y-2>*{margin-top:.5rem}.space-y-3>*{margin-top:.75rem}.space-y-4>*{margin-top:1rem}.space-y-6>*{margin-top:1.5rem}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.rounded-l{border-top-left-radius:.25rem;border-bottom-left-radius:.25rem}.rounded-r{border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}.rounded-xl{border-radius:.75rem}.rounded-full{border-radius:9999px}.border{border-width:1px}.border-t{border-top-width:1px}.border-b-2{border-bottom-width:2px}.border-l-4{border-left-width:4px}.border-blue-200{border-color:#bfdbfe}.border-blue-400{border-color:#60a5fa}.border-blue-500{border-color:#3b82f6}.border-blue-800{border-color:#1e40af}.border-green-200{border-color:#bbf7d0}.border-green-500{border-color:#22c55e}.border-green-700{border-color:#15803d}.border-indigo-200{border-color:#c7d2fe}.border-indigo-300{border-color:#a5b4fc}.border-orange-200{border-color:#fed7aa}.border-orange-400{border-color:#fb923c}.border-orange-800{border-color:#9a3412}.border-gray-100{border-color:#f3f4f6}.border-gray-200{border-color:#e5e7eb}.border-gray-300{border-color:#d1d5db}.border-red-200{border-color:#fecaca}.border-red-500{border-color:#ef4444}.border-yellow-200{border-color:#fef08a}.border-yellow-400{border-color:#facc15}.bg-black{background-color:#000}.bg-white{background-color:#fff}.bg-gray-50{background-color:#f9fafb}.bg-gray-100{background-color:#f3f4f6}.bg-gray-200{background-color:#e5e7eb}.bg-gray-300{background-color:#d1d5db}.bg-blue-50{background-color:#eff6ff}.bg-blue-100{background-color:#dbeafe}.bg-blue-400{background-color:#60a5fa}.bg-blue-500{background-color:#3b82f6}.bg-blue-600{background-color:#2563eb}.bg-green-50{background-color:#f0fdf4}.bg-green-100{background-color:#dcfce7}.bg-green-200{background-color:#bbf7d0}.bg-green-500{background-color:#22c55e}.bg-green-700{background-color:#15803d}.bg-indigo-50{background-color:#eef2ff}.bg-indigo-100{background-color:#e0e7ff}.bg-indigo-200{background-color:#e0e7ff}.bg-indigo-400{background-color:#818cf8}.bg-indigo-500{background-color:#6366f1}.bg-orange-50{background-color:#fff7ed}.bg-orange-400{background-color:#fb923c}.bg-red-50{background-color:#fef2f2}.bg-red-500{background-color:#ef4444}.bg-yellow-100{background-color:#fef9c3}.bg-yellow-200{background-color:#fef08a}.bg-yellow-400{background-color:#facc15}.bg-opacity-60{--tw-bg-opacity:0.6;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-600{--tw-gradient-from:#2563eb;--tw-gradient-to:rgb(37 99 235 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.from-green-500{--tw-gradient-from:#22c55e;--tw-gradient-to:rgb(34 197 94 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-emerald-600{--tw-gradient-to:#059669}.to-indigo-700{--tw-gradient-to:#4338ca}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.pt-2{padding-top:.5rem}.pt-3{padding-top:.75rem}.font-mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.font-normal{font-weight:400}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.text-white{color:#fff}.text-black{color:#000}.text-gray-400{color:#9ca3af}.text-gray-500{color:#6b7280}.text-gray-600{color:#4b5563}.text-gray-700{color:#374151}.text-gray-800{color:#1f2937}.text-blue-200{color:#bfdbfe}.text-blue-400{color:#60a5fa}.text-blue-500{color:#3b82f6}.text-blue-600{color:#2563eb}.text-blue-700{color:#1d4ed8}.text-blue-800{color:#1e40af}.text-green-600{color:#16a34a}.text-green-700{color:#15803d}.text-green-800{color:#166534}.text-indigo-200{color:#c7d2fe}.text-indigo-300{color:#a5b4fc}.text-indigo-400{color:#818cf8}.text-indigo-500{color:#6366f1}.text-indigo-700{color:#4338ca}.text-indigo-800{color:#3730a3}.text-orange-200{color:#fed7aa}.text-orange-400{color:#fb923c}.text-orange-600{color:#ea580c}.text-orange-700{color:#c2410c}.text-orange-800{color:#9a3412}.text-purple-600{color:#9333ea}.text-purple-700{color:#7e22ce}.text-red-200{color:#fecaca}.text-red-400{color:#f87171}.text-red-500{color:#ef4444}.text-red-600{color:#dc2626}.text-red-800{color:#991b1b}.text-yellow-600{color:#ca8a04}.text-yellow-800{color:#854d0e}.opacity-0{opacity:0}.shadow-lg{--tw-shadow:0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px #00000040;--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.first\:border-t-0:first-child{border-top-width:0px}.first\:pt-0:first-child{padding-top:0px}.first\:mt-0:first-child{margin-top:0px}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-gray-100:hover{background-color:#f3f4f6}.hover\:bg-gray-200:hover{background-color:#e5e7eb}.hover\:bg-gray-300:hover{background-color:#d1d5db}.hover\:bg-green-600:hover{background-color:#16a34a}.hover\:bg-indigo-600:hover{background-color:#4f46e5}.hover\:bg-red-600:hover{background-color:#dc2626}.hover\:bg-yellow-500:hover{background-color:#eab308}.hover\:text-red-700:hover{color:#b91c1c}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
.success-icon .checkmark-path { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw-check 0.5s ease-in-out forwards; }
@keyframes draw-check { to { stroke-dashoffset: 0; } }
.stats-view-btn.active { background-color: #3b82f6; color: white; }
.pallet-entry-felvett { border-left-color: #22c55e; }
.pallet-entry-leadott { border-left-color: #ef4444; }
.pallet-entry-csere { border-left-color: #6b7280; }
.toggle-label:checked ~ .toggle-dot { transform: translateX(100%); }
.toggle-label:checked ~ .toggle-bg { background-color: #22c55e; }
/* Dark Mode Styles */
html.dark { color-scheme: dark; }
html.dark body { background-color: #111827; color: #d1d5db; }
html.dark #app, html.dark .bg-white { background-color: #1f2937; color: #d1d5db; }
html.dark .bg-gray-50, html.dark .bg-green-50, html.dark .bg-indigo-50, html.dark .bg-orange-50, html.dark .bg-red-50 { background-color: #374151; }
html.dark .bg-blue-50 { background-color: #1e3a8a66; }
html.dark .bg-gray-100 { background-color: #111827; }
html.dark .bg-indigo-200 { background-color: #4338ca; }
html.dark .bg-green-100 { background-color: #166534; }
html.dark .bg-green-200 { background-color: #166534; }
html.dark .bg-yellow-50 { background-color: #854d0e20; }
html.dark .text-gray-500, html.dark .text-gray-600 { color: #9ca3af; }
html.dark .text-gray-700 { color: #f9fafb; }
html.dark .text-green-700 { color: #6ee7b7; }
html.dark .text-green-800, html.dark .text-blue-800, html.dark .text-orange-800, html.dark .text-indigo-800, html.dark .text-yellow-800, html.dark .text-red-800 { color: #e5e7eb; }
html.dark .border-gray-200, html.dark .border-green-200, html.dark .border-indigo-200, html.dark .border-blue-200, html.dark .border-orange-200, html.dark .border-red-200 { border-color: #4b5563; }
html.dark input, html.dark select { background-color: #4b5563; color: #f9fafb; border-color: #6b7280; }
html.dark select { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23d1d5db' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); }
html.dark .stats-view-btn.active { background-color: #2563eb; }
html.dark .stats-view-btn { background-color: #4b5563; }
html.dark .hover\:bg-gray-200:hover { background-color: #374151; }
/* Autocomplete styles */
.autocomplete-item { transition: background-color: 0.1s ease-in-out; }
html.dark .autocomplete-list { background-color: #4b5563; border-color: #6b7280; color: #f9fafb; }
html.dark .autocomplete-item:hover { background-color: #6b7280; }

/* Splash Screen Styles */
#splash-screen {
    position: fixed;
    inset: 0;
    background-color: #f0f9ff;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease-out;
}
#splash-screen img {
    max-width: 80%;
    height: auto;
    max-height: 400px;
}
#splash-screen.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Enhanced Toggle Styles */
.enhanced-toggle-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f9fafb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    margin-bottom: 0.5rem;
    min-height: 3rem;
    position: relative;
}

.enhanced-toggle-container:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.1);
    border-color: #d1d5db;
}

.enhanced-toggle-container.active {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #10b981;
    box-shadow: 0 2px 12px -3px rgba(16, 185, 129, 0.25);
}

.enhanced-toggle-container.active:hover {
    box-shadow: 0 4px 16px -4px rgba(16, 185, 129, 0.3);
    transform: translateY(-1px);
}

html.dark .enhanced-toggle-container {
    background: #374151;
    border-color: #6b7280;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

html.dark .enhanced-toggle-container.active {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    border-color: #10b981;
    box-shadow: 0 2px 12px -3px rgba(16, 185, 129, 0.3);
}

html.dark .enhanced-toggle-container:hover {
    border-color: #9ca3af;
    box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
}

.enhanced-toggle-text {
    font-weight: 600;
    color: #374151;
    transition: color 0.2s ease;
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.3;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.enhanced-toggle-description {
    font-weight: 400;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.125rem;
}

.enhanced-toggle-container.active .enhanced-toggle-text {
    color: #065f46;
}

html.dark .enhanced-toggle-text {
    color: #f3f4f6;
}

html.dark .enhanced-toggle-description {
    color: #9ca3af;
}

html.dark .enhanced-toggle-container.active .enhanced-toggle-text {
    color: #6ee7b7;
}

.enhanced-toggle-checkmark {
    font-size: 1.25rem;
    font-weight: bold;
    color: #10b981;
    margin-left: 0.75rem;
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 50%;
    border: 2px solid transparent;
}

.enhanced-toggle-container.active .enhanced-toggle-checkmark {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.2);
}

html.dark .enhanced-toggle-checkmark {
    color: #6ee7b7;
    background: rgba(110, 231, 183, 0.1);
}

html.dark .enhanced-toggle-container.active .enhanced-toggle-checkmark {
    border-color: #6ee7b7;
    background: rgba(110, 231, 183, 0.2);
}

/* Egyszerű toggle checkbox stílusok - a speciális funkcióknak */
.toggle-checkbox {
    transition: all 0.2s ease;
}

/* SR-only - képernyőolvasóknak látható, de vizuálisan rejtett */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Hide legacy settings version label; footer shows version now */
#settings-version{ display:none !important; }

/* Hide legacy version label anywhere in settings */
#settings-version, .settings-version, [data-translate-key='settingsVersion']{ display:none !important; }

.progress-bar {
    width: 100%;
    background-color: #e5e7eb;
    border-radius: 9999px;
    height: 0.75rem;
    overflow: hidden;
}

.progress-bar-fill {
    background-color: #3b82f6;
    height: 100%;
    transition: width 0.3s ease-in-out;
    border-radius: 9999px;
}

html.dark .progress-bar {
    background-color: #4b5563;
}

html.dark .progress-bar-fill {
    background-color: #60a5fa;
}

/* === HOZZÁADOTT RÉSZEK === */

/* PWA Frissítés Értesítő */
.update-notification {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1d4ed8; /* Sötétkék */
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1000;
    animation: slide-down 0.5s ease-out;
}

.update-notification p {
    margin: 0;
    font-size: 0.875rem;
}

.update-notification button {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    color: white;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
}

html.dark .update-notification {
    background-color: #3b82f6; /* Világoskék */
    color: white;
}

@keyframes slide-down {
    from {
        top: -100px;
        opacity: 0;
    }
    to {
        top: 10px;
        opacity: 1;
    }
}

/* === Hotfix 2025-09-12: Speciális funkciók layout, kisebb kártyák, grid === */
#special-features .toggle-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
#special-features .enhanced-toggle-container {
  margin-bottom: 0;
  min-height: auto;
  padding: 10px 12px;
}
#special-features .enhanced-toggle-text span {
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}
@media (max-width: 380px) {
  #special-features .toggle-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
}

/* Fejléc logó középre igazítása és méretezése */
#app-header img {
  height: 40px;
  display: inline-block; /* Fontos a helyes középre igazításhoz */
  margin: 0 auto;
}

/* ÚJ NAVIGÁCIÓS STÍLUSOK */
/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
    z-index: 1000;
    box-shadow: 0 -2px 20px rgba(0,0,0,0.1);
}

html.dark .bottom-nav {
    background: #1f2937;
    border-top-color: #374151;
}

.nav-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 28rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #6b7280;
    font-size: 10px;
    font-weight: 600;
    min-width: 60px;
    position: relative;
}

.nav-item:hover {
    background: #f3f4f6;
}

html.dark .nav-item:hover {
    background: #374151;
}

.nav-item.active {
    color: #3b82f6;
    background: #eff6ff;
}

html.dark .nav-item.active {
    color: #60a5fa;
    background: #1e3a8a;
}

.nav-icon {
    font-size: 22px;
    margin-bottom: 2px;
    transition: transform 0.2s ease;
}

.nav-item.active .nav-icon {
    transform: scale(1.1);
}

.nav-label {
    font-size: 10px;
    margin-top: 2px;
    font-weight: 600;
    white-space: nowrap;
}

/* More Menu */
.more-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
}

html.dark .more-menu {
    background: #1f2937;
}

.more-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.more-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

html.dark .more-menu-header {
    border-bottom-color: #374151;
}

.more-menu-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1f2937;
}

html.dark .more-menu-header h3 {
    color: #f9fafb;
}

.close-more-menu {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #6b7280;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.close-more-menu:hover {
    background: #f3f4f6;
}

html.dark .close-more-menu:hover {
    background: #374151;
}

.more-menu-content {
    padding: 1rem;
    max-height: calc(80vh - 80px);
    overflow-y: auto;
}

.more-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #374151;
    text-align: left;
    margin-bottom: 0.5rem;
}

.more-menu-item:hover {
    background: #f3f4f6;
    transform: translateY(-1px);
}

html.dark .more-menu-item {
    color: #f3f4f6;
}

html.dark .more-menu-item:hover {
    background: #374151;
}

.more-menu-icon {
    font-size: 1.5rem;
    margin-right: 1rem;
    min-width: 2rem;
}

.more-menu-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.more-menu-desc {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
}

html.dark .more-menu-desc {
    color: #9ca3af;
}

/* Overlay */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Main content padding for bottom nav */
.p-4 {
    padding-bottom: 100px !important; /* Space for bottom nav */
}

/* Remove old tab styles */
.tab, .dropdown-content, .dropdown-item, #dropdown-container {
    display: none !important;
}

/* Responsive adjustments */
@media (max-width: 375px) {
    .nav-label {
        font-size: 9px;
    }
    .nav-icon {
        font-size: 20px;
    }
}
/* JAVÍTÁSOK A FOGASKERÉK MENÜ POZICIONÁLÁSÁHOZ */
/* Hozzáadandó a main.css fájl végéhez */

/* Beállítások dropdown pozicionálásának javítása */
#settings-dropdown {
    position: absolute;
    right: 0;
    margin-top: 0.5rem;
    width: 16rem; /* 256px */
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 20;
    border: 1px solid #e5e7eb;
    /* JAVÍTÁS: Biztosítjuk, hogy ne csússzon ki a képernyőről */
    max-width: calc(100vw - 2rem);
    transform: translateX(-0.5rem);
}

/* Dark mode támogatás */
html.dark #settings-dropdown {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

/* Responsív viselkedés kisebb képernyőkön */
@media (max-width: 320px) {
    #settings-dropdown {
        width: calc(100vw - 2rem);
        right: 1rem;
        left: 1rem;
        transform: none;
    }
}

/* Biztosítjuk, hogy a dropdown tartalma ne folyjon túl */
#settings-dropdown .p-2 {
    max-height: 70vh;
    overflow-y: auto;
}

/* Fejléc pozicionálásának finomhangolása */
#app-header {
    position: relative;
    z-index: 10;
}

/* A beállítások gomb hover effektusának javítása */
#app-header button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

html.dark #app-header button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Sticky app footer */
.app-sticky-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px;
    font-size: 12px;
    text-align: center;
    background: rgba(17, 24, 39, 0.85); /* gray-900 with opacity */
    color: #d1d5db; /* gray-300 */
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(255,255,255,0.08);
    z-index: 9999;
}
.app-sticky-footer a { text-decoration: underline; color: inherit; }

/* Prevent main content from being hidden under the sticky footer */
body { padding-bottom: 52px; }
@media (min-width: 768px) {
  body { padding-bottom: 44px; }
}
#finalize-modal .space-y-4 {
    max-height: 60vh; /* Maximális magasság a képernyő 60%-a */
    overflow-y: auto; /* Ha magasabb, jelenjen meg a görgetősáv */
    padding-right: 8px; /* Egy kis hely a görgetősávnak */
}
/* Fájl: main.css (a végére illeszd be) */

/* === MŰSZAK BEFEJEZÉSE ABLAK JAVÍTÁSA === */
#finalize-modal .modal-card {
    display: flex;
    flex-direction: column;
    max-height: 75vh; /* A kártya sosem magasabb, mint a képernyő 75%-a */
}

#finalize-modal .modal-body {
    flex: 1; /* Ez a rész nyúljon ki, hogy kitöltse a helyet */
    overflow-y: auto; /* És legyen görgethető, ha kell */
    padding: 0 0.5rem; /* Kis belső térköz a görgetősáv miatt */
}

#finalize-modal .modal-header,
#finalize-modal .modal-footer {
    flex-shrink: 0; /* A fejléc és a lábléc ne zsugorodjon */
}

/* === Toast értesítések (glass UI-hoz illesztve) === */
#toast-container { position: fixed; display: flex; z-index: 9999; pointer-events: none; }
#toast-container[data-position="top"] { top: 16px; left: 0; right: 0; justify-content: center; align-items: flex-start; }
#toast-container[data-position="top-right"] { top: 16px; right: 16px; left: auto; justify-content: flex-end; align-items: flex-start; }
#toast-container[data-position="top-right"] .toast { width: 360px; max-width: 92vw; }

.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.82);
  color: #111827; border: 1px solid rgba(229,231,235,.7);
  border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  backdrop-filter: blur(8px);
  transform: translateY(-12px); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
  max-width: 92vw; width: 520px;
}
.toast-show { transform: translateY(0); opacity: 1; }
.toast-hide { transform: translateY(-12px); opacity: 0; }
.toast-icon { font-size: 22px; line-height: 1; }
.toast-title { font-weight: 700; font-size: 15px; }
.toast-message { font-size: 13px; color: #4b5563; margin-top: 2px; }
.toast-close { margin-left: auto; border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: .6; }
.toast-close:hover { opacity: 1; }
.toast-action { pointer-events: auto; margin-left: auto; margin-right: 6px; border: none; background: #10b981; color: #fff; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.toast-action:hover { filter: brightness(.95); }

html.dark .toast { background: rgba(31,41,55,.75); color: #f9fafb; border-color: rgba(55,65,81,.7); }
html.dark .toast-message { color: #d1d5db; }
.toast-success { border-color: #34d399; }
.toast-warning { border-color: #fbbf24; }
.toast-info    { border-color: #60a5fa; }
/* === AUTH SCREEN IMPROVEMENTS === */
.auth-card {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.input-with-icon input {
    transition: all 0.2s ease;
}

.input-with-icon input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Password strength indicator colors */
.strength-weak { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); }
.strength-medium { background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%); }
.strength-strong { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }

/* Loading spinner */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Dark mode auth screen */
html.dark #auth-screen {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
/* Mobile-first glassy auth background */
#auth-screen {
    /* Match v4.01.03 light background */
    background: radial-gradient(1200px 600px at -10% -10%, #bfdbfe40, transparent 60%),
                radial-gradient(900px 500px at 110% -10%, #a7f3d040, transparent 60%),
                linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}
/* Glassy auth card */
.auth-card {
    /* Stronger glass like v4.01.03 */
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(229,231,235,.7);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
}
html.dark .auth-card {
    background: rgba(31,41,55,0.72);
    border-color: rgba(55,65,81,0.6);
    box-shadow: 0 14px 36px rgba(0,0,0,0.35);
}
/* Inputs with left icon */
.input-with-icon { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
.input-with-icon svg { color: #6b7280; width: 20px; height: 20px; max-width: 24px; max-height: 24px; }
.input-with-icon input { border: none; outline: none; background: transparent; width: 100%; font-size: 14px; color: #111827; }
.input-with-icon input::placeholder { color: #9ca3af; }
.input-with-icon:focus-within { box-shadow: 0 0 0 3px rgba(59,130,246,.12); border-color: #93c5fd; }
html.dark .input-with-icon { background: #374151; border-color: #4b5563; }
html.dark .input-with-icon svg { color: #9ca3af; }
html.dark .input-with-icon input { color: #f3f4f6; }
/* White Google button */
.btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: #374151; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 14px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: all .15s ease; }
.btn-google:hover { background: #f9fafb; box-shadow: 0 10px 22px rgba(0,0,0,0.08); transform: translateY(-1px); }
.btn-google svg { width: 20px; height: 20px; }
html.dark .btn-google { background: #111827; color: #e5e7eb; border-color: #374151; box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
html.dark .btn-google:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.45); }

/* Gradient primary button like v4.01.03 */
.btn-gradient {
  background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px rgba(37,99,235,.25);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn-gradient:hover { filter: brightness(.97); transform: translateY(-1px); box-shadow: 0 12px 26px rgba(37,99,235,.28); }
.btn-gradient:active { transform: translateY(0); }
/* Mobile-specific improvements */
@media (max-width: 640px) {
    .auth-card {
        border-radius: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #auth-screen {
        padding: 0;
    }
}

/* Prevent zoom on input focus (iOS) */
@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* === Pallets edit mode highlight === */
#pallet-form-container.editing {
  border-color: #f59e0b; /* amber-500 */
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  animation: pallet-edit-pulse 1.6s ease-out 1;
}

@keyframes pallet-edit-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.45); }
  100% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); }
}

/* ==== DARK MODE TITLE VISIBILITY FIXES (v4.01.06) ==== */
/* Ensure headings and primary text are readable on dark backgrounds */
html.dark #app h1,
html.dark #app h2,
html.dark #app h3,
html.dark #app .font-semibold,
html.dark #settings-dropdown h3,
html.dark .more-menu-header h3,
html.dark .more-menu-item .more-menu-title { color: #f9fafb; }

/* Override common gray text classes that were too dark in dark mode */
html.dark #app .text-gray-800,
html.dark #app .text-gray-900 { color: #f3f4f6 !important; }
html.dark #app .text-gray-700 { color: #e5e7eb !important; }

/* Card titles inside gray/indigo/orange/blue blocks */
html.dark #app .bg-gray-50 h3,
html.dark #app .bg-blue-50 h3,
html.dark #app .bg-indigo-50 h3,
html.dark #app .bg-orange-50 h3,
html.dark #app .bg-green-50 h3 { color: #e5e7eb; }

/* Settings menu items (title + desc) */
html.dark #settings-dropdown .font-semibold { color: #f9fafb; }
html.dark #settings-dropdown .text-xs { color: #d1d5db; }

/* Help sections titles */
html.dark #content-help h3 { color: #f3f4f6; }

/* Scoped GPS button layout for Shift End (modal/section) */
.modal--shift-end .input-wrap { display: flex; align-items: center; gap: 8px; }
.modal--shift-end .input-wrap input { flex: 1 1 auto; min-width: 0; }
.modal--shift-end .input-wrap .gps-btn { flex: 0 0 auto; white-space: nowrap; }

/* Make end location input and GPS button inline in Full Day page */
#content-full-day .input-wrap { display: flex; align-items: center; gap: 8px; }
#content-full-day .input-wrap input { flex: 1 1 auto; min-width: 0; }
#content-full-day .input-wrap .gps-btn { flex: 0 0 auto; white-space: nowrap; }

/* Modal content should scroll, not overflow screen */
.modal-card { max-height: 90dvh; display: flex; flex-direction: column; }
.modal-body { flex: 1; overflow-y: auto; }

/* Friendly global error box */
.error-box {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff9c4;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  z-index: 99999;
  width: 90%;
  max-width: 350px;
}

.close-x {
  position: absolute;
  top: 10px;
  right: 10px;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
}

.ok-btn {
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  background: #ffd54f;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}