/* Custom styles for SEO Content Factory */

/* ============ CUSTOM THEME COLORS ============ */
/* High specificity selectors to override Tailwind CDN */

/* Header - Graphite #474a51 */
html body .header-bg,
html .header-bg {
    background-color: #474a51 !important;
}

/* Sidebar - Blue #334265 */
html body .sidebar-bg,
html .sidebar-bg {
    background-color: #334265 !important;
}

html body .sidebar-active,
html .sidebar-active {
    background-color: #2a3450 !important;
}

html body .sidebar-hover:hover,
html .sidebar-hover:hover {
    background-color: #2a3450 !important;
}

/* Primary accent color - Purple #7262b0 */
html body .text-primary,
html .text-primary {
    color: #7262b0 !important;
}

html body .bg-primary,
html .bg-primary {
    background-color: #7262b0 !important;
}

html body .border-primary,
html .border-primary {
    border-color: #7262b0 !important;
}

html body .hover-bg-primary:hover,
html .hover-bg-primary:hover {
    background-color: #5d4f9a !important;
}

html body .hover-text-primary:hover,
html .hover-text-primary:hover {
    color: #5d4f9a !important;
}

/* Smooth transitions for all interactive elements */
a, button {
    transition: all 0.2s ease-in-out;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* HTMX loading indicator */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* HTMX indicator - display toggle */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: flex;
}

/* Form focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(114, 98, 176, 0.1);
}

/* Custom animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out;
}

/* Table hover effect */
table tbody tr:hover {
    background-color: #f8fafc;
}

/* Button loading state */
button.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }
    
    .sidebar.open {
        transform: translateX(0);
    }
}

/* ============ KEYWORD SERVICE UI STYLES ============ */

/* Таблица ключей */
.table-container {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
}
.table-header {
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}
.th-left {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.th-center {
    padding: 0.75rem 1rem;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.th-right {
    padding: 0.75rem 1rem;
    text-align: right;
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.th-check {
    padding: 0.75rem 1rem;
    width: 2.5rem;
}
.table-row {
    border-bottom: 1px solid #f1f5f9;
    transition: background-color 0.2s;
}
.table-row:hover {
    background-color: #f8fafc;
}
.td-left {
    padding: 0.75rem 1rem;
    text-align: left;
}
.td-center {
    padding: 0.75rem 1rem;
    text-align: center;
}
.td-right {
    padding: 0.75rem 1rem;
    text-align: right;
}
.td-check {
    padding: 0.75rem 1rem;
}

/* Бейджи */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-blue {
    background-color: #dbeafe;
    color: #1d4ed8;
}
.badge-green {
    background-color: #dcfce7;
    color: #15803d;
}
.badge-purple {
    background-color: #f3e8ff;
    color: #7c3aed;
}
.badge-slate {
    background-color: #f1f5f9;
    color: #475569;
}

/* Кластерные карточки */
.cluster-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: box-shadow 0.2s;
}
.cluster-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.cluster-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.cluster-card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.keyword-tag {
    display: inline-block;
    background-color: #f1f5f9;
    color: #334155;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
}

/* Теги терминов кластера */
.cluster-term-tag {
    display: inline-block;
    background-color: #dbeafe;
    color: #1e40af;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    text-transform: lowercase;
}

/* Cohesion badge - показывает схожесть ключей в кластере */
.cohesion-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background-color: #f0fdf4;
    color: #166534;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    cursor: help;
    border: 1px solid #bbf7d0;
}
.cohesion-badge:hover {
    background-color: #dcfce7;
}

/* Предупреждение о старых кластерах */
.cluster-warning {
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}
.cluster-warning-icon {
    color: #f59e0b;
    font-size: 1.25rem;
}
.cluster-warning-title {
    color: #92400e;
    font-weight: 600;
}
.cluster-warning-text {
    color: #b45309;
    font-size: 0.875rem;
    margin-top: 0.25rem;
}
.cluster-warning-btn {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    background-color: #fef3c7;
    color: #92400e;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.cluster-warning-btn:hover {
    background-color: #fde68a;
}

/* Fallback для старых кластеров */
.cluster-no-metadata {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: italic;
}

/* Модальные окна */
.modal-overlay {
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
}
.modal-box {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 32rem;
    max-height: 90vh;
    overflow-y: auto;
}
.modal-body {
    padding: 1.5rem;
}
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
}
.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
}
.modal-close {
    color: #94a3b8;
    font-size: 1.25rem;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
}
.modal-close:hover {
    color: #475569;
}
.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
    margin-top: 1rem;
}

