/**
 * frontend/css/charts.css
 * Chart boxes, scroll wrapper, data table box.
 */

/* ── Chart box ───────────────────────────────────────────────────────────── */
.plc-chart-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 4px;
    overflow: hidden;
}

/* ── Horizontal scroll wrapper (bar-time, line) ──────────────────────────── */
.plc-scroll-wrapper {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
}

.plc-chart-canvas {
    min-width: 100%;
}

/* ── Data table box ──────────────────────────────────────────────────────── */
/*
 * Do NOT set overflow-x on .plc-table-box — DataTables creates its own
 * scroll container via scrollX:true. A second overflow wrapper causes the
 * thead and tbody to misalign because they end up in separate scroll boxes.
 */
.plc-table-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 14px;
}

/* Base table styles — DataTables will override width at runtime */
.plc-data-table {
    width: 100% !important;
    border-collapse: collapse;
}

.plc-data-table th,
.plc-data-table td {
    border: 1px solid #eee;
    padding: 10px 12px;
    text-align: left;
    font-size: 13px;
    white-space: nowrap;
}

.plc-data-table thead th {
    background: #f7f9fc;
    font-weight: 700;
    color: #444;
}

.plc-data-table tbody tr:hover td {
    background: #f0f7ff;
}

/* DataTables wrapper overrides — keep consistent with plugin styling */
.plc-table-box .dataTables_wrapper {
    font-size: 13px;
}

.plc-table-box .dataTables_scrollHeadInner,
.plc-table-box .dataTables_scrollHeadInner table {
    width: 100% !important;
}