/* ════════════════════════════════════════════════════════════════════
   SHORTCODE TABLES & STAT-CARDS
   Loaded site-wide on article pages. Covers:
   - [orders_table]          — .tickers-table stat grid + .orders-table-table
   - [company_deposit_code]  — .company-deposit-table
   - [company_foundation_code] — .company-foundation-table
   - [trading_company_details_*] — .trading-company-details-card
   - [companies_bulk_details_table] — same .trading-company-details-card
   - generic .table.table-bordered (CMS-injected tables)
   - .table-responsive wrapper (horizontal-scroll fallback)
   ════════════════════════════════════════════════════════════════════ */

/* ── orders_table: stat-card grid ───────────────────────────────────── */
.tickers-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-block: 16px 24px;
}
@media (max-width: 768px) {
    .tickers-table { grid-template-columns: 1fr; gap: 12px; }
}

.tickers-table .t1,
.tickers-table .t2 {
    padding: 0 !important;
    margin: 0 !important;
}

.tickers-table .t1 > div,
.tickers-table .t2 > div {
    background: var(--bg-subtle, #f5f5f5) !important;
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px !important;
    padding: 18px 16px !important;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 110px;
}

.tickers-table .t1 h4,
.tickers-table .t2 h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-mid, #475569);
    margin: 0;
    line-height: 1.4;
}

