/* Таб „Блог“ (11.10.2026) - префикс bl-. Прехвърлен от admin панела: старите модули са пълни с inline стилове и
   променливите на тъмната тема (--text-primary, --border-color ...), затова тук те се дефинират към светлата топла
   палитра на таблото (като ai-models.css / customers.css). Картата (фон, радиус, слята с лентата) е в tab-card.css.
   Мобилно-първо: цели за допир >= 44px, подтабовете са хоризонтална лента, формите са на една колона,
   таблиците стават карти (етикетите по клетките ги слага blog.js от <th>). */
#blog {
    --text-primary: #2b231d;
    --text-secondary: #8a7866;
    --border-color: #e6d4bf;
    --bg-primary: #fff;
    --bg-secondary: #fff;
    --bg-tertiary: #fbf4ec;
    --accent-primary: #a8743f;
    --accent-secondary: #d4a574;
    --accent-danger: #b3261e;
    color: var(--text-primary);
}
#blog button, #blog input, #blog select, #blog textarea { font-family: inherit; }
#blog i.fas { line-height: 1; }
#blog .bl-error { color: var(--accent-danger); padding: 16px; }
#blog .bl-aimodels-link { margin: 0 0 14px; font-size: .86rem; color: var(--text-secondary); }
#blog .bl-aimodels-link a { color: var(--accent-primary); font-weight: 700; }

/* ---- бутони ---- */
#blog .bl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px;
    padding: 8px 14px; border: 1px solid #efe4d8; border-radius: 10px; background: #fbf4ec; color: var(--text-primary);
    font-size: .88rem; font-weight: 700; cursor: pointer; transition: background .15s, border-color .15s;
}
#blog .bl-btn:hover { background: #f6ece1; border-color: #e6d4bf; }
#blog .bl-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- подтабове: една хоризонтална лента, без скрол на страницата ---- */
#blog .bl-subtabs {
    display: flex; gap: 6px; margin: 0 0 20px; padding: 4px; background: #f6ece1; border-radius: 14px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
#blog .bl-subtabs::-webkit-scrollbar { display: none; }
#blog .bl-subtabs .bl-btn {
    flex: 0 0 auto; min-height: 44px; border: 0; background: transparent; border-radius: 11px; color: #7a6552; white-space: nowrap;
}
#blog .bl-subtabs .bl-btn i { color: #a8743f; }
#blog .bl-subtabs .bl-btn.bl-subtab-active { background: #fff; color: var(--text-primary); box-shadow: 0 1px 4px rgba(58, 47, 38, .14); }

/* ---- полета ---- */
#blog input[type="text"], #blog input[type="url"], #blog input:not([type]), #blog select, #blog textarea {
    border-color: #e6d4bf !important; border-radius: 10px !important; color: var(--text-primary); box-sizing: border-box;
}
#blog input:focus, #blog select:focus, #blog textarea:focus { outline: 2px solid #d4a574; outline-offset: 1px; }

/* ---- таблици ---- */
#blog table.data-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
#blog table.data-table th {
    text-align: left; padding: 10px 12px; font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-secondary); border-bottom: 2px solid #efe4d8; white-space: nowrap;
}
#blog table.data-table td { padding: 12px; border-bottom: 1px solid #f3e9dd; vertical-align: middle; }

/* ---- Quill ---- */
#blog .ql-toolbar.ql-snow { border-color: #e6d4bf; border-radius: 10px 10px 0 0; background: #fbf4ec; position: sticky; top: 0; z-index: 2; }
#blog .ql-container.ql-snow { border-color: #e6d4bf; border-radius: 0 0 10px 10px; font-family: inherit; font-size: 1rem; }
#blog .ql-editor { min-height: 300px; color: var(--text-primary); }

/* ---- телефон ---- */
@media (max-width: 720px) {
    #blog [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    #blog input, #blog select, #blog textarea { font-size: 16px !important; min-height: 44px; }
    #blog .bl-btn { min-height: 44px; }
    #blog [data-blog-section="topics"] [style*="min-width:200px"] { min-width: 0 !important; width: 100%; }

    /* таблица -> карти */
    #blog table.data-table, #blog table.data-table tbody, #blog table.data-table tr, #blog table.data-table td { display: block; width: 100%; box-sizing: border-box; }
    #blog table.data-table thead { display: none; }
    #blog table.data-table tr { background: #fff; border: 1px solid #efe4d8; border-radius: 14px; padding: 8px 12px; margin-bottom: 10px; }
    #blog table.data-table td { padding: 7px 0; border: 0; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; max-width: none !important; }
    #blog table.data-table td[data-label]::before {
        content: attr(data-label); flex: 0 0 38%; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); padding-top: 3px;
    }
    #blog table.data-table td:first-child { display: block; }
    #blog table.data-table td:first-child::before { display: block; margin-bottom: 2px; }
    #blog [data-blog-section] > div[style*="overflow-x:auto"] { overflow-x: visible !important; }
}