/* ==========================================================
   Board Reports — Content Section Styling
   ==========================================================
   Styling untuk HTML rich-content di Board Reports
   (Komisaris + Direksi). Targets:
   - .br-content-body table (Gemini extraction tables)
   - .br-content-body h1-h4 (TOC sections)
   - .br-content-body ul/ol (lists)
   - dll.

   Pakai !important untuk override Bootstrap / polish.css
   karena hierarchy CSS bisa conflict.
   ==========================================================
*/

.br-content-body {
    color: #1a1a1a;
    line-height: 1.75;
    font-size: 0.95rem;
}

/* ─── Headings ────────────────────────────── */
.br-content-body h1,
.br-content-body h2,
.br-content-body h3,
.br-content-body h4 {
    color: #004899 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-top: 2rem !important;
    margin-bottom: 0.85rem !important;
    letter-spacing: -0.01em;
}
.br-content-body h1 { font-size: 1.5rem !important; }
.br-content-body h2 {
    font-size: 1.25rem !important;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0, 158, 227, 0.15);
}
.br-content-body h3 { font-size: 1.1rem !important; color: #007bba !important; }
.br-content-body h4 { font-size: 1rem !important; color: #007bba !important; }

.br-content-body > h1:first-child,
.br-content-body > h2:first-child,
.br-content-body > h3:first-child {
    margin-top: 0 !important;
}

/* ─── Paragraphs ──────────────────────────── */
.br-content-body p {
    margin: 0 0 1rem !important;
    text-align: justify;
}
.br-content-body p:last-child { margin-bottom: 0 !important; }

/* ─── Strong / Em ─────────────────────────── */
.br-content-body strong,
.br-content-body b { color: #004899 !important; font-weight: 700 !important; }
.br-content-body em,
.br-content-body i { color: #4a4a52; font-style: italic; }

/* ─── Lists ───────────────────────────────── */
.br-content-body ul,
.br-content-body ol {
    margin: 0 0 1rem !important;
    padding-left: 1.75rem !important;
}
.br-content-body ul { list-style-type: disc !important; }
.br-content-body ol { list-style-type: decimal !important; }
.br-content-body li {
    margin-bottom: 0.4rem;
    line-height: 1.7;
    text-align: left;
}
.br-content-body li::marker { color: #009ee3; font-weight: 700; }

/* ─── TABLES — High specificity, !important ────── */
.br-content-body table {
    width: 100% !important;
    margin: 1.5rem 0 !important;
    background: #fff !important;
    border: 1px solid rgba(0, 72, 153, 0.12) !important;
    border-radius: 0.625rem !important;
    border-collapse: collapse !important;
    /* border-spacing not needed with collapse */
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 72, 153, 0.04) !important;
    font-size: 0.875rem !important;
}

/* Header — gradient biru WIKA (extra specific) */
/* 
 * IMPORTANT: untuk gradient flow across whole row (bukan per cell),
 * pakai border-collapse: collapse pada <table> + gradient di <tr>.
 * border-collapse: separate bikin tiap cell punya bg sendiri-sendiri.
 */

/* Header row — gradient di parent <tr>, tiap cell transparent */
.br-content-body table thead tr,
.br-content-body table > thead > tr,
.br-content-body table > tbody > tr:has(> th):first-child {
    background: linear-gradient(90deg, #009ee3 0%, #007bba 100%) !important;
    background-color: #009ee3 !important;
}

/* Header cells — text putih + transparent bg supaya gradient parent kelihatan */
.br-content-body table thead th,
.br-content-body table thead td,
.br-content-body table > thead > tr > th,
.br-content-body table > thead > tr > td,
.br-content-body table > tbody > tr:has(> th):first-child > th,
.br-content-body table > tbody > tr:has(> th):first-child > td {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 0.825rem !important;
    padding: 0.95rem 1rem !important;
    text-align: left !important;
    border: none !important;
    line-height: 1.4 !important;
    vertical-align: top !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Body cells */
.br-content-body table tbody td,
.br-content-body table tbody th {
    padding: 0.75rem 1rem !important;
    border-bottom: 1px solid rgba(0, 72, 153, 0.06) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: top !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
    text-align: left !important;
    background: transparent !important;
}

/* Last row no border */
.br-content-body table tbody tr:last-child td,
.br-content-body table tbody tr:last-child th {
    border-bottom: none !important;
}

/* Alternating rows */
.br-content-body table tbody tr:nth-child(even) {
    background: rgba(0, 158, 227, 0.025) !important;
}

/* Hover */
.br-content-body table tbody tr:hover {
    background: rgba(0, 158, 227, 0.06) !important;
}

/* First column subtle styling — number/index */
.br-content-body table td:first-child {
    color: #6e6e75;
    font-weight: 500;
}

/* Lists inside table cells */
.br-content-body table td ul,
.br-content-body table td ol {
    margin: 0 !important;
    padding-left: 1.25rem !important;
}
.br-content-body table td li {
    margin-bottom: 0.3rem;
}
.br-content-body table td li:last-child { margin-bottom: 0; }
.br-content-body table td p {
    margin-bottom: 0.5rem !important;
    text-align: left !important;
}
.br-content-body table td p:last-child { margin-bottom: 0 !important; }

/* ─── Links ───────────────────────────────── */
.br-content-body a:not([class*="btn"]) {
    color: #009ee3;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 158, 227, 0.3);
    transition: all 0.15s;
}
.br-content-body a:not([class*="btn"]):hover {
    color: #004899;
    border-bottom-color: #004899;
}

/* ─── Blockquotes ─────────────────────────── */
.br-content-body blockquote {
    margin: 1.25rem 0;
    padding: 0.85rem 1.25rem;
    background: rgba(0, 158, 227, 0.04);
    border-left: 4px solid #009ee3;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: #1d3557;
}
.br-content-body blockquote p:last-child { margin-bottom: 0; }

/* ─── Images ──────────────────────────────── */
.br-content-body img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 72, 153, 0.08);
}

/* ─── HR ──────────────────────────────────── */
.br-content-body hr {
    margin: 2rem 0;
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 72, 153, 0.2), transparent);
}

/* ─── Mobile Responsive ────────────────────── */
@media (max-width: 767px) {
    .br-content-body { font-size: 0.875rem; }
    .br-content-body h2 { font-size: 1.1rem !important; }
    .br-content-body h3 { font-size: 1rem !important; }
    .br-content-body table {
        font-size: 0.78rem !important;
        display: block;
        overflow-x: auto;
        white-space: normal;
    }
    .br-content-body table thead th,
    .br-content-body table tbody td {
        padding: 0.55rem 0.6rem !important;
    }
}