.tickers-table .t1 span,
.tickers-table .t2 span {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    color: var(--text, #152D50);
    line-height: 1.2;
    font-feature-settings: "tnum";
}

/* ── orders_table: data table ───────────────────────────────────────── */
.orders-table-table,
.orders-table-table.table {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    margin-block: 16px;
    font-size: 0.9rem;
    color: var(--text, #152D50);
}

.orders-table-table thead th,
.orders-table-table .topic-table-header th {
    font-weight: 700;
    padding: 12px 10px !important;
    text-align: center;
    vertical-align: middle;
    color: var(--text, #152D50);
    background: var(--bg-muted, #f1f5f9);
    border-block-end: 2px solid var(--border, #e5e7eb);
    white-space: nowrap;
    font-size: 0.85rem;
}

.orders-table-table .orders-table-header,
.orders-table-table th.orders-table-header {
    background: var(--bg-muted, #f1f5f9) !important;
    color: var(--text, #152D50) !important;
}

.orders-table-table tbody td {
    padding: 12px 10px !important;
    text-align: center;
    vertical-align: middle;
    border-block-start: 1px solid var(--border-light, #eef2f6);
    font-feature-settings: "tnum";
}

.orders-table-table tbody tr:nth-child(even) td {
    background: var(--bg-subtle, #fafbfc);
}

.orders-table-table tbody tr:hover td {
    background: var(--teal-bg, rgba(14, 124, 123, 0.04));
}

/* ── Generic CMS table (.table.table-bordered) ─────────────────────── */
.article-content .table-responsive,
.art-body .table-responsive {
    margin-block: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--border, #e5e7eb);
}

.article-content .table-responsive > .table,
.art-body .table-responsive > .table,
.details-container .table-responsive > .table {
    margin-block-end: 0;
}

.article-content .table.table-bordered,
.art-body .table.table-bordered,
.details-container .table.table-bordered {
    inline-size: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    font-size: 0.9rem;
}

.article-content .table.table-bordered thead th,
.art-body .table.table-bordered thead th,
.details-container .table.table-bordered thead th {
    background: var(--bg-muted, #f1f5f9) !important;
    color: var(--text, #152D50) !important;
    font-weight: 700;
    padding: 12px;
    text-align: start;
    border-block-end: 2px solid var(--border, #e5e7eb);
}

.article-content .table.table-bordered td,
.art-body .table.table-bordered td,
.details-container .table.table-bordered td {
    padding: 12px;
    border-block-start: 1px solid var(--border-light, #eef2f6);
    vertical-align: middle;
}

.table-responsive > p:first-child {
    padding: 12px 16px;
    margin: 0;
    background: var(--bg-subtle, #fafbfc);
    border-block-end: 1px solid var(--border-light, #eef2f6);
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
}

/* ══════════════════════════════════════════════════════════════════════
   COMPANY DEPOSIT TABLE  (.company-deposit-table)
   Used by shortcode: [company_deposit_code_1,2,3]
   ══════════════════════════════════════════════════════════════════════ */
.company-deposit-container,
.company-foundation-container {
    margin-block: 20px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.company-deposit-table,
.company-foundation-table {
    inline-size: 100%;
    border-collapse: collapse;
    background: var(--bg-card, #fff);
    font-size: 0.9rem;
}

.company-deposit-table thead th,
.company-foundation-table thead th {
    background: var(--navy, #152D50);
    color: #fff;
    font-weight: 700;
    padding: 12px 16px;
    text-align: center;
    white-space: nowrap;
    font-size: 0.85rem;
    border: none;
}

.company-deposit-table tbody tr,
.company-foundation-table tbody tr {
    border-block-end: 1px solid var(--border-light, #eef2f6);
    transition: background 0.15s;
}

.company-deposit-table tbody tr:last-child,
.company-foundation-table tbody tr:last-child {
    border-block-end: none;
}

.company-deposit-table tbody tr:hover td,
.company-foundation-table tbody tr:hover td {
    background: var(--teal-bg, rgba(14,124,123,0.04));
}

.company-deposit-table td,
.company-foundation-table td {
    padding: 14px 16px;
    vertical-align: middle;
    text-align: center;
}

/* Company cell — logo + name stacked */
.company-deposit-table .company-cell,
.company-foundation-table .company-cell {
    text-align: start;
    min-width: 140px;
}

.company-deposit-table .company-cell a,
.company-foundation-table .company-cell a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: var(--text, #152D50);
}

.company-deposit-table .company-cell img,
.company-foundation-table .company-cell img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid var(--border-light, #eef2f6);
    background: #fff;
    padding: 4px;
}

.company-deposit-table .company-name,
.company-foundation-table .company-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text, #152D50);
    text-align: center;
    line-height: 1.3;
    margin-block-start: 4px;
}

/* Inline star rating below logo */
.bct-inline-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 0.78rem;
    color: var(--gold, #C08A2E);
    font-weight: 700;
    margin-block-start: 2px;
}

.bct-inline-rating svg {
    color: var(--gold, #C08A2E);
    flex-shrink: 0;
}

/* Mobile CTA inside company-cell */
.mobile-action {
    display: none;
}

/* Action cell — CTA button */
.company-deposit-table .action-cell,
.company-foundation-table .action-cell {
    text-align: center;
    white-space: nowrap;
}

.company-deposit-table .deposit-cell,
.company-foundation-table .deposit-cell,
.company-foundation-table .year-cell {
    font-weight: 700;
    font-size: 1rem;
    color: var(--teal, #0E7C7B);
    text-align: center;
    font-feature-settings: "tnum";
}

/* Shared CTA button style for shortcode tables */
.company-deposit-table .btn.btn-primary,
.company-foundation-table .btn.btn-primary {
    background: var(--teal, #0E7C7B);
    border-color: var(--teal, #0E7C7B);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
    text-decoration: none;
    display: inline-block;
}

.company-deposit-table .btn.btn-primary:hover,
.company-foundation-table .btn.btn-primary:hover {
    background: var(--teal-light, #12A09E);
    transform: translateY(-1px);
}

.company-deposit-table .btn.btn-outline-primary,
.company-foundation-table .btn.btn-outline-primary {
    background: transparent;
    border: 2px solid var(--teal, #0E7C7B);
    color: var(--teal, #0E7C7B);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 8px;
    white-space: nowrap;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.company-deposit-table .btn.btn-outline-primary:hover,
.company-foundation-table .btn.btn-outline-primary:hover {
    background: var(--teal, #0E7C7B);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════════════
   TRADING COMPANY DETAILS CARD  (.trading-company-details-card)
   Used by shortcodes: [trading_company_details_*] and [companies_bulk_details_table]
   ══════════════════════════════════════════════════════════════════════ */
.trading-company-details-card {
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 16px;
    padding: 20px;
    margin-block: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Outer header: info table left + logo/button right */
.trading-company-details-card .company-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Info table side */
.trading-company-details-card .company-info-section {
    flex: 1 1 240px;
    min-width: 0;
}

.trading-company-details-card .company-info-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.trading-company-details-card .company-info-table td {
    padding: 7px 10px;
    vertical-align: middle;
    border-block-end: 1px solid var(--border-light, #eef2f6);
}

.trading-company-details-card .company-info-table td:last-child {
    border-block-end: none;
}

.trading-company-details-card .info-label {
    font-weight: 700;
    color: var(--text-mid, #3D5A7A);
    white-space: nowrap;
    width: 120px;
}

.trading-company-details-card .info-value {
    color: var(--text, #152D50);
    font-weight: 500;
}

.trading-company-details-card .info-value a {
    color: var(--teal, #0E7C7B);
    text-decoration: none;
    font-size: 0.84rem;
}

/* Logo/button side */
.trading-company-details-card .company-logo-section {
    flex: 0 0 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.trading-company-details-card .company-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border-light, #eef2f6);
    background: #fff;
    padding: 6px;
}

.trading-company-details-card .company-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text, #152D50);
    text-align: center;
    line-height: 1.3;
}

/* Star rating */
.trading-company-details-card .company-rating {
    display: flex;
    align-items: center;
    gap: 2px;
    font-weight: 800;
    color: var(--gold, #C08A2E);
    font-size: 0.95rem;
}

.trading-company-details-card .company-rating::before {
    content: "★";
    font-size: 1rem;
    line-height: 1;
}

.trading-company-details-card .rating-separator {
    color: var(--text-muted, #64748b);
    font-weight: 400;
    font-size: 0.8rem;
}

.trading-company-details-card .rating-max {
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
}

/* Open account / review button */
.open-account-btn {
    display: inline-block;
    background: var(--teal, #0E7C7B);
    color: #fff !important;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 16px;
    border-radius: 8px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s, transform 0.1s;
    text-align: center;
    margin-block-start: 4px;
}

.open-account-btn:hover {
    background: var(--teal-light, #12A09E);
    transform: translateY(-1px);
    color: #fff !important;
}

.open-account-btn--review {
    background: transparent;
    border: 2px solid var(--teal, #0E7C7B);
    color: var(--teal, #0E7C7B) !important;
}

.open-account-btn--review:hover {
    background: var(--teal, #0E7C7B);
    color: #fff !important;
}

/* Features + defects grid */
.trading-company-details-card .company-features-defects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--border-light, #eef2f6);
}

.trading-company-details-card .section-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-mid, #3D5A7A);
    margin-block-end: 8px;
}

.trading-company-details-card .features-list,
.trading-company-details-card .defects-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.trading-company-details-card .features-list li,
.trading-company-details-card .defects-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.84rem;
    line-height: 1.4;
    color: var(--text, #152D50);
}

.trading-company-details-card .check-icon {
    color: var(--success, #10B981);
    font-weight: 800;
    flex-shrink: 0;
    margin-block-start: 1px;
}

.trading-company-details-card .x-icon {
    color: var(--danger, #EF4444);
    font-weight: 800;
    flex-shrink: 0;
    margin-block-start: 1px;
}

/* Description section */
.trading-company-details-card .company-description {
    margin-block-start: 16px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--border-light, #eef2f6);
}

.trading-company-details-card .description-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-mid, #3D5A7A);
    margin-block-end: 6px;
}

.trading-company-details-card .description-text {
    font-size: 0.88rem;
    color: var(--text, #152D50);
    line-height: 1.6;
    margin: 0;
}

/* ── Mobile fallback ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Bare CMS tables (TinyMCE output) without .table-responsive wrapper */
    .art-body table,
    .article-content table,
    .details-container table,
    .section-article-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }

    .orders-table-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .tickers-table .t1 span,
    .tickers-table .t2 span {
        font-size: 1.25rem !important;
    }

    /* Deposit/foundation table: collapse to mobile layout */
    .company-deposit-table thead,
    .company-foundation-table thead {
        display: none; /* hide header on mobile */
    }

    .company-deposit-table tbody tr,
    .company-foundation-table tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 12px 14px;
    }

    .company-deposit-table td,
    .company-foundation-table td {
        padding: 4px 0;
        border: none;
        text-align: start;
    }

    .company-deposit-table .company-cell,
    .company-foundation-table .company-cell {
        flex: 0 0 100%;
    }

    .company-deposit-table .company-cell a,
    .company-foundation-table .company-cell a {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .company-deposit-table .company-cell img,
    .company-foundation-table .company-cell img {
        width: 44px;
        height: 44px;
    }

    .company-deposit-table .company-name,
    .company-foundation-table .company-name {
        text-align: start;
        font-size: 0.9rem;
    }

    /* Show mobile action CTA on small screens */
    .mobile-action {
        display: block;
        flex: 0 0 100%;
        margin-block-start: 4px;
    }

    /* Hide desktop action cell on mobile */
    .company-deposit-table .action-cell,
    .company-foundation-table .action-cell {
        display: none;
    }

    /* Deposit/year cell — show inline on mobile */
    .company-deposit-table .deposit-cell,
    .company-foundation-table .deposit-cell,
    .company-foundation-table .year-cell {
        font-size: 0.9rem;
    }

    /* Trading company details card — stack on mobile */
    .trading-company-details-card .company-header {
        flex-direction: column-reverse;
        gap: 14px;
    }

    .trading-company-details-card .company-logo-section {
        flex: 0 0 auto;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        width: 100%;
    }

    .trading-company-details-card .company-logo {
        width: 56px;
        height: 56px;
    }

    .trading-company-details-card .company-features-defects {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .trading-company-details-card {
        padding: 14px;
    }

    .open-account-btn {
        padding: 8px 12px;
        font-size: 0.78rem;
    }
}

/* ── Stock movers shortcode — positive/negative change colours ───────── */
/* Used by stock-movers-chart-short-code.blade.php via .text-positive-main
   and .text-negative-main classes. Tokens: --success / --danger from DS. */
.text-positive-main {
    color: var(--success, #10B981);
    font-weight: 600;
}
.text-negative-main {
    color: var(--danger, #EF4444);
    font-weight: 600;
}