body { font-family: 'Inter', sans-serif; background-color: #f8fafc; color: #0f172a; overflow-x: hidden; }
[x-cloak] { display: none !important; }
.f-reg { font-size: 15px !important; }
.f-small { font-size: 13px !important; }
.f-xs { font-size: 10px !important; }

.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; display: inline-block; line-height: 1; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.air-input, .air-select {
    -webkit-appearance: none; appearance: none; border-radius: 8px; font-size: 13px; font-weight: 700; height: 32px;
    padding: 0 8px; background-color: #f8fafc; border: 1px solid #e2e8f0; width: 100%;
    outline: none; transition: 0.2s; color: #0f172a;
    display: flex; align-items: center; line-height: normal;
}
.air-input:focus, .air-select:focus { background-color: #ffffff; border-color: #3b82f6; }
.air-select {
    padding-right: 28px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%230f172a'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}

.air-box { display: flex; align-items: center; justify-content: space-between; border-radius: 8px; background-color: #f8fafc; border: 1px solid #e2e8f0; height: 32px; padding: 0 8px; width: 100%; overflow: hidden; }
.air-box:focus-within { background-color: #ffffff; border-color: #3b82f6; }
.air-box input { background: transparent; border: none; outline: none; flex: 1; min-width: 0; font-size: 13px; font-weight: 700; height: 100%; color: #0f172a; }
.air-box span { font-size: 13px; color: #64748b; flex-shrink: 0; pointer-events: none; white-space: nowrap; }

/* SELECT JEDNOSTKI - wygląda jak span */
.unit-select {
    appearance: none; background: transparent; border: none; outline: none;
    font-size: 13px; color: #64748b; cursor: pointer; padding: 0 0 0 4px;
    text-align: right; font-weight: 400; transition: 0.2s ease;
}
.unit-select:hover { color: #3b82f6; }

@media (min-width: 768px) {
    .desktop-table .air-input, .desktop-table .air-box { padding: 0 12px; }
    .desktop-table .air-select { padding-left: 12px; padding-right: 32px !important; background-position: right 12px center; }
}

.air-table-header { background-color: #f1f5f9; border-bottom: 1px solid #cbd5e1; color: #475569; }
.active-sort-air { background-color: #eff6ff !important; border-bottom: 2px solid #3b82f6 !important; color: #2563eb !important; }
.air-row { background: white; border-bottom: 1px solid #e2e8f0; }

.custom-scroll::-webkit-scrollbar { height: 12px; width: 12px; }
.custom-scroll::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 6px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; border: 2px solid #f1f5f9; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.kanban-container { display: flex; overflow-x: auto; gap: 1rem; padding: 1rem 0; }
.kanban-col { min-width: 320px; width: 320px; flex-shrink: 0; }

.drop-before { box-shadow: 0 -3px 0 0 #3b82f6 !important; border-top-left-radius: 4px; border-top-right-radius: 4px; }
.drop-after { box-shadow: 0 3px 0 0 #3b82f6 !important; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
.card-dragging { opacity: 0.4; transform: scale(0.98); }