/* Jounico 2026: dashboard polish. Kept isolated to new j- classes. */
.j-page {
    background: radial-gradient(ellipse 900px 370px at 50% -160px, #e6edff 0, transparent 80%), #f8fafc;
}
.j-page #dateSelector {
    padding: 12px 16px; border-radius: 14px; font-weight: 600; color: #334155;
    box-shadow: 0 2px 8px rgba(15,23,42,.035);
}
.j-page .j-stat-card {
    position: relative; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
    box-shadow: 0 3px 14px rgba(15,23,42,.035);
}
.j-page .j-stat-card:hover {
    transform: translateY(-2px); border-color: #bdc9de; box-shadow: 0 12px 25px rgba(15,23,42,.065);
}
.j-page .j-stat-card:before { content:''; position:absolute; left:16px; top:0; width:26px; height:3px; background:#94a3b8; border-radius:0 0 4px 4px; }
.j-page .j-stat-card:nth-child(3):before,.j-page .j-stat-card:nth-child(4):before {background:#6366f1}
.j-page .j-stat-card:nth-child(5):before,.j-page .j-stat-card:nth-child(7):before {background:#10b981}
.j-page .j-stat-card:nth-child(6):before,.j-page .j-stat-card:nth-child(8):before {background:#f43f5e}
.j-page .j-actions > button {border-radius:12px; transition:transform .15s ease,box-shadow .15s ease}
.j-page .j-actions > button:hover {transform:translateY(-1px);box-shadow:0 6px 18px rgba(15,23,42,.12)}
.j-page .j-table-shell { box-shadow: 0 8px 40px rgba(20,33,63,.045); }
.j-page .j-table-shell input, .j-page .j-table-shell select {border-radius:11px;min-height:42px}
.j-page .j-transactions-table {border-collapse:separate;border-spacing:0}
.j-page .j-transactions-table thead th {white-space:nowrap; background:#f8fafc; position:sticky;top:0;z-index:1}
.j-page .j-transactions-table tbody td {white-space:nowrap;vertical-align:middle}
.j-page .j-transactions-table tbody td:nth-child(3) {max-width:260px;white-space:normal;min-width:150px;overflow-wrap:anywhere}
.j-page .j-transactions-table tbody td:nth-child(n+4):nth-child(-n+7) {font-variant-numeric:tabular-nums;font-weight:600}
.j-page .j-transactions-table tbody tr {transition:background .14s ease}
.j-row-action { font-size:12px; font-weight:700; padding:7px 10px; border-radius:9px; white-space:nowrap; transition:background-color .15s ease }
.j-row-edit {color:#4338ca;background:#eef2ff}
.j-row-edit:hover {background:#e0e7ff}
.j-row-delete {color:#be123c;background:#fff1f2}
.j-row-delete:hover {background:#ffe4e6}
.j-tx-panel { box-shadow: 0 28px 90px rgba(7,15,35,.3); }
.j-field-label { display:block; margin-bottom:7px; font-size:12px; font-weight:700; letter-spacing:.015em; color:#475569; }
.j-tx-input {display:block;width:100%;background:#fff;border:1px solid #dbe3ef;border-radius:12px;padding:11px 13px;color:#0f172a;min-height:45px;font-size:14px;outline:none;transition:border-color .16s ease,box-shadow .16s ease;}
.j-tx-input:focus {border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.j-tx-input::placeholder {color:#94a3b8}
.j-amount-group {border:1px solid;border-radius:18px;padding:15px 15px 17px}
.j-receipts {background:#f2fdf8;border-color:#c8f2dc}
.j-payments {background:#fff6f7;border-color:#ffe2e7}
.j-amount-header {display:flex;align-items:center;gap:8px;font-weight:800;font-size:15px;margin-bottom:17px;}
.j-receipts .j-amount-header {color:#047857}
.j-payments .j-amount-header {color:#be123c}
.j-amount-dot {height:8px;width:8px;border-radius:50%;background:currentColor}
.j-amount-group .j-tx-input {background:#fff}
.j-method-option .j-method-content {border:1.5px solid #dbe3ef;background:#fff;border-radius:14px;min-height:76px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;font-weight:700;color:#64748b;font-size:13px;transition:all .16s ease}
.j-method-option .j-method-content svg {width:24px;height:24px}
.j-method-option:hover .j-method-content {border-color:#a5b4fc;background:#f8faff}
.j-method-option input:checked + .j-method-content {border-color:#6366f1;background:#eef2ff;color:#4338ca;box-shadow:0 0 0 2px rgba(99,102,241,.07)}
.j-method-option input:focus-visible + .j-method-content {outline:3px solid rgba(99,102,241,.38);outline-offset:2px}
.j-save-btn {background:#4f46e5;color:white;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:800;min-height:46px;transition:background .16s ease}
.j-save-btn:hover:not(:disabled) {background:#4338ca}
.j-cancel-btn {background:#f1f5f9;color:#475569;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;min-height:46px}
.j-cancel-btn:hover {background:#e2e8f0}
@media(max-width:640px){
    .j-page .j-stat-card {padding:13px}
    .j-page .j-stat-card p:last-child span:last-child {font-size:18px}
    .j-tx-panel {border-radius:20px}
    .j-tx-panel .j-amount-group {padding:13px}
    .j-method-option .j-method-content {min-height:68px}
    .j-page .j-actions > button {flex:1 1 auto;justify-content:center}
}

/* Compact layout for 14-inch laptops and shorter browser viewports (v2).
   Keep all controls usable without relying on a tall desktop screen. */
.j-page .j-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.j-page .j-stat-card {
    min-width: 0;
    min-height: 65px;
    padding: 10px 12px;
    border-radius: 12px;
}
.j-page .j-stat-card:before { left: 12px; width: 21px; height: 2px; }
.j-page .j-stat-card > p:first-child { line-height: 1.25; font-size: 11px; }
.j-page .j-stat-value {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
    margin-top: 4px;
    line-height: 1.2;
}
.j-page .j-stat-currency { font-size: 12px; font-weight: 650; opacity: .7; flex-shrink: 0; }
.j-page .j-stat-number {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(16px, 1.32vw, 20px);
    font-weight: 750;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}
.j-page #dateSelector { min-height: 37px; padding: 7px 11px; border-radius: 10px; }
.j-page .j-actions > button { padding: 8px 12px; border-radius: 9px; }
.j-page .j-table-shell input, .j-page .j-table-shell select { min-height: 37px; }

@media (min-width: 768px) {
    .j-page .j-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
    .j-page .j-stat-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Transaction dialog: compact three-column header, two money panels,
   payment choices beside notes, pinned actions, independently scrolling body. */
.j-tx-modal { padding: 12px; }
.j-tx-panel {
    width: 100%;
    max-width: 780px;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: 0 18px 70px rgba(7, 15, 35, .25);
}
.j-tx-header { flex: 0 0 auto; padding: 12px 20px; }
.j-tx-header > button { flex: 0 0 auto; }
.j-tx-form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
.j-tx-fields {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 13px 20px;
    display: grid;
    gap: 11px;
}
.j-tx-fields > * { min-width: 0; }
.j-tx-primary {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, .95fr) minmax(0, .76fr);
    gap: 10px;
    align-items: end;
}
.j-tx-primary > *, .j-tx-amounts > *, .j-tx-money-fields > *, .j-tx-secondary > * { min-width: 0; }
.j-tx-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.j-tx-money-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.j-tx-secondary { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(0, .84fr); gap: 12px; }
.j-tx-secondary fieldset { min-width: 0; }
.j-tx-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.j-field-label { margin-bottom: 4px; font-size: 11px; line-height: 1.35; }
.j-tx-input {
    min-width: 0;
    min-height: 39px;
    height: 39px;
    border-radius: 9px;
    padding: 7px 10px;
    font-size: 13px;
}
.j-tx-secondary textarea.j-tx-input { min-height: 42px; height: 42px; max-height: 160px; }
.j-amount-group { padding: 10px 12px 12px; border-radius: 12px; }
.j-amount-header { font-size: 13px; margin-bottom: 8px; gap: 6px; line-height: 1.3; }
.j-amount-header .text-xs { font-size: 11px; }
.j-amount-dot { height: 7px; width: 7px; }
.j-method-option .j-method-content {
    flex-direction: row;
    gap: 6px;
    min-height: 42px;
    border-radius: 9px;
    font-size: 12px;
}
.j-method-option .j-method-content svg { height: 17px; width: 17px; flex-shrink: 0; }
.j-tx-footer {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    align-items: center;
    padding: 11px 20px;
    border-top: 1px solid #e9eef6;
    background: #fff;
}
.j-tx-footer .j-save-btn, .j-tx-footer .j-cancel-btn {
    min-height: 40px;
    padding: 8px 14px;
    border-radius: 9px;
}
.j-tx-footer .j-cancel-btn { min-width: 115px; }

/* Smaller dialogs throughout the app should never extend off the viewport. */
#createAccountModal > div, #editAccountModal > div,
#statementModal > div, #exchangeModal > div,
#fuelPurchaseModal > div, #fuelConsumptionModal > div,
#settingsModal > div, #reportPeriodModal > div,
#accountsReportOptionsModal > div {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#dashboardSearchModal > div {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    min-height: 0;
    overflow: hidden;
}
#dashboardSearchModal > div > div:first-child { padding: 14px 18px; flex: 0 0 auto; }
#dashboardSearchModal > div > div:first-child > div:first-child { margin-bottom: 9px; }
#dashboardSearchModal form { gap: 8px; }
#dashboardSearchModal form label { font-size: 12px; margin-bottom: 3px; }
#dashboardSearchModal form input, #dashboardSearchModal form select { padding: 6px 9px; font-size: 13px; min-height: 34px; }
#dashboardSearchModal > div > div:last-child { min-height: 0; padding: 12px 18px; }

@media (max-width: 679px) {
    .j-tx-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .j-tx-account { grid-column: 1 / -1; }
    .j-tx-amounts, .j-tx-secondary { grid-template-columns: 1fr; }
    .j-tx-header { padding: 10px 14px; }
    .j-tx-fields { padding: 12px 14px; gap: 10px; }
    .j-tx-footer { padding: 10px 14px; }
    .j-tx-footer .j-cancel-btn { min-width: 94px; }
    .j-page .j-stat-number { font-size: 17px; }
}
@media (max-height: 680px) and (min-width: 680px) {
    .j-tx-header { padding-top: 8px; padding-bottom: 8px; }
    .j-tx-header #txModalHint { display: none; }
    .j-tx-fields { padding-top: 9px; padding-bottom: 9px; gap: 8px; }
    .j-tx-footer { padding-top: 8px; padding-bottom: 8px; }
    .j-amount-group { padding-top: 8px; padding-bottom: 9px; }
}

/* Confirm / report dialogs created directly under <body> use the same viewport safety. */
body > div.fixed.inset-0 > div.bg-white {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-height: 800px) {
    #createAccountModal > div, #editAccountModal > div,
    #exchangeModal > div, #fuelPurchaseModal > div,
    #fuelConsumptionModal > div, #settingsModal > div {
        padding: 16px;
    }
    #createAccountModal form.space-y-4 > :not([hidden]) ~ :not([hidden]),
    #editAccountModal form.space-y-4 > :not([hidden]) ~ :not([hidden]),
    #exchangeModal form.space-y-4 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 11px;
    }
}

/* Dashboard Whish totals + Arabic headings (v3). Keep laptop cards compact. */
.j-page .j-stat-card[data-accent="starting"]:before { background:#94a3b8; }
.j-page .j-stat-card[data-accent="drawer"]:before { background:#6366f1; }
.j-page .j-stat-card[data-accent="receipts"]:before { background:#10b981; }
.j-page .j-stat-card[data-accent="payments"]:before { background:#f43f5e; }
.j-page .j-stat-card[data-accent="whish-receipts"]:before { background:#0d9488; }
.j-page .j-stat-card[data-accent="whish-payments"]:before { background:#e11d48; }
.j-page .j-stat-card > p:first-child { text-transform:none; letter-spacing:0; white-space:nowrap; }
/* Six per row on normal 14-inch laptop widths: twelve metrics occupy two compact rows. */
@media (min-width: 1200px) {
    .j-page .j-stat-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
@media (min-width: 1700px) {
    .j-page .j-stat-grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
}
/* Description stretches to the same full inner width as the receipt/payment row. */
.j-tx-description { min-width:0; width:100%; }
.j-tx-description textarea.j-tx-input { min-height:40px; height:40px; max-height:140px; }
.j-tx-secondary { display:block; }
.j-tx-secondary .j-tx-methods { max-width:570px; }
@media (max-width:679px) {
    .j-tx-description textarea.j-tx-input { min-height:42px; height:42px; }
}

/* Whish ↔ Cash swap — compact modal sized for 14-inch laptops. */
.j-wallet-panel {display:flex;flex-direction:column;max-height:calc(100dvh - 26px);overflow:hidden}
.j-wallet-form {display:flex;flex-direction:column;min-height:0;flex:1}
.j-wallet-body {overflow-y:auto;min-height:0;overscroll-behavior:contain}
.j-wallet-header,.j-wallet-footer {flex-shrink:0;background:#fff}
.j-wallet-direction label>span {display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #e2e8f0;border-radius:10px;font-size:12px;font-weight:750;padding:8px 6px;cursor:pointer;white-space:nowrap}
.j-wallet-direction input:checked+span {border-color:#ef4444;background:#fff1f2;color:#b91c1c;box-shadow:0 0 0 1px #fecaca}
.j-wallet-direction input:focus-visible+span {outline:3px solid #fca5a5;outline-offset:2px}
.j-wallet-preview {line-height:1.45}
.j-wallet-desc {color:#334155;font-weight:700;white-space:nowrap}
@media(max-height:690px){.j-wallet-body {padding-top:10px;padding-bottom:10px}}

/* Compact finance dashboard, optimised for a 14-inch laptop. */
.j-page .j-dashboard-content {padding-top: 10px;}
.j-page .j-financial-panels {display:grid; gap:9px; margin-bottom:12px;}
.j-page .j-money-row {display:grid;gap:8px;min-width:0;}
.j-page .j-money-row-main {grid-template-columns: repeat(2,minmax(0,1fr));}
.j-page .j-money-row-cash {grid-template-columns:repeat(2,minmax(0,1fr));}
.j-page .j-money-row-other {grid-template-columns:repeat(2,minmax(0,1fr));}
.j-page .j-financial-panels .j-stat-card {
    background:#fff;border:1px solid #e2e8f0;padding:9px 12px;min-height:63px;border-radius:11px;
    box-shadow:0 1px 5px rgba(15,23,42,.035);min-width:0;
}
.j-page .j-financial-panels .j-stat-card:before {left:12px;width:25px;background:#94a3b8;}
.j-page .j-financial-panels .j-card-drawer {border-color:#a5b4fc;background:#f7f8ff;}
.j-page .j-financial-panels .j-card-drawer:before {background:#6366f1;}
.j-page .j-financial-panels .j-card-cash-in:before, .j-page .j-financial-panels .j-card-whish-in:before, .j-page .j-financial-panels .j-card-check-in:before {background:#059669;}
.j-page .j-financial-panels .j-card-cash-out:before, .j-page .j-financial-panels .j-card-whish-out:before, .j-page .j-financial-panels .j-card-check-out:before {background:#e11d48;}
.j-page .j-financial-panels .j-card-whish-in, .j-page .j-financial-panels .j-card-whish-out {background:#f8fbff;border-color:#bfdbfe;}
.j-page .j-financial-panels .j-card-check-in, .j-page .j-financial-panels .j-card-check-out {background:#fffcf4;border-color:#fde68a;}
.j-page .j-stat-label {font-size:11px;line-height:1.4;font-weight:700;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.j-page .j-financial-panels .j-stat-value {margin-top:5px;gap:5px;}
.j-page .j-financial-panels .j-drawer-major {min-height:80px;padding-top:12px;}
.j-page .j-financial-panels .j-drawer-major .j-stat-label {color:#4338ca;font-size:12px;}
.j-page .j-financial-panels .j-drawer-major .j-stat-number {font-size:clamp(18px,1.6vw,25px);font-weight:800;color:#312e81;}
.j-page .j-financial-panels .j-card-whish-in .j-stat-number,.j-page .j-financial-panels .j-card-whish-out .j-stat-number {color:#1d4ed8;}
.j-nav-tools {min-width:0;flex-wrap:wrap;justify-content:flex-end;}
.j-nav-date {display:flex;gap:4px;align-items:center;padding:2px 7px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;}
.j-nav-date input {border:none;background:transparent;font-size:12px;font-weight:600;color:#334155;max-width:126px;outline:none;}
.j-bank-options {display:flex;flex-wrap:wrap;gap:7px;}
.j-bank-option {display:flex;gap:7px;align-items:center;cursor:pointer;border:1px solid #cbd5e1;border-radius:9px;padding:8px 11px;font-size:12px;font-weight:700;color:#334155;white-space:nowrap;}
.j-bank-option:has(input:checked) {background:#eff6ff;color:#1d4ed8;border-color:#93c5fd;}
.j-bank-option input {accent-color:#2563eb;}
.j-bank-hint {font-size:10px;line-height:1.4;color:#64748b;margin-top:7px;}
.j-bank-pill {font-size:10px;margin-inline-start:6px;background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:6px;padding:2px 5px;white-space:nowrap;}
.j-report-section-title {font-size:15px;font-weight:800;color:#0f172a;margin:10px 0 9px;}
.j-report-table-wrap {overflow-x:auto;border:1px solid #e2e8f0;border-radius:11px;}
.j-report-table {width:100%;border-collapse:collapse;min-width:540px;white-space:nowrap;font-size:12px;}
.j-report-table th,.j-report-table td {padding:9px 11px;border-bottom:1px solid #e2e8f0;text-align:right;}
.j-report-table thead {background:#f1f5f9;color:#334155;}
.j-report-table tbody th {font-weight:700;color:#475569;}
.j-report-table tbody tr:last-child >* {border-bottom:0;}
@media (min-width:700px){
  .j-page .j-money-row-main {grid-template-columns:1fr 1fr 1.55fr 1.55fr;align-items:stretch;}
  .j-page .j-money-row-cash {grid-template-columns: repeat(4,minmax(0,1fr));}
  .j-page .j-money-row-other {grid-template-columns: repeat(4,minmax(0,1fr));}
}
@media (min-width:1120px){ .j-page .j-money-row-other {grid-template-columns: repeat(8,minmax(0,1fr));} }
@media (max-width:520px){ .j-page .j-financial-panels .j-stat-card {padding:9px;min-height:62px;} .j-page .j-financial-panels .j-stat-number {font-size:clamp(13px,4vw,19px);} .j-nav-date input {max-width:120px;} }
@media print{ .j-report-table {min-width:0;font-size:11px;} }