/* Кнопки */
.btn-primary {
    background-color: #7262b0;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.btn-primary:hover {
    background-color: #5d4f9a;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-primary:active {
    background-color: #4a3d7d;
}
.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-secondary {
    background-color: white;
    color: #334155;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 2px solid #cbd5e1;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s;
}
.btn-secondary:hover {
    background-color: #f8fafc;
    border-color: #94a3b8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.btn-secondary:active {
    background-color: #f1f5f9;
}

.btn-ghost {
    color: #475569;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    background: transparent;
}
.btn-ghost:hover {
    background-color: #f1f5f9;
    color: #1e293b;
}

.btn-danger-sm {
    background-color: #ef4444;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
}
.btn-danger-sm:hover {
    background-color: #dc2626;
}

.btn-ghost-sm {
    color: #94a3b8;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    cursor: pointer;
    background: transparent;
    border: none;
}
.btn-ghost-sm:hover {
    color: white;
}

.icon-btn {
    padding: 0.375rem;
    border-radius: 0.375rem;
    cursor: pointer;
    background: transparent;
    border: none;
}
.icon-btn:hover {
    background-color: #f1f5f9;
}

/* Формы */
.form-group {
    margin-bottom: 1rem;
}
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.375rem;
}
.form-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 0.25rem;
}
.input-field {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #1e293b;
    font-family: inherit;
}
.input-field:focus {
    outline: none;
    border-color: #7262b0;
    box-shadow: 0 0 0 3px rgba(114, 98, 176, 0.1);
}
textarea.input-field {
    resize: vertical;
    min-height: 80px;
}
.select-field {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #1e293b;
    background-color: white;
}
.select-field:focus {
    outline: none;
    border-color: #7262b0;
    box-shadow: 0 0 0 3px rgba(114, 98, 176, 0.1);
}
.checkbox {
    height: 1rem;
    width: 1rem;
    color: #7262b0;
    border-color: #cbd5e1;
    border-radius: 0.25rem;
}

/* Кастомный класс для 7 равных колонок в табах */
.w-1\/7 {
    width: 14.285714%;
}

/* Редактируемые поля в таблице ключей */
.keyword-editable,
.cjm-editable {
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 0.5rem;
    border-radius: 0.25rem;
}

.keyword-editable:hover,
.cjm-editable:hover {
    background-color: #f1f5f9;
}

