/*
 * #8467 ENH-DT-DASHBOARDS M2 (2026-04-30) — KPI cards + chart container styling.
 *
 * Extracts the inline styles that M1's renderKpis() bakes into innerHTML
 * so the rules live in one cache-bustable stylesheet. Inline styles in M1
 * are kept as a graceful fallback if this CSS fails to load — but when it
 * loads (the normal case) these rules win via specificity.
 *
 * Also styles the `<canvas>` wrapper rows that M8 / M14 / M20 inject above
 * the existing DTs on the 3 admin pages — chart container heights pinned
 * at 220px so Chart.js's `responsive: true` has a stable parent height to
 * fill.
 *
 * Responsive cascade:
 *   - ≥ 992 px (lg+):  6-up KPI row, 2-up chart row
 *   - 768-991 (md):    3-up KPI row, 2-up chart row
 *   - < 768   (sm/xs): 2-up KPI row, 1-up stacked charts
 *
 * Color tokens come from the shared dms-badge palette so a future theme
 * tweak doesn't fork two color systems. (memory rule:
 * feedback_dms_badge_termont2_only.md — never use Bootstrap .badge.)
 *
 * @author Olivier RAVEAU - Oliv.Ai 🥷
 */

/* ── KPI card row ──────────────────────────────────────────────────────── */

.wcp-dt-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 12px 0;
}

.wcp-dt-kpi-card {
    flex: 1 1 calc(16.666% - 10px);
    min-width: 140px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 3px solid var(--wcp-kpi-accent, #0056b3);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    transition: box-shadow .15s ease, transform .15s ease;
}

.wcp-dt-kpi-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

.wcp-dt-kpi-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 1.2;
}

.wcp-dt-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
    margin-top: 2px;
    font-variant-numeric: tabular-nums; /* aligns digits across cards */
}

.wcp-dt-kpi-sub {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.2;
    margin-top: 2px;
}

/* dms-badge variant accents — borrow the 7 palette colors from the M1 PALETTE
   so the accent stripe matches whatever variant the kpi declared */
