/* =====================================================================
   Jostino dashboards (clicks, categories, merge, seller panel).
   Plain HTML + inline SVG charts; no chart library. Light and dark.
   ===================================================================== */

.jd {
    --jd-ok: var(--success-600, #16a34a);
    --jd-warn: var(--warning-600, #d97706);
    --jd-bad: var(--danger-600, #dc2626);
    --jd-info: var(--primary-600, #00a651);
    --jd-blue: #2f6fed;
    --jd-line: var(--gray-200, #e5e7eb);
    --jd-muted: var(--gray-500, #6b7280);
    --jd-card: #fff;
    --jd-soft: var(--gray-50, #f9fafb);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.dark .jd {
    --jd-card: var(--gray-900, #111827);
    --jd-line: rgba(255, 255, 255, .08);
    --jd-soft: rgba(255, 255, 255, .03);
    --jd-muted: var(--gray-400, #9ca3af);
}

.jd-grid { display: grid; gap: 1rem; }
.jd-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jd-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jd-span-2 { grid-column: span 2; }

/* KPI cards */
.jd-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.jd-kpi {
    background: var(--jd-card); border: 1px solid var(--jd-line); border-radius: .9rem;
    padding: .9rem 1rem; position: relative; overflow: hidden; min-width: 0;
}
.jd-kpi::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--jd-info)); }
.jd-kpi-l { font-size: .75rem; color: var(--jd-muted); font-weight: 600; }
.jd-kpi-v { font-size: 1.55rem; font-weight: 800; margin: .2rem 0; letter-spacing: -.01em; white-space: nowrap; }
.jd-kpi-s { font-size: .72rem; color: var(--jd-muted); display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

/* Cards */
.jd-card { background: var(--jd-card); border: 1px solid var(--jd-line); border-radius: 1rem; padding: 1rem 1.1rem; min-width: 0; }
.jd-card-h { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.jd-card-t { font-size: .88rem; font-weight: 800; }
.jd-card-d { font-size: .74rem; color: var(--jd-muted); }

/* Chips */
.jd-chip { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; }
.jd-chip--ltr { direction: ltr; }
.jd-up { color: var(--jd-ok); background: color-mix(in srgb, var(--jd-ok) 12%, transparent); }
.jd-down { color: var(--jd-bad); background: color-mix(in srgb, var(--jd-bad) 12%, transparent); }
.jd-t-ok { color: var(--jd-ok); background: color-mix(in srgb, var(--jd-ok) 12%, transparent); }
.jd-t-warn { color: var(--jd-warn); background: color-mix(in srgb, var(--jd-warn) 12%, transparent); }
.jd-t-bad { color: var(--jd-bad); background: color-mix(in srgb, var(--jd-bad) 12%, transparent); }
.jd-t-info { color: var(--jd-info); background: color-mix(in srgb, var(--jd-info) 12%, transparent); }
.jd-t-gray { color: var(--jd-muted); background: var(--jd-soft); }

/* Charts */
.jd-chart { width: 100%; height: 190px; display: block; overflow: visible; }
.jd-chart .jd-axis { stroke: var(--jd-line); stroke-width: 1; }
.jd-chart text { fill: var(--jd-muted); font-size: 10px; }
.jd-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .74rem; color: var(--jd-muted); }
.jd-legend i { display: inline-block; width: .65rem; height: .65rem; border-radius: 3px; margin-inline-end: .35rem; vertical-align: middle; }

/* Lists / rank rows */
.jd-list { display: flex; flex-direction: column; }
.jd-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .2rem; border-bottom: 1px dashed var(--jd-line); font-size: .82rem; min-width: 0; }
.jd-row:last-child { border-bottom: 0; }
.jd-rank { flex: none; width: 1.5rem; height: 1.5rem; border-radius: .45rem; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--jd-soft); color: var(--jd-muted); }
.jd-row-main { flex: 1; min-width: 0; }
.jd-row-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: inherit; text-decoration: none; }
a.jd-row-title:hover { color: var(--jd-info); }
.jd-row-sub { font-size: .72rem; color: var(--jd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jd-row-n { flex: none; font-weight: 800; text-align: end; }
.jd-meter { height: 4px; border-radius: 99px; background: var(--jd-line); overflow: hidden; margin-top: .3rem; }
.jd-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--jd-info); }

/* Toolbar / buttons */
.jd-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .75rem; color: var(--jd-muted); }
.jd-btn { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--jd-muted); background: var(--jd-card); border: 1px solid var(--jd-line); cursor: pointer; padding: .35rem .7rem; border-radius: .6rem; text-decoration: none; }
.jd-btn:hover { color: var(--jd-info); border-color: var(--jd-info); }
.jd-btn svg { width: .95rem; height: .95rem; }
.jd--busy { opacity: .55; transition: opacity .2s; }
.jd--busy .jd-btn svg { animation: jd-spin .8s linear infinite; }
@keyframes jd-spin { to { transform: rotate(360deg); } }
.jd-empty { padding: 1.2rem; text-align: center; color: var(--jd-muted); font-size: .82rem; background: var(--jd-soft); border-radius: .7rem; }
.jd-num { font-variant-numeric: tabular-nums; }

/* Category tree */
.jd-tree { font-size: .85rem; }
.jd-tree ul { list-style: none; margin: 0; padding-inline-start: 1.15rem; border-inline-start: 1px dashed var(--jd-line); }
.jd-tree > ul { padding-inline-start: 0; border: 0; }
.jd-tree li { margin: 0; }
.jd-tree details > summary { list-style: none; cursor: pointer; }
.jd-tree details > summary::-webkit-details-marker { display: none; }
.jd-node { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: .55rem; min-width: 0; }
.jd-node:hover { background: var(--jd-soft); }
.jd-caret { flex: none; width: 1rem; height: 1rem; color: var(--jd-muted); transition: transform .15s; }
details[open] > summary .jd-caret { transform: rotate(-90deg); }
.jd-caret--leaf { opacity: 0; }
.jd-node-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.jd-node-meta { flex: none; display: flex; gap: .3rem; align-items: center; }
.jd-node-actions { flex: none; display: flex; gap: .15rem; opacity: 0; transition: opacity .15s; }
.jd-node:hover .jd-node-actions, .jd-node:focus-within .jd-node-actions { opacity: 1; }
.jd-node-actions a { color: var(--jd-muted); padding: .2rem; border-radius: .35rem; display: inline-flex; }
.jd-node-actions a:hover { color: var(--jd-info); background: color-mix(in srgb, var(--jd-info) 10%, transparent); }
.jd-node-actions svg { width: .95rem; height: .95rem; }
.jd-node--hit { background: color-mix(in srgb, var(--jd-warn) 14%, transparent); }
.jd-search { width: 100%; max-width: 320px; border: 1px solid var(--jd-line); background: var(--jd-soft); border-radius: .6rem; padding: .45rem .7rem; font-size: .82rem; color: inherit; }

/* Compare cards (merge) */
.jd-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; }
.jd-pcard { display: flex; gap: .6rem; align-items: center; min-width: 0; }
.jd-pcard img { width: 44px; height: 44px; border-radius: .5rem; object-fit: cover; background: var(--jd-soft); flex: none; }

@media (max-width: 1100px) {
    .jd-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .jd-grid-2, .jd-grid-3 { grid-template-columns: 1fr; }
    .jd-span-2 { grid-column: auto; }
    .jd-kpi-v { font-size: 1.25rem; }
    .jd-node-actions { opacity: 1; }
}

/* ===================== Admin list cards (DebtUsersWidget, LatestLoginsWidget) =====================
   Compact half-width lists instead of full tables with search and pagination. */

.jlc {
    height: 100%;
    border: 1px solid var(--gray-200, #E5E5E5);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
}

.dark .jlc { border-color: rgba(255, 255, 255, .09); background: var(--gray-900, #18181B); }

.jlc-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--gray-200, #E5E5E5);
}

.jlc-h h3 { margin: 0; font-size: 14.5px; font-weight: 800; }
.jlc-h p { margin: 2px 0 0; font-size: 12px; color: var(--gray-500, #737373); }

.jlc-kpi { display: flex; flex-direction: column; align-items: flex-end; }
.jlc-kpi b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jlc-kpi span { font-size: 11.5px; color: var(--gray-500, #737373); }
.jlc-kpi.is-bad b { color: #DC2626; }

.jlc-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--gray-100, #F2F2F2);
    color: inherit;
    text-decoration: none;
    transition: background-color .12s ease;
}

.jlc-row:last-of-type { border-bottom: 0; }
.jlc-row:hover { background: var(--gray-50, #FAFAFA); }
.dark .jlc-row:hover { background: rgba(255, 255, 255, .03); }

.jlc-av {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E8F6EE;
    color: #007F3E;
    font-size: 14px;
    font-weight: 800;
}

.jlc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jlc-main b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 700; }
.jlc-main b em { font-style: normal; font-weight: 500; font-size: 11.5px; color: var(--gray-400, #A3A3A3); }
.jlc-main bdi { font-size: 12px; color: var(--gray-500, #737373); text-align: right; font-variant-numeric: tabular-nums; }

.jlc-amount { flex-shrink: 0; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jlc-amount small { margin-inline-start: 3px; font-size: 11px; font-weight: 500; color: var(--gray-500, #737373); }
.jlc-amount.is-bad { color: #DC2626; }

.jlc-time { flex-shrink: 0; font-size: 12px; color: var(--gray-500, #737373); white-space: nowrap; }

.jlc-more {
    display: block;
    padding: 11px 18px;
    border-top: 1px solid var(--gray-200, #E5E5E5);
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #007F3E;
}

.jlc-more:hover { background: var(--gray-50, #FAFAFA); }
.jlc-empty { padding: 26px 18px; text-align: center; font-size: 13px; color: var(--gray-500, #737373); }

/* ===================== Admin dashboard cards (DashboardStatsWidget, ClicksChartWidget) =====================
   Same language as the command center (.jcc): one card surface, tinted icon tiles, light + dark. */

.jak, .jac {
    --a-card: #fff;
    --a-line: var(--gray-200, #E5E5E5);
    --a-soft: var(--gray-50, #FAFAFA);
    --a-muted: var(--gray-500, #737373);
    --a-text: var(--gray-950, #262626);
}

.dark .jak, .dark .jac {
    --a-card: var(--gray-900, #18181B);
    --a-line: rgba(255, 255, 255, .08);
    --a-soft: rgba(255, 255, 255, .03);
    --a-muted: var(--gray-400, #9CA3AF);
    --a-text: #F5F5F5;
}

/* KPI row */
.jak { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.jak-ok     { --t: #16A34A; }
.jak-info   { --t: #2563EB; }
.jak-violet { --t: #7C3AED; }
.jak-warn   { --t: #D97706; }

.jak-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--a-line);
    border-radius: 16px;
    background: var(--a-card);
    color: var(--a-text);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}

a.jak-card:hover { border-color: color-mix(in srgb, var(--t) 45%, var(--a-line)); transform: translateY(-1px); }

.jak-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.jak-label { font-size: 13px; font-weight: 600; color: var(--a-muted); }
.jak-ic { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in srgb, var(--t) 13%, transparent); color: var(--t); }
.jak-ic svg { width: 19px; height: 19px; }
.jak-value { font-size: 30px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.jak-sub { font-size: 12.5px; color: var(--a-muted); }
.jak-sub b { font-weight: 800; color: var(--t); font-variant-numeric: tabular-nums; }
.jak-bar { height: 4px; margin-top: 4px; border-radius: 99px; background: var(--a-soft); overflow: hidden; }
.jak-bar i { display: block; height: 100%; border-radius: inherit; background: var(--t); }

/* Clicks chart card */
.jac {
    padding: 16px 18px 14px;
    border: 1px solid var(--a-line);
    border-radius: 16px;
    background: var(--a-card);
    color: var(--a-text);
    transition: opacity .2s ease;
}

.jac--busy { opacity: .55; }
.jac-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.jac-h h3 { margin: 0; font-size: 15px; font-weight: 800; }
.jac-h p { margin: 2px 0 0; font-size: 12.5px; color: var(--a-muted); }

.jac-seg { display: inline-flex; padding: 3px; border: 1px solid var(--a-line); border-radius: 11px; background: var(--a-soft); flex-wrap: wrap; }
.jac-seg button { min-height: 30px; padding-inline: 12px; border: 0; border-radius: 8px; background: transparent; font-size: 12px; font-weight: 600; color: var(--a-muted); cursor: pointer; }
.jac-seg button:hover { color: var(--a-text); }
.jac-seg button.is-on { background: var(--a-card); color: var(--a-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }

.jac-chart { display: block; width: 100%; height: 220px; }
.jac-grid { stroke: var(--a-line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.jac-axis { stroke: var(--a-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.jac-bar { fill: #3B82F6; opacity: .55; transition: opacity .15s ease; }
.jac-bar:hover, .jac-bar.is-peak { opacity: 1; }

.jac-x { direction: ltr; display: flex; margin-top: 6px; }
.jac-x span { flex: 1; text-align: center; font-size: 11px; color: var(--a-muted); white-space: nowrap; }
.jac-empty { padding: 48px 16px; text-align: center; font-size: 13px; color: var(--a-muted); border-radius: 12px; background: var(--a-soft); }

@media (max-width: 1023px) { .jak { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .jak-value { font-size: 24px; } .jac-chart { height: 170px; } }