.keyword-editable input,
.cjm-editable select {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Улучшенные отступы для модальных окон */
.modal-body .form-group {
    margin-bottom: 1.25rem;
}

.modal-body .form-label {
    margin-bottom: 0.5rem;
    display: block;
}

.modal-body .input-field,
.modal-body .select-field {
    width: 100%;
}

/* Футер модалки */
.modal-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Скрытый класс */
.hidden {
    display: none !important;
}

/* ============ WORDSTAT SERVICE STYLES ============ */

/* Индикатор региона */
.region-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 2px solid;
    margin-bottom: 1.25rem;
}
.region-indicator--all {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}
.region-indicator--local {
    background-color: #eef2ff;
    border-color: #c7d2fe;
}
.region-indicator-icon {
    font-size: 1.875rem;
    line-height: 1;
}
.region-indicator-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}
.region-indicator-subtitle {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}
.region-badge {
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.region-badge--all {
    background-color: #e2e8f0;
    color: #475569;
}
.region-badge--local {
    background-color: #c7d2fe;
    color: #4338ca;
}

/* Пояснение разницы регионов */
.region-explainer {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background-color: #fffbeb;
    border-radius: 0.5rem;
    border: 1px solid #fde68a;
    margin-bottom: 1.25rem;
}
.region-explainer-item {
    display: flex;
    gap: 0.75rem;
    flex: 1;
}
.region-explainer-divider {
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0 0.5rem;
}

/* Dropdown регионов */
.region-dropdown {
    position: absolute;
    z-index: 20;
    width: 100%;
    margin-top: 0.25rem;
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 15rem;
    overflow-y: auto;
}
.region-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: #334155;
    transition: background-color 0.15s;
}
.region-option:hover {
    background-color: #f8fafc;
}
.region-option--all {
    border-bottom: 1px solid #f1f5f9;
    font-weight: 500;
    color: #7262b0;
}
.region-option--all:hover {
    background-color: #eef2ff;
}

/* Статус Вордстата */
.wordstat-status {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid;
}
.wordstat-status--processing {
    background-color: #eef2ff;
    border-color: #c7d2fe;
    flex-direction: column;
    align-items: stretch;
}
.wordstat-status--done {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}
.wordstat-status--failed {
    background-color: #fef2f2;
    border-color: #fecaca;
}

/* Бейджи частотности */
.freq-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 600;
}
.freq-high {
    background-color: #dcfce7;
    color: #15803d;
}
.freq-mid {
    background-color: #dbeafe;
    color: #1d4ed8;
}
.freq-low {
    background-color: #f1f5f9;
    color: #475569;
}
.freq-zero {
    background-color: #f8fafc;
    color: #94a3b8;
}

/* Блок пояснения настроек */
.settings-section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #f1f5f9;
}
.settings-section:last-child {
    border-bottom: none;
}
.settings-section-header {
    margin-bottom: 1rem;
}
.settings-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
}
.settings-description {
    font-size: 0.875rem;
    color: #64748b;
    margin-top: 0.25rem;
}

/* Кастомный класс для 8 равных колонок в табах */
.w-1\/8 {
    width: 12.5%;
}

/* ============ PARSER SERVICE STYLES ============ */

/* Stat cards */
.stat-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
}
.stat-card--warn {
    border-color: #fcd34d;
    background-color: #fffbeb;
}
.stat-card--error {
    border-color: #fca5a5;
    background-color: #fef2f2;
}
.stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}
.stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0.25rem 0;
}
.stat-sub {
    font-size: 0.75rem;
    color: #94a3b8;
}

/* Рекомендации */
.parser-recommendations {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #f8fafc;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}
.recommendation {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
}
.recommendation--error {
    background-color: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
.recommendation--warn {
    background-color: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}
.recommendation--ok {
    background-color: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

/* Выбор режима парсинга */
.mode-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.mode-option {
    position: relative;
    cursor: pointer;
}
.mode-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.mode-option-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: border-color 0.2s, background-color 0.2s;
}
.mode-option-content:hover {
    border-color: #c7d2fe;
}
.mode-option input:checked + .mode-option-content {
    border-color: #7262b0;
    background-color: #eef2ff;
}
.mode-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.mode-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 0.875rem;
}
.mode-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 0.125rem;
}

/* ============ CONTENT PLAN / ТЕМНИК STYLES ============ */

/* View switcher */
.view-switcher {
    display: flex;
    background-color: #f1f5f9;
    border-radius: 0.5rem;
    padding: 0.25rem;
}
.view-btn {
    padding: 0.375rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    background: transparent;
}
.view-btn.active {
    background-color: white;
    color: #0f172a;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-weight: 500;
}

/* AI menu */
.ai-menu-item {
    width: 100%;
    text-align: left;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #334155;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background-color 0.15s;
}
.ai-menu-item:hover {
    background-color: #f8fafc;
}

