/* Tailwind CSS base styles will be loaded via CDN in templates */
/* Later this will be replaced with proper Tailwind setup */

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom scrollbar */
.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 3px;
}

/* Pulse animation */
.pulse-dot {
    animation: pulse 2s infinite;
}

/* Form select consistency - match TomSelect height */
select.form-select,
select[class*="border-gray-300"] {
    min-height: 42px;
    line-height: 20px;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Tom Select custom styles - Tailwind integration */
/* Reset wrapper - no double borders! */
.ts-wrapper {
    width: 100%;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ts-wrapper .ts-control {
    min-height: 42px;
    border-radius: 0.5rem;
    border: 1px solid #d1d5db; /* gray-300 */
    background-color: #ffffff;
    padding: 0.625rem 1rem;  /* 10px 16px - aligned with px-4 */
    font-size: 0.875rem;
    line-height: 1.25rem;
    transition: all 0.15s ease;
    box-shadow: none;
    position: relative !important; /* Dla pozycjonowania clear button */
}

.ts-wrapper .ts-control:hover {
    border-color: #9ca3af; /* gray-400 */
}

.ts-wrapper.single .ts-control {
    cursor: pointer;
}

.ts-wrapper.multi .ts-control > div {
    background-color: #3b82f6;
    border: none;
    border-radius: 0.375rem;
    padding: 0.25rem 0.5rem;
    color: white;
    font-size: 0.875rem;
}

.ts-wrapper.multi .ts-control > div .remove {
    color: white;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.ts-wrapper.multi .ts-control > div .remove:hover {
    opacity: 1;
}

.ts-wrapper .ts-control:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ts-wrapper .ts-dropdown {
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    margin-top: 0.25rem;
}

.ts-wrapper .ts-dropdown .option {
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background-color 0.1s;
}

.ts-wrapper .ts-dropdown .option:hover,
.ts-wrapper .ts-dropdown .option.active {
    background-color: #f3f4f6;
}

.ts-wrapper .ts-dropdown .option.selected {
    background-color: #dbeafe;
    color: #1e40af;
}

.ts-wrapper .ts-dropdown .optgroup-header {
    background-color: #f9fafb;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.ts-wrapper .ts-dropdown .no-results {
    padding: 1rem;
    text-align: center;
    color: #9ca3af;
    font-size: 0.875rem;
}

.ts-wrapper .ts-dropdown .create {
    padding: 0.5rem 1rem;
    color: #3b82f6;
    font-size: 0.875rem;
}

/* Clear button - base colors (position in section below) */
.ts-wrapper .clear-button {
    color: #6b7280; /* gray-500 - ciemniejszy dla widoczności */
    transition: color 0.15s;
}

.ts-wrapper .clear-button:hover {
    color: #ef4444;
}

/* Focus states for accessibility */
.ts-wrapper.focus .ts-control {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Loading state */
.ts-wrapper.loading::after {
    border-color: #3b82f6 transparent transparent transparent;
}

/* ==============================================
   TomSelect - Placeholder fix
   ============================================== */
.ts-wrapper .ts-control > input::placeholder {
    color: #9ca3af !important; /* gray-400 */
    opacity: 1 !important;
}

/* Override library's transparent placeholder on focus with items */
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder,
.ts-wrapper.has-items .ts-control > input::placeholder {
    color: #9ca3af !important;
    opacity: 1 !important;
}

/* Ukryj pusty .item element (gdy nic nie wybrano) */
.ts-wrapper.single .ts-control > .item[data-value=""] {
    display: none !important;
}

/* Fix dla single select: pokaż input gdy nie ma wartości (bez klasy has-items) */
/* Dotyczy także stanu focus - placeholder ma być widoczny dopóki nie wybrano wartości */
.ts-wrapper.single:not(.has-items) .ts-control > input,
.ts-wrapper.single:not(.has-items).focus .ts-control > input,
.ts-wrapper.single:not(.has-items).dropdown-active .ts-control > input {
    position: relative !important;
    left: 0 !important;
    opacity: 1 !important;
    width: 100% !important;
    flex: 1 !important;
}

/* Gdy jest wybrana wartość - użyj domyślnych styli TomSelect (input ukryty) */
.ts-wrapper.single.has-items .ts-control > input {
    position: absolute !important;
    left: -10000px !important;
    opacity: 0 !important;
}

/* ==============================================
   TomSelect - Clear button (X) styling
   ============================================== */
/* Kontrolka musi mieć position relative dla przycisku */
.ts-wrapper .ts-control {
    position: relative !important;
}

/* Przycisk X - bazowe style i centrowanie */
.ts-wrapper.plugin-clear_button .ts-control .clear-button {
    font-size: 18px !important;
    line-height: 20px !important;
    width: 20px !important;
    height: 20px !important;
    padding: 0 !important;
    right: 28px !important;
    /* Centrowanie: top + margin-top zamiast transform */
    top: 50% !important;
    margin-top: -13px !important; /* optyczna korekta - 3px wyżej */
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    position: absolute !important;
    color: #9ca3af !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    text-align: center !important;
    transition: opacity 0.15s, color 0.15s !important;
}

.ts-wrapper.plugin-clear_button .ts-control .clear-button:hover {
    color: #ef4444 !important;
}

/* Pokaż X gdy: jest wybrana wartość LUB gdy jest focus (użytkownik wpisuje) */
.ts-wrapper.plugin-clear_button.has-items .ts-control .clear-button,
.ts-wrapper.plugin-clear_button.focus .ts-control .clear-button {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: auto !important;
}

/* Ukryj X gdy: brak wartości I brak focusa */
.ts-wrapper.plugin-clear_button:not(.has-items):not(.focus) .ts-control .clear-button {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ==============================================
   TomSelect - Dropdown arrow centering
   ============================================== */
.ts-wrapper.single .ts-control::after {
    right: 12px !important;
    top: 50% !important;
    margin-top: 0 !important;
    transform: translateY(-50%) !important;
    border-width: 6px 6px 0 !important; /* Większa strzałka */
    position: absolute !important;
}

/* ==============================================
   S/N Toggle - Component serial number toggle
   ============================================== */
.sn-toggle {
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.sn-toggle:focus {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.sn-toggle.active {
    background-color: #3b82f6; /* blue-500 */
}

.sn-toggle .toggle-dot {
    transition: transform 0.2s ease-in-out;
}

.sn-toggle.active .toggle-dot {
    transform: translateX(16px);
}

/* Component row styling enhancements */
.component-row {
    transition: box-shadow 0.2s ease;
}

.component-row:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* ==============================================
   Table Column Visibility - Force hidden
   Used by table_columns_controller.js to hide columns
   with higher specificity than responsive classes
   ============================================== */
.\!hidden {
    display: none !important;
}