/**
 * [AI PROMPT GUIDELINE] CENTRAL DESIGN SYSTEM & UTILITY FRAMEWORK
 * This file is the single source of truth for the "Terminal UI" design system, loaded globally across the admin dashboard and frontend portals.
 *
 * 1. UTILITY-FIRST: New styles should be created as reusable utility classes (e.g., `.ba-flex`, `.ba-p-15`). Avoid component-specific selectors.
 * 2. NAMESPACE ISOLATION: All classes MUST be prefixed with `ba-` to prevent conflicts with WordPress core or other plugins.
 * 3. ZERO INLINE STYLES: This file is the exclusive source for styling. Inline `style="..."` attributes are strictly forbidden.
 */
/**
 * Prompt: Core functionality implementation.
 */
/* BlackAlpha Core - Design System & Utilities */ 
/* Strict adherence to Utility-First, Namespace isolation (.ba-), and WP Theme Sync */

/* --- 1. Layout & Container --- */
.ba-container-std { width: auto; max-width: 1024px; padding-right: 20px; box-sizing: border-box; }
.ba-container-max { width: auto; max-width: 1440px; padding-right: 20px; box-sizing: border-box; }
.ba-container-fluid { width: auto; max-width: 100%; padding-right: 20px; box-sizing: border-box; }
.ba-wrap { margin-top: 5px; }
.ba-modal-open { overflow: hidden !important; }

/* Dynamic Progress Bar */
.ba-progress-bar > div {
    width: var(--progress-width, 0%);
}

