/**
 * Button Component Styles
 * Переиспользуемые стили для кнопок
 */

/* Кнопки калькуляторов */
.calculator-btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-2xl);
    background: var(--color-button-primary);
    border: none;
    border-radius: var(--radius-full);
    color: #FFFFFF !important;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    cursor: pointer;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.calculator-btn:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.calculator-btn:active {
    transform: translateY(0);
}

/* Light theme: Calculator buttons - dark instead of white */
body.light-theme .calculator-btn {
    background: var(--color-button-primary);
    color: #FFFFFF !important;
}

body.light-theme .calculator-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #FFFFFF !important;
}

/* Кнопки в чате (теги калькуляторов) */
/* Теги/темы калькуляторов (по умолчанию — тёмная тема) */
.calculator-button {
    background: var(--color-button-secondary);
    border: none;
    border-radius: var(--radius-lg);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    color: var(--color-text-disabled);
    cursor: pointer;
    transition: all var(--transition-base);
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.calculator-button:hover {
    background: var(--color-button-secondary-hover);
    border: none;
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.calculator-button:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.18);
    color: var(--color-text-primary);
}

/* Светлая тема: теги калькуляторов */
body.light-theme .calculator-button {
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.7);
    backdrop-filter: none;
}

body.light-theme .calculator-button:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #020617;
}

body.light-theme .calculator-button:active {
    background: rgba(15, 23, 42, 0.12);
    color: #020617;
}

/* Заблокированная кнопка Dashboard */
.calculator-button.locked,
.calculator-button:disabled {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.2);
    cursor: not-allowed;
    opacity: 0.5;
    position: relative;
    pointer-events: none;
}

.calculator-button.locked:hover,
.calculator-button:disabled:hover {
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.2);
    transform: none;
}

.calculator-button.locked::after {
    content: '🔒';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    opacity: 0.6;
}

/* Кнопки инвойса */
.invoice-btn {
    padding: 0 24px;
    height: 44px;
    border: none;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.invoice-btn-preview {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: rgba(255, 255, 255, 0.8);
}

.invoice-btn-preview:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.invoice-btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: rgba(255, 255, 255, 0.8);
}

.invoice-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Light theme: Invoice preview and secondary buttons - gray instead of transparent white */
body.light-theme .invoice-btn-preview,
body.light-theme .invoice-btn-secondary {
    background: rgb(240, 240, 240);
    color: rgba(0, 0, 0, 0.8);
}

body.light-theme .invoice-btn-preview:hover,
body.light-theme .invoice-btn-secondary:hover {
    background: rgb(232, 232, 232);
    color: #000000;
}

.invoice-btn-generate {
    background: #ffffff;
    border: none;
    color: #121212;
    position: relative;
    min-width: 120px;
}

.invoice-btn-generate:hover:not(.loading) {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

/* Light theme: Invoice generate button - dark instead of white */
body.light-theme .invoice-btn-generate {
    background: var(--color-button-primary);
    color: #FFFFFF !important;
}

body.light-theme .invoice-btn-generate:hover:not(.loading) {
    background: rgba(0, 0, 0, 0.85);
    color: #FFFFFF !important;
}

body.light-theme .invoice-btn-generate.loading::after {
    border-color: #ffffff;
    border-top-color: transparent;
}

.invoice-btn-generate.loading {
    color: transparent;
    pointer-events: none;
    cursor: not-allowed;
}

.invoice-btn-generate.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 2px solid var(--color-button-primary-text);
    border-top-color: transparent;
    border-radius: var(--radius-circle);
    animation: invoice-spinner 0.6s linear infinite;
}

@keyframes invoice-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Кнопка генерации в модалке */
.invoice-generate-btn {
    background: var(--color-button-secondary);
    border: none;
    border-radius: var(--radius-full);
    padding: var(--spacing-sm) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-primary);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
    margin-top: var(--spacing-sm);
    white-space: nowrap;
}

.invoice-generate-btn:hover {
    background: var(--color-button-secondary-hover);
    color: var(--color-text-primary);
}

/* Light theme: Invoice generate small button - gray instead of transparent white */
body.light-theme .invoice-generate-btn {
    background: rgb(240, 240, 240);
    color: rgba(0, 0, 0, 0.8);
}

body.light-theme .invoice-generate-btn:hover {
    background: rgb(232, 232, 232);
    color: #000000;
}

/* Адаптивность для кнопок */
@media (max-width: 768px) {
    .invoice-btn {
        width: 100%;
    }
}