/*
 * Cheques page v2 (Index + CreateChequeForms + _ChequeInfoPanel + _ChequeSettlementBreakdown)
 * Scoped under .panel-v2. Reuses the shared dashboard chrome from panel-v2.css
 * (.fav-head header, .fav-cta CTA, .pv-table tables, .pv-empty empty state) and
 * adds only what's specific to the cheque page: the create form / stepper, the
 * credit-info key/value column, form-line cards, and soft reskins of the legacy
 * alert + table markup that the (logic-heavy) partials still emit.
 * Relies on the design tokens in zino-components.css.
 */

/* ── Create-cheque card: info column (right) + form column (left) ─────────── */
.panel-v2 .chq-create {
    background: var(--zino-surface-3);
}

/* divider between the two columns on desktop (RTL: info on the right) */
@media (min-width: 992px) {
    .panel-v2 .chq-create .chq-info-col {
        border-inline-end: 1px solid var(--zino-border);
        padding-inline-end: var(--space-4);
    }
}

/* small column heading */
.panel-v2 .chq-col-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.panel-v2 .chq-col-head i {
    color: var(--zino-green);
    font-size: 1.125rem;
}

.panel-v2 .chq-col-head h6 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #575756;
}

/* ── Credit-info rows: reskin the partial's list-group into clean k/v rows ── */
.panel-v2 .chq-info-col .title-panel {
    border: none;
    padding: 0;
    margin: 0;
}

.panel-v2 .chq-info-col .list-group {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--zino-border);
    border-radius: 0;
}

.panel-v2 .chq-info-col .list-group-item {
    width: auto !important;
    min-width: 0 !important;
    border: none !important;
    background: none !important;
    padding: 0 !important;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #575756;
}

.panel-v2 .chq-info-col .list-group-item:first-child {
    color: var(--zino-text-sub);
    flex: 1 1 auto;
}

.panel-v2 .chq-info-col .list-group-item b {
    font-weight: 700;
    color: var(--zino-green);
    direction: ltr;
}

.panel-v2 .chq-info-col .list-group-item b.text-danger {
    color: var(--zino-warn) !important;
}

.panel-v2 .chq-info-col .list-group-item b.text-primary {
    color: var(--zino-blue) !important;
}

/* ── Form fields + steppers ──────────────────────────────────────────────
   The count/day inputs are auto-enhanced site-wide by bootstrap-touchspin
   (jquery-app2.js → input[name='count'|'day']). We don't add our own buttons;
   we just restyle TouchSpin's output to the v2 green stepper — scoped to
   .panel-v2 so the cart product counter keeps its own red style. */
.panel-v2 .chq-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.panel-v2 .chq-field-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #575756;
}

.panel-v2 .chq-unit {
    font-size: 0.75rem;
    color: var(--zino-text-sub);
    min-width: 28px;
}

/* TouchSpin wrapper: shrink to content, never full-width */
.panel-v2 .bootstrap-touchspin.input-group {
    display: inline-flex;
    flex-wrap: nowrap;
    width: auto;
    align-items: stretch;
}

.panel-v2 .bootstrap-touchspin .input-group-btn,
.panel-v2 .bootstrap-touchspin .input-group-prepend,
.panel-v2 .bootstrap-touchspin .input-group-append {
    display: flex;
}

.panel-v2 .bootstrap-touchspin .form-control,
.panel-v2 .chq-input input[type="number"] {
    flex: 0 0 auto;
    width: 56px;
    height: 38px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #575756;
    background: #fff;
    border: 1px solid var(--zino-border-strong);
    border-radius: 0;
    box-shadow: none;
}

/* green flat +/- buttons (override style2's red rounded ones, scoped) */
.panel-v2 .bootstrap-touchspin-up,
.panel-v2 .bootstrap-touchspin-down {
    flex: 0 0 auto;
    width: 34px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--zino-green);
    color: #fff;
    font-weight: 700;
    line-height: 1;
}

.panel-v2 .bootstrap-touchspin-up:hover,
.panel-v2 .bootstrap-touchspin-down:hover {
    background: var(--zino-green-hover);
}

/* ── Soft v2 reskin of the legacy bootstrap alerts the partials still emit ── */
.panel-v2 .alert {
    border: none;
    border-radius: 0;
    border-inline-start: 3px solid var(--zino-blue);
    background: #f3fafe;
    color: #575756;
    font-size: 0.8125rem;
    line-height: 1.8;
    padding: var(--space-3) var(--space-4);
}