/* Kanban board */
.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    min-height: 24rem;
}
.kanban-col {
    display: flex;
    flex-direction: column;
    background-color: #f8fafc;
    border-radius: 0.75rem;
    border-top: 4px solid;
    min-height: 16rem;
}
.kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-bottom: 1px solid #e2e8f0;
}
.kanban-count {
    background-color: #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 9999px;
    padding: 0.125rem 0.5rem;
}
.kanban-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 1;
}
.kanban-empty-col {
    text-align: center;
    color: #cbd5e1;
    font-size: 0.875rem;
    padding: 2rem 0;
    border: 2px dashed #e2e8f0;
    border-radius: 0.5rem;
    margin: 0.5rem;
}
.kanban-hint {
    text-align: center;
}

/* Kanban card */
.kanban-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: grab;
    transition: box-shadow 0.2s;
    overflow: hidden;
}
.kanban-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.kanban-card:active {
    cursor: grabbing;
}
.kanban-card-priority {
    height: 0.25rem;
}

/* Priority stripes (kanban cards) */
.priority-stripe--high {
    background-color: #f87171;
}
.priority-stripe--medium {
    background-color: #fbbf24;
}
.priority-stripe--low {
    background-color: #4ade80;
}

/* Status select inline */
.status-select {
    font-size: 0.75rem;
    border-radius: 0.5rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    cursor: pointer;
    font-weight: 500;
}

/* Priority badges */
.priority-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}
.priority-badge--high {
    background-color: #fee2e2;
    color: #b91c1c;
}
.priority-badge--medium {
    background-color: #fef3c7;
    color: #b45309;
}
.priority-badge--low {
    background-color: #dcfce7;
    color: #15803d;
}

/* Funnel badges */
.funnel-badge {
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-weight: 500;
}
.funnel-badge--tofu {
    background-color: #dbeafe;
    color: #1d4ed8;
}
.funnel-badge--mofu {
    background-color: #ede9fe;
    color: #7c3aed;
}
.funnel-badge--bofu {
    background-color: #ffedd5;
    color: #c2410c;
}

/* Bulk actions */
.bulk-btn {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: white;
    transition: background-color 0.2s;
    border: none;
    cursor: pointer;
}

/* Stat card active state */
.stat-card--active {
    border-color: #c7d2fe;
    background-color: #eef2ff;
}

/* Modal large */
.modal-box--lg {
    max-width: 42rem;
}

/* Due date colors */
.due-date--overdue {
    color: #ef4444;
}
.due-date--soon {
    color: #f59e0b;
}
.due-date--ok {
    color: #64748b;
}

/* Line clamp for kanban cards */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Opacity helper for drag state */
.opacity-50 {
    opacity: 0.5;
}

/* btn-danger for modal delete */
.btn-danger {
    background-color: #ef4444;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
}
.btn-danger:hover {
    background-color: #dc2626;
}

/* ============ WRITER SERVICE STYLES ============ */

/* Кастомный класс для 9 равных колонок в табах */
.w-1\/9 {
    width: 11.111%;
}

/* Editor layout */
.editor-topbar {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    background-color: white;
    border-bottom: 1px solid #e2e8f0;
    gap: 0.75rem;
    flex-shrink: 0;
}
.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background-color: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.editor-statusbar {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #f8fafc;
    border-top: 1px solid #e2e8f0;
    font-size: 0.75rem;
    color: #64748b;
    flex-shrink: 0;
}
.editor-panel {
    background-color: white;
    border-left: 1px solid #e2e8f0;
    flex-shrink: 0;
}

/* CodeMirror override */
.CodeMirror {
    height: 100% !important;
    font-size: 14px;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    line-height: 1.8;
}
.CodeMirror-scroll {
    padding: 1rem;
}

