/* ============================================================
   Ticket Label Printer — Custom Styles
   Дополнение к Tailwind CDN. Промышленный утилитарный стиль.
   ============================================================ */

/* --- Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    transition: none !important;
    animation: none !important;
}

::selection {
    background: rgba(59, 130, 246, 0.3);
    color: #f0f2f5;
}

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #1a1e25;
}
::-webkit-scrollbar-thumb {
    background: #404858;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #626e82;
}

/* --- Panels --- */
.panel {
    background: #2c323c;
    border: 1px solid rgba(64, 72, 88, 0.5);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.panel:hover {
    border-color: rgba(64, 72, 88, 0.8);
}

.panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: #818b9d;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

/* --- Form fields --- */
.field-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: #818b9d;
    letter-spacing: 0.05em;
    margin-bottom: 0.375rem;
    text-transform: uppercase;
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.field-input {
    width: 100%;
    background: #1a1e25;
    border: 1px solid #404858;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    padding-right: 2.5rem;
    color: #ebedf0;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
.field-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.field-input:hover:not(:focus) {
    border-color: #626e82;
}

/* Remove arrows from number inputs */
.field-input[type="number"]::-webkit-inner-spin-button,
.field-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.field-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.input-suffix {
    position: absolute;
    right: 0.75rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: #626e82;
    pointer-events: none;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.05em;
}

.field-select {
    width: 100%;
    background: #1a1e25;
    border: 1px solid #404858;
    border-radius: 0.375rem;
    padding: 0.375rem 0.75rem;
    color: #ebedf0;
    font-size: 0.85rem;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23626e82' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}
.field-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.field-select option {
    background: #2c323c;
    color: #ebedf0;
}

.field-textarea {
    width: 100%;
    background: #1a1e25;
    border: 1px solid #404858;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    color: #ebedf0;
    font-size: 0.9rem;
    font-family: 'IBM Plex Sans', sans-serif;
    resize: vertical;
    min-height: 120px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.6;
}
.field-textarea:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.field-textarea:hover:not(:focus) {
    border-color: #626e82;
}
.field-textarea::placeholder {
    color: #626e82;
}

/* --- Print button --- */
.btn-print {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.125rem 2rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: 'IBM Plex Sans', sans-serif;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.btn-print::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.btn-print:hover:not(:disabled)::before {
    opacity: 1;
}
.btn-print:hover:not(:disabled) {
    box-shadow: 0 12px 24px rgba(59, 130, 246, 0.35);
    transform: translateY(-2px);
}
.btn-print:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
}
.btn-print:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #404858;
    transform: none;
    box-shadow: none;
}

/* --- Preview --- */
.preview-bg {
    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 9px,
            rgba(64, 72, 88, 0.15) 9px,
            rgba(64, 72, 88, 0.15) 10px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 9px,
            rgba(64, 72, 88, 0.15) 9px,
            rgba(64, 72, 88, 0.15) 10px
        );
    background-color: #1a1e25;
}

/* --- Explicit Transitions Exceptions --- */
.btn-print {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease !important;
}
.btn-print:disabled {
    transition: none !important;
}
#preview-img {
    transition: opacity 0.15s ease !important;
}
.field-input:focus, .field-select:focus, .field-textarea:focus {
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}