/* --- 2. Grid System --- */
.ba-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}
.ba-grid-half {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.ba-grid-sidebar {
    display: grid;
    grid-template-columns: 350px 1fr;
}
.ba-grid-2-always {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.ba-col-12 { grid-column: span 12; }
.ba-col-8 { grid-column: span 8; }
.ba-col-7 { grid-column: span 7; }
.ba-col-6 { grid-column: span 6; }
.ba-col-5 { grid-column: span 5; }
.ba-col-4 { grid-column: span 4; }
.ba-col-3 { grid-column: span 3; }

/* --- 2.1 Layout & Sizing Utilities --- */
.ba-w-full { width: 100%; }
.ba-w-250 { width: 250px; }
.ba-h-160 { height: 160px; }
.ba-max-w-120 { max-width: 120px !important; }
.ba-max-w-200 { max-width: 200px !important; }
.ba-max-w-300 { max-width: 300px !important; }
.ba-min-w-120 { min-width: 120px !important; }
.ba-min-w-150 { min-width: 150px !important; }
.ba-w-50 { width: 50% !important; }
.ba-w-80 { width: 80px !important; }
.ba-h-20 { height: 20px !important; }
.ba-h-full { height: 100% !important; }
.ba-h-4 { height: 4px !important; }
.ba-min-h-0 { min-height: 0 !important; }
.ba-min-h-300 { min-height: 300px !important; }
.ba-min-h-400 { min-height: 400px !important; }

/* Table Column Widths (Percentages) */
.ba-w-5 { width: 5% !important; }
.ba-w-6 { width: 6% !important; }
.ba-w-8 { width: 8% !important; }
.ba-w-9 { width: 9% !important; }
.ba-w-10 { width: 10% !important; }
.ba-w-11 { width: 11% !important; }
.ba-w-12 { width: 12% !important; }
.ba-w-14 { width: 14% !important; }
.ba-w-15 { width: 15% !important; }
.ba-w-16 { width: 16% !important; }
.ba-w-17 { width: 17% !important; }
.ba-w-18 { width: 18% !important; }
.ba-w-19 { width: 19% !important; }
.ba-w-20 { width: 20% !important; }
.ba-w-24 { width: 24% !important; }
.ba-w-25 { width: 25% !important; }
.ba-w-30 { width: 30% !important; }
.ba-w-34 { width: 34% !important; }
.ba-w-35 { width: 35% !important; }
.ba-w-36 { width: 36% !important; }
.ba-w-40 { width: 40% !important; }
.ba-w-60 { width: 60% !important; }

@media (max-width: 1024px) {
    .ba-col-8, .ba-col-7, .ba-col-6, .ba-col-5, .ba-col-4, .ba-col-3 { grid-column: span 12 !important; }
    .ba-grid-half { grid-template-columns: 1fr; }
    .ba-grid-sidebar { grid-template-columns: 1fr; }
    .ba-order-first-mobile { order: -1 !important; }
    .ba-order-last-mobile { order: 99 !important; }
}

/* --- 3. Flexbox Utilities --- */
.ba-flex { display: flex; }
.ba-flex-col { flex-direction: column; }
.ba-flex-between, .ba-justify-between { justify-content: space-between !important; }
.ba-justify-center { justify-content: center; }
.ba-justify-end { justify-content: flex-end; }
.ba-items-start { align-items: flex-start; }
.ba-items-center { align-items: center; }
.ba-items-end { align-items: flex-end; }
.ba-flex-1 { flex: 1; }
.ba-inline-flex { display: inline-flex !important; }
.ba-inline-block { display: inline-block !important; }
.ba-flex-wrap { flex-wrap: wrap; }
.ba-wrap { flex-wrap: wrap; }
.ba-self-start { align-self: flex-start !important; }
.ba-shrink-0 { flex-shrink: 0 !important; }

/* --- 4. Spacing Utilities --- */
.ba-gap-5 { gap: 5px; }
.ba-gap-10 { gap: 10px; }
.ba-gap-15 { gap: 15px; }
.ba-gap-20 { gap: 20px; }
.ba-gap-25 { gap: 25px; }
.ba-gap-30 { gap: 30px; }

.ba-m-0 { margin: 0 !important; }
.ba-mt-10 { margin-top: 10px; }
.ba-mt-20 { margin-top: 20px; }
.ba-mt-5 { margin-top: 5px; }
.ba-mb-0 { margin-bottom: 0; }
.ba-mb-5 { margin-bottom: 5px !important; }
.ba-mb-10 { margin-bottom: 10px; }
.ba-mb-15 { margin-bottom: 15px !important; }
.ba-mb-20 { margin-bottom: 20px; }

.ba-p-0 { padding: 0; }
.ba-p-5 { padding: 5px; }
.ba-p-15 { padding: 15px; }
.ba-p-20 { padding: 20px; }
.ba-pt-10 { padding-top: 10px !important; }
.ba-pt-15 { padding-top: 15px; }
.ba-pt-20 { padding-top: 20px; }
.ba-py-10 { padding-top: 10px; padding-bottom: 10px; }
.ba-py-4 { padding-top: 4px !important; padding-bottom: 4px !important; }
.ba-py-5 { padding-top: 5px !important; padding-bottom: 5px !important; }
.ba-px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.ba-px-15 { padding-left: 15px !important; padding-right: 15px !important; }
.ba-pl-38 { padding-left: 38px !important; }
.ba-pr-15 { padding-right: 15px; }
.ba-pl-15 { padding-left: 15px !important; }
.ba-p-10 { padding: 10px !important; }
.ba-p-40 { padding: 40px !important; }
.ba-pl-30 { padding-left: 30px !important; }
.ba-ml-5 { margin-left: 5px !important; }
.ba-mt-2 { margin-top: 2px !important; }
.ba-mr-5 { margin-right: 5px !important; }
.ba-gap-0 { gap: 0 !important; }

/* --- 5. Typography & Colors --- */
.ba-text-lg { font-size: 20px; letter-spacing: -0.5px; }
.ba-text-base { font-size: 15px; }
.ba-text-sm { font-size: 13px; }
.ba-text-xs { font-size: 12px; }
.ba-text-11 { font-size: 11px !important; }
.ba-text-xl { font-size: 24px !important; }

.ba-tracking-wide { letter-spacing: 0.05em !important; }

.ba-font-semibold { font-weight: 600 !important; }
.ba-font-normal { font-weight: 400 !important; }
.ba-font-mono { font-family: Consolas, Monaco, monospace; font-variant-numeric: tabular-nums; }

/* Text Alignment */
.ba-text-center { text-align: center !important; }
.ba-text-right { text-align: right !important; }
.ba-text-left { text-align: left !important; }
.ba-lh-1 { line-height: 1 !important; }
.ba-lh-1-2 { line-height: 1.2 !important; }
.ba-lh-1-4 { line-height: 1.4 !important; }
.ba-break-keep { word-break: keep-all !important; }
.ba-whitespace-normal { white-space: normal !important; }
.ba-text-gray-300 { color: #cbd5e1 !important; }
.ba-text-success { color: #10b981 !important; }
.ba-text-warning { color: #f59e0b !important; }
.ba-text-danger-sm { color: #ef4444 !important; font-size: 13px !important; }
.ba-cursor-pointer { cursor: pointer; }
.ba-cursor-zoom-in { cursor: zoom-in !important; }
.ba-select-none { user-select: none !important; }
.ba-align-middle { vertical-align: middle !important; }
.ba-align-bottom { vertical-align: text-bottom !important; }
.ba-align-top { vertical-align: top !important; }
.ba-opacity-70 { opacity: 0.7 !important; }
.ba-opacity-80 { opacity: 0.8 !important; }
.ba-opacity-100 { opacity: 1 !important; }
.ba-absolute { position: absolute !important; }
.ba-absolute-fill { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

/* Utilities extracted from inline styles */
.ba-log-expand-btn { top: 8px; right: 8px; z-index: 2; padding: 2px 6px !important; font-size: 10px !important; background: #fff !important; border-radius: 2px; }
.ba-ticker-trans { transition: color 0.3s ease; }
.ba-proof-thumb { height: 40px; width: 40px; object-fit: cover; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); }
.ba-min-h-250 { min-height: 250px !important; }
.ba-api-response-box { background: #1e293b !important; color: #a5b4fc !important; border-color: #e2e8f0 !important; }
.ba-macro-spark-overlay { opacity: 0.25; pointer-events: none; z-index: 0; }

.ba-overflow-x-hidden { overflow-x: hidden !important; }
.ba-max-h-280 { max-height: 280px !important; }
.ba-hide-scrollbar { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ba-hide-scrollbar::-webkit-scrollbar { display: none; }
.ba-flex-nowrap { flex-wrap: nowrap !important; }
@media (min-width: 769px) { .ba-hidden-desktop { display: none !important; } }

/* Hierarchical Text Colors */
.ba-text-slate { color: #0f172a; }
.ba-text-muted { color: #64748b; }
.ba-text-primary { color: #2271b1; color: var(--wp-admin-theme-color, #2271b1); }
.ba-text-white { color: #ffffff !important; }
.ba-text-slate-50 { color: #f8fafc !important; }
.ba-text-slate-200 { color: #e2e8f0 !important; }
.ba-text-slate-400 { color: #94a3b8 !important; }
.ba-text-slate-500 { color: #64748b !important; }

/* Financial Text Colors */
.ba-text-up { color: #ef4444; }
.ba-text-down { color: #3b82f6; }
.ba-text-flat { color: #64748b; }
.ba-text-red-600 { color: #d32f2f; }
.ba-text-blue-600 { color: #1976d2; }
.ba-text-gray-500 { color: #64748b; }
.ba-bg-up { background-color: #ef4444 !important; }
.ba-bg-down { background-color: #3b82f6 !important; }
.ba-bg-red-50 { background-color: #fef2f2 !important; }
.ba-bg-primary { background-color: var(--wp-admin-theme-color, #2271b1) !important; }
.ba-bg-neutral { background-color: #cbd5e1 !important; }
.ba-dash-stat-val { font-size: 28px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.ba-pf-stat-val { font-size: 26px; font-weight: 700; letter-spacing: -1px; line-height: 1; }
.ba-lh-1-5 { line-height: 1.5 !important; }
.ba-bg-gray-50 { background-color: #f8fafc !important; }
.ba-bg-white { background-color: #fff !important; }
.ba-text-inherit { color: inherit !important; }

/* Truncation */
.ba-min-w-0 { min-width: 0; }
.ba-overflow-hidden { overflow: hidden !important; }
.ba-text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-whitespace-nowrap { white-space: nowrap; }
.ba-no-underline { text-decoration: none !important; }
.ba-resize-none { resize: none !important; }
.ba-whitespace-pre-wrap { white-space: pre-wrap !important; }
.ba-break-all { word-break: break-all !important; }
.ba-overflow-x-auto { overflow-x: auto !important; }
.ba-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal !important;
    line-height: 1.4;
}

/* --- 6. Card Components (.ba-card) --- */
.ba-card {
    background: #fff;
    border-radius: 2px;
    border: 1px solid #cbd5e1;
    box-shadow: none;
    overflow: hidden;
}
.ba-card-header {
    padding: 10px 15px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 15px;
    font-weight: 600;
}
.ba-card-header h2 {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
}
.ba-card-body {
    position: relative; /* For absolutely positioned children like toggle */
    padding: 15px;
}

/* Borders & Backgrounds */
.ba-border-t { border-top: 1px solid #e2e8f0; }
.ba-border-b { border-bottom: 1px solid #e2e8f0; }
.ba-border-r { border-right: 1px solid #e2e8f0; }
.ba-border { border: 1px solid #e2e8f0; }
.ba-border-primary { border-color: var(--wp-admin-theme-color, #2271b1) !important; }
.ba-border-red-300 { border-color: #fca5a5 !important; }
.ba-border-dashed { border-style: dashed !important; }
.ba-rounded { border-radius: 2px; }
/**
 * Prompt: Core functionality implementation.
 */
.ba-bg-highlight { 
    background-color: rgba(34, 113, 177, 0.08);
    background-color: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 10%, transparent); 
}
.ba-border-b-dark { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.ba-border-t-dark { border-top: 1px solid rgba(255,255,255,0.05) !important; }
.ba-bg-slate-800 { background-color: #1e293b !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.ba-bg-dark-panel { background-color: rgba(0,0,0,0.2) !important; border: 1px solid rgba(255,255,255,0.05) !important; }
.ba-hover-bg-dark:hover { background-color: rgba(255,255,255,0.1) !important; }
.ba-bg-hover-active { background-color: rgba(255,255,255,0.1) !important; }

/* Hover Lift Animation (Replaces onmouseover styles) */
.ba-hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ba-hover-lift:hover {
    transform: translateY(-1px);
    box-shadow: 2px 2px 0px rgba(0,0,0,0.05);
}

/* --- 7. Data Tables --- */
.ba-table { width: 100%; border-collapse: collapse; text-align: left; }
.ba-table-fixed { width: 100%; table-layout: fixed; font-size: 12px; margin: 0; border-collapse: separate; border-spacing: 0; }
.ba-sticky-th { position: sticky; top: 0; z-index: 2; background: #282828; border-bottom: 1px solid rgba(255,255,255,0.1); }
.ba-peer-summary-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); }
.ba-table th, .ba-table td { padding: 8px 12px; border-bottom: 1px solid #e2e8f0; vertical-align: middle; }
.ba-table th { font-size: 13px; text-transform: uppercase; font-weight: 600; letter-spacing: 0; border-bottom: 1px solid #cbd5e1; background: #f8fafc; }
.ba-table tbody tr { transition: background-color 0.15s ease; }
.ba-table tbody tr:hover { 
    background-color: #f1f5f9;
    background-color: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 2%, #f8fafc); 
}
/* [AI] Prevent tables from blowing out of their containers */
.ba-table-layout-fixed { table-layout: fixed !important; width: 100% !important; }
.ba-table-layout-fixed th, .ba-table-layout-fixed td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ba-table-layout-fixed td.ba-balloon-tooltip { overflow: visible !important; }
.ba-table-layout-fixed td:has(.ba-badge) { overflow: visible !important; text-overflow: clip !important; }

/* [AI] Prevent double borders between table and pagination by removing pagination's top border */
.ba-table + .ba-pagination.ba-border-t,
.ba-card-body.ba-p-0 + .ba-pagination.ba-border-t {
    border-top: none !important;
}

/* Compact Table for Logs & Terminals */
.ba-table-compact th, .ba-table-compact td { padding: 6px 10px !important; }

/* Table Responsive Wrapper */
.ba-table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table Sortable Headers */
.ba-table th.sortable { transition: background-color 0.2s ease; }
.ba-table th.sortable:hover { background-color: #f1f5f9; }
.ba-table th.sortable a { display: flex; align-items: center; gap: 4px; text-decoration: none !important; color: inherit; transition: color 0.2s ease; width: 100%; border-bottom: none !important; box-shadow: none !important; }
.ba-table th.ba-text-center.sortable a { justify-content: center; }
.ba-table th.ba-text-right.sortable a { justify-content: flex-end; }
.ba-table th.sortable a:hover { color: #2271b1; color: var(--wp-admin-theme-color, #2271b1); }
.ba-table th.sortable a:focus { outline: none; box-shadow: none; }
.ba-table th.sortable .sorting-indicator { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; opacity: 0.5; margin-top: 0; transform: none; }
.ba-table th.sortable:hover .sorting-indicator { opacity: 1; }
.ba-table th.sortable .sorting-indicator::before { 
    content: ''; 
    display: block; 
    width: 14px; 
    height: 14px; 
    background-color: #cbd5e1;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15l5 5 5-5'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.ba-table th.sortable:hover .sorting-indicator::before { background-color: #94a3b8; }
.ba-table th.sorted .sorting-indicator { opacity: 1; }
.ba-table th.sorted.asc .sorting-indicator::before { 
    background-color: #2271b1; 
    background-color: var(--wp-admin-theme-color, #2271b1); 
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
}
.ba-table th.sorted.desc .sorting-indicator::before { 
    background-color: #2271b1; 
    background-color: var(--wp-admin-theme-color, #2271b1); 
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.ba-table th.sorted a { color: #2271b1; color: var(--wp-admin-theme-color, #2271b1); }

/* Taxonomy (Themes/Sectors) Table Specific Column Widths */
.blackalpha_page_blackalpha-stock-themes .ba-table th:nth-child(1),
.blackalpha_page_blackalpha-stock-themes .ba-table td:nth-child(1),
.blackalpha_page_blackalpha-stock-sectors .ba-table th:nth-child(1),
.blackalpha_page_blackalpha-stock-sectors .ba-table td:nth-child(1) {
    width: 18%;
    min-width: 140px;
}

.blackalpha_page_blackalpha-stock-themes .ba-table th:nth-child(2),
.blackalpha_page_blackalpha-stock-themes .ba-table td:nth-child(2),
.blackalpha_page_blackalpha-stock-sectors .ba-table th:nth-child(2),
.blackalpha_page_blackalpha-stock-sectors .ba-table td:nth-child(2) {
    width: 40%;
    min-width: 250px;
}

/* Reduce Return Rate column width by approx -15% */
.blackalpha_page_blackalpha-stock-themes .ba-table th:nth-child(4),
.blackalpha_page_blackalpha-stock-themes .ba-table td:nth-child(4) {
    width: 12%;
    white-space: nowrap;
}

/* Override 1-line ellipsis to 2-line clamp for Descriptions */
.blackalpha_page_blackalpha-stock-themes .ba-table td:nth-child(2) .ba-text-ellipsis,
.blackalpha_page_blackalpha-stock-sectors .ba-table td:nth-child(2) .ba-text-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.4;
    max-height: 2.8em;
}

/* AI News Table Specific Column Widths */
.blackalpha_page_blackalpha-ai-news .ba-table th:nth-child(1),
.blackalpha_page_blackalpha-ai-news .ba-table td:nth-child(1) { width: 50%; min-width: 280px; }
.blackalpha_page_blackalpha-ai-news .ba-table th:nth-child(2),
.blackalpha_page_blackalpha-ai-news .ba-table td:nth-child(2) { width: 25%; min-width: 150px; text-align: center; }
.blackalpha_page_blackalpha-ai-news .ba-table th:nth-child(3),
.blackalpha_page_blackalpha-ai-news .ba-table td:nth-child(3) { width: 15%; min-width: 120px; white-space: nowrap; text-align: center; }
.blackalpha_page_blackalpha-ai-news .ba-table th:nth-child(4),
.blackalpha_page_blackalpha-ai-news .ba-table td:nth-child(4) { width: 10%; min-width: 90px; text-align: center; white-space: nowrap; }

.blackalpha_page_blackalpha-ai-news .ba-table td:nth-child(1) .ba-text-ellipsis,
.blackalpha_page_blackalpha-ai-news .ba-table td:nth-child(2) .ba-text-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.4;
    max-height: 2.8em;
}

/* Messages Table Specific Column Widths (Inbound Channel Feed) */
.blackalpha_page_blackalpha-messages .ba-inbound-table th:nth-child(1),
.blackalpha_page_blackalpha-messages .ba-inbound-table td:nth-child(1) { width: 12%; min-width: 110px; white-space: nowrap; }
.blackalpha_page_blackalpha-messages .ba-inbound-table th:nth-child(2),
.blackalpha_page_blackalpha-messages .ba-inbound-table td:nth-child(2) { width: 8%; min-width: 60px; text-align: center; }
.blackalpha_page_blackalpha-messages .ba-inbound-table th:nth-child(3),
.blackalpha_page_blackalpha-messages .ba-inbound-table td:nth-child(3) { width: 12%; min-width: 100px; white-space: nowrap; }
.blackalpha_page_blackalpha-messages .ba-inbound-table th:nth-child(4),
.blackalpha_page_blackalpha-messages .ba-inbound-table td:nth-child(4) { width: auto; min-width: 300px; }
.blackalpha_page_blackalpha-messages .ba-inbound-table th:nth-child(5),
.blackalpha_page_blackalpha-messages .ba-inbound-table td:nth-child(5) { width: 14%; min-width: 130px; white-space: nowrap; text-align: center; }
.blackalpha_page_blackalpha-messages .ba-inbound-table th,
.blackalpha_page_blackalpha-messages .ba-outbound-table th { padding-top: 15px !important; padding-bottom: 15px !important; }

/* Messages Table Specific Column Widths (Outbound Sent Queue) */
.blackalpha_page_blackalpha-messages .ba-outbound-table th:nth-child(1),
.blackalpha_page_blackalpha-messages .ba-outbound-table td:nth-child(1) { width: 8%; min-width: 60px; white-space: nowrap; }
.blackalpha_page_blackalpha-messages .ba-outbound-table th:nth-child(2),
.blackalpha_page_blackalpha-messages .ba-outbound-table td:nth-child(2) { width: 12%; min-width: 90px; text-align: center; white-space: nowrap; }
.blackalpha_page_blackalpha-messages .ba-outbound-table th:nth-child(3),
.blackalpha_page_blackalpha-messages .ba-outbound-table td:nth-child(3) { width: 20%; min-width: 140px; white-space: nowrap; }
.blackalpha_page_blackalpha-messages .ba-outbound-table th:nth-child(4),
.blackalpha_page_blackalpha-messages .ba-outbound-table td:nth-child(4) { width: 60%; min-width: 250px; }

/* Keep the Inbound/Outbound tables and their generated pagination balanced inside the card. */
.blackalpha_page_blackalpha-messages .ba-messages-table-shell {
    box-sizing: border-box;
    padding-right: 15px;
    padding-left: 15px;
}

/* AI News & Messages Table Row Hover Highlight */
.blackalpha_page_blackalpha-ai-news .ba-table tbody tr:hover,
.blackalpha_page_blackalpha-messages .ba-table tbody tr:hover {
    background-color: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 6%, #e2e8f0) !important;
}

/* --- 8. Badges & Indicators --- */
.ba-badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 2px 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.ba-badge-up { 
    background: rgba(239, 68, 68, 0.15);
    background: color-mix(in srgb, #ef4444 15%, transparent); 
    color: #ef4444; 
}
.ba-badge-down { 
    background: rgba(59, 130, 246, 0.15);
    background: color-mix(in srgb, #3b82f6 15%, transparent); 
    color: #3b82f6; 
}
.ba-badge-flat { background: #f1f5f9; color: #64748b; }
/* Sync neutral badge to active theme color */
.ba-badge-neutral { 
    background: rgba(34, 113, 177, 0.15);
    background: color-mix(in srgb, var(--wp-admin-theme-color, #2271b1) 15%, transparent); 
    color: #2271b1; color: var(--wp-admin-theme-color, #2271b1); 
}
.ba-badge-dark { background: rgba(255,255,255,0.1) !important; color: #fff !important; border: none !important; }
.ba-badge-success { color: #10b981 !important; border-color: rgba(16,185,129,0.2) !important; background: rgba(16,185,129,0.1) !important; }

/* Badge Hover Button for Quick Actions */
.ba-badge-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ba-badge-hover-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 2px !important;
    padding: 2px 6px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    height: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ba-badge-hover-btn:hover {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #ef4444 !important;
}
.ba-badge-wrapper.has-retry:hover .ba-badge-hover-btn,
.ba-badge-wrapper.has-retry:focus-within .ba-badge-hover-btn {
    display: inline-flex !important;
}
.ba-badge-wrapper.has-retry:hover .ba-badge,
.ba-badge-wrapper.has-retry:focus-within .ba-badge {
    visibility: hidden !important;
}

.ba-badge-sm { font-size: 10px !important; padding: 2px 6px !important; }
.ba-badge-pill { border-radius: 9999px !important; }
.ba-badge-danger-solid { background-color: #dc2626 !important; color: #fff !important; }
.ba-badge-success-solid { background-color: #059669 !important; color: #fff !important; }

.ba-media-preview-img { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; }
.ba-media-preview-video { max-height: 400px !important; width: 100% !important; }

/* --- 9. Forms & Inputs --- */
.ba-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 2px;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ba-input-sm {
    height: 36px;
    box-sizing: border-box;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.ba-input:focus {
    border-color: var(--wp-admin-theme-color, #2271b1);
    outline: none;
    box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #2271b1);
}
.ba-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2271b1;
    background: var(--wp-admin-theme-color, #2271b1);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box !important;
    transition: background 0.2s ease, filter 0.2s ease;
}
.ba-btn-primary:hover { filter: brightness(1.1); color: #fff; }
.ba-w-full { width: 100% !important; box-sizing: border-box !important; }

/* Button Variants */
.ba-btn-sm { padding: 6px 12px !important; font-size: 13px !important; }
.ba-btn-lg { padding: 10px 24px !important; font-size: 15px !important; }
.ba-btn-xs { padding: 4px 10px !important; font-size: 12px !important; }
.ba-btn-danger { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; }
.ba-btn-outline { background: #f6f7f7 !important; border: 1px solid #8c8f94 !important; color: #0f172a !important; cursor: pointer; }
.ba-btn-icon { padding: 5px !important; border-radius: 2px; display: inline-flex; align-items: center; justify-content: center; }
.ba-btn-cancel { color: #0f172a !important; background: #f1f5f9 !important; border: 1px solid #e2e8f0 !important; }
.ba-btn-cancel:hover { background: #e2e8f0 !important; }
.ba-btn-cancel-dark { background: transparent !important; border: 1px solid rgba(255,255,255,0.2) !important; color: #e5e5e5 !important; }
.ba-btn-cancel-dark:hover { background: rgba(255,255,255,0.05) !important; color: #fff !important; }
.ba-btn-outline:hover {
    background: #f0f0f1 !important;
    border-color: var(--wp-admin-theme-color, #2271b1) !important;
    color: #0f172a !important;
}

/* Broadcast Hub dark-modal actions: keep icon/text contrast stable on hover. */
.ba-modal-dark .ba-btn-outline.ba-btn-cancel-dark.ba-btn-modal-danger { color: #f87171 !important; }
.ba-modal-dark .ba-btn-outline.ba-btn-cancel-dark.ba-btn-modal-danger:hover,
.ba-modal-dark .ba-btn-outline.ba-btn-cancel-dark.ba-btn-modal-danger:focus-visible {
    color: #fff !important;
    background: #dc2626 !important;
    border-color: #ef4444 !important;
}
.ba-modal-dark .ba-btn-outline.ba-btn-cancel-dark.ba-btn-modal-warning { color: #fbbf24 !important; }
.ba-modal-dark .ba-btn-outline.ba-btn-cancel-dark.ba-btn-modal-warning:hover,
.ba-modal-dark .ba-btn-outline.ba-btn-cancel-dark.ba-btn-modal-warning:focus-visible {
    color: #111827 !important;
    background: #fbbf24 !important;
    border-color: #fbbf24 !important;
}
.ba-modal-dark .ba-btn-modal-live:hover,
.ba-modal-dark .ba-btn-modal-live:focus-visible { color: #fff !important; }
.ba-modal-dark .ba-btn-modal-danger:disabled,
.ba-modal-dark .ba-btn-modal-warning:disabled,
.ba-modal-dark .ba-btn-modal-live:disabled { opacity: 0.55; cursor: wait; }

/* WordPress Color Scheme Buttons */
.ba-btn-neutral,
.ba-btn-secondary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #f6f7f7 !important;
    border: 1px solid #8c8f94 !important;
    color: var(--wp-admin-theme-color, #2271b1) !important;
    padding: 8px 16px;
    border-radius: 4px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.ba-btn-neutral:hover,
.ba-btn-secondary:hover {
    background: #f0f0f1 !important;
    border-color: var(--wp-admin-theme-color, #2271b1) !important;
    color: #0a4b78 !important;
}
.ba-btn-neutral:focus,
.ba-btn-secondary:focus {
    background: #f0f0f1 !important;
    border-color: #3582c4 !important;
    color: #0a4b78 !important;
    box-shadow: 0 0 0 1px #3582c4 !important;
    outline: 2px solid transparent !important;
}
.ba-btn-neutral:active,
.ba-btn-secondary:active {
    background: #f6f7f7 !important;
    border-color: #7e8993 !important;
    color: #093b62 !important;
}

/* Button Loading Animation */
.ba-btn-primary.is-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}
.ba-btn-primary.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -10px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: ba-spin 0.8s linear infinite;
}

/* Exception for flat (white) buttons: Dark spinner */
.ba-badge-flat.is-loading::after {
    border-color: rgba(15, 23, 42, 0.2);
    border-top-color: #0f172a;
}

/* Segmented Control (Radio Pill) */
.ba-segmented-control { display: flex; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 2px; border: 1px solid #cbd5e1; box-shadow: none; }
.ba-segment-wrapper { flex-shrink: 0; height: 36px; padding: 3px; box-sizing: border-box; }
.ba-segment { position: relative; cursor: pointer; }
.ba-segment input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.ba-segment-label { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 13px; font-weight: 600; color: #64748b; border-radius: 2px; transition: all 0.2s ease; text-align: center; }
.ba-segment-label-full { height: 100%; padding: 0 12px; margin: 0; }
.ba-segment:hover .ba-segment-label { color: #0f172a; }
.ba-segment-sm { padding: 4px 8px !important; font-size: 11px !important; }
.ba-segment input[type="radio"]:checked + .ba-segment-label { background: #fff; color: var(--wp-admin-theme-color, #2271b1); box-shadow: none; border: 1px solid #cbd5e1; }

/* Search Inputs & Checkboxes */
.ba-search-input { flex: 0 1 150px; height: 36px; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; }
.ba-search-input-lg { flex: 0 1 200px; height: 36px; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; }
.ba-search-input-xl { width: 250px; height: 36px; box-sizing: border-box; margin: 0; padding-top: 0; padding-bottom: 0; }
.ba-search-input-portfolio { padding-left: 28px !important; width: 200px !important; }
.ba-date-input-sm { width: 140px !important; }
.ba-h-36 { height: 36px !important; }
.ba-top-40 { top: 40px !important; }
.ba-icon-left-center { position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; }
.ba-input-date-terminal {
    font-family: Consolas, Monaco, monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    text-align: center;
    letter-spacing: -0.5px;
}
.ba-input-date-terminal:focus {
    background-color: #fff !important;
    border-color: var(--wp-admin-theme-color, #2271b1) !important;
}
.ba-input-date-terminal::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; transition: opacity 0.2s ease; }
.ba-input-date-terminal::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.ba-input-terminal {
    font-family: Consolas, Monaco, monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #94a3b8 !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    letter-spacing: -0.5px;
}
.ba-input-terminal:focus {
    background-color: #fff !important;
    border-color: var(--wp-admin-theme-color, #2271b1) !important;
}
.ba-input-terminal::placeholder { color: #94a3b8 !important; font-weight: normal !important; letter-spacing: normal !important; }

/* Preserve the terminal input shell while showing the selected color inside it. */
.ba-input-terminal.ba-color-input {
    padding: 4px !important;
    cursor: pointer;
    color-scheme: light;
}
.ba-input-terminal.ba-color-input::-webkit-color-swatch-wrapper {
    padding: 0 !important;
}
.ba-input-terminal.ba-color-input::-webkit-color-swatch {
    background: var(--ba-color-value) !important;
    border: 0 !important;
    border-radius: 1px;
}
.ba-input-terminal.ba-color-input::-moz-color-swatch {
    background: var(--ba-color-value) !important;
    border: 0 !important;
    border-radius: 1px;
}
.ba-filter-check { margin: 0 !important; cursor: pointer; }

/* --- 10. SPA Tabs & Transitions --- */
.ba-tabs { border-bottom: 1px solid #e2e8f0; }
.ba-inbox-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(380px,1fr)); gap:20px; }
.ba-inbox-card { overflow:hidden; }
.ba-inbox-card img { display:block; width:100%; max-height:420px; object-fit:contain; background:#0f172a; }
.ba-inbox-head { padding:14px 14px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.ba-inbox-title { margin:0; font-size:1rem; /* 16px */ line-height:1.45; color:#0f172a; word-break: break-word; }
.ba-inbox-kind { flex:none; padding:3px 7px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:0.75rem; /* 12px */ font-weight:700; text-transform:uppercase; }
.ba-inbox-body { padding:14px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.65; font-size: 1.125rem; /* 18px */ }
.ba-inbox-body a { color:#2563eb; text-decoration:none; word-break:break-all; }
.ba-inbox-body a:hover { text-decoration:underline; }
.ba-inbox-body.is-collapsed { max-height:285px; overflow:hidden; position:relative; }
.ba-inbox-body.is-collapsed:after { content:""; position:absolute; left:0; right:0; bottom:0; height:70px; background:linear-gradient(transparent,#fff); pointer-events:none; }
.ba-inbox-expand { margin:0 14px 14px; padding:0; border:0; background:transparent; color:#2563eb; cursor:pointer; font-weight:600; }
.ba-inbox-meta { padding:10px 14px; border-top:1px solid #e2e8f0; font-size:0.75rem; /* 12px */ color:#64748b; }
.ba-inbox-sentinel { padding:24px; }
.ba-inbox-sentinel .ba-skeleton-box {
    background-color: #F0F0F0 !important;
}
@media (max-width:782px) { .ba-inbox-grid { grid-template-columns:1fr; } }
.ba-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: #64748b;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.ba-tab-link:hover { color: #0f172a; }
.ba-tab-link.active { color: #2271b1; color: var(--wp-admin-theme-color, #2271b1); border-bottom-color: #2271b1; border-bottom-color: var(--wp-admin-theme-color, #2271b1); }
.ba-tab-link:focus { outline: none; box-shadow: none; }

/* Tab Content Animation */
.ba-hidden { display: none !important; }
.ba-tab-content { opacity: 0; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.ba-tab-content.active { opacity: 1; }

/* [AI] Visually hidden utility for robust computed style detection */
.ba-visually-hidden {
    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;
}

/* --- 11. Pagination (DataTables) --- */
.ba-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 28px !important;
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    font-variant-numeric: tabular-nums;
    padding: 0 8px !important;
    text-decoration: none !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1 !important;
}
.ba-page-btn:hover:not(.disabled):not(.active) {
    border-color: var(--wp-admin-theme-color, #2271b1) !important;
    color: var(--wp-admin-theme-color, #2271b1) !important;
    background-color: #f8fafc !important;
}
.ba-page-btn.active {
    background: var(--wp-admin-theme-color, #2271b1) !important;
    color: #fff !important;
    border-color: var(--wp-admin-theme-color, #2271b1) !important;
    font-weight: 600 !important;
}
.ba-page-btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
}
.ba-page-num { padding: 0 8px !important; }

.ba-icon-prev, .ba-icon-next {
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: currentColor;
    mask-size: contain; -webkit-mask-size: contain;
    mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
    mask-position: center; -webkit-mask-position: center;
}
.ba-icon-prev { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.ba-icon-next { mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }

/* --- 12. Dark Glassmorphism Modal --- */
.ba-modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    z-index: var(--ba-modal-z-index, 999999);
    transition: opacity 0.3s ease, backdrop-filter 0.3s ease, visibility 0.3s;
}
.ba-modal-overlay.active {
    opacity: 1; visibility: visible;
}
.ba-modal {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.75);
    width: 95%; max-width: 1200px;
    color: #f5f5f5;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Prevent content from spilling outside the rounded modal */
}
.ba-modal.is-dragging {
    transform: var(--ba-swipe-translate-y, 0) !important;
}
.ba-modal-overlay.active .ba-modal { transform: scale(1); opacity: 1; }

.ba-modal-body {
    overflow-y: auto !important;
    flex-grow: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.ba-modal-body img,
.ba-modal-body figure,
.ba-modal-body .wp-block-image,
.ba-modal-body iframe,
.ba-modal-body video {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
    margin: 15px auto;
    display: block;
}
.ba-modal-body figure {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* Danger Zone Card */
.ba-card-danger-zone { border-color: #fca5a5 !important; background-color: #fef2f2 !important; }
.ba-card-danger-zone-header { border-bottom-color: #fecaca !important; }
.ba-card-danger-zone-item { border: 1px solid #fca5a5 !important; }

/* Mobile Bottom Sheet Modal Overlay */
@media (max-width: 768px) {
    .ba-hidden-mobile { display: none !important; }
    .ba-flex-col-mobile { flex-direction: column !important; }
    .ba-items-start-mobile { align-items: flex-start !important; }
    .ba-w-full-mobile { width: 100% !important; min-width: 100% !important; }
    
    .ba-modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .ba-modal { width: 100% !important; max-width: 100% !important; border-radius: 24px 24px 0 0 !important; transform: translateY(100%) !important; opacity: 1 !important; transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1) !important; margin: 0 !important; max-height: 90vh; display: flex; flex-direction: column; padding-top: 12px; overflow: hidden !important; }
    .ba-modal-overlay.active .ba-modal { transform: translateY(0) !important; }
    .ba-modal::before { content: ''; position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; background: rgba(0,0,0,0.15); border-radius: 2px; z-index: 10; cursor: grab; }
    .ba-modal-dark::before { background: rgba(255,255,255,0.25); }
    .ba-modal-header { padding-top: 10px !important; border-bottom: none !important; }
    .ba-modal-body { padding: 20px !important; } /* Reduce padding on mobile */
    .ba-media-preview-img,
    .ba-media-preview-video {
        max-height: 250px !important; /* Cap height on mobile to leave space for text */
    }
}

.ba-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
/* Modal Sizes */
.ba-modal-sm { max-width: 400px !important; }
.ba-modal-md { max-width: 480px !important; width: 95% !important; }
.ba-modal-650 { max-width: 650px !important; width: 95% !important; }
.ba-modal-960 { max-width: 960px !important; }
.ba-modal-520 { max-width: 520px !important; }
.ba-modal-lg { max-width: 1200px !important; width: 95% !important; }
.ba-modal-xl { max-width: 1400px !important; width: 95% !important; }
.ba-modal-fluid { max-width: 1600px !important; width: 90% !important; height: 80vh; display: flex; flex-direction: column; }
.ba-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

.ba-modal-header h2 { color: #f5f5f5; }
.ba-modal-body { padding: 24px; overflow-y: auto; flex: 1; overscroll-behavior: contain; scroll-snap-type: y proximity; }
.ba-modal-body::-webkit-scrollbar { width: 6px; height: 6px; }
.ba-modal-body::-webkit-scrollbar-track { background: transparent; }
.ba-modal-body::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; }
.ba-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); }
.ba-modal-close { background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 4px; transition: all 0.2s ease; border-radius: 2px; display: flex; }
.ba-modal-close:hover { color: #0f172a; background: rgba(0, 0, 0, 0.05); }

/* Neutral Dark Modal (No Blue Tint) */
.ba-modal-dark {
    background: rgba(24, 24, 24, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    color: #e5e5e5 !important;
}
.ba-modal-dark .ba-modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.ba-modal-dark .ba-modal-header h2 { color: #fff !important; }
.ba-modal-dark .ba-modal-close { color: #94a3b8; }
.ba-modal-dark .ba-modal-close:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.ba-modal-dark .ba-modal-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
.ba-modal-dark .ba-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }
.ba-modal-dark .ba-table th { background: #282828 !important; color: #a3a3a3 !important; border-bottom: 1px solid rgba(255,255,255,0.1) !important; }
.ba-modal-dark .ba-table td { border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
.ba-modal-dark .ba-table tbody tr:hover { background: rgba(255, 255, 255, 0.03) !important; }
.ba-modal-dark .ba-text-slate { color: #f5f5f5 !important; }
.ba-modal-dark .ba-text-muted { color: #a3a3a3 !important; }
.ba-modal-dark .ba-badge-flat { background: rgba(255,255,255,0.1) !important; color: #d4d4d4 !important; }

/* Dark Modal Inputs (Inputs, Numbers, File Selectors, Placeholders) */
.ba-modal-dark .ba-input {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    color-scheme: dark; /**
 * Prompt: Core functionality implementation.
 */
}
.ba-modal-dark .ba-input:focus {
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
.ba-modal-dark .ba-input::placeholder {
    color: #94a3b8 !important; /**
 * Prompt: Core functionality implementation.
 */
}
.ba-modal-dark .ba-input[type="file"]::file-selector-button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #e5e5e5 !important;
    border-radius: 2px !important;
    padding: 4px 10px !important;
    margin-right: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 12px;
}
.ba-modal-dark .ba-input[type="file"]::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/**
 * Prompt: Core functionality implementation.
 */
.ba-modal-dark {
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.4); /* thumb track */
    scrollbar-width: thin;
}
/**
 * Prompt: Core functionality implementation.
 */
.ba-modal-dark .ba-modal-body,
.ba-modal-dark .ba-custom-scroll,
.ba-modal-dark .ba-overflow-y-auto {
    scrollbar-color: rgba(255, 255, 255, 0.25) rgba(0, 0, 0, 0.4); /* thumb track */
    scrollbar-width: thin; /* auto | thin | none */
}

/* Dark Segmented Control (Modal Tabs & Filters) */
.ba-modal-dark .ba-segmented-control { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); box-shadow: none; border-radius: 2px; padding: 4px; }
.ba-modal-dark .ba-segmented-control .ba-segment-label { color: #64748b; background: transparent; box-shadow: none; transition: all 0.2s ease; border: 1px solid transparent; font-weight: 500; }
.ba-modal-dark .ba-segmented-control .ba-segment:hover .ba-segment-label { color: #cbd5e1; }
.ba-modal-dark .ba-segmented-control input[type="radio"]:checked + .ba-segment-label { background: rgba(30, 41, 59, 0.8); color: #f8fafc; border-radius: 2px; box-shadow: none; border: 1px solid rgba(255,255,255,0.12); font-weight: 600; }
.ba-modal-dark .ba-segmented-control input[type="radio"]:checked + .ba-segment-label svg { stroke: #2271b1; stroke: var(--wp-admin-theme-color, #2271b1); }

/* Dark Modal Inputs (Inputs, Numbers, File Selectors, Placeholders) */
.ba-modal-dark input[type="text"].ba-input,
.ba-modal-dark input[type="number"].ba-input,
.ba-modal-dark input[type="file"].ba-input,
.ba-modal-dark textarea.ba-input,
.ba-modal-dark select.ba-input {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    color-scheme: dark !important;
}

.ba-modal-dark input.ba-input:focus,
.ba-modal-dark textarea.ba-input:focus,
.ba-modal-dark select.ba-input:focus {
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
}

.ba-modal-dark input.ba-input::placeholder,
.ba-modal-dark textarea.ba-input::placeholder {
    color: #94a3b8 !important;
}

/**
 * Prompt: Core functionality implementation.
 */
.ba-modal-dark input:-webkit-autofill,
.ba-modal-dark input:-webkit-autofill:hover, 
.ba-modal-dark input:-webkit-autofill:focus, 
.ba-modal-dark input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #1e293b inset !important; /**
 * Prompt: Core functionality implementation.
 */
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

/**
 * Prompt: Core functionality implementation.
 */
.ba-modal-dark input[type="number"].ba-input {
    -moz-appearance: textfield;
}
.ba-modal-dark input[type="number"].ba-input::-webkit-outer-spin-button,
.ba-modal-dark input[type="number"].ba-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/**
 * Prompt: Core functionality implementation.
 */
.ba-modal-dark input[type="file"].ba-input::file-selector-button {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #e5e5e5 !important;
    border-radius: 2px !important;
    padding: 6px 12px !important;
    margin-right: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-family: inherit !important;
    font-size: 13px !important;
}
.ba-modal-dark input[type="file"].ba-input::file-selector-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Custom Scrollbar for inner elements */
.ba-custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.ba-custom-scroll::-webkit-scrollbar-track { background: transparent; }
.ba-custom-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; }
.ba-custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.25); }

/* Live Update Pulse Animation */
@keyframes ba-pulse-up {
    0% { background-color: rgba(204, 0, 0, 0.15); } /* Red */
    100% { background-color: transparent; }
}
.ba-bg-pulse-up { animation: ba-pulse-up 0.6s ease-out forwards; }

@keyframes ba-pulse-down {
    0% { background-color: rgba(59, 130, 246, 0.15); } /* Blue */
    100% { background-color: transparent; }
}
.ba-bg-pulse-down { animation: ba-pulse-down 0.6s ease-out forwards; }

/* Modal Taxonomy (Theme/Sector) Table Specific Column Widths */
/* 1. Common columns (2~5) */
#ba-taxonomy-table th:nth-child(2),
#ba-taxonomy-table td:nth-child(2) { width: 10%; min-width: 80px; white-space: nowrap; }

#ba-taxonomy-table th:nth-child(3),
#ba-taxonomy-table td:nth-child(3) { width: 9%; min-width: 70px; white-space: nowrap; }

#ba-taxonomy-table th:nth-child(4),
#ba-taxonomy-table td:nth-child(4) { width: 11%; min-width: 90px; white-space: nowrap; }

#ba-taxonomy-table th:nth-child(5),
#ba-taxonomy-table td:nth-child(5) { width: 12%; min-width: 100px; white-space: nowrap; }

/**
 * Prompt: Core functionality implementation.
 */
#ba-taxonomy-table[data-type="theme"] th:nth-child(1),
#ba-taxonomy-table[data-type="theme"] td:nth-child(1) { width: 18%; min-width: 160px; }
#ba-taxonomy-table[data-type="theme"] th:nth-child(6),
#ba-taxonomy-table[data-type="theme"] td:nth-child(6) {
    width: auto;
    min-width: 340px;
}

/**
 * Prompt: Core functionality implementation.
 */
#ba-taxonomy-table[data-type="sector"] th:nth-child(1),
#ba-taxonomy-table[data-type="sector"] td:nth-child(1) { width: auto; min-width: 250px; }

/* Clickable Names */
.ba-clickable-name {
    cursor: pointer;
    transition: color 0.2s ease;
    display: inline-flex;
}
.ba-clickable-name:hover { color: #2271b1; color: var(--wp-admin-theme-color, #2271b1); }

/* Clickable Rows & Highlights */
.ba-clickable-row {
    cursor: pointer;
}

/* --- 13. Toggle Switch --- */
.ba-toggle-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.ba-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ba-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.ba-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .ba-slider { background-color: #2271b1; background-color: var(--wp-admin-theme-color, #2271b1); }
input:focus + .ba-slider { box-shadow: 0 0 1px var(--wp-admin-theme-color, #2271b1); }
input:checked + .ba-slider:before { -webkit-transform: translateX(14px); -ms-transform: translateX(14px); transform: translateX(14px); }
.ba-slider.ba-round { border-radius: 20px; }
.ba-slider.ba-round:before { border-radius: 50%; }

/* --- 14. Toast Notifications --- */
.ba-toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    padding: 14px 20px;
    border-radius: 2px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    z-index: 9999999;
    transform: translateY(100px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
}
.ba-toast.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* --- 15. Animation Utilities --- */
@keyframes ba-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ba-animate-spin { animation: ba-spin 1s linear infinite; }

/* --- 16. Chart Studio Utilities --- */
.ba-quick-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.ba-quick-btn:hover { background: #e2e8f0; color: var(--wp-admin-theme-color, #2271b1); border-color: var(--wp-admin-theme-color, #2271b1); }

/* Chart Studio Gallery Scroll */
.ba-chart-gallery-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-top: 4px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.3) transparent; }
.ba-chart-gallery-scroll::-webkit-scrollbar { height: 6px; }
.ba-chart-gallery-scroll::-webkit-scrollbar-track { background: transparent; }
.ba-chart-gallery-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 4px; }
.ba-chart-gallery-scroll::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.5); }

/* Chart Studio Thumbnails */
.ba-chart-thumb-wrap {
    position: relative;
    width: 110px;
    height: 70px;
    border-radius: 2px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #1e293b;
    flex-shrink: 0;
}
.ba-chart-thumb-wrap:hover, .ba-chart-thumb-wrap.active {
    border-color: #2271b1; border-color: var(--wp-admin-theme-color, #2271b1);
    transform: translateY(-2px);
}
.ba-chart-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.ba-chart-thumb-wrap:hover .ba-chart-thumb-img, .ba-chart-thumb-wrap.active .ba-chart-thumb-img { opacity: 1; }
.ba-chart-thumb-meta {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(15, 23, 42, 0.85); padding: 3px 6px;
    display: flex; justify-content: space-between; align-items: center;
}
.ba-chart-thumb-symbol { font-size: 10px; color: #f8fafc; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-chart-thumb-meta-actions { display: flex; align-items: center; gap: 4px; }
.ba-chart-thumb-view { color: #cbd5e1; cursor: zoom-in; opacity: 0.5; padding: 2px; }
.ba-chart-thumb-view:hover { opacity: 1; color: #fff; }
.ba-chart-thumb-view svg { display: block; }
.ba-chart-thumb-del { color: #ef4444; cursor: pointer; opacity: 0.5; padding: 2px; }
.ba-chart-thumb-del:hover { opacity: 1; }
.ba-chart-thumb-del svg { display: block; }

/* --- 17. Skeleton Loading Animation --- */

/* --- 19. Custom Balloon Tooltip for Long Text --- */
.ba-balloon-tooltip {
    position: relative;
    cursor: pointer;
}
.ba-balloon-tooltip.active {
    z-index: 50; /**
 * Prompt: Core functionality implementation.
 */
}
.ba-balloon-tooltip .ba-balloon-content {
    visibility: hidden;
    opacity: 0;
    width: max-content;
    max-width: 500px;
    max-height: 400px;
    background-color: #0f172a;
    color: #f8fafc;
    text-align: left;
    border-radius: 8px;
    padding: 12px 16px;
    position: absolute;
    z-index: 99999;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.ba-balloon-tooltip .ba-balloon-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #0f172a transparent transparent transparent;
}
.ba-balloon-tooltip:hover .ba-balloon-content,
.ba-balloon-tooltip.active .ba-balloon-content {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/**
 * Prompt: Core functionality implementation.
 */
.ba-balloon-tooltip .ba-balloon-content.ba-balloon-bottom {
    top: calc(100% + 10px);
    bottom: auto;
    transform: translateX(-50%) translateY(-5px);
}
.ba-balloon-tooltip.active .ba-balloon-content.ba-balloon-bottom {
    transform: translateX(-50%) translateY(0);
}
.ba-balloon-tooltip .ba-balloon-content.ba-balloon-bottom::after {
    bottom: 100%;
    top: auto;
    border-color: transparent transparent #0f172a transparent;
}

@keyframes ba-skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.ba-skeleton {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #e2e8f0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0) 60%);
    background-size: 200% 100%;
    animation: ba-skeleton-shimmer 1.5s infinite linear;
    z-index: 1;
    border-radius: inherit;
    transition: opacity 0.3s ease;
}
.ba-skeleton.loaded { opacity: 0; pointer-events: none; }
.ba-modal-dark .ba-skeleton, .ba-chart-thumb-wrap .ba-skeleton, .ba-overlay-dark .ba-skeleton, .ba-canvas-wrapper-dark .ba-skeleton {
    background-color: rgba(255, 255, 255, 0.02);
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 100%;
}

/**
 * Prompt: Core functionality implementation.
 */
.ba-skeleton-box {
    position: relative;
    background: #e2e8f0;
    overflow: hidden;
    border-radius: 2px;
}
.ba-skeleton-box::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 20%, rgba(255, 255, 255, 0.8) 40%, rgba(255, 255, 255, 0) 60%);
    background-size: 200% 100%;
    animation: ba-skeleton-shimmer 1.5s infinite linear;
}
/**
 * Prompt: Core functionality implementation.
 */
.ba-modal-dark .ba-skeleton-box, .ba-overlay-dark .ba-skeleton-box, .ba-canvas-wrapper-dark .ba-skeleton-box {
    background-color: rgba(255, 255, 255, 0.02);
}
.ba-modal-dark .ba-skeleton-box::after, .ba-overlay-dark .ba-skeleton-box::after, .ba-canvas-wrapper-dark .ba-skeleton-box::after {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 40%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.03) 60%, rgba(255, 255, 255, 0) 100%);
}

/* --- 18. Stock Detail Modal Grid System --- */
.ba-detail-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 10px; }
@media (min-width: 768px) {
    .ba-detail-grid { grid-template-columns: repeat(2, 1fr); }
    .ba-detail-grid-full { grid-column: span 2; }
}
.ba-detail-box { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 2px; padding: 12px; }
.ba-detail-box-title { font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ba-detail-box-title svg { width: 14px; height: 14px; color: #2271b1; color: var(--wp-admin-theme-color, #2271b1); }
.ba-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 16px; }
.ba-stat-group { display: flex; flex-direction: column; gap: 4px; }
.ba-stat-label { font-size: 11px; color: #64748b; font-weight: 500; }
.ba-stat-val { font-size: 14px; font-weight: 600; color: #f8fafc; font-family: Consolas, Monaco, monospace; font-variant-numeric: tabular-nums; }
.ba-stat-val-text { font-size: 14px; font-weight: 500; color: #f8fafc; }

/* Stock Detail Compact Tabs & Horizontal Grid */
.ba-detail-tabs-container { margin-bottom: 20px; }
.ba-detail-tab-content { display: none; }
.ba-detail-tab-content.active { display: block; animation: baFadeIn 0.2s ease-out; }
@keyframes baFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.ba-stat-grid-compact { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 20px; column-gap: 0; }
.ba-stat-grid-compact-3 { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 20px; column-gap: 0; }
.ba-stat-group-compact { display: flex; flex-direction: column; gap: 6px; padding: 0 16px; border-right: 1px solid rgba(255,255,255,0.05); }
.ba-stat-group-compact:nth-child(4n) { border-right: none; }
.ba-stat-grid-compact-3 .ba-stat-group-compact:nth-child(3n) { border-right: none; }

@media (max-width: 768px) {
    .ba-stat-grid-compact { grid-template-columns: repeat(2, 1fr); }
    .ba-stat-group-compact:nth-child(2n) { border-right: none; }
    .ba-stat-grid-compact-3 { grid-template-columns: repeat(2, 1fr); }
    .ba-stat-grid-compact-3 .ba-stat-group-compact:nth-child(2n) { border-right: none; }
}

/* --- 19. Dashboard Specific Chart Containers --- */
.ba-spark-container { width: 80px; height: 40px; flex-shrink: 0; }
.ba-spark-text-container { width: calc(100% - 90px); }
.ba-scatter-chart-body { height: 320px; padding: 15px 25px; }
.ba-chart-body-md { min-height: 280px; padding: 15px; }
.ba-chart-body-sm { min-height: 220px; padding: 15px; }
.ba-breadth-chart-container { position: relative; width: 100%; max-width: 100px; aspect-ratio: 1; }
.ba-absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/**
 * Prompt: Core functionality implementation.
 */
@media (min-width: 769px) {
    .ba-chart-body-md:has(#ba-radar-chart) {
        min-height: 480px !important;
    }
}

.ba-relative { position: relative; }
.ba-block { display: block; }
.ba-border-l { border-left: 1px solid #e2e8f0; }
.ba-dot-red { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; display: inline-block; }
.ba-dot-blue { width: 8px; height: 8px; border-radius: 50%; background: #3b82f6; display: inline-block; }

.ba-taxonomy-list { display: flex; flex-direction: column; gap: 10px; }
.ba-taxonomy-item { background: rgba(0, 0, 0, 0.2); padding: 12px 14px; border-radius: 2px; border-left: 3px solid #2271b1; border-left: 3px solid var(--wp-admin-theme-color, #2271b1); }
.ba-taxonomy-item-us { border-left-color: #f59e0b !important; }
.ba-taxonomy-item-theme { border-left-color: #8b5cf6 !important; }
.ba-macro-modal-summary-box { background-color: rgba(15, 23, 42, 0.4); color: #94a3b8; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ba-taxonomy-name { font-size: 13px; font-weight: 600; color: #e2e8f0; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.ba-taxonomy-desc { font-size: 12px; color: #94a3b8; line-height: 1.5; }

/* --- Marquee Animation (Auto-scrolling) --- */
@keyframes ba-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ba-marquee-wrapper { display: flex; overflow: hidden; width: 100%; align-items: center; position: relative; white-space: nowrap; flex-wrap: nowrap; }
.ba-marquee-content { display: flex; align-items: center; flex-shrink: 0; white-space: nowrap; width: max-content; animation: ba-marquee 15s linear infinite; }
.ba-marquee-wrapper:hover .ba-marquee-content { animation-play-state: paused; }
.ba-marquee-label { position: relative; z-index: 10; background: inherit; padding-right: 10px; flex-shrink: 0; }

/* Media/Logo Utilities */
.ba-logo-md { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid rgba(255,255,255,0.2); }
.ba-logo-sm { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid #e2e8f0; flex-shrink: 0; }
.ba-logo-xs { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid #e2e8f0; flex-shrink: 0; }
.ba-empty-msg { text-align: center; padding: 20px 15px; color: #64748b; font-family: Consolas, Monaco, monospace; font-size: 13px; letter-spacing: -0.5px; }
#ba-modal-sd-main-us-summary, #ba-modal-sd-main-theme-reason { font-size: 14px; color: #cbd5e1; line-height: 1.6; }
#ba-modal-sd-main-theme-name { font-size: 15px; margin-bottom: 8px; }

/* Advanced Chart Containers */
.ba-canvas-wrapper-dark { min-height: 650px; background-color: #0f172a; position: relative; }
.ba-skeleton-inner { position: absolute; top:20px; left:20px; right:20px; bottom:20px; width: auto !important; height: auto !important; border-radius: 4px; border: 1px dashed rgba(255,255,255,0.1); box-shadow: inset 0 0 30px rgba(0,0,0,0.2); }
.ba-history-img { max-width: 100%; max-height: 80vh; width: auto; height: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); z-index: 11; position: relative; }
.ba-chart-img { max-width: 100%; max-height: 600px; width: auto; height: auto; object-fit: contain; border-radius: 2px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); z-index: 11; position: relative; }
.ba-gallery-wrapper { background: #0f172a; padding-top: 15px; border-top-color: rgba(255,255,255,0.1) !important; }
.ba-z-10 { z-index: 10 !important; }
.ba-z-11 { z-index: 11 !important; }

.ba-pointer-none { pointer-events: none !important; }
.ba-object-scale-down { object-fit: scale-down !important; }
.ba-transition-none { transition: none !important; }
.ba-transition-all { transition: all 0.2s ease !important; }
.ba-col-span-full { grid-column: 1 / -1 !important; }
.ba-tree-icon { transition: transform 0.2s ease; }

/* Checkbox & Radio Alignment Fix against WP Core */
.ba-flex input[type="checkbox"], 
.ba-flex input[type="radio"],
.ba-m-0[type="checkbox"],
.ba-m-0[type="radio"] { 
    margin: 0 !important; 
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
    vertical-align: middle !important; 
}

/* Lightbox Utilities */
.ba-lightbox-overlay { z-index: 9999999 !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; background: rgba(0, 0, 0, 0.9) !important; }
.ba-lightbox-close { position: fixed; top: 20px; right: 20px; color: #94a3b8; background: #0f172a; border-radius: 2px; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; padding: 8px; z-index: 99999999; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.ba-lightbox-close:hover { color: #fff; background: #1e293b; border-color: rgba(255,255,255,0.3); }
.ba-lightbox-content { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; }
.ba-lightbox-img { max-width: 95vw; max-height: 95vh; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); cursor: zoom-out; transform: scale(0.9); opacity: 0; transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; }
.ba-modal-overlay.active .ba-lightbox-img { transform: scale(1); opacity: 1; }

/* --- 20. Micro-Interactions & JS Extracted Styles --- */
.ba-pjax-loading { opacity: 0.6; pointer-events: none; transition: opacity 0.2s ease; position: relative; }
.ba-pjax-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10; }

.ba-glow-up { box-shadow: 0 0 25px -5px rgba(239, 68, 68, 0.6) !important; border-color: rgba(239, 68, 68, 0.8) !important; }
.ba-glow-down { box-shadow: 0 0 25px -5px rgba(59, 130, 246, 0.6) !important; border-color: rgba(59, 130, 246, 0.8) !important; }

.ba-copyable { cursor: pointer; transition: opacity 0.2s, transform 0.1s; }
.ba-copyable:hover { opacity: 0.7; }
.ba-copyable:active { transform: scale(0.95); }

.ba-mini-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%) translateY(20px); background: #10b981; color: #fff; padding: 8px 16px; border-radius: 2px; font-size: 13px; font-weight: 600; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3); z-index: 9999999; opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.ba-mini-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.ba-price-hero { margin-bottom: 20px; background: rgba(0,0,0,0.2); padding: 20px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.05); }
.ba-price-hero-main { align-items: center; gap: 6px; }
.ba-price-main { font-size: 34px; font-weight: 700; color: #fff; font-family: Consolas, Monaco, monospace; letter-spacing: -1px; }
.ba-price-rate { font-size: 18px; font-weight: 600; }
#ba-modal-sd-rate-container .ba-badge { font-size: 20px; padding: 6px 12px; border-radius: 2px; }
#ba-modal-sd-main-val { line-height: 1.3; }
#ba-modal-sd-main-val small { font-size: 11px; font-weight: normal; }
.ba-price-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: #94a3b8; margin-top: 8px; }
.ba-price-meta span { display: flex; align-items: center; gap: 4px; }

/* --- 21. Global Accessibility & Focus Ring Fix --- */
/**
 * Prompt: Core functionality implementation.
 */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
label:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible),
.ba-clickable-row:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
#adminmenu a:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* --- 22. Mobile Optimization (Responsiveness) --- */
@media (max-width: 768px) {
    /* Fix off-center layout by removing unbalanced right padding on mobile */
    .ba-container-std, .ba-container-max, .ba-container-fluid { padding-right: 0 !important; }

    /* 1. Data Tables Smooth Native Scrolling */
    .ba-card-body, .ba-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; scrollbar-width: none; }
    .ba-card-body::-webkit-scrollbar, .ba-table-responsive::-webkit-scrollbar { display: none; } /**
 * Prompt: Core functionality implementation.
 */
    .ba-table { width: 100%; min-width: 750px; } /**
 * Prompt: Core functionality implementation.
 */
    .ba-table.ba-table-layout-fixed { min-width: 0 !important; } /**
 * Prompt: Core functionality implementation.
 */

    /* 2. Top Control Panel & Filters (Vertical Stack) */
    .ba-card-header.ba-flex-between:not(.ba-header-inline) { flex-direction: column; align-items: stretch !important; gap: 15px; }
    .ba-card-header.ba-flex-between:not(.ba-header-inline) > * { width: 100%; }
    
    form.ba-flex { flex-direction: column; align-items: stretch !important; }
    form.ba-flex > .ba-flex { flex-wrap: wrap; }
    .ba-filter-actions { flex-direction: column; align-items: stretch !important; width: 100%; }
    
    .ba-input.ba-search-input, .ba-input.ba-search-input-lg, .ba-input.ba-search-input-xl, 
    .ba-input.ba-date-input-sm, .ba-input.ba-input-sm, .ba-input.ba-search-input-portfolio,
    .ba-btn-primary.ba-input-sm {
        width: 100% !important; max-width: 100% !important; flex: none !important;
    }
    
    /* Segmented Control Swipe */
    .ba-segmented-control { display: flex; flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ba-segmented-control::-webkit-scrollbar { display: none; }
    .ba-segment { flex: 0 0 auto !important; }
    .ba-segment-wrapper { width: 100%; overflow: hidden; }
    .ba-detail-tabs-container .ba-segment { flex: 1 1 50% !important; }

    /* 3. Bottom Sheet Modal Inner Layout Optimization */
    .ba-modal-body { padding: 15px 10px !important; }
    .ba-modal-header { padding: 15px 10px !important; }
    .ba-detail-box { padding: 12px 10px !important; }
    .ba-stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .ba-stat-grid-compact, .ba-stat-grid-compact-3 { row-gap: 15px !important; }
    .ba-stat-val, .ba-stat-val-text { font-size: 13px !important; word-break: break-word; }
    
    /* Restrict Chart height inside modals */
    .ba-modal-body .ba-relative canvas:not(#ba-macro-chart) { max-height: 220px !important; min-height: 220px !important; }
    .ba-history-img, .ba-chart-img { max-height: 220px !important; }
    #ba-macro-chart { max-height: 60vh !important; min-height: 350px !important; }

    /* 4. Horizontal Scroll Tabs (Swipeable) */
    .ba-tabs { flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .ba-tabs::-webkit-scrollbar { display: none; }
    .ba-tab-link { flex: 0 0 auto !important; padding: 12px 10px !important; font-size: 13px; }

    /* 5. Dashboard Top Summary Cards */
    .ba-grid > .ba-col-3 { grid-column: span 6 !important; } /**
 * Prompt: Core functionality implementation.
 */
    .ba-grid > .ba-col-4 { 
        grid-column: span 12 !important; /**
 * Prompt: Core functionality implementation.
 */
    }
    /* Fix borders for Portfolio Quick Snapshot 2x2 Grid */
    .ba-grid.ba-gap-0 > .ba-col-3:nth-child(3) { border-left: none !important; }
    .ba-grid.ba-gap-0 > .ba-col-3:nth-child(1),
    .ba-grid.ba-gap-0 > .ba-col-3:nth-child(2) { border-bottom: 1px solid #e2e8f0; }

    /* Top 3 High-Density Cards Mobile Optimization */
    .ba-top-card-inner { flex-direction: column !important; gap: 12px !important; }
    .ba-top-card-right { width: 100% !important; border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(0,0,0,0.06) !important; padding-top: 12px !important; margin-top: auto !important; justify-content: flex-start !important; }
    .ba-top-card-right .ba-mb-5 { margin-bottom: 8px !important; }

    /* 6. Typography & Spacing Downsizing for Mobile */
    .ba-table th { font-size: 12px !important; padding: 10px 12px !important; }
    .ba-table td { font-size: 12px !important; padding: 10px 12px !important; }
    .ba-text-base { font-size: 14px !important; }
    .ba-text-sm { font-size: 12px !important; }
    .ba-text-xs { font-size: 11px !important; }
    .ba-dash-stat-val { font-size: 20px !important; }
    .ba-pf-stat-val { font-size: 20px !important; }
    .ba-card-header { padding: 12px 15px !important; }
    .ba-card-body { padding: 15px !important; }
    .ba-gap-20 { gap: 12px !important; }
    .ba-p-20 { padding: 16px !important; }
    .ba-p-40 { padding: 30px 20px !important; }
    .ba-table-compact th, .ba-table-compact td { padding: 8px 10px !important; }

    /* Dashboard Summary Cards Icons */
    .ba-card.ba-col-4 .ba-text-sm svg, 
    .ba-card.ba-col-3 .ba-text-sm svg { width: 14px !important; height: 14px !important; }

    /* 7. Chart Containers Mobile Optimization */
    .ba-card, .ba-card-body, .ba-scatter-chart-body, .ba-chart-body-md, .ba-chart-body-sm, .ba-h-160 {
        min-width: 0 !important; /**
 * Prompt: Core functionality implementation.
 */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .ba-scatter-chart-body { height: 260px !important; padding: 10px !important; }
    .ba-chart-body-md { min-height: 240px !important; padding: 10px !important; }
    .ba-chart-body-sm { min-height: 200px !important; padding: 10px !important; }
    .ba-h-160 { height: 140px !important; }
    .ba-canvas-wrapper-dark { min-height: 300px !important; }
    canvas { max-width: 100% !important; display: block; }
    
    /* Fix Flex row charts overlapping (Breadth, Win Rate) */
    .ba-card-body.ba-flex.ba-gap-20 { flex-wrap: wrap; justify-content: center; }
    .ba-card-body.ba-flex.ba-gap-20 > .ba-w-50 { width: 100% !important; min-width: 0 !important; }
    .ba-card-body.ba-flex.ba-gap-20 > .ba-w-250 { width: 45% !important; flex: 1 1 45%; min-width: 120px; }

    /* 8. Tight Table Columns (Fit-to-Content) */
    .ba-table th[class*="ba-w-"], 
    .ba-table td[class*="ba-w-"] { width: auto !important; }
    .ba-table th, .ba-table td { white-space: nowrap; }
    
    /* Exception for Text-Heavy Columns (Allow wrapping) */
    .ba-table td.ba-whitespace-normal { white-space: normal !important; min-width: 250px; word-break: keep-all; }
    

    /* 8.2 Taxonomy Modal Table (Dense Mobile Layout) */
    #ba-taxonomy-table { min-width: 0 !important; width: 100% !important; table-layout: fixed !important; }
    #ba-taxonomy-table th, #ba-taxonomy-table td { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; padding: 10px 4px !important; font-size: 11px !important; }
    #ba-taxonomy-table th:first-child, #ba-taxonomy-table td:first-child { padding-left: 15px !important; }
    #ba-taxonomy-table th:nth-child(1), #ba-taxonomy-table td:nth-child(1) { width: 42% !important; }
    #ba-taxonomy-table th:nth-child(2), #ba-taxonomy-table td:nth-child(2) { width: 22% !important; }
    #ba-taxonomy-table th:nth-child(3), #ba-taxonomy-table td:nth-child(3) { width: 16% !important; padding: 10px 2px !important; overflow: visible !important; text-overflow: clip !important; }
    #ba-taxonomy-table th:nth-child(5), #ba-taxonomy-table td:nth-child(5) { width: 20% !important; padding-right: 15px !important; }
    #ba-taxonomy-table .ba-logo-sm { width: 18px !important; height: 18px !important; }

    /* AI News Table Mobile Min-Width */
    .blackalpha_page_blackalpha-ai-news .ba-table { min-width: 850px !important; }

    /* 9. Pagination Touch Optimization & Intelligent Pruning */
    .ba-pagination { justify-content: center !important; }
    .ba-pagination > div:first-child { display: none !important; }
    .ba-pagination .tablenav-pages { gap: 4px !important; }
    .ba-page-btn { min-width: 36px !important; height: 36px !important; font-size: 14px !important; padding: 0 4px !important; }
    .ba-pagination .tablenav-pages .ba-page-num { display: none !important; }
    .ba-pagination .tablenav-pages .ba-page-dots { display: none !important; }
    .ba-pagination .tablenav-pages .ba-page-num.active { display: inline-flex !important; }
    .ba-pagination .tablenav-pages .ba-page-num:has(+ .ba-page-num.active) { display: inline-flex !important; }
    .ba-pagination .tablenav-pages .ba-page-num:has(+ .ba-page-num + .ba-page-num.active) { display: inline-flex !important; }
    .ba-pagination .tablenav-pages .ba-page-num.active + .ba-page-num { display: inline-flex !important; }
    .ba-pagination .tablenav-pages .ba-page-num.active + .ba-page-num + .ba-page-num { display: inline-flex !important; }

    /* 10. Mobile Modal (Stock Details) Full UI Tweaks */
    .ba-price-hero { flex-direction: column !important; align-items: flex-start !important; gap: 12px; padding: 15px 10px !important; }
    .ba-price-hero-main { align-items: flex-start !important; width: 100%; }
    .ba-price-main { font-size: 26px !important; }
    #ba-modal-sd-rate-container .ba-badge { font-size: 15px !important; padding: 4px 8px !important; }
    #ba-modal-sd-name { font-size: 16px !important; white-space: normal; }
    .ba-modal-close { padding: 12px !important; margin: -8px -8px -8px 0; } /**
 * Prompt: Core functionality implementation.
 */
    .ba-modal-header h2 svg { width: 18px !important; height: 18px !important; }
    .ba-detail-tabs-container .ba-segment-label { padding: 10px !important; font-size: 13px !important; }

    /* 11. Prevent Mobile Modal Horizontal Overflow & Grid Blowout */
    .ba-modal { width: 100vw !important; box-sizing: border-box !important; overflow-x: hidden !important; }
    .ba-modal-body, .ba-modal-header, .ba-price-hero { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; }
    .ba-detail-grid { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; }
    .ba-detail-box { min-width: 0 !important; width: 100% !important; box-sizing: border-box !important; }
    .ba-stat-grid, .ba-stat-grid-compact, .ba-stat-grid-compact-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* 12. Peer Group Table Micro-Typography */
    #ba-modal-sd-main-peer-block .ba-table th { font-size: 11px !important; padding: 10px 4px !important; }
    #ba-modal-sd-main-peer-block .ba-table td { font-size: 12px !important; padding: 10px 4px !important; white-space: nowrap !important; }
    #ba-modal-sd-main-peer-block .ba-clickable-name { font-size: 12px !important; }
    #ba-modal-sd-main-peer-block .ba-text-xs { font-size: 10px !important; }

    /* Peer Group Mobile Restraint */
    #ba-modal-sd-main-peer-block .ba-table { width: 100% !important; table-layout: fixed !important; min-width: 0 !important; }
    #ba-modal-sd-main-peer-block .ba-table th, 
    #ba-modal-sd-main-peer-block .ba-table td { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
    #ba-modal-sd-main-peer-block .ba-table th:nth-child(1),
    #ba-modal-sd-main-peer-block .ba-table td:nth-child(1) { width: 46% !important; }
    #ba-modal-sd-main-peer-block .ba-table th:nth-child(2),
    #ba-modal-sd-main-peer-block .ba-table td:nth-child(2) { width: 27% !important; }
    #ba-modal-sd-main-peer-block .ba-table th:nth-child(3),
    #ba-modal-sd-main-peer-block .ba-table td:nth-child(3) { width: 27% !important; }

    /* 13. Page Titles Single Line & Readability */
    h1.ba-text-lg, h1.ba-text-xl { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: 18px !important; }
    h1.ba-text-lg svg, h1.ba-text-xl svg { flex-shrink: 0 !important; }
    .ba-card-header h2 { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

    /* 14. System Status Mobile Tweak (Stacked Layout) */
    /**
 * Prompt: Core functionality implementation.
 */
    .blackalpha_page_blackalpha-system-status .ba-table { min-width: 0 !important; width: 100% !important; border: none !important; }
    .blackalpha_page_blackalpha-system-status .ba-table thead { display: none; }
    .blackalpha_page_blackalpha-system-status .ba-table tbody, 
    .blackalpha_page_blackalpha-system-status .ba-table tr { display: block; width: 100%; }
    .blackalpha_page_blackalpha-system-status .ba-table tr { border-bottom: 1px solid #e2e8f0; padding: 10px 0; }
    .blackalpha_page_blackalpha-system-status .ba-table tr:last-child { border-bottom: none; }
    .blackalpha_page_blackalpha-system-status .ba-table th, 
    .blackalpha_page_blackalpha-system-status .ba-table td { display: block; width: 100% !important; white-space: normal !important; word-break: break-word !important; border-bottom: none !important; text-align: left !important; padding: 4px 15px !important; }
    .blackalpha_page_blackalpha-system-status .ba-table td:first-child {
        color: #64748b !important; font-size: 12px !important; font-weight: 600 !important;
        text-transform: uppercase; letter-spacing: 0.5px; padding-bottom: 6px !important;
    }
    .blackalpha_page_blackalpha-system-status .ba-table td:not(:first-child) { font-size: 13px !important; }
    .blackalpha_page_blackalpha-system-status .ba-table td .ba-justify-end { justify-content: flex-start !important; }
    
    #ba-storage-results .ba-flex-between { flex-direction: column !important; align-items: flex-start !important; gap: 8px; }
    #ba-storage-results .ba-justify-end { justify-content: flex-start !important; width: 100%; }

    /* 15. Mobile Table Edge Spacing (Breathing Room) */
    .ba-table th:first-child, .ba-table td:first-child { padding-left: 20px !important; }
    .ba-table th:last-child, .ba-table td:last-child { padding-right: 20px !important; }

    /* [AI] Chart Studio (Media Modal) Mobile Optimization */
    .ba-media-studio-wrap {
        flex-direction: column !important;
        overflow-y: auto !important;
        height: 100%;
    }
    .ba-media-studio-sidebar {
        order: 2; /* Controls at the bottom */
        width: 100% !important;
        max-width: 100% !important; /* [AI] Override desktop fixed width */
        box-sizing: border-box !important;
        border-top: 1px solid #ddd;
        padding: 15px !important;
        flex-shrink: 0;
        overflow-y: visible !important; /* [AI] Allow content to expand vertically */
    }
    .ba-media-main {
        order: 1; /* Canvas at the top */
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 250px;
        padding: 15px !important;
        flex: 1 1 auto;
    }
}

/* --- 23. Auto-Forwarding Deep-Link Anchors --- */
/**
 * Prompt: Core functionality implementation.
 */
img[id^="ba-image-"] { scroll-margin-top: 100px; }

/* --- 24. Telegram Live Preview Mockup --- */
.ba-tg-mockup { background: #8ea4b5; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1); border: 1px solid #cbd5e1; }
.ba-tg-header { background: #ffffff; padding: 10px 15px; border-bottom: 1px solid #cbd5e1; display: flex; align-items: center; gap: 10px; }
.ba-tg-avatar { width: 36px; height: 36px; border-radius: 50%; background: #3b82f6; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; }
.ba-tg-channel-name { font-weight: 600; color: #000; font-size: 15px; }
.ba-tg-sub { font-size: 12px; color: #64748b; }
.ba-tg-body { padding: 15px; flex: 1; min-height: 350px; max-height: 550px; overflow-y: auto; display: flex; flex-direction: column; }
.ba-tg-bubble { background: #ffffff; border-radius: 12px; border-bottom-left-radius: 2px; padding: 8px 12px; color: #000; font-size: 14px; line-height: 1.45; max-width: 90%; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.15); align-self: flex-start; word-break: break-word; }
.ba-tg-bubble::after { content: ''; position: absolute; bottom: 0; left: -6px; width: 12px; height: 12px; background: #ffffff; clip-path: polygon(100% 0, 100% 100%, 0 100%); border-bottom-right-radius: 10px; }
.ba-tg-photo { width: 100%; border-radius: 6px; margin-bottom: 8px; display: block; object-fit: cover; }
.ba-tg-text a { color: #3b82f6; text-decoration: none; }
.ba-tg-text a:hover { text-decoration: underline; }
.ba-tg-inline-img { color: #3b82f6; cursor: pointer; text-decoration: none; font-weight: 500; }
.ba-tg-link-preview { border-left: 3px solid #3b82f6; background: #f3f4f6; padding: 8px 10px; border-radius: 4px; margin-top: 8px; cursor: pointer; }
.ba-tg-link-site { font-size: 11px; color: #3b82f6; margin-bottom: 2px; font-weight: 500; }
.ba-tg-link-title { font-weight: 600; color: #3b82f6; font-size: 13px; margin-bottom: 2px; }
.ba-tg-link-desc { font-size: 13px; color: #000; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ba-tg-time { float: right; font-size: 11px; color: #9ca3af; margin-top: 5px; margin-left: 10px; line-height: 1; }

/* --- 25. Dashboard Widget Custom Styles --- */
.ba-dash-widget-container .ba-tabs-sm a { padding: 6px 12px; font-size: 12px; }
.ba-widget-list { list-style: none; margin: 0; padding: 0; }
.ba-widget-list-item { padding: 10px 4px 10px 0; border-bottom: 1px solid #e5e7eb; }
.ba-widget-list-item:last-child { border-bottom: none; }
.ba-widget-list-item .ba-text-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Inbound Channel Feed Clean Trash Button */
.ba-channel-delete-btn {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: #64748b !important;
	padding: 6px !important;
	border-radius: 4px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-decoration: none !important;
	transition: all 0.2s ease !important;
}
.ba-channel-delete-btn:hover {
	color: #ef4444 !important;
	background: transparent !important;
}

/* --- 26. Telegram Live Preview Modal Custom Styles --- */
.tg-preview-modal-body {
    background-color: #0e1621 !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
#ba-telegram-preview-modal .ba-modal {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
#ba-telegram-preview-modal .ba-modal-body {
    flex: 1 1 auto;
    overflow-y: auto !important;
    background-color: #0e1621 !important;
}
#ba-telegram-preview-modal .ba-modal-body::-webkit-scrollbar {
    width: 6px;
}
#ba-telegram-preview-modal .ba-modal-body::-webkit-scrollbar-track {
    background: #0e1621;
}
#ba-telegram-preview-modal .ba-modal-body::-webkit-scrollbar-thumb {
    background: #2b394a;
    border-radius: 3px;
}
.tg-chat-container {
    background-color: #0e1621;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
}
.tg-message-bubble {
    background: #182533;
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    color: #ffffff;
    max-width: 90%;
    align-self: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    margin-bottom: 10px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    word-wrap: break-word;
    overflow: hidden;
}
.tg-message-bubble-body {
    padding: 15px;
    font-size: 14px;
    line-height: 1.5;
    color: #ffffff;
    word-break: break-word;
    white-space: pre-wrap;
}
.tg-message-bubble-body a {
    color: #5288c1 !important;
    text-decoration: none;
    font-weight: 500;
}
.tg-message-bubble-body a:hover {
    text-decoration: underline;
}
.tg-preview-image-container img {
    border-radius: 12px 12px 0 0;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
    max-height: 240px;
}

/* Mobile Touch Optimization for Simple Broadcast Buttons */
@media screen and (max-width: 768px) {
    #ba-simple-broadcast-form .ba-justify-end {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    #ba-simple-broadcast-form .ba-btn-primary {
        padding: 11px 20px !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* Dashboard Widget Enhancements & Status Tab */
.ba-grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
}
.ba-filter-pill {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #475569 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 9999px !important;
    padding: 3px 10px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
}
.ba-filter-pill:hover {
    background: rgba(0, 0, 0, 0.1) !important;
    color: #0f172a !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
}
.ba-filter-pill.active {
    background: var(--wp-admin-theme-color, #2271b1) !important;
    color: #fff !important;
    border-color: var(--wp-admin-theme-color, #2271b1) !important;
}
.ba-filter-count-badge {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #475569 !important;
    font-size: 9px !important;
    font-weight: bold !important;
    border-radius: 9999px !important;
    padding: 1px 5px !important;
    line-height: 1 !important;
    display: inline-block !important;
}
.ba-filter-pill.active .ba-filter-count-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
}
.ba-filter-count-badge.active {
    background: rgba(239, 68, 68, 0.25) !important;
    color: #ef4444 !important;
}
.ba-filter-pill.active .ba-filter-count-badge.active {
    background: #ef4444 !important;
    color: #fff !important;
}
.ba-dash-widget-container .ba-card {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 10px;
    box-sizing: border-box;
}

/* --- 26. Modal Responsive Media & Telegram Linebreak Rendering --- */
.ba-img-responsive {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

.ba-media-preview-img,
.ba-media-preview-video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 450px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

#ba-inbound-text-content,
#ba-outbound-text-content {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Mobile responsiveness for Inbound log table: hide Media, Author, and Action columns */
@media screen and (max-width: 768px) {
    .ba-inbound-table th:nth-child(2),
    .ba-inbound-table th:nth-child(3),
    .ba-inbound-table th:nth-child(5),
    .ba-inbound-table td:nth-child(2),
    .ba-inbound-table td:nth-child(3),
    .ba-inbound-table td:nth-child(5) {
        display: none !important;
    }
}

/* Mobile responsiveness for Outbound log table: hide Status and Scheduled / Sent Time columns */
@media screen and (max-width: 768px) {
    .ba-outbound-table th:nth-child(2),
    .ba-outbound-table th:nth-child(3),
    .ba-outbound-table td:nth-child(2),
    .ba-outbound-table td:nth-child(3) {
        display: none !important;
    }
}

/* Mobile responsiveness for Broadcast Hub Status widget */
@media screen and (max-width: 768px) {
    /* 1) Stack cards in 1 column in System Status tab */
    .ba-dash-widget-container .ba-grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* 2) Hide status badge in Outbound tab */
    #widget-outbound .ba-widget-list-item .ba-badge-wrapper {
        display: none !important;
    }
    #widget-outbound .ba-widget-list-item .ba-text-ellipsis {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 3) Hide author badge in Inbound tab */
    #widget-inbound .ba-widget-list-item .ba-badge {
        display: none !important;
    }
    #widget-inbound .ba-widget-list-item .ba-text-ellipsis {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --- 27. WordPress Admin Overrides --- */
/**
 * Prompt: Core functionality implementation.
 */
.edit-post-meta-boxes-area .postbox-header {
    border-top: 0;
}