.panel-v2 .alert .fs-6,
.panel-v2 .alert .fs-5 {
    font-size: 0.8125rem !important;
}

.panel-v2 .alert i {
    color: var(--zino-blue);
}

.panel-v2 .alert-danger {
    border-inline-start-color: var(--zino-warn);
    background: var(--zino-warn-bg);
}

.panel-v2 .alert-danger i,
.panel-v2 .alert-danger .text-danger {
    color: var(--zino-warn) !important;
}

.panel-v2 .alert-secondary {
    border-inline-start-color: var(--zino-text-sub);
    background: var(--zino-surface-3);
}

.panel-v2 .alert-warning {
    border-inline-start-color: var(--zino-warn);
    background: var(--zino-warn-bg);
}

.panel-v2 .alert-info {
    border-inline-start-color: var(--zino-blue);
    background: #f3fafe;
}

/* ── Section card title (instructions / returned / previous cheques) ──────── */
.panel-v2 .chq-card-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: 0.875rem;
    font-weight: 700;
    color: #575756;
}

.panel-v2 .chq-card-title i {
    color: var(--zino-green);
    font-size: 1.125rem;
}

.panel-v2 .chq-card-title--danger {
    color: var(--zino-warn);
}

.panel-v2 .chq-card-title--danger i {
    color: var(--zino-warn);
}

.panel-v2 .chq-pretext {
    font-size: 0.8125rem;
    line-height: 2;
    color: var(--zino-text);
    margin: 0;
}

/* ── Status pill in the previous-cheques table ───────────────────────────── */
.panel-v2 .chq-status {
    font-weight: 700;
    color: #575756;
}

.panel-v2 .chq-status--ok {
    color: var(--zino-green);
}

.panel-v2 .chq-status--bad {
    color: var(--zino-warn);
}

/* tiny slanted delete button reusing the warn palette */
.panel-v2 .chq-del-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: var(--zino-warn-bg);
    color: var(--zino-warn);
    border: 1px solid var(--zino-warn-border);
    font-size: 0.6875rem;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease;
}

.panel-v2 .chq-del-btn:hover {
    background: var(--zino-warn-bg-soft);
    color: var(--zino-warn-hover);
}

/* ── Settlement breakdown (full-width card above the create form) ──────────
   Soft reskin of the legacy alerts + .main-table the partial emits. */
.panel-v2 .chq-breakdown .main-table {
    font-size: 0.8125rem;
    margin: 0;
}

.panel-v2 .chq-breakdown .main-table thead th {
    background: var(--zino-surface-2) !important;
    color: #575756 !important;
    font-weight: 600;
    border: none;
}

.panel-v2 .chq-breakdown .main-table td {
    border-color: var(--zino-border);
}

.panel-v2 .chq-breakdown .list-group {
    border-radius: 0;
}

/* soften the corners of the breakdown's bordered blocks to match v2 */
.panel-v2 .chq-breakdown .rounded,
.panel-v2 .chq-breakdown .border {
    border-radius: 0 !important;
}

/* ── Confirm checkbox (صیادی flow) ───────────────────────────────────────── */
.panel-v2 .chq-confirm .form-check-label {
    font-size: 0.8125rem;
    color: #575756;
}

/* ── CreateChequeForms: type picker + per-cheque line cards ──────────────── */
.panel-v2 .chq-type-options .form-check-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #575756;
}

.panel-v2 .chq-type--error {
    border-color: var(--zino-warn) !important;
    box-shadow: inset 0 0 0 1px var(--zino-warn);
}

.panel-v2 .chq-line {
    border: 1px solid var(--zino-border);
}

.panel-v2 .chq-line-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 var(--space-2);
    background: var(--zino-green);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.panel-v2 .chq-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--zino-surface-2);
    color: #575756;
    font-size: 0.6875rem;
    font-weight: 700;
}

.panel-v2 .chq-badge--primary {
    background: var(--zino-green-tint);
    color: var(--zino-green);
}

.panel-v2 .chq-badge--info {
    background: #f3fafe;
    color: var(--zino-blue);
}

.panel-v2 .chq-amount-hint {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--zino-green);
    direction: ltr;
}

.panel-v2 .chq-line .form-control {
    border-radius: 0;
    border-color: var(--zino-border-strong);
    font-size: 0.875rem;
    color: #575756;
    box-shadow: none;
}

.panel-v2 .chq-line .form-control:focus {
    border-color: var(--zino-green);
    box-shadow: none;
}