/* Base Styles */
body {
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    background-color: #F5F5F5;      /* Светло-серый фон */
    color: var(--text-dark);
    line-height: 1.6;
}

/* Кабинет (base.html). Логин и витрина — без этого класса, 16px как были. */
body.app-cabinet {
    font-size: var(--font-size-ui);
    line-height: var(--line-height-ui);
}

body.app-cabinet .content .card-header h4,
body.app-cabinet .content .card-header .card-title,
body.app-cabinet .content .card-title {
    font-size: var(--font-size-title);
    line-height: 1.3;
}

body.app-cabinet .app-page-title {
    font-size: var(--font-size-title);
    font-weight: 650;
    line-height: 1.3;
    color: #1f2a37;
    margin: 0;
}

/* Skip to main content for accessibility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Utility Classes */
.disabled {
    color: #adb5bd !important;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
}

.pre-line-format {
    white-space: pre-line;
}

.form-inline {
    display: inline;
}

.btn-view {
    margin-left: 8px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 6px;
}

/* Gradient card styles */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border: none !important;
}

/* Если нужно применить градиент только к карточкам */
.card.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
    border: none !important;
}

/* Добавление градиента к Bootstrap bg-классам */
.bg-gradient {
    background-image: var(--gradient-primary);
}

.bg-gradient-primary:hover {
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.bg-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%) !important;
}