/* ============================================================
   PANEL PAGE KIT (.cqp-*)  linked from v2/layout/app.blade.php

   The parts every v2 panel page is built from, so no page has to
   invent its own: the page header (v2/partials/page-head.blade.php),
   the card, the meter cells, a two-column grid.

   Cut from the pages that already "speak the panel's language"
   (/home, dash-console.css): Inter on headings, 8px corners, the
   theme's own border and surface tokens, so light and dark both come
   from the theme. Brand blue only.
   ============================================================ */

/* ---------- Page header ---------- */
.cqp-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem 1.25rem; flex-wrap: wrap;
    margin: 0 0 1.5rem;
}
.cqp-head-l { min-width: 0; }
.cqp-title {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.6rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
    color: var(--mono, #18181b);
}
.cqp-note {
    margin-inline-start: .6rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .8125rem; font-weight: 450; letter-spacing: 0;
    color: var(--secondary-foreground, #71717a);
}
.cqp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }

/* ---------- Meter cells (the balances in a header, as on /home) ---------- */
.cqp-meter {
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--border, #e4e4e7); border-radius: 8px;
    background: var(--background, #fff); overflow: hidden;
}
.cqp-meter-cell {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
    min-width: 6.25rem; padding: .45rem .95rem;
    background: transparent; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.cqp-meter-cell + .cqp-meter-cell { border-left: 1px solid var(--border, #e4e4e7); }
.cqp-meter-cell:hover { background: var(--accent, #f4f4f5); }
.cqp-meter-cell:focus-visible { outline: 2px solid var(--primary, #1379F0); outline-offset: -2px; }
.cqp-meter-n { font-size: 1.15rem; line-height: 1.1; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--mono, #18181b); }
.cqp-meter-k { font-size: .6875rem; color: var(--secondary-foreground, #71717a); }
.cqp-meter-cell.is-empty .cqp-meter-n { color: #d97706; }

/* ---------- Card ---------- */
.cqp-card {
    background: var(--background, #fff);
    border: 1px solid var(--border, #e4e4e7);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;
}
.cqp-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--border, #e4e4e7);
}
.cqp-card-title {
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3;
    color: var(--mono, #18181b);
}
.cqp-card-sub { font-size: .75rem; color: var(--secondary-foreground, #71717a); }
.cqp-card-body { padding: 1.15rem; }
.cqp-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap;
    padding: .85rem 1.15rem; border-top: 1px solid var(--border, #e4e4e7);
}

/* ---------- Grid: main column + side column, the same split everywhere ---------- */
.cqp-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cqp-stack { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 1100px) { .cqp-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
    .cqp-head { align-items: flex-start; margin-bottom: 1.1rem; }
    .cqp-title { font-size: 1.4rem; }
    .cqp-note { display: block; margin: .2rem 0 0; font-size: .78rem; }
    .cqp-actions { width: 100%; }
    .cqp-meter { width: 100%; }
    .cqp-meter-cell { flex: 1 1 0; min-width: 0; }
}

/* ============================================================
   November 2026 pass, the same treatment as the /home console
   (dash-console-v5.css): 14px cards on a soft layered shadow, a
   tighter and heavier page title with its note on a line of its
   own, and the balances as one outlined group the height of the
   buttons beside it. Restated here rather than edited above so the
   kit's first cut stays readable as what it was.
   ============================================================ */
.cqp-head { margin-bottom: 1.35rem; }
.cqp-title { font-size: 1.5rem; font-weight: 650; letter-spacing: -.022em; line-height: 1.15; }
.cqp-note { display: block; margin: .3rem 0 0; font-size: .84rem; line-height: 1.4; }

.cqp-actions .kt-btn { height: 2.25rem; border-radius: 10px; }
.cqp-actions .kt-btn-primary { box-shadow: 0 1px 2px rgba(11, 95, 204, .3), inset 0 1px 0 rgba(255, 255, 255, .18); }

.cqp-meter {
    height: 2.25rem; padding: 0 .2rem; align-items: center;
    border-radius: 10px; overflow: visible;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03);
}
.cqp-meter-cell {
    position: relative;
    flex-direction: row; align-items: baseline; justify-content: center; gap: .35rem;
    min-width: 0; padding: .42rem .65rem; border-radius: 7px;
    white-space: nowrap;
}
.cqp-meter-cell + .cqp-meter-cell { border-left: 0; margin-inline-start: 1px; }
.cqp-meter-cell + .cqp-meter-cell::before {
    content: ""; position: absolute; inset-inline-start: -1px; top: 50%;
    width: 1px; height: 1rem; transform: translateY(-50%);
    background: var(--border, #e4e4e7);
}
.cqp-meter-n { font-size: .9rem; line-height: 1; font-weight: 680; letter-spacing: 0; }
.cqp-meter-k { font-size: .8rem; line-height: 1; }
/* Empty is a stop, not a warning: nothing runs. Same red as on /home. */
.cqp-meter-cell.is-empty .cqp-meter-n { color: #dc2626; }
.dark .cqp-meter-cell.is-empty .cqp-meter-n { color: #f87171; }

.cqp-card {
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -20px rgba(16, 24, 40, .18);
}
.dark .cqp-card, [data-kt-theme-mode="dark"] .cqp-card { box-shadow: none; }
.cqp-card-head { padding: .95rem 1.15rem; }
.cqp-card-head:first-child { border-radius: 14px 14px 0 0; }
.cqp-card-title { font-size: 1.02rem; letter-spacing: -.012em; }
.cqp-card-sub { font-size: .8rem; }
.cqp-card-foot { border-radius: 0 0 14px 14px; }

@media (max-width: 640px) {
    .cqp-title { font-size: 1.35rem; }
    .cqp-meter-cell { flex: 1 1 0; }
}

/* ---------- Columns: one 12-track grid for every panel page ----------
   .cqp-grid above is the fixed 2:1 split. This is the general form, for a
   page whose rows are not all the same split: a row of twelve tracks and a
   span per child. Everything is one column on a phone, spans apply from
   900px, and the -lg spans from 1280px, so a row can be 6/6 on a laptop and
   8/4 on a monitor.

       <div class="cqp-row">
           <section class="cqp-card cqp-col-8">...</section>
           <aside class="cqp-card cqp-col-4">...</aside>
       </div>
   ---------------------------------------------------------------------- */
.cqp-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.cqp-row > * { min-width: 0; }
.cqp-row-stretch { align-items: stretch; }
@media (min-width: 900px) {
    .cqp-row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
    .cqp-row > * { grid-column: span 12; }
    .cqp-row > .cqp-col-3 { grid-column: span 3; }
    .cqp-row > .cqp-col-4 { grid-column: span 4; }
    .cqp-row > .cqp-col-5 { grid-column: span 5; }
    .cqp-row > .cqp-col-6 { grid-column: span 6; }
    .cqp-row > .cqp-col-7 { grid-column: span 7; }
    .cqp-row > .cqp-col-8 { grid-column: span 8; }
    .cqp-row > .cqp-col-9 { grid-column: span 9; }
    .cqp-row > .cqp-col-12 { grid-column: span 12; }
}
@media (min-width: 1280px) {
    .cqp-row > .cqp-col-lg-3 { grid-column: span 3; }
    .cqp-row > .cqp-col-lg-4 { grid-column: span 4; }
    .cqp-row > .cqp-col-lg-6 { grid-column: span 6; }
    .cqp-row > .cqp-col-lg-8 { grid-column: span 8; }
    .cqp-row > .cqp-col-lg-9 { grid-column: span 9; }
}
/* A side column that stays in view while the main one scrolls. */
.cqp-sticky { position: sticky; top: 1rem; }