body { 
    font-family: 'Inter', sans-serif; background-color: #f9fafb; -webkit-tap-highlight-color: transparent; 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, .font-heading { font-family: 'Montserrat', sans-serif; }

/* Ukrywanie scrollbara dla estetyki na mobile */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animacje */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Sidebar Modern Styles */
.sidebar-link.active { 
    background: linear-gradient(to right bottom, #10b981, #059669);
    color: white !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
    border-right: none;
    font-weight: 600;
}
.dark .sidebar-link.active { 
    background: linear-gradient(to right bottom, #059669, #047857);
    color: white !important;
    box-shadow: none;
}

/* Toast animations */
.toast-enter {
    animation: toast-in 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.toast-leave {
    animation: toast-out 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}
@keyframes toast-in {
    from { transform: translateX(110%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(110%); opacity: 0; }
}

/* Modal animations */
#custom-modal.show #modal-content {
    transform: scale(1);
    opacity: 1;
}

#permissions-modal.show #permissions-modal-content {
    transform: scale(1);
    opacity: 1;
}

#password-change-modal.show #password-change-modal-content {
    transform: scale(1);
    opacity: 1;
}

/* Mobile menu animations */
#nav-menu.show { opacity: 1; }
#nav-menu {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Toggle Switch */
input:checked ~ .dot {
    transform: translateX(100%);
    background-color: white;
}
input:checked ~ .block {
    background-color: #059669; /* emerald-600 */
}

/* Custom Scrollbar */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: #d1d5db transparent; }
.dark * { scrollbar-color: #4b5563 transparent; }

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background-color: #d1d5db; border-radius: 20px; }
::-webkit-scrollbar-thumb:hover { background-color: #9ca3af; }

.dark ::-webkit-scrollbar-thumb { background-color: #4b5563; }
.dark ::-webkit-scrollbar-thumb:hover { background-color: #6b7280; }
.resize-handle { cursor: se-resize; touch-action: none; }

/* Dashboard Edit Mode */
#dashboard-widgets.edit-mode > div {
    border: 2px dashed #cbd5e1; /* gray-300 */
}
.dark #dashboard-widgets.edit-mode > div {
    border-color: #4b5563; /* gray-600 */
}
#dashboard-widgets.edit-mode .resize-handle,
#dashboard-widgets.edit-mode .drag-handle {
    display: block !important;
}
#dashboard-widgets.edit-mode .delete-btn {
    display: block !important;
}
/* Spacer Widget */
.spacer-widget { border: 2px dashed transparent; }
#dashboard-widgets.edit-mode .spacer-widget { border-color: #9ca3af; background-color: rgba(0,0,0,0.02); }
.dark #dashboard-widgets.edit-mode .spacer-widget { border-color: #4b5563; background-color: rgba(255,255,255,0.02); }
#dashboard-widgets.edit-mode .font-size-controls { display: flex !important; }

/* Mobile POS Tabs */
.pos-tab-active { border-bottom-color: currentColor; color: inherit; }
.pos-tab-inactive { border-bottom-color: transparent; color: #9ca3af; }

/* Active Nav Item Mobile */
.nav-item.active-nav-item {
    color: #059669; /* emerald-600 */
}
.dark .nav-item.active-nav-item { color: #6ee7b7; /* emerald-300 */ }

/* Nowe style dla przełączników w POS */
input[type="radio"]:checked + label {
    background-color: white;
    color: #1e293b; /* slate-800 */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.dark input[type="radio"]:checked + label {
    background-color: #334155; /* slate-700 */
    color: white;
}
input[type="radio"] + label {
    color: #64748b; /* slate-500 */
}
.dark input[type="radio"] + label {
    color: #94a3b8; /* slate-400 */ 
}

/* Nowe style dla przełączników w POS (nowy modal) */
.pos-radio-label { position: relative; cursor: pointer; }
.pos-radio-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.pos-radio-label span {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.5rem; border: 2px solid #e5e7eb; border-radius: 0.75rem;
    font-size: 0.75rem; font-weight: bold; color: #4b5563; transition: all 0.2s;
}
.dark .pos-radio-label span { border-color: #4b5563; color: #d1d5db; }
.pos-radio-label input[type="radio"]:checked + span {
    background-color: #ecfdf5; border-color: #10b981; color: #059669; box-shadow: 0 0 0 2px #10b981;
}
.dark .pos-radio-label input[type="radio"]:checked + span {
    background-color: rgba(16, 185, 129, 0.1); border-color: #34d399; color: #6ee7b7;
}