.wcp-dt-kpi-card.dms-badge-success  { border-left-color: #28a745; }
.wcp-dt-kpi-card.dms-badge-primary  { border-left-color: #0056b3; }
.wcp-dt-kpi-card.dms-badge-warning  { border-left-color: #ffc107; }
.wcp-dt-kpi-card.dms-badge-danger   { border-left-color: #dc3545; }
.wcp-dt-kpi-card.dms-badge-info     { border-left-color: #17a2b8; }
.wcp-dt-kpi-card.dms-badge-secondary{ border-left-color: #6c757d; }
.wcp-dt-kpi-card.dms-badge-purple   { border-left-color: #6610f2; }
.wcp-dt-kpi-card.dms-badge-orange   { border-left-color: #fd7e14; }

/* M25 — when the AJAX response has cache_hit=true, dim the card slightly + show "(cached)" sub */
.wcp-dt-kpi-card.cached .wcp-dt-kpi-sub::after {
    content: ' · cached';
    color: #9ca3af;
    font-style: italic;
}

/* ── Chart container row ──────────────────────────────────────────────── */

.wcp-dt-charts-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px 0;
}

.wcp-dt-chart-card {
    flex: 1 1 calc(50% - 12px);
    min-width: 280px;
    padding: 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.wcp-dt-chart-title {
    font-size: 12px;
    font-weight: 600;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 8px;
}

/* Chart.js needs an explicit height on the parent of the canvas when
   responsive:true + maintainAspectRatio:false. Pin to 220px so all 3
   pages produce identically-tall rows. */
.wcp-dt-chart-canvas-wrap {
    position: relative;
    height: 220px;
}

.wcp-dt-chart-canvas-wrap canvas {
    max-height: 100%;
}

/* Empty/loading state — pre-Chart.js init, before AJAX returns */
.wcp-dt-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    color: #9ca3af;
    font-size: 13px;
    font-style: italic;
}

/* ── Responsive cascade ───────────────────────────────────────────────── */

@media (max-width: 991px) {
    .wcp-dt-kpi-card  { flex: 1 1 calc(33.333% - 10px); }   /* 3-up */
    .wcp-dt-chart-card{ flex: 1 1 calc(50%     - 12px); }    /* still 2-up */
}

@media (max-width: 767px) {
    .wcp-dt-kpi-card  { flex: 1 1 calc(50% - 10px); }       /* 2-up */
    .wcp-dt-chart-card{ flex: 1 1 100%; }                    /* 1-up stacked */
    .wcp-dt-kpi-value { font-size: 18px; }
}

@media (max-width: 480px) {
    .wcp-dt-kpi-card  { flex: 1 1 100%; }                    /* 1-up */
}

/* ── Print mode ────────────────────────────────────────────────────────── */
/* When the user prints (or saves to PDF) the admin page, hide chart canvases
   — Chart.js doesn't print well; KPI cards stay since they're plain HTML.   */

@media print {
    .wcp-dt-chart-card { display: none; }
    .wcp-dt-kpi-card   { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}

/* =====================================================================
 * #9038 Phase B M7 (2026-05-09) — Canonical .wcp-kpi-card-{variant}
 *
 * 8 named variants for the new WCP_DT_Dashboard.renderKpiCard helper.
 * Each variant : background tint + 4px left-border + value text color.
 * Colors mirror the inline-style sets currently shipped in
 * class-ifs-account.php (customer page invoiced/credits/paid/net) and
 * class-admin-q4-audit.php (active/churned/unknown/info).
 * ===================================================================== */

.wcp-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #6c757d;
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 88px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wcp-kpi-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
/* #9240 (2026-05-10) — Selected-state ring shared across all pages that adopt
 * the wcp-kpi-card pattern. Applied via JS toggle of the page-specific
 * .cw-orgs-ifs-kpi-active / .cw-cc-kpi-active / etc. modifier classes. */
.wcp-kpi-card.cw-orgs-ifs-kpi-active,
.wcp-kpi-card.wcp-kpi-active {
    box-shadow: 0 0 0 2px #1890ff inset, 0 4px 8px rgba(24, 144, 255, 0.2);
}
.wcp-kpi-card-header {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.wcp-kpi-card-icon       { margin-right: 6px; }
.wcp-kpi-card-label-en   { opacity: 0.7; }
.wcp-kpi-card-value {
    font-size: 20px;
    font-weight: 700;
    font-family: Menlo, Consolas, monospace;
    font-variant-numeric: tabular-nums;
    color: #111827;
    line-height: 1.2;
}
.wcp-kpi-card-sub {
    font-size: 11px;
    color: #6c757d;
    margin-top: 2px;
}
.wcp-kpi-row { margin: 0 0 16px 0; }

/* Customer-page set (#8995 K1+K3 colors) */
.wcp-kpi-card-invoiced { background: #fff7e6; border-left-color: #ffa940; }
.wcp-kpi-card-invoiced .wcp-kpi-card-value { color: #d46b08; }
.wcp-kpi-card-credits  { background: #f3e8ff; border-left-color: #9254de; }
.wcp-kpi-card-credits  .wcp-kpi-card-value { color: #531dab; }
.wcp-kpi-card-paid     { background: #f6ffed; border-left-color: #52c41a; }
.wcp-kpi-card-paid     .wcp-kpi-card-value { color: #237804; }
.wcp-kpi-card-net      { background: #fff1f0; border-left-color: #ff4d4f; }
.wcp-kpi-card-net      .wcp-kpi-card-value { color: #a8071a; font-size: 22px; }

/* Q4 audit set (active / churned / unknown / info) */
.wcp-kpi-card-active   { background: #f6ffed; border-left-color: #28a745; }
.wcp-kpi-card-active   .wcp-kpi-card-value { color: #237804; }
.wcp-kpi-card-churned  { background: #fffbe6; border-left-color: #ffc107; }
.wcp-kpi-card-churned  .wcp-kpi-card-value { color: #b36b00; }
.wcp-kpi-card-unknown  { background: #f8f9fa; border-left-color: #6c757d; }
.wcp-kpi-card-unknown  .wcp-kpi-card-value { color: #495057; }
.wcp-kpi-card-info     { background: #e6f7ff; border-left-color: #17a2b8; }
.wcp-kpi-card-info     .wcp-kpi-card-value { color: #0c5460; }

/* Bootstrap-mapped fallbacks for color names commonly passed to renderKpiCard */
.wcp-kpi-card-success   { background: #f6ffed; border-left-color: #28a745; }
.wcp-kpi-card-success   .wcp-kpi-card-value { color: #237804; }
.wcp-kpi-card-warning   { background: #fffbe6; border-left-color: #ffc107; }
.wcp-kpi-card-warning   .wcp-kpi-card-value { color: #b36b00; }
.wcp-kpi-card-danger    { background: #fff1f0; border-left-color: #dc3545; }
.wcp-kpi-card-danger    .wcp-kpi-card-value { color: #a8071a; }
.wcp-kpi-card-secondary { background: #f8f9fa; border-left-color: #6c757d; }
.wcp-kpi-card-secondary .wcp-kpi-card-value { color: #495057; }

/* Full-width chart card (replaces inline style="flex:1 1 100%;") */
.wcp-dt-chart-card--full { flex: 1 1 100%; }

/* #9128 — KPI card hover + selected states. data-filter makes the card a
   clickable filter shortcut; this CSS gives it the visual affordance. */
.wcp-dt-kpi-card[data-filter] {
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.wcp-dt-kpi-card[data-filter]:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,.08) !important;
}
.wcp-dt-kpi-card--selected {
    background: #eef5ff !important;
    border-color: #003366 !important;
    box-shadow: 0 0 0 2px #003366 inset !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * #9130 — canonical DT toolbar (admin-orders / users / guarantees / orgs)
 * Layout: [Length] [⚙ Columns]  ──────────────────────  [🔍  BIG Search]
 * ─────────────────────────────────────────────────────────────────────────── */

.wcp-dt-toolbar {
    margin-bottom: 8px !important;
    flex-wrap: nowrap;
    gap: 6px;
}
.wcp-dt-toolbar > [class*="col"] { padding: 0 4px; }

/* Compact length menu — kill the legacy "Show ... entries" wrapper text */
.wcp-dt-length-wrap .dataTables_length { display: inline-block; }
.wcp-dt-length-wrap .dataTables_length label {
    margin: 0;
    font-size: 0;                            /* hide stray text nodes */
}
.wcp-dt-length-wrap .dataTables_length select {
    height: 38px;
    padding: 4px 28px 4px 10px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background-color: #fff;
}

/* Columns button glued next to length */
.wcp-dt-cols-wrap .dt-buttons { margin: 0; }
.wcp-dt-cols-wrap .dt-button {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
    border-radius: 6px;
    border: 1px solid #ced4da;
    background: #fff;
    color: #212529;
}
.wcp-dt-cols-wrap .dt-button:hover {
    background: #f8f9fa;
    border-color: #adb5bd;
}
.wcp-dt-cols-wrap .dt-button::before {
    content: '⚙ ';
    margin-right: 4px;
}

/* BIG Google-bar search, right-aligned. !important to win over per-page
   wrapper-id specificity (e.g. #wcp-admin-organizations-wrap . . .). */
.wcp-dt-toolbar .wcp-dt-search-wrap .dataTables_filter { float: none !important; text-align: right !important; }
.wcp-dt-toolbar .wcp-dt-search-wrap .dataTables_filter label { display: inline-block !important; margin: 0 !important; }
.wcp-dt-toolbar .wcp-dt-search-wrap input[type="search"] {
    width: 360px !important;
    max-width: 100% !important;
    height: 44px !important;
    font-size: 16px !important;
    padding: 0 16px 0 44px !important;
    background: #fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>') no-repeat 14px center !important;
    background-size: 18px 18px !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    transition: box-shadow .15s ease, border-color .15s ease !important;
}
.wcp-dt-toolbar .wcp-dt-search-wrap input[type="search"]:focus {
    border-color: #003366 !important;
    box-shadow: 0 0 0 3px rgba(0,51,102,.15) !important;
    outline: none !important;
}
.wcp-dt-toolbar .wcp-dt-search-wrap input[type="search"]::placeholder { color: #6c757d !important; }

/* Pagination — kill the double-border between siblings */
.wcp-dt-toolbar ~ .dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_paginate .paginate_button {
    border: 1px solid #dee2e6 !important;
    border-right-width: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    background: #fff !important;
    color: #333 !important;
    min-width: 36px;
    text-align: center;
}
.dataTables_paginate .paginate_button:last-child {
    border-right-width: 1px !important;
    border-radius: 0 6px 6px 0 !important;
}
.dataTables_paginate .paginate_button:first-child {
    border-radius: 6px 0 0 6px !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background: #1a1a2e !important;
    color: #fff !important;
    border-color: #1a1a2e !important;
}
.dataTables_paginate .paginate_button.disabled {
    color: #adb5bd !important;
    cursor: not-allowed;
}
.dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: #f8f9fa !important;
}

/* Mobile (≤768px) — search wraps below length+cols */
@media (max-width: 768px) {
    .wcp-dt-toolbar { flex-wrap: wrap; }
    .wcp-dt-search-wrap { width: 100%; margin-top: 6px; }
    .wcp-dt-search-wrap input[type="search"] { width: 100%; }
}

/* =====================================================================
 * #10193 — Canonical DT border reset · DataTables.net base CSS override.
 *
 * Strips the 1px solid rgb(224,224,224) borders that ship from
 * jquery.dataTables.min.css on the <table> + every <td>/<th>.
 * Keeps a single 1px bottom row separator (#f1f3f5) per row →
 * single, clean, modern look matching the WCP KPI card palette.
 *
 * Applies to ALL pages built with cw_render_admin_dt_dashboard()
 * (19 admin classes) → no per-page patch needed.
 * ===================================================================== */

table.dataTable,
.dataTables_wrapper table.dataTable {
    border: none !important;
}

table.dataTable thead th,
table.dataTable thead td {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #e5e7eb !important;
}

table.dataTable tbody td,
table.dataTable tbody th {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f1f3f5 !important;
}

table.dataTable tfoot th,
table.dataTable tfoot td {
    border-top: 2px solid #e5e7eb !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Hover row tint — modern alternative to the heavy grid */
table.dataTable tbody tr:hover > * {
    background-color: #f8fafc !important;
}