/* Format buttons */
.fmt-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 0.25rem;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s;
    line-height: 1.4;
}
.fmt-btn:hover {
    background-color: #e2e8f0;
}
.fmt-separator {
    width: 1px;
    height: 1rem;
    background-color: #e2e8f0;
    margin: 0 0.25rem;
    flex-shrink: 0;
}

/* Panel toggle */
.panel-toggle {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 0.5rem;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.panel-toggle:hover {
    background-color: #f1f5f9;
}
.panel-toggle.active {
    background-color: #eef2ff;
    color: #7262b0;
}

/* Job cards */
.job-card {
    background-color: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.job-card--active {
    border-color: #c7d2fe;
    background-color: #eef2ff;
}
.job-card--done {
    border-color: #bbf7d0;
    background-color: #f0fdf4;
    color: #166534;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
}
.job-card--failed {
    border-color: #fecaca;
    background-color: #fef2f2;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
}

/* Section items */
.section-item {
    padding: 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid;
    font-size: 0.875rem;
}
.section-item--done {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
}
.section-item--writing {
    background-color: #eef2ff;
    border-color: #c7d2fe;
}
.section-item--failed {
    background-color: #fef2f2;
    border-color: #fecaca;
}
.section-item--pending {
    background-color: #f8fafc;
    border-color: #e2e8f0;
}

/* SERP preview */
.serp-preview {
    background-color: white;
    border-radius: 0.5rem;
    padding: 0.75rem;
    border: 1px solid #e2e8f0;
}
.serp-title {
    color: #1a0dab;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    line-height: 1.3;
    margin-bottom: 0.125rem;
}
.serp-url {
    color: #006621;
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}
.serp-desc {
    color: #545454;
    font-size: 0.75rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Article status badges */
.badge-draft {
    background-color: #f1f5f9;
    color: #475569;
}
.badge-review {
    background-color: #fef3c7;
    color: #b45309;
}
.badge-approved {
    background-color: #dcfce7;
    color: #15803d;
}
.badge-published {
    background-color: #dbeafe;
    color: #1d4ed8;
}

/* Line clamp utilities */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============ SEO REPORT STYLES ============ */

/* SEO Report Layout */
.seo-topbar {
    display: flex;
    align-items: center;
    padding: 0.625rem 1rem;
    background-color: white;
    border-bottom: 1px solid #e2e8f0;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 10;
}

.seo-metric-card {
    background-color: white;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 1rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    text-align: center;
}

.metric-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.metric-sub {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

/* Check icons */
.check-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.check-icon--pass {
    background-color: #dcfce7;
    color: #16a34a;
}

.check-icon--warning {
    background-color: #fef3c7;
    color: #d97706;
}

.check-icon--fail {
    background-color: #fee2e2;
    color: #dc2626;
}

/* Category badge */
.category-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: #f1f5f9;
    color: #64748b;
}

/* Recommendations */
.priority-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    display: block;
    margin-top: 0.375rem;
}

.priority-dot--high {
    background-color: #ef4444;
}

.priority-dot--medium {
    background-color: #fbbf24;
}

.priority-dot--low {
    background-color: #cbd5e1;
}

.priority-label {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}

.priority-label--high {
    background-color: #fee2e2;
    color: #991b1b;
}

.priority-label--medium {
    background-color: #fef3c7;
    color: #92400e;
}

.priority-label--low {
    background-color: #f1f5f9;
    color: #64748b;
}

.impact-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    background-color: rgba(114, 98, 176, 0.15);
    color: #7262b0;
    font-weight: 500;
}

/* Grade badges */
.grade-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 700;
    font-size: 0.875rem;
}

.grade-badge--A {
    background-color: #dcfce7;
    color: #15803d;
}

.grade-badge--B {
    background-color: #dbeafe;
    color: #1d4ed8;
}

.grade-badge--C {
    background-color: #fef3c7;
    color: #b45309;
}

