/* e-Zway Financial Solutions — additions on top of the Duralux theme */

/* Official e-Zway logo (assets/images/logo-full.png, logo-icon.png) */
.nxl-navigation .m-header .b-brand { display: flex; align-items: center; }
.nxl-navigation .brand-logo { height: 46px; width: auto; max-width: 220px; }
.nxl-navigation .brand-icon { height: 38px; width: 38px; display: none; }
.minimenu .nxl-navigation .brand-logo { display: none; }
.minimenu .nxl-navigation .brand-icon { display: inline; }
.login-logo { width: 100%; max-width: 300px; height: auto; }
html.app-skin-dark .brand-logo, html.app-skin-dark .login-logo { background: #fff; border-radius: 6px; padding: 4px 8px; }
.nxl-header form .dropdown-item { width: 100%; text-align: left; background: none; border: 0; }

.kpi-card { transition: transform .12s ease, box-shadow .12s ease; text-decoration: none; }
a.kpi-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20, 30, 60, .08); }

/* JEV form */
.jev-lines td { vertical-align: top; }
.jev-lines .line-no { padding-top: .85rem; }
.jev-lines .js-debit, .jev-lines .js-credit { font-variant-numeric: tabular-nums; }
.jev-lines tfoot td { border-top: 2px solid var(--bs-border-color, #e5e7eb); font-variant-numeric: tabular-nums; }
.jev-lines .select2-container { min-width: 260px; }
/* The theme strips bottom borders from everything in a table's last row; keep form controls intact. */
.table-responsive .table tbody tr:last-child .form-control,
.table-responsive .table tbody tr:last-child .form-select,
.table-responsive .table tbody tr:last-child .select2-selection { border-bottom: 1px solid var(--bs-border-color, #e5e7eb); }

.balance-indicator { border-radius: 6px; padding: .6rem .9rem; font-size: .875rem; }
.balance-indicator i { vertical-align: -2px; }
.balance-indicator.is-ok    { background: rgba(25, 135, 84, .1);  color: #146c43; }
.balance-indicator.is-error { background: rgba(220, 53, 69, .1);  color: #b02a37; }
.balance-indicator.is-empty { background: rgba(108, 117, 125, .1); color: #565e64; }

/* Workflow timeline */
.workflow-steps li { display: flex; gap: .75rem; padding-bottom: 1rem; position: relative; }
.workflow-steps li:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: #e5e7eb; }
.workflow-steps .step-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #eef0f4; color: #9aa3b2; flex-shrink: 0; font-size: 13px; }
.workflow-steps li.done .step-dot { background: #198754; color: #fff; }
.validation-list li { padding: .2rem 0; }

/* Report tables */
.report-table { font-variant-numeric: tabular-nums; font-size: .82rem; }
.report-table thead th { white-space: nowrap; background: var(--bs-light, #f6f7f9); }
.report-table .rt-text { white-space: pre-wrap; }
.report-table tr.rt-group td { background: rgba(52, 84, 209, .07); font-weight: 700; }
.report-table tr.rt-note td { font-style: italic; color: #6c757d; }
.report-table tr.rt-opening td { font-weight: 600; color: #495057; }
.report-table tr.rt-subtotal td { font-weight: 700; border-top: 1px solid #adb5bd; }
.report-table tr.rt-total td { font-weight: 800; border-top: 2px solid #212529; border-bottom: 3px double #212529; }

.json-view { white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; }

html.app-skin-dark .workflow-steps li:not(:last-child)::before { background: #2b3348; }
html.app-skin-dark .workflow-steps .step-dot { background: #2b3348; }
html.app-skin-dark .report-table thead th { background: transparent; }
html.app-skin-dark .report-table tr.rt-total td { border-top-color: #cfd4dc; border-bottom-color: #cfd4dc; }
html.app-skin-dark .balance-indicator.is-ok { color: #75d1a1; }
html.app-skin-dark .balance-indicator.is-error { color: #f1828d; }
html.app-skin-dark .balance-indicator.is-empty { color: #adb5bd; }

/* ===================================================================
   Dashboard (brand navy + gold, from the e-Zway logo)
   =================================================================== */
.dash {
    --ez-navy: #0d2b5e; --ez-navy-2: #16407f; --ez-gold: #f0a500;
    --t-navy: #0d2b5e; --t-blue: #3b82f6; --t-orange: #f59e0b; --t-green: #16a34a;
    --t-purple: #7c3aed; --t-red: #e11d48; --t-teal: #0d9488; --t-amber: #d97706;
}
.dash .tone-navy { --tone: var(--t-navy); }   .dash .tone-blue { --tone: var(--t-blue); }
.dash .tone-orange { --tone: var(--t-orange); } .dash .tone-green { --tone: var(--t-green); }
.dash .tone-purple { --tone: var(--t-purple); } .dash .tone-red { --tone: var(--t-red); }
.dash .tone-teal { --tone: var(--t-teal); }   .dash .tone-amber { --tone: var(--t-amber); }

/* Status tiles */
.dash-stat { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; padding: 18px 18px 22px;
    background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(13, 43, 94, .07); color: inherit; text-decoration: none;
    overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.dash-stat::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 10px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, var(--tone), color-mix(in srgb, var(--tone) 55%, #fff)); }
a.dash-stat:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(13, 43, 94, .12); }
.dash-stat-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff;
    background: var(--tone); box-shadow: 0 0 0 6px color-mix(in srgb, var(--tone) 16%, transparent); }
.dash-stat-value { display: block; font-size: 1.75rem; font-weight: 800; line-height: 1.05; color: #0f172a; }
.dash-stat-label { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: #334155; margin-top: 4px; }

/* Panels with navy headers */
.dash-panel { background: #fff; border-radius: 14px; box-shadow: 0 4px 18px rgba(13, 43, 94, .07); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px;
    background: linear-gradient(90deg, var(--ez-navy), var(--ez-navy-2)); color: #fff; }
.dash-panel-head h5 { color: #fff; margin: 0; font-size: 1.02rem; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.dash-panel-head h5 i { font-size: 1.15rem; }
.dash-panel-head h5 small { font-weight: 500; font-size: .75rem; opacity: .7; }
.dash-panel-body { padding: 18px 20px; flex: 1; }
.dash-head-btn { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.dash-head-btn:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.dash-year { width: auto; min-width: 96px; border-radius: 20px; border: 0; font-weight: 600; }

/* Monthly / Quarterly / Yearly segmented control */
.dash-toggle { display: inline-flex; background: rgba(255, 255, 255, .1); border-radius: 22px; padding: 3px; }
.dash-toggle button { border: 0; background: transparent; color: #dbe4f5; font-weight: 600; font-size: .82rem; padding: 6px 16px; border-radius: 20px; }
.dash-toggle button.active { background: var(--ez-gold); color: #1f2937; }
.dash-toggle button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Cash position donut */
.dash-donut-wrap { position: relative; max-width: 260px; margin: 0 auto; }
.dash-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dash-donut-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.1; }
.dash-donut-label { font-size: .78rem; color: #475569; }
.dash-legend { list-style: none; padding: 0; margin: 12px 0 0; }
.dash-legend li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #eef1f6; font-size: .86rem; }
.dash-legend li:last-child { border-bottom: 0; }
.dash-legend-name { flex: 1; color: #334155; }
.dash-legend-amount { font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.dash-legend-pct { width: 52px; text-align: right; color: #475569; font-variant-numeric: tabular-nums; }
.dash-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.dash-dot.series-0 { background: var(--ez-navy-2); } .dash-dot.series-1 { background: var(--ez-gold); }
.dash-dot.series-2 { background: #2a8fd6; }        .dash-dot.series-3 { background: #94a3b8; }
.dash-note { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: #eef4ff; color: #1e3a6e; font-size: .82rem; display: flex; gap: 8px; align-items: center; }

/* Summary tiles (soft gradient) */
.dash-tile, .dash-net { display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 12px; height: 100%;
    border: 1px solid color-mix(in srgb, var(--tone) 20%, #fff);
    background: linear-gradient(110deg, color-mix(in srgb, var(--tone) 7%, #fff) 0%, #fff 55%, color-mix(in srgb, var(--tone) 12%, #fff) 100%); }
.dash-tile-icon { width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 22px;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, #fff); }
.dash-tile-label, .dash-net-label { display: block; font-size: .85rem; color: #334155; }
.dash-tile-value { display: block; font-size: 1.35rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Key metrics */
.dash-metric { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 6px; border-radius: 12px; height: 100%;
    border: 1px solid color-mix(in srgb, var(--tone) 22%, #fff); background: color-mix(in srgb, var(--tone) 7%, #fff); }
.dash-metric i { font-size: 1.25rem; color: var(--tone); }
.dash-metric-label { font-size: .76rem; color: #334155; }
.dash-metric-value { font-size: 1.05rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; }
.dash-net { margin-top: 2px; height: auto; overflow: hidden; }
.dash-net .dash-tile-icon { color: var(--ez-gold); background: #fff7e0; }
.dash-net-label { color: var(--tone); font-weight: 600; }
.dash-net-value { display: block; font-size: 1.4rem; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-spark { width: 96px; flex-shrink: 0; }

/* Dark mode */
html.app-skin-dark .dash-stat, html.app-skin-dark .dash-panel { background: #1b2337; box-shadow: none; }
html.app-skin-dark .dash-stat-value, html.app-skin-dark .dash-tile-value, html.app-skin-dark .dash-metric-value,
html.app-skin-dark .dash-net-value, html.app-skin-dark .dash-donut-value, html.app-skin-dark .dash-legend-amount { color: #f1f5f9; }
html.app-skin-dark .dash-stat-label, html.app-skin-dark .dash-tile-label, html.app-skin-dark .dash-metric-label,
html.app-skin-dark .dash-legend-name, html.app-skin-dark .dash-donut-label, html.app-skin-dark .dash-legend-pct { color: #cbd5e1; }
html.app-skin-dark .dash-tile, html.app-skin-dark .dash-net, html.app-skin-dark .dash-metric {
    background: color-mix(in srgb, var(--tone) 12%, #1b2337); border-color: color-mix(in srgb, var(--tone) 30%, #1b2337); }
html.app-skin-dark .dash-tile-icon { background: color-mix(in srgb, var(--tone) 22%, #1b2337); }
html.app-skin-dark .dash-legend li { border-color: #2b3348; }
html.app-skin-dark .dash-note { background: #1e2c4a; color: #c7d6f5; }