.grade-badge--D {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* Status cards */
.seo-status-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.seo-status-card--pending {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
}

.seo-status-card--processing {
    background-color: #eef2ff;
    border: 1px solid #c7d2fe;
}

.seo-status-card--done {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
    font-weight: 500;
}

/* SEO Score colors */
.seo-score-high {
    color: #22c55e;
}

.seo-score-medium {
    color: #7262b0;
}

.seo-score-low {
    color: #f59e0b;
}

.seo-score-bad {
    color: #ef4444;
}

/* Animation for spinner */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ============ SEO DASHBOARD STYLES ============ */

/* SEO Metric Cards */
.seo-metric-card {
    @apply bg-white rounded-xl border border-slate-200 p-4 text-center;
}

.metric-label {
    @apply text-xs font-medium text-slate-500 uppercase tracking-wide mb-1;
}

.metric-value {
    @apply text-2xl font-bold text-slate-800;
}

.metric-sub {
    @apply text-xs mt-1;
}

/* Grade Bars for mini chart */
.grade-bar {
    @apply flex items-end justify-center w-8 rounded-t min-h-[4px] transition-all;
}

.grade-bar--A {
    @apply bg-green-400 text-green-800;
}

.grade-bar--B {
    @apply bg-blue-400 text-blue-800;
}

.grade-bar--C {
    @apply bg-amber-400 text-amber-800;
}

.grade-bar--D {
    @apply bg-red-400 text-red-800;
}

/* Grade Badges */
.grade-badge {
    @apply inline-flex items-center justify-center px-2 py-0.5 rounded text-xs font-bold;
}

.grade-badge--A {
    @apply bg-green-100 text-green-700;
}

.grade-badge--B {
    @apply bg-blue-100 text-blue-700;
}

.grade-badge--C {
    @apply bg-amber-100 text-amber-700;
}

.grade-badge--D {
    @apply bg-red-100 text-red-700;
}

/* SEO Score Colors */
.seo-score-excellent {
    @apply text-green-600;
}

.seo-score-good {
    @apply text-blue-600;
}

.seo-score-average {
    @apply text-amber-600;
}

.seo-score-poor {
    @apply text-red-600;
}

/* Line clamp for long titles */
.line-clamp-1 {
    @apply overflow-hidden text-ellipsis whitespace-nowrap;
}

/* Button ghost style */
.btn-ghost {
    @apply px-4 py-2 rounded-lg border border-slate-200 text-slate-600
           hover:bg-slate-50 hover:border-slate-300 transition-colors;
}

.btn-ghost:disabled {
    @apply opacity-60 cursor-not-allowed;
}

/* Select field */
.select-field {
    @apply px-3 py-2 rounded-lg border border-slate-200 bg-white
           text-slate-700 focus:outline-none focus:ring-2 focus:ring-primary/20
           focus:border-primary;
}

/* Table utilities */
.table-container {
    @apply overflow-x-auto rounded-xl border border-slate-200;
}

.table-header {
    @apply bg-slate-50 text-xs font-semibold text-slate-600 uppercase tracking-wide;
}

.th-left {
    @apply px-4 py-3 text-left;
}

.th-center {
    @apply px-4 py-3 text-center;
}

.th-right {
    @apply px-4 py-3 text-right;
}

.td-left {
    @apply px-4 py-3 text-left;
}

.td-center {
    @apply px-4 py-3 text-center;
}

.td-right {
    @apply px-4 py-3 text-right;
}

.table-row {
    @apply border-t border-slate-100 hover:bg-slate-50 transition-colors;
}

/* Icon button */
.icon-btn {
    @apply inline-flex items-center justify-center w-8 h-8 rounded-lg
           hover:bg-slate-100 transition-colors;
}

/* Badge variants for SEO status */
.badge-success {
    @apply bg-green-100 text-green-700 border border-green-200;
}

.badge-indigo {
    @apply bg-primary/10 text-primary border border-primary/20;
}

.badge-slate {
    @apply bg-slate-100 text-slate-600 border border-slate-200;
}

.badge-red {
    @apply bg-red-100 text-red-700 border border-red-200;
}