html {
font-size: 14px;
}
/* This stylesheet positions and sizes; the palette itself lives in s2-tokens.css,
which loads after it and owns every colour decision. */
@media (min-width: 768px) {
html {
font-size: 16px;
}
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem var(--s2-surface-1), 0 0 0 0.25rem var(--s2-focus-ring);
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
.app-brand {
display: inline-flex;
align-items: center;
gap: .7rem;
text-decoration: none;
}
.app-brand-logo {
width: 42px;
height: 42px;
object-fit: contain;
filter: drop-shadow(0 .25rem .45rem rgba(0, 0, 0, .18));
}
.app-brand-text {
display: inline-flex;
flex-direction: column;
line-height: 1.05;
}
.app-brand-title {
font-size: 1rem;
font-weight: 700;
letter-spacing: .18rem;
}
.app-brand-subtitle {
font-size: .7rem;
opacity: .88;
}
.app-version-strip {
display: inline-flex;
align-items: center;
gap: .35rem;
flex-wrap: wrap;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.s2-page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.15rem;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:linear-gradient(135deg, var(--s2-theme-accent-soft), var(--bs-body-bg));
}
.s2-page-heading { min-width: 0; }
.s2-page-heading h2 { font-weight: 800; }
.s2-page-kicker { display: block; margin-bottom: .25rem; color:var(--s2-accent-text-strong); font-size: .75rem; font-weight: 800; }
.s2-page-subtitle { color:var(--bs-secondary-color); font-size: .82rem; line-height: 1.7; }
.s2-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.s2-page-actions .btn { white-space: nowrap; }
.s2-icon-button,
.btn-icon { align-items: center; display: inline-flex; justify-content: center; min-height: 2.45rem; min-width: 2.45rem; padding-inline: .55rem; }
.s2-icon-button .bi,
.btn-icon .bi { font-size: 1.1rem; line-height: 1; }
@media (max-width: 767.98px) {
.s2-page-header { align-items: stretch; flex-direction: column; }
.s2-page-actions { justify-content: flex-start; }
}
.s2-client-page {
display: grid;
gap: 1rem;
}
.s2-client-page > .page-header {
background:linear-gradient(135deg, var(--s2-theme-accent) 0%, var(--s2-theme-accent-strong) 100%);
border-radius: var(--s2-radius-xs);
color: var(--s2-accent-on);
box-shadow: 0 .7rem 1.5rem color-mix(in srgb, var(--s2-theme-accent) 25%, transparent);
margin-bottom: 0;
padding: 1.1rem 1.25rem;
}
.s2-client-page > .page-header .btn-outline-secondary,
.s2-client-page > .page-header .btn-outline-light {
border-color:rgba(255, 255, 255, .6);
color: var(--s2-accent-on);
}
.s2-client-page > .page-header .btn-outline-secondary:hover,
.s2-client-page > .page-header .btn-outline-light:hover {
background: var(--s2-accent-on);
color:var(--s2-accent-text-strong);
}
/* The page header's shape lives in s2-tokens.css: the shell marks the element that carries the page
title as .s2-page-header, so the panel, its radius and the title's size are defined once. */
.s2-surface-form,
.s2-client-page > .rtl-wrap {
background:var(--bs-body-bg);
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
box-shadow: var(--s2-shadow-1);
padding: 1.2rem;
}
.s2-client-page > .rtl-wrap {
display: grid;
gap: 1rem;
}
.s2-surface-form > .mb-3 + .row,
.s2-surface-form > .row + .mb-3 {
margin-top: .25rem;
}
.s2-surface-form .form-label,
.s2-filter-surface .form-label {
color:var(--bs-secondary-color);
font-size: .84rem;
font-weight: 650;
margin-bottom: .35rem;
}
.s2-surface-form .form-text {
font-size: .8rem;
line-height: 1.5;
}
.s2-surface-form > .btn,
.s2-surface-form > a.btn {
margin-top: .75rem;
}
.s2-filter-surface,
.data-list-filter-panel {
background:var(--s2-theme-accent-soft);
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
padding: 1rem;
}
.s2-table-surface,
.table-container {
border:1px solid var(--s2-theme-accent-border);
}
.s2-table-shell {
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
overflow: auto;
}
.s2-table-shell .table {
margin-bottom: 0;
}
.s2-table-shell .table thead th {
background:var(--s2-theme-accent-soft);
border-bottom-color:var(--s2-theme-accent-border);
color:var(--bs-emphasis-color);
white-space: nowrap;
}
.s2-client-page .alert {
border-radius: var(--s2-radius-xs);
}
/* `.card` and the header corners now belong to the token layer (s2-tokens.css),
which drives Bootstrap's own card variables; a rule here would fight it. */
.card-header {
background:linear-gradient(135deg, var(--s2-theme-accent) 0%, var(--s2-theme-accent-strong) 100%);
color: var(--s2-accent-on);
}
/* Operations monitoring dashboard */
.ops-monitor { max-width: 1440px; }
.ops-monitor-hero { display:flex; justify-content:space-between; gap:1.5rem; align-items:stretch; padding:2rem; border-radius: var(--s2-radius-xs); color:var(--s2-info-text); background:linear-gradient(120deg,var(--s2-info-bg),var(--s2-info-bg) 55%,var(--s2-teal-bg)); box-shadow: var(--s2-shadow-1); }
.ops-monitor-hero-content h1 { font-size:clamp(1.7rem,3vw,2.35rem); font-weight:800; margin:.65rem 0 .45rem; }
.ops-monitor-hero-content p { margin:0; color:rgba(255,255,255,.8); }
.ops-monitor-kicker { display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:700; letter-spacing:.02em; color:var(--s2-info-text); }
.ops-monitor-meta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; color:rgba(255,255,255,.72); font-size:.78rem; }
.ops-monitor-meta span { display:inline-flex; align-items:center; gap:.35rem; }
.ops-monitor-overall { min-width:170px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(255,255,255,.25); border-radius: var(--s2-radius-xs); padding:1.25rem; background:rgba(255,255,255,.12); backdrop-filter:blur(8px); }
.ops-overall-icon { width:3.2rem; height:3.2rem; display:grid; place-items:center; border-radius:50%; margin-bottom:.5rem; font-size:1.35rem; background:rgba(255,255,255,.18); }
.ops-monitor-overall span { font-size:.78rem; color:rgba(255,255,255,.75); }
.ops-monitor-overall strong { margin-top:.25rem; font-size:1.35rem; }
.ops-status-success .ops-overall-icon { color:var(--s2-success-text); }.ops-status-warning .ops-overall-icon { color:var(--s2-warning-text); }.ops-status-danger .ops-overall-icon { color:var(--s2-danger-text); }
.ops-summary-card { height:100%; display:flex; align-items:center; gap:.8rem; padding:1rem; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); background:var(--bs-body-bg); box-shadow: var(--s2-shadow-1); }
.ops-summary-card small { display:block; color:var(--bs-secondary-color); font-size:.75rem; }.ops-summary-card strong { display:block; margin-top:.15rem; font-size:1.35rem; }
.ops-summary-icon { width:2.7rem; height:2.7rem; display:grid; place-items:center; border-radius: var(--s2-radius-xs); font-size:1.2rem; }.ops-summary-icon.success{color:var(--s2-success-text);background:var(--s2-success-bg)}.ops-summary-icon.warning{color:var(--s2-warning-text);background:var(--s2-warning-bg)}.ops-summary-icon.info{color:var(--s2-info-text);background:var(--s2-info-bg)}.ops-summary-icon.purple{color:var(--s2-purple-text);background:var(--s2-purple-bg)}
.ops-check-card { overflow:hidden; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); background:var(--bs-body-bg); box-shadow: var(--s2-shadow-1); transition:transform .2s ease,box-shadow .2s ease; }
.ops-check-card:hover { transform:translateY(-3px); box-shadow: var(--s2-shadow-1); }
.ops-check-head { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:1rem 1.15rem; border-bottom:1px solid var(--bs-border-color); background:color-mix(in srgb,var(--bs-secondary-bg) 72%,transparent); }
.ops-check-title { display:flex; align-items:center; gap:.65rem; }.ops-check-title h2 { margin:0; font-size:1rem; font-weight:750; }
.ops-check-icon { width:2.35rem; height:2.35rem; display:grid; place-items:center; border-radius: var(--s2-radius-xs); font-size:1.1rem; }.ops-check-success .ops-check-icon{color:var(--s2-success-text);background:var(--s2-success-bg)}.ops-check-warning .ops-check-icon{color:var(--s2-warning-text);background:var(--s2-warning-bg)}.ops-check-danger .ops-check-icon{color:var(--s2-danger-text);background:var(--s2-danger-bg)}
.ops-check-badge { padding:.3rem .6rem; border-radius: var(--s2-radius-xl); font-size:.7rem; font-weight:700; }.ops-check-success .ops-check-badge{color:var(--s2-success-text);background:var(--s2-success-bg)}.ops-check-warning .ops-check-badge{color:var(--s2-warning-text);background:var(--s2-warning-bg)}.ops-check-danger .ops-check-badge{color:var(--s2-danger-text);background:var(--s2-danger-bg)}
.ops-check-body { min-height:155px; display:flex; flex-direction:column; padding:1.1rem 1.15rem; }.ops-check-body p { margin:0; line-height:1.8; color:var(--bs-secondary-color); font-size:.86rem; }.ops-check-details { display:flex; flex-wrap:wrap; gap:.9rem; margin-top:.8rem; color:var(--bs-secondary-color); font-size:.75rem; }.ops-check-details span { display:inline-flex; align-items:center; gap:.3rem; }
.ops-check-link { align-self:flex-start; margin-top:auto; padding-top:1rem; color:var(--bs-primary-text-emphasis); text-decoration:none; font-size:.78rem; font-weight:700; }.ops-check-link:hover,.ops-check-links a:hover{color:var(--bs-primary-text-emphasis)}.ops-check-link i,.ops-check-links i{margin-right:.25rem}
.ops-check-links { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; padding-top:1rem; }.ops-check-links a { padding:.4rem .6rem; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); color:var(--bs-primary-text-emphasis); text-decoration:none; font-size:.74rem; font-weight:700; }
.ops-monitor-alert { display:flex; align-items:center; gap:.65rem; padding:1rem 1.15rem; border:1px solid var(--s2-warning-border); border-radius: var(--s2-radius-xs); color:var(--s2-warning-text); background:var(--s2-warning-bg); }.ops-monitor-alert i{font-size:1.15rem}
.ops-history { padding:1.25rem; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); background:var(--bs-body-bg); box-shadow: var(--s2-shadow-1); }.ops-section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}.ops-section-heading h2{margin:.25rem 0 0;font-size:1.15rem;font-weight:800}.ops-history-count{padding:.35rem .65rem;border-radius: var(--s2-radius-xl);color:var(--bs-secondary-color);background:var(--bs-secondary-bg);font-size:.75rem}.ops-history-table thead th{color:var(--bs-secondary-color);font-size:.75rem;font-weight:700;border-bottom-width:1px}.ops-history-table tbody td{font-size:.82rem;border-bottom-color:var(--bs-border-color)}
@media (max-width: 767.98px) { .ops-monitor-hero { flex-direction:column; padding:1.35rem; }.ops-monitor-overall { min-width:0; flex-direction:row; justify-content:flex-start; gap:.7rem; padding:.8rem 1rem; }.ops-overall-icon{margin:0}.ops-monitor-overall strong{margin:0 0 0 auto}.ops-monitor-meta{flex-direction:column;gap:.45rem} }
.navbar.bg-primary {
background:linear-gradient(115deg, var(--s2-theme-accent) 0%, var(--s2-theme-accent-strong) 100%) !important;
}
.theme-section-header {
background:linear-gradient(135deg, var(--s2-theme-accent) 0%, var(--s2-theme-accent-strong) 100%) !important;
color: var(--s2-accent-on) !important;
}
.table-container {
background: var(--s2-surface-1);
border-radius: var(--s2-radius-xs);
box-shadow: var(--s2-shadow-1);
padding: 1rem;
}
.table {
margin-bottom: 0;
}
.table thead th {
background-color:var(--s2-theme-accent-soft);
border-color:var(--s2-theme-accent-border);
}
.currency-page-actions,
.currency-list-summary,
.currency-display-selector,
.currency-composition-content {
display: flex;
align-items: center;
gap: .75rem;
}
.currency-list-summary {
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.currency-display-selector {
flex-wrap: wrap;
}
.currency-display-selector .form-select {
width: auto;
max-width: min(100%, 22rem);
}
.currency-composition-card {
margin-top: 1rem;
}
.currency-form-hero {
background:linear-gradient(135deg, var(--s2-theme-accent) 0%, var(--s2-theme-accent-strong) 100%);
border-radius: var(--s2-radius-xs);
color: var(--s2-accent-on);
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
box-shadow: 0 .75rem 1.75rem color-mix(in srgb, var(--s2-theme-accent) 28%, transparent);
}
.currency-form-kicker {
font-size: .84rem;
opacity: .88;
margin-bottom: .35rem;
}
.currency-form-subtitle {
color:rgba(255, 255, 255, .8);
font-size: .92rem;
}
.currency-form-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
border:1px solid rgba(255, 255, 255, .28);
background:rgba(255, 255, 255, .12);
border-radius: var(--s2-radius-xl);
padding: .4rem .7rem;
font-size: .82rem;
white-space: nowrap;
}
.currency-form-card,
.currency-list-card {
background:var(--bs-body-bg);
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
padding: 1.25rem;
box-shadow: var(--s2-shadow-1);
}
.currency-form-section + .currency-form-section {
border-top: 1px solid var(--bs-border-color);
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.currency-form-section-title {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-bottom: 1rem;
}
.currency-form-section-title > i {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 2.25rem;
color:var(--s2-accent-text-strong);
background:var(--s2-theme-accent-soft);
border-radius: var(--s2-radius-xs);
}
.currency-form-section-title h5 {
margin: .08rem 0 .15rem;
}
.currency-form-section-title p {
color:var(--bs-secondary-color);
font-size: .86rem;
margin: 0;
}
.currency-form-card .form-text {
font-size: .8rem;
line-height: 1.5;
}
.currency-form-actions {
display: flex;
flex-wrap: wrap;
gap: .65rem;
border-top: 1px solid var(--bs-border-color);
margin-top: 1.5rem;
padding-top: 1.25rem;
}
.wallet-create-page { max-width: 1180px; margin-inline: auto; }
.wallet-create-hero { align-items: flex-start; }
.wallet-create-hero h1 { font-weight: 800; }
.wallet-create-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.wallet-create-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 1rem; align-items: start; }
.wallet-create-form { min-width: 0; }
.wallet-create-opening-note { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem .85rem; border:1px solid var(--s2-theme-accent-border); border-radius: var(--s2-radius-xs); color:var(--bs-secondary-color); background:var(--s2-theme-accent-soft); font-size: .82rem; line-height: 1.7; }
.wallet-create-opening-note i { color:var(--s2-accent-text-strong); font-size: 1rem; margin-top: .15rem; }
.wallet-create-aside { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.wallet-create-aside-card { padding: 1rem; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); background:var(--bs-tertiary-bg); box-shadow: var(--s2-shadow-1); }
.wallet-create-aside-card-muted { background:var(--bs-body-bg); }
.wallet-create-aside-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; margin-bottom: .7rem; border-radius: var(--s2-radius-xs); color:var(--s2-accent-text-strong); background:var(--s2-theme-accent-soft); }
.wallet-create-aside-card h2 { margin: 0 0 .65rem; font-size: 1rem; font-weight: 800; }
.wallet-create-aside-card p { margin: 0; color:var(--bs-secondary-color); font-size: .82rem; line-height: 1.8; }
.wallet-create-aside-card ul { margin: 0; padding-inline-start: 1.15rem; color:var(--bs-secondary-color); font-size: .82rem; line-height: 2; }
@media (max-width: 900px) {
.wallet-create-grid { grid-template-columns: 1fr; }
.wallet-create-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.wallet-create-hero-actions { justify-content: flex-start; width: 100%; }
.wallet-create-aside { grid-template-columns: 1fr; }
}
.currency-create-page { max-width: 1180px; margin-inline: auto; }
.currency-create-hero { align-items: flex-start; }
.currency-create-hero h1 { font-weight: 800; }
.currency-create-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.currency-create-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); gap: 1rem; align-items: start; }
.currency-create-form { min-width: 0; }
.currency-create-aside { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.currency-create-aside-card { padding: 1rem; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); background:var(--bs-tertiary-bg); box-shadow: var(--s2-shadow-1); }
.currency-create-aside-card-muted { background:var(--bs-body-bg); }
.currency-create-aside-icon { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; margin-bottom: .7rem; border-radius: var(--s2-radius-xs); color:var(--s2-accent-text-strong); background:var(--s2-theme-accent-soft); }
.currency-create-aside-card h2 { margin: 0 0 .65rem; font-size: 1rem; font-weight: 800; }
.currency-create-aside-card p { margin: 0; color:var(--bs-secondary-color); font-size: .82rem; line-height: 1.8; }
.currency-create-aside-card ul { margin: 0; padding-inline-start: 1.15rem; color:var(--bs-secondary-color); font-size: .82rem; line-height: 2; }
@media (max-width: 900px) {
.currency-create-grid { grid-template-columns: 1fr; }
.currency-create-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
.currency-create-hero-actions { justify-content: flex-start; width: 100%; }
.currency-create-aside { grid-template-columns: 1fr; }
}
.customer-form-hero {
background:linear-gradient(135deg, var(--s2-theme-accent) 0%, var(--s2-theme-accent-strong) 100%);
border-radius: var(--s2-radius-xs);
color: var(--s2-accent-on);
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
box-shadow: 0 .75rem 1.75rem color-mix(in srgb, var(--s2-theme-accent) 28%, transparent);
}
.customer-form-kicker {
font-size: .84rem;
opacity: .88;
margin-bottom: .35rem;
}
.customer-form-subtitle {
color:rgba(255, 255, 255, .82);
font-size: .92rem;
}
.customer-form-hero-actions,
.customer-form-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .65rem;
}
.customer-form-badge {
display: inline-flex;
align-items: center;
gap: .4rem;
border:1px solid rgba(255, 255, 255, .28);
background:rgba(255, 255, 255, .12);
border-radius: var(--s2-radius-xl);
padding: .4rem .7rem;
font-size: .82rem;
white-space: nowrap;
}
.customer-profile-form {
background:var(--bs-body-bg);
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
padding: 1.25rem;
box-shadow: var(--s2-shadow-1);
}
.customer-form-section + .customer-form-section {
border-top: 1px solid var(--bs-border-color);
margin-top: 1.5rem;
padding-top: 1.5rem;
}
.customer-form-section-title {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-bottom: 1rem;
}
.customer-form-section-title > i {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 2.25rem;
color:var(--s2-accent-text-strong);
background:var(--s2-theme-accent-soft);
border-radius: var(--s2-radius-xs);
}
.customer-form-section-title h5 {
margin: .08rem 0 .15rem;
}
.customer-form-section-title p {
color:var(--bs-secondary-color);
font-size: .86rem;
margin: 0;
}
.customer-form-subsection {
margin-top: 1.2rem;
padding: 1rem;
border:1px dashed var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:color-mix(in srgb, var(--s2-theme-accent-soft) 42%, var(--bs-body-bg));
}
.customer-form-subsection-title {
display: flex;
align-items: center;
gap: .45rem;
color:var(--s2-accent-text-strong);
font-size: .9rem;
font-weight: 750;
margin-bottom: .8rem;
}
.customer-form-subsection-title span {
color:var(--bs-secondary-color);
font-size: .75rem;
font-weight: 500;
}
.customer-profile-form .contact-row,
.customer-profile-form .balance-row {
margin-inline: 0;
padding: .7rem;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-tertiary-bg);
}
.customer-profile-form .contact-row + .contact-row,
.customer-profile-form .balance-row + .balance-row {
margin-top: .55rem;
}
.customer-form-add-button {
margin-top: .8rem;
}
.customer-form-note {
display: flex;
align-items: flex-start;
gap: .45rem;
margin-top: .85rem;
color:var(--bs-secondary-color);
font-size: .82rem;
}
.customer-form-note i {
color:var(--s2-accent-text-strong);
margin-top: .1rem;
}
.customer-form-readonly-note {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-top: 1.5rem;
padding: .9rem 1rem;
border:1px solid color-mix(in srgb, var(--bs-warning) 38%, var(--bs-border-color));
border-radius: var(--s2-radius-xs);
background:color-mix(in srgb, var(--bs-warning-bg-subtle) 70%, var(--bs-body-bg));
}
.customer-form-readonly-note > i {
color:var(--bs-warning-text-emphasis);
font-size: 1.1rem;
}
.customer-form-readonly-note strong,
.customer-form-readonly-note span {
display: block;
}
.customer-form-readonly-note span {
color:var(--bs-secondary-color);
font-size: .83rem;
margin-top: .15rem;
}
.customer-form-actions {
border-top: 1px solid var(--bs-border-color);
margin-top: 1.5rem;
padding-top: 1.25rem;
}
html[data-bs-theme="dark"] .customer-form-subsection {
background:color-mix(in srgb, var(--s2-theme-accent-soft) 18%, var(--bs-body-bg));
}
html[data-bs-theme="dark"] .customer-profile-form .contact-row,
html[data-bs-theme="dark"] .customer-profile-form .balance-row {
background:var(--bs-secondary-bg);
}
@media (max-width: 767.98px) {
#dashboard-content {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.customer-dashboard-hero {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.customer-dashboard-identity,
.customer-dashboard-actions {
width: 100%;
max-width: 100%;
}
.customer-dashboard-title,
.customer-dashboard-subtitle {
overflow-wrap: anywhere;
}
.customer-dashboard-actions .btn {
flex: 1 1 auto;
min-width: 8rem;
}
.dashboard-stat-card {
min-height: auto;
}
.dashboard-stat-card .card-body {
padding: .85rem;
}
.dashboard-panel .card-header {
gap: .55rem;
flex-wrap: wrap;
}
.customer-balance-share-actions {
width: 100%;
justify-content: flex-start;
}
.customer-balance-share-actions .btn {
flex: 1 1 auto;
}
.customer-balance-grid {
grid-template-columns: 1fr;
}
.dashboard-data-table {
min-width: 42rem;
}
.dashboard-mobile-table {
min-width: 0;
border-collapse: separate;
border-spacing: 0 .65rem;
}
.dashboard-mobile-table thead {
display: none;
}
.dashboard-mobile-table,
.dashboard-mobile-table tbody,
.dashboard-mobile-table tr,
.dashboard-mobile-table td {
display: block;
width: 100%;
}
.dashboard-mobile-table tbody tr {
margin: 0;
padding: .7rem .8rem;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-tertiary-bg);
box-shadow: var(--s2-shadow-1);
}
.dashboard-mobile-table tbody td {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: .75rem;
padding: .38rem 0;
border:0;
text-align: end;
overflow-wrap: anywhere;
}
#dashboard-content .dashboard-mobile-table tbody td.customer-transaction-description {
position: relative;
display: block !important;
min-height: 2.2rem;
padding-inline-end: 6rem;
text-align: end;
background:transparent !important;
}
#dashboard-content .dashboard-mobile-table tbody td.customer-transaction-description::before {
position: absolute;
top: .45rem;
inset-inline-end: 0;
width: 5.25rem;
text-align: start;
}
#dashboard-content .dashboard-mobile-table .customer-transaction-description-text {
display: block;
max-width: none;
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.75;
}
#dashboard-content .dashboard-mobile-table .customer-transaction-description .text-muted {
display: block;
min-width: 0;
white-space: normal;
overflow-wrap: anywhere;
}
.dashboard-mobile-table tbody td::before {
flex: 0 0 6rem;
color:var(--bs-secondary-color);
font-size: .76rem;
font-weight: 700;
text-align: start;
}
.dashboard-mobile-table tbody td:nth-child(1)::before { content: "ردیف"; }
.dashboard-mobile-table tbody td:nth-child(2)::before { content: "تاریخ"; }
.dashboard-mobile-table tbody td:nth-child(3)::before { content: "نوع"; }
.dashboard-mobile-table tbody td:nth-child(4)::before { content: "وضعیت"; }
.dashboard-mobile-table tbody td:nth-child(5)::before { content: "توضیحات"; }
.dashboard-mobile-table tbody td:nth-child(6)::before { content: "ارز"; }
.dashboard-mobile-table tbody td:nth-child(7)::before { content: "مبلغ"; }
.dashboard-mobile-table tbody td:nth-child(8)::before { content: "مانده"; }
.dashboard-mobile-table tbody td:nth-child(9)::before { content: "اصلاح"; }
.dashboard-mobile-table tbody tr td:nth-child(4) > *,
.dashboard-mobile-table tbody tr td:nth-child(9) > * {
margin-inline-start: auto;
}
.dashboard-mobile-table tbody tr td:last-child {
padding-top: .65rem;
border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 60%, transparent);
}
.dashboard-mobile-table tbody tr td:last-child::before {
flex-basis: 6rem;
}
#req .dashboard-mobile-table tbody td:nth-child(3)::before { content: "نوع"; }
#req .dashboard-mobile-table tbody td:nth-child(4)::before { content: "مقدار"; }
#req .dashboard-mobile-table tbody td:nth-child(5)::before { content: "ارز"; }
#req .dashboard-mobile-table tbody td:nth-child(6)::before { content: "وضعیت"; }
#req .dashboard-mobile-table tbody td:nth-child(7)::before { content: "توضیحات"; }
#req .dashboard-mobile-table tbody td:nth-child(8)::before { content: "اقدامات"; }
.dashboard-tracking-group {
overflow: hidden;
}
.dashboard-tracking-group > .card-header {
line-height: 1.7;
white-space: normal;
overflow-wrap: anywhere;
}
.dashboard-tracking-group > .card-body {
padding: .45rem !important;
}
.currency-table { margin-inline: .3rem; border-radius: 1rem !important; overflow: hidden; }
.currency-table > .card-header { padding: .72rem .85rem; }
.currency-table > .card-body { padding: .35rem !important; }
.currency-table .tracking-list-table { border-collapse: separate; border-spacing: 0 .55rem; }
.currency-table .tracking-list-table tbody tr.tracking-list-row {
margin: 0 0 .65rem; padding: .65rem .8rem; border:1px solid color-mix(in srgb, var(--bs-border-color) 82%, transparent);
border-radius: var(--s2-radius-xs); overflow: hidden; background:var(--bs-tertiary-bg); box-shadow: var(--s2-shadow-1);
}
.currency-table .tracking-list-table tbody tr.tracking-list-row td {
gap: 1rem; min-height: 2rem; padding: .42rem .55rem; background:transparent !important; border:0 !important;
}
.currency-table .tracking-list-table tbody tr.tracking-list-row td::before { flex: 0 0 4.6rem; }
.currency-table .tracking-list-table tbody tr.tracking-list-row td:last-child {
align-items: center; justify-content: space-between; padding-top: .7rem;
border-top: 1px solid color-mix(in srgb, var(--bs-border-color) 55%, transparent) !important;
}
.currency-table .tracking-list-table tbody tr.tracking-list-row td:last-child .tracking-action-group {
margin-inline-start: auto;
}
.currency-table .tracking-list-table tbody tr.tracking-list-row td:last-child .tracking-completed-actions {
display: flex; align-items: center; gap: .45rem; margin-inline-start: auto;
}
.customer-balance-share-actions { flex-wrap: wrap; justify-content: flex-end; }
.customer-balance-share-actions .btn { min-width: 2.4rem; }
.customer-balance-share-toast {
position: fixed; inset-inline: 1rem; bottom: 1.25rem; z-index: 2000; padding: .7rem 1rem;
border-radius: var(--s2-radius-xs); color:var(--s2-info-text); background:var(--s2-info-bg); text-align: center; opacity: 0;
transform: translateY(1rem); transition: .2s ease;
}
.customer-balance-share-toast.show { opacity: 1; transform: translateY(0); }
.customer-form-hero {
align-items: flex-start;
flex-direction: column;
padding: 1.1rem;
}
.customer-form-hero-actions {
width: 100%;
}
.customer-profile-form {
padding: 1rem;
}
.customer-profile-form .contact-row,
.customer-profile-form .balance-row {
padding: .65rem;
}
}
.wallet-dashboard-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.35rem 1.45rem;
color: var(--s2-accent-on);
border-radius: var(--s2-radius-xs);
background:linear-gradient(135deg, var(--s2-theme-accent) 0%, var(--s2-theme-accent-strong) 100%);
box-shadow: 0 .75rem 1.75rem color-mix(in srgb, var(--s2-theme-accent) 28%, transparent);
}
.wallet-dashboard-identity {
display: flex;
align-items: center;
gap: .9rem;
min-width: 0;
}
.wallet-dashboard-avatar {
display: grid;
place-items: center;
width: 3.2rem;
height: 3.2rem;
flex: 0 0 3.2rem;
color:var(--s2-accent-text-strong);
background: var(--s2-accent-on);
border-radius: var(--s2-radius-xs);
font-size: 1.35rem;
box-shadow: var(--s2-shadow-1);
}
.wallet-dashboard-kicker {
color:rgba(255, 255, 255, .82);
font-size: .78rem;
font-weight: 700;
}
.wallet-dashboard-kicker span {
margin-inline-start: .3rem;
padding: .1rem .35rem;
border-radius: var(--s2-radius-xs);
background:rgba(255, 255, 255, .16);
}
.wallet-dashboard-subtitle {
color:rgba(255, 255, 255, .82);
font-size: .9rem;
}
.wallet-dashboard-subtitle span {
margin-inline: .3rem;
opacity: .65;
}
.wallet-dashboard-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: .5rem;
}
.wallet-dashboard-actions .btn {
border-radius: var(--s2-radius-xs);
}
.wallet-dashboard-stat {
position: relative;
min-height: 8.4rem;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 1.1rem;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.wallet-dashboard-stat::after {
content: "";
position: absolute;
width: 5rem;
height: 5rem;
inset: auto -1.35rem -1.4rem auto;
border-radius: 50%;
background:var(--wallet-dashboard-tint);
}
.wallet-dashboard-stat > * {
position: relative;
z-index: 1;
}
/* The colours themselves live in s2-tokens.css; these rules only say which token
belongs to which card. No dark counterparts are needed: the tokens are per-theme. */
.wallet-dashboard-stat-balance { --wallet-dashboard-color: var(--s2-metric-teal-text); --wallet-dashboard-tint: var(--s2-metric-teal-bg); }
.wallet-dashboard-stat-transactions { --wallet-dashboard-color: var(--s2-metric-blue-text); --wallet-dashboard-tint: var(--s2-metric-blue-bg); }
.wallet-dashboard-stat-net { --wallet-dashboard-color: var(--s2-metric-amber-text); --wallet-dashboard-tint: var(--s2-metric-amber-bg); }
.wallet-dashboard-stat-icon {
display: grid;
place-items: center;
width: 2.25rem;
height: 2.25rem;
margin-bottom: .65rem;
color:var(--wallet-dashboard-color);
background:var(--wallet-dashboard-tint);
border-radius: var(--s2-radius-xs);
}
.wallet-dashboard-stat-label {
color:var(--bs-secondary-color);
font-size: .82rem;
font-weight: 700;
}
.wallet-dashboard-stat strong {
margin-top: .3rem;
color:var(--bs-emphasis-color);
font-size: 1.35rem;
}
.wallet-dashboard-stat strong small,
.wallet-dashboard-table strong small {
font-size: .74em;
font-weight: 700;
}
.wallet-dashboard-stat-note {
margin-top: .25rem;
color:var(--bs-secondary-color);
font-size: .76rem;
}
.wallet-dashboard-panel {
overflow: hidden;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
box-shadow: var(--s2-shadow-1);
}
.wallet-dashboard-panel .card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .9rem 1.05rem;
color:var(--bs-emphasis-color);
font-weight: 800;
background:var(--s2-theme-accent-soft);
border-bottom-color:var(--s2-theme-accent-border);
}
.wallet-dashboard-panel .card-header span i {
margin-inline-end: .35rem;
color:var(--s2-accent-text-strong);
}
.wallet-dashboard-panel .card-header small {
color:var(--bs-secondary-color);
font-size: .76rem;
font-weight: 600;
}
.wallet-dashboard-panel .card-body {
padding: 1.05rem;
}
.wallet-dashboard-form-actions,
.wallet-dashboard-filter-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .65rem;
}
.wallet-dashboard-form-actions span {
color:var(--bs-secondary-color);
font-size: .8rem;
}
.wallet-dashboard-pagination-note {
color:var(--bs-secondary-color);
font-size: .8rem;
}
.wallet-dashboard-account-list {
display: grid;
gap: .55rem;
}
.wallet-dashboard-account-list > div {
display: grid;
grid-template-columns: minmax(6.5rem, .75fr) minmax(0, 1.5fr);
gap: .65rem;
padding-bottom: .5rem;
border-bottom: 1px solid var(--bs-border-color-translucent);
}
.wallet-dashboard-account-list > div:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.wallet-dashboard-account-list dt {
color:var(--bs-secondary-color);
font-size: .82rem;
font-weight: 700;
}
.wallet-dashboard-account-list dd {
margin: 0;
overflow-wrap: anywhere;
font-size: .9rem;
}
.wallet-dashboard-empty-info {
display: flex;
align-items: center;
justify-content: center;
min-height: 9rem;
flex-direction: column;
gap: .6rem;
color:var(--bs-secondary-color);
text-align: center;
}
.wallet-dashboard-empty-info i {
color:var(--s2-accent-text-strong);
font-size: 1.6rem;
}
.wallet-dashboard-table-header strong {
font-size: .86rem;
}
.wallet-dashboard-table thead th {
padding: .72rem .8rem;
color:var(--bs-secondary-color);
font-size: .8rem;
white-space: nowrap;
background:var(--bs-tertiary-bg);
border-bottom-color:var(--bs-border-color);
}
.wallet-dashboard-table tbody td {
padding: .78rem .8rem;
vertical-align: middle;
}
.wallet-dashboard-table tbody tr:hover {
background:var(--bs-tertiary-bg);
}
.wallet-dashboard-date {
min-width: 10.5rem;
color:var(--bs-secondary-color);
font-size: .84rem;
}
.wallet-dashboard-type {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .5rem;
border-radius: var(--s2-radius-xs);
font-size: .82rem;
font-weight: 700;
}
.wallet-dashboard-type.is-deposit {
color:var(--s2-success-text);
background:var(--s2-success-bg);
}
.wallet-dashboard-type.is-withdraw {
color:var(--bs-danger-text-emphasis);
background:var(--s2-danger-bg);
}
.wallet-dashboard-description {
max-width: 32rem;
color:var(--bs-secondary-color);
}
.wallet-dashboard-stat .is-positive,
.wallet-dashboard-table .is-positive { color:var(--s2-success-text); }
.wallet-dashboard-stat .is-negative,
.wallet-dashboard-table .is-negative { color:var(--s2-danger-text); }
html[data-bs-theme="dark"] .wallet-dashboard-stat {
border-color:var(--s2-info-border);
background:var(--s2-info-bg);
box-shadow: var(--s2-shadow-1);
}
html[data-bs-theme="dark"] .wallet-dashboard-panel {
border-color:var(--s2-info-border);
background:var(--s2-info-bg);
box-shadow: var(--s2-shadow-1);
}
html[data-bs-theme="dark"] .wallet-dashboard-panel .card-header {
background:var(--s2-info-bg);
border-bottom-color:var(--s2-info-border);
}
html[data-bs-theme="dark"] .wallet-dashboard-table thead th,
html[data-bs-theme="dark"] .wallet-dashboard-table tbody tr:hover {
background:var(--s2-info-bg);
}
html[data-bs-theme="dark"] .wallet-dashboard-type.is-deposit {
color:var(--s2-success-text);
background:var(--s2-success-bg);
}
html[data-bs-theme="dark"] .wallet-dashboard-type.is-withdraw {
color:var(--s2-danger-text);
background:var(--s2-danger-bg);
}
@media (max-width: 767.98px) {
.wallet-dashboard-hero {
align-items: flex-start;
flex-direction: column;
padding: 1.1rem;
}
.wallet-dashboard-actions {
justify-content: flex-start;
}
.wallet-dashboard-panel .card-header {
align-items: flex-start;
flex-direction: column;
}
.wallet-dashboard-panel .card-body {
padding: .85rem;
}
.wallet-dashboard-account-list > div {
grid-template-columns: 1fr;
gap: .1rem;
}
}
.currency-list-card {
padding: 1rem;
}
.currency-market-total {
display: inline-flex;
align-items: baseline;
gap: .45rem;
background:var(--s2-theme-accent-soft);
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
padding: .5rem .75rem;
}
.currency-market-total strong {
color:var(--s2-accent-text-strong);
}
.currency-table-shell {
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
overflow: hidden;
/* قفسهٔ جدول قبلاً فقط `overflow: hidden` بود و در عرض موبایل ستون آخر (اقدامات) بیرون از
کادر بریده و بدون اسکرول غیرقابلدسترس میشد. اسکرول افقی جای برش را میگیرد و گوشههای
گرد را هم بههم نمیزند. */
overflow-x: auto;
}
.currency-table-shell thead th {
background:var(--s2-theme-accent-soft);
border-bottom-color:var(--s2-theme-accent-border);
white-space: nowrap;
}
.currency-symbol-chip {
display: inline-flex;
align-items: center;
border-radius: var(--s2-radius-xs);
background:var(--s2-theme-accent-soft);
color:var(--s2-accent-text-strong);
font-weight: 700;
padding: .28rem .55rem;
direction: ltr;
}
.currency-composition-content {
align-items: stretch;
gap: 1.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--bs-border-color);
}
.currency-chart-frame {
position: relative;
flex: 0 0 13rem;
height: 13rem;
}
.currency-chart-legend {
display: flex;
flex: 1 1 16rem;
flex-direction: column;
justify-content: center;
gap: .45rem;
}
.wallets-index-hero,
.wallets-index-summary,
.wallets-index-stat,
.wallets-currency-panel,
.currency-index-stat {
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.wallets-index-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
color: var(--s2-accent-on);
background:linear-gradient(135deg, var(--s2-theme-accent), var(--s2-theme-accent-strong));
}
.wallets-index-hero h2 {
color:inherit;
}
.wallets-index-kicker,
.wallets-index-subtitle {
font-size: .86rem;
}
.wallets-index-kicker {
font-weight: 700;
opacity: .9;
}
.wallets-index-subtitle {
color:rgba(255, 255, 255, .82);
}
.wallets-index-hero-actions,
.wallets-index-summary-content,
.wallets-index-actions {
display: flex;
align-items: center;
gap: .5rem;
}
.wallets-index-hero-actions,
.wallets-index-actions {
flex-wrap: wrap;
}
.wallets-index-stat,
.currency-index-stat {
display: flex;
align-items: center;
gap: .8rem;
min-height: 5.7rem;
padding: 1rem;
}
.wallets-index-stat-icon,
.currency-index-stat-icon {
display: grid;
width: 2.7rem;
height: 2.7rem;
place-items: center;
border-radius: var(--s2-radius-xs);
font-size: 1.18rem;
}
.wallets-index-stat-icon.is-primary,
.currency-index-stat-icon.is-primary {
color:var(--s2-teal-text);
background:var(--s2-teal-bg);
}
.wallets-index-stat-icon.is-success,
.currency-index-stat-icon.is-success {
color:var(--bs-success-text-emphasis);
background:var(--s2-success-bg);
}
.wallets-index-stat-icon.is-info,
.currency-index-stat-icon.is-info {
color:var(--s2-info-text);
background:var(--s2-info-bg);
}
.wallets-index-stat span:not(.wallets-index-stat-icon),
.currency-index-stat span:not(.currency-index-stat-icon) {
display: block;
color:var(--bs-secondary-color);
font-size: .83rem;
}
.wallets-index-stat strong,
.currency-index-stat strong {
display: block;
margin-top: .1rem;
color:var(--bs-emphasis-color);
font-size: 1.4rem;
}
.wallets-index-summary {
padding: 1.15rem;
}
.wallets-index-summary-heading p {
color:var(--bs-secondary-color);
font-size: .88rem;
}
.wallets-index-summary-content {
justify-content: space-between;
flex-wrap: wrap;
margin-top: 1rem;
}
.wallets-currency-panel {
overflow: hidden;
}
.wallets-currency-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .9rem 1.05rem;
border-bottom: 1px solid var(--s2-theme-accent-border);
background:var(--s2-theme-accent-soft);
}
.wallets-currency-panel-label {
color:var(--s2-accent-text-strong);
font-size: .83rem;
font-weight: 700;
}
.wallets-currency-panel-total {
margin-top: .18rem;
color:var(--bs-emphasis-color);
font-size: 1.18rem;
font-weight: 800;
direction: ltr;
text-align: right;
}
.wallets-currency-panel-total span {
color:var(--bs-secondary-color);
font-size: .78rem;
font-weight: 600;
}
.wallets-currency-panel-count,
.wallets-index-code {
display: inline-flex;
align-items: center;
border-radius: var(--s2-radius-xs);
font-size: .8rem;
font-weight: 700;
}
.wallets-currency-panel-count {
padding: .32rem .55rem;
color:var(--s2-accent-text-strong);
background:var(--bs-body-bg);
}
.wallets-index-table thead th {
padding-top: .8rem;
padding-bottom: .8rem;
color:var(--bs-secondary-color);
font-size: .82rem;
white-space: nowrap;
}
.wallets-index-table tbody td {
padding-top: .9rem;
padding-bottom: .9rem;
}
.wallets-index-id-col {
width: 5.5rem;
}
.wallets-index-name-col {
width: 12rem;
}
.wallets-index-account-col {
min-width: 18rem;
}
.wallets-index-balance-col {
width: 11rem;
text-align: left;
white-space: nowrap;
}
.wallets-index-actions-col {
width: 12.25rem;
min-width: 12.25rem;
text-align: left;
}
.wallets-index-account-cell {
color:var(--bs-secondary-color);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.wallets-index-code {
padding: .2rem .5rem;
color:var(--s2-accent-text);
background:var(--s2-theme-accent-soft);
}
.wallets-index-balance {
display: inline-flex;
align-items: baseline;
gap: .3rem;
font-family: var(--bs-font-monospace);
font-size: 1rem;
font-weight: 800;
}
.wallets-index-balance small {
color:var(--bs-secondary-color);
font-family: inherit;
font-size: .75rem;
}
.wallets-index-balance.is-positive {
color:var(--bs-success-text-emphasis);
}
.wallets-index-balance.is-negative {
color:var(--bs-danger-text-emphasis);
}
.wallets-index-actions {
width: 12.25rem;
justify-content: flex-end;
flex-wrap: nowrap;
}
.currency-index-actions-col {
width: 7rem;
}
.currency-index-actions {
display: flex;
justify-content: flex-end;
gap: .45rem;
}
.currency-index-value {
font-family: var(--bs-font-monospace);
font-size: 1.08rem;
font-weight: 800;
}
.currency-index-value.is-positive {
color:var(--bs-success-text-emphasis);
}
.currency-index-value.is-negative {
color:var(--bs-danger-text-emphasis);
}
.currency-index-value.is-zero {
color:var(--bs-secondary-color);
}
html[data-bs-theme="dark"] .currency-index-value.is-positive {
color:var(--s2-success-text);
}
html[data-bs-theme="dark"] .currency-index-value.is-negative {
color:var(--s2-danger-text);
}
html[data-bs-theme="dark"] .wallets-index-stat-icon.is-primary,
html[data-bs-theme="dark"] .currency-index-stat-icon.is-primary {
color:var(--s2-teal-text);
background:var(--s2-info-bg);
}
html[data-bs-theme="dark"] .wallets-index-stat-icon.is-success,
html[data-bs-theme="dark"] .currency-index-stat-icon.is-success {
color:var(--s2-success-text);
background:var(--s2-success-bg);
}
html[data-bs-theme="dark"] .wallets-index-stat-icon.is-info,
html[data-bs-theme="dark"] .currency-index-stat-icon.is-info {
color:var(--s2-info-text);
background:var(--s2-info-bg);
}
html[data-bs-theme="dark"] .wallets-currency-panel-header {
background:var(--s2-info-bg);
}
.currency-dashboard-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 1.45rem;
color: var(--s2-accent-on);
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:linear-gradient(135deg, var(--s2-theme-accent), var(--s2-theme-accent-strong));
box-shadow: var(--s2-shadow-1);
}
.currency-dashboard-kicker,
.currency-dashboard-subtitle,
.currency-dashboard-panel-kicker {
font-size: .84rem;
}
.currency-dashboard-kicker {
margin-bottom: .35rem;
font-weight: 700;
opacity: .9;
}
.currency-dashboard-hero h1 {
color:inherit;
}
.currency-dashboard-symbol {
display: inline-flex;
align-items: center;
padding: .27rem .58rem;
color:var(--s2-accent-text-strong);
border-radius: var(--s2-radius-xs);
background: var(--s2-accent-on);
font-family: var(--bs-font-monospace);
font-size: .85rem;
font-weight: 800;
direction: ltr;
}
.currency-dashboard-subtitle {
margin-top: .4rem;
color:rgba(255, 255, 255, .82);
}
.currency-dashboard-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .5rem;
}
.currency-dashboard-rates {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
overflow: hidden;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.currency-dashboard-rate {
display: flex;
flex-direction: column;
gap: .2rem;
min-height: 5.7rem;
padding: 1rem 1.1rem;
}
.currency-dashboard-rate + .currency-dashboard-rate {
border-inline-start: 1px solid var(--bs-border-color);
}
.currency-dashboard-rate span,
.currency-dashboard-stat > div > span {
color:var(--bs-secondary-color);
font-size: .82rem;
}
.currency-dashboard-rate span i {
margin-left: .25rem;
color:var(--s2-accent-text-strong);
}
.currency-dashboard-rate strong {
color:var(--bs-emphasis-color);
font-family: var(--bs-font-monospace);
font-size: 1.06rem;
}
.currency-dashboard-stat,
.currency-dashboard-panel {
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.currency-dashboard-stat {
display: flex;
align-items: center;
gap: .85rem;
min-height: 7rem;
padding: 1rem;
}
.currency-dashboard-stat-icon {
display: grid;
width: 2.9rem;
height: 2.9rem;
flex: 0 0 2.9rem;
place-items: center;
border-radius: var(--s2-radius-xs);
font-size: 1.22rem;
}
.currency-dashboard-stat-icon.is-wallet {
color:var(--s2-teal-text);
background:var(--s2-teal-bg);
}
.currency-dashboard-stat-icon.is-customers {
color:var(--s2-info-text);
background:var(--s2-info-bg);
}
.currency-dashboard-stat-icon.is-net {
color:var(--bs-success-text-emphasis);
background:var(--s2-success-bg);
}
.currency-dashboard-stat strong {
display: block;
margin-top: .1rem;
font-family: var(--bs-font-monospace);
font-size: 1.32rem;
font-weight: 800;
}
.currency-dashboard-stat small {
display: block;
margin-top: .12rem;
color:var(--bs-secondary-color);
font-size: .77rem;
}
.currency-dashboard-stat strong.is-positive,
.currency-dashboard-amount.is-positive {
color:var(--bs-success-text-emphasis);
}
.currency-dashboard-stat strong.is-negative,
.currency-dashboard-amount.is-negative {
color:var(--bs-danger-text-emphasis);
}
.currency-dashboard-stat strong.is-zero,
.currency-dashboard-amount.is-zero {
color:var(--bs-secondary-color);
}
.currency-dashboard-panel {
overflow: hidden;
}
.currency-dashboard-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.15rem;
border-bottom: 1px solid var(--s2-theme-accent-border);
background:var(--s2-theme-accent-soft);
}
.currency-dashboard-panel-kicker {
color:var(--s2-accent-text-strong);
font-weight: 700;
}
.currency-dashboard-panel-kicker i {
margin-left: .25rem;
}
.currency-dashboard-panel-header h2 {
margin: .1rem 0 0;
color:var(--bs-emphasis-color);
font-size: 1.05rem;
font-weight: 800;
}
.currency-dashboard-count,
.currency-dashboard-type {
display: inline-flex;
align-items: center;
border-radius: var(--s2-radius-xs);
font-size: .79rem;
font-weight: 700;
}
.currency-dashboard-count {
padding: .34rem .58rem;
color:var(--s2-accent-text-strong);
background:var(--bs-body-bg);
}
.currency-dashboard-filter {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
gap: .8rem;
align-items: end;
padding: 1rem 1.15rem;
border-bottom: 1px solid var(--bs-border-color);
}
.currency-dashboard-filter .form-label {
margin-bottom: .35rem;
color:var(--bs-secondary-color);
font-size: .8rem;
}
.currency-dashboard-filter-actions {
display: flex;
gap: .45rem;
}
.currency-dashboard-table thead th {
padding: .8rem 1.15rem;
color:var(--bs-secondary-color);
background:color-mix(in srgb, var(--s2-theme-accent-soft) 58%, var(--bs-body-bg));
font-size: .8rem;
white-space: nowrap;
}
.currency-dashboard-table tbody td {
padding: .85rem 1.15rem;
vertical-align: middle;
}
.currency-dashboard-amount {
font-family: var(--bs-font-monospace);
font-size: 1rem;
font-weight: 800;
}
.currency-dashboard-type {
padding: .25rem .5rem;
color:var(--s2-accent-text-strong);
background:var(--s2-theme-accent-soft);
}
.currency-dashboard-description {
max-width: 25rem;
overflow: hidden;
color:var(--bs-secondary-color);
text-overflow: ellipsis;
white-space: nowrap;
}
.currency-dashboard-empty {
display: flex;
align-items: center;
justify-content: center;
gap: .55rem;
min-height: 7rem;
padding: 1.5rem;
color:var(--bs-secondary-color);
text-align: center;
}
.currency-dashboard-empty i {
color:var(--s2-accent-text-strong);
font-size: 1.3rem;
}
html[data-bs-theme="dark"] .currency-dashboard-stat-icon.is-wallet {
color:var(--s2-teal-text);
background:var(--s2-info-bg);
}
html[data-bs-theme="dark"] .currency-dashboard-stat-icon.is-customers {
color:var(--s2-info-text);
background:var(--s2-info-bg);
}
html[data-bs-theme="dark"] .currency-dashboard-stat-icon.is-net {
color:var(--s2-success-text);
background:var(--s2-success-bg);
}
html[data-bs-theme="dark"] .currency-dashboard-stat strong.is-positive,
html[data-bs-theme="dark"] .currency-dashboard-amount.is-positive {
color:var(--s2-success-text);
}
html[data-bs-theme="dark"] .currency-dashboard-stat strong.is-negative,
html[data-bs-theme="dark"] .currency-dashboard-amount.is-negative {
color:var(--s2-danger-text);
}
html[data-bs-theme="dark"] .currency-dashboard-panel-header {
background:var(--s2-info-bg);
}
@media (max-width: 991.98px) {
.currency-dashboard-hero,
.currency-dashboard-panel-header {
align-items: flex-start;
flex-direction: column;
}
.currency-dashboard-actions {
justify-content: flex-start;
}
.currency-dashboard-rates {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.currency-dashboard-rate:nth-child(3) {
border-inline-start: 0;
border-top: 1px solid var(--bs-border-color);
}
.currency-dashboard-rate:nth-child(4) {
border-top: 1px solid var(--bs-border-color);
}
.currency-dashboard-filter {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575.98px) {
.currency-dashboard-rates,
.currency-dashboard-filter {
grid-template-columns: 1fr;
}
.currency-dashboard-rate + .currency-dashboard-rate,
.currency-dashboard-rate:nth-child(3) {
border-inline-start: 0;
border-top: 1px solid var(--bs-border-color);
}
.currency-dashboard-filter-actions {
flex-wrap: wrap;
}
}
.transactions-hub-hero,
.transactions-hub-section,
.transactions-hub-readonly,
.transactions-hub-context,
.transactions-hub-tip {
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
}
.transactions-hub-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
color: var(--s2-accent-on);
background:linear-gradient(135deg, var(--s2-theme-accent), var(--s2-theme-accent-strong));
box-shadow: 0 .75rem 1.75rem color-mix(in srgb, var(--s2-theme-accent) 28%, transparent);
}
.transactions-hub-hero h1 {
color:inherit;
font-size: clamp(1.4rem, 2.5vw, 2rem);
font-weight: 800;
}
.transactions-hub-hero p {
color:rgba(255, 255, 255, .82);
}
.transactions-hub-kicker {
font-size: .84rem;
font-weight: 700;
opacity: .9;
}
.transactions-hub-hero-actions,
.transactions-hub-context {
display: flex;
align-items: center;
gap: .55rem;
}
.transactions-hub-hero-actions {
flex-wrap: wrap;
}
.transactions-hub-readonly,
.transactions-hub-context,
.transactions-hub-tip {
display: flex;
align-items: center;
gap: .75rem;
padding: .9rem 1rem;
}
.transactions-hub-readonly {
color:var(--s2-warning-text);
border-color:var(--s2-warning-border);
background:var(--s2-warning-bg);
}
.transactions-hub-readonly-icon {
display: grid;
width: 2.45rem;
height: 2.45rem;
flex: 0 0 2.45rem;
place-items: center;
border-radius: var(--s2-radius-xs);
color:var(--s2-warning-text);
background:var(--s2-warning-bg);
}
.transactions-hub-readonly strong {
display: block;
margin-bottom: .1rem;
}
.transactions-hub-readonly div {
font-size: .87rem;
}
.transactions-hub-context {
justify-content: space-between;
flex-wrap: wrap;
color:var(--bs-secondary-color);
background:var(--s2-theme-accent-soft);
font-size: .86rem;
}
.transactions-hub-context span {
display: inline-flex;
align-items: center;
gap: .35rem;
}
.transactions-hub-section {
padding: 1.15rem;
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.transactions-hub-section-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.transactions-hub-section-heading p {
color:var(--bs-secondary-color);
font-size: .88rem;
}
.transactions-hub-count {
padding: .3rem .55rem;
border-radius: var(--s2-radius-xs);
color:var(--s2-accent-text-strong);
background:var(--s2-theme-accent-soft);
font-size: .8rem;
font-weight: 700;
white-space: nowrap;
}
.transactions-hub-card {
--transaction-card-color: var(--s2-accent-text);
--transaction-card-tint: var(--s2-theme-accent-soft);
position: relative;
display: flex;
min-height: 15.5rem;
flex-direction: column;
gap: .8rem;
padding: 1rem;
overflow: hidden;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
color:var(--bs-body-color);
background:linear-gradient(160deg, var(--transaction-card-tint), var(--bs-body-bg) 58%);
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.transactions-hub-card::after {
position: absolute;
inset: auto -1.15rem -1.2rem auto;
width: 5.5rem;
height: 5.5rem;
border-radius: 50%;
background:var(--transaction-card-tint);
content: "";
}
.transactions-hub-card:hover {
color:inherit;
border-color:var(--transaction-card-color);
box-shadow: 0 .75rem 1.5rem color-mix(in srgb, var(--transaction-card-color) 17%, transparent);
transform: translateY(-3px);
}
/* Transaction types: the palette is per-theme in s2-tokens.css, so each card only
maps itself onto its token here and no dark override is needed. */
.transactions-hub-card.is-buy { --transaction-card-color: var(--s2-txn-buy-text); --transaction-card-tint: var(--s2-txn-buy-bg); }
.transactions-hub-card.is-sell { --transaction-card-color: var(--s2-txn-sell-text); --transaction-card-tint: var(--s2-txn-sell-bg); }
.transactions-hub-card.is-exchange { --transaction-card-color: var(--s2-txn-exchange-text); --transaction-card-tint: var(--s2-txn-exchange-bg); }
.transactions-hub-card.is-transfer { --transaction-card-color: var(--s2-txn-transfer-text); --transaction-card-tint: var(--s2-txn-transfer-bg); }
.transactions-hub-card.is-request { --transaction-card-color: var(--s2-txn-request-text); --transaction-card-tint: var(--s2-txn-request-bg); }
.transactions-hub-card-icon {
display: grid;
width: 2.6rem;
height: 2.6rem;
place-items: center;
border-radius: var(--s2-radius-xs);
color:var(--transaction-card-color);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
font-size: 1.25rem;
}
.transactions-hub-card-body {
display: flex;
flex: 1;
flex-direction: column;
}
.transactions-hub-card-title,
.transactions-hub-card h3 {
color:var(--bs-emphasis-color);
font-size: 1.08rem;
font-weight: 800;
}
.transactions-hub-card-subtitle {
margin-top: .12rem;
color:var(--transaction-card-color);
font-size: .82rem;
font-weight: 700;
}
.transactions-hub-card-description,
.transactions-hub-card p {
margin: .55rem 0 0;
color:var(--bs-secondary-color);
font-size: .85rem;
line-height: 1.65;
}
.transactions-hub-card-action {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: .35rem;
color:var(--transaction-card-color);
font-size: .83rem;
font-weight: 800;
}
.transactions-hub-card.is-disabled {
cursor: not-allowed;
filter: grayscale(.3);
opacity: .68;
}
.transactions-hub-tip {
color:var(--bs-secondary-color);
background:var(--bs-body-bg);
}
.transactions-hub-tip > .bi {
display: grid;
width: 2.35rem;
height: 2.35rem;
flex: 0 0 2.35rem;
place-items: center;
border-radius: var(--s2-radius-xs);
color:var(--s2-warning-text);
background:var(--s2-warning-bg);
}
.transactions-hub-tip strong,
.transactions-hub-tip span {
display: block;
}
.transactions-hub-tip strong {
margin-bottom: .12rem;
color:var(--bs-emphasis-color);
}
.transactions-hub-tip span {
font-size: .86rem;
}
html[data-bs-theme="dark"] .transactions-hub-readonly {
color:var(--s2-warning-text);
border-color:var(--s2-warning-border);
background:var(--s2-warning-bg);
}
html[data-bs-theme="dark"] .transactions-hub-readonly-icon,
html[data-bs-theme="dark"] .transactions-hub-tip > .bi {
color:var(--s2-warning-text);
background:var(--s2-warning-bg);
}
@media (max-width: 767.98px) {
.transactions-hub-hero,
.transactions-hub-section-heading {
align-items: flex-start;
flex-direction: column;
}
.transactions-hub-hero-actions {
width: 100%;
}
.transactions-hub-hero-actions .btn {
flex: 1 1 auto;
}
.transactions-hub-card {
min-height: 12.75rem;
}
}
html[data-bs-theme="dark"] {
color-scheme: dark;
}
/* Mobile data tables: keep request/tracking rows readable without horizontal scrolling. */
@media (max-width: 767.98px) {
.data-list-toolbar {
width: 100%;
flex-direction: column;
align-items: stretch;
}
.data-list-toolbar .data-list-filter,
.data-list-toolbar .dropdown,
.data-list-toolbar .form-control,
.data-list-toolbar .form-select,
.data-list-toolbar .btn {
width: 100%;
max-width: none;
}
.mobile-stack-table,
.mobile-stack-table tbody,
.mobile-stack-table tr,
.mobile-stack-table td {
display: block;
width: 100%;
}
.mobile-stack-table thead {
display: none;
}
.mobile-stack-table tbody tr.request-list-row,
.mobile-stack-table tbody tr.tracking-list-row {
padding: .65rem .8rem;
border-bottom: 1px solid var(--bs-border-color);
}
.mobile-stack-table tbody tr.request-list-row td,
.mobile-stack-table tbody tr.tracking-list-row td {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .75rem;
padding: .3rem 0;
border:0;
text-align: left;
overflow-wrap: anywhere;
}
.mobile-stack-table tbody tr.request-list-row td::before,
.mobile-stack-table tbody tr.tracking-list-row td::before {
content: attr(data-label);
flex: 0 0 5rem;
color:var(--bs-secondary-color);
font-size: .78rem;
font-weight: 600;
text-align: right;
}
.mobile-stack-table tbody tr.request-list-row td:last-child,
.mobile-stack-table tbody tr.tracking-list-row td:last-child {
justify-content: flex-start;
padding-top: .55rem;
}
.mobile-stack-table tbody tr.request-list-row td:last-child::before,
.mobile-stack-table tbody tr.tracking-list-row td:last-child::before {
flex-basis: 5rem;
}
.mobile-stack-table .btn-group {
margin-inline-start: auto;
}
}
html[data-bs-theme="dark"] .table-container {
background:var(--s2-info-bg);
box-shadow: var(--s2-shadow-1);
}
html[data-bs-theme="dark"] .s2-surface-form,
html[data-bs-theme="dark"] .s2-client-page > .rtl-wrap {
box-shadow: var(--s2-shadow-1);
}
html[data-bs-theme="dark"] .table {
color: var(--s2-text-1);
}
html[data-bs-theme="dark"] .table thead th {
background-color:var(--s2-theme-accent-soft);
color: var(--s2-text-1);
}
.viewer-portal-hero,
.viewer-balance-card,
.viewer-content-card {
border:1px solid var(--s2-theme-accent-border);
box-shadow: var(--s2-shadow-1);
}
.viewer-portal-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border-radius: var(--s2-radius-xs);
background:linear-gradient(135deg, var(--s2-theme-accent-soft), var(--bs-body-bg) 68%);
}
.viewer-portal-kicker {
margin-bottom: .35rem;
color:var(--s2-accent-text);
font-size: .82rem;
font-weight: 700;
}
.viewer-portal-subtitle {
color:var(--bs-secondary-color);
font-size: .92rem;
}
.viewer-balance-card {
border-inline-start: 4px solid var(--s2-theme-accent) !important;
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
}
.viewer-balance-card .fs-5 {
font-size: 1.2rem !important;
}
.viewer-currency-symbol,
.viewer-notification-icon {
display: inline-grid;
place-items: center;
background:var(--s2-theme-accent-soft);
color:var(--s2-accent-text);
font-weight: 700;
}
.viewer-currency-symbol {
min-width: 2.2rem;
height: 2.2rem;
padding: .25rem .5rem;
border-radius: var(--s2-radius-xs);
}
.viewer-content-card {
overflow: hidden;
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
}
.viewer-content-card .card-header {
padding: 1rem 1rem 0;
background:linear-gradient(180deg, var(--s2-theme-accent-soft), transparent);
}
.viewer-portal-tabs {
padding-bottom: .2rem;
}
.viewer-portal-tabs .nav-link {
border:1px solid transparent;
border-radius: var(--s2-radius-xs);
color:var(--bs-secondary-color);
font-weight: 600;
}
.viewer-portal-tabs .nav-link:hover {
border-color:var(--s2-theme-accent-border);
color:var(--s2-accent-text);
}
.viewer-portal-tabs .nav-link.active {
border-color:var(--s2-theme-accent);
background:var(--s2-theme-accent);
box-shadow: 0 .3rem .7rem color-mix(in srgb, var(--s2-theme-accent) 25%, transparent);
}
.viewer-filter-panel {
padding: 1rem;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--s2-theme-accent-soft);
}
.viewer-filter-panel .form-label {
margin-bottom: .3rem;
color:var(--bs-secondary-color);
font-size: .83rem;
}
.viewer-table-shell {
overflow-x: auto;
overflow-y: hidden;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
}
.viewer-table-shell table {
min-width: 680px;
}
html[dir="ltr"] .viewer-table-shell table {
direction: ltr;
}
html[dir="rtl"] .viewer-table-shell table {
direction: rtl;
}
.viewer-table-shell thead th {
border-bottom-width: 1px;
background:var(--s2-theme-accent-soft);
color:var(--bs-emphasis-color);
font-size: .84rem;
white-space: nowrap;
}
.viewer-table-shell td {
vertical-align: middle;
}
.viewer-type-chip,
.viewer-readonly-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .25rem .55rem;
border-radius: var(--s2-radius-xl);
background:var(--s2-theme-accent-soft);
color:var(--s2-accent-text);
font-size: .8rem;
font-weight: 600;
}
.viewer-readonly-badge {
background:var(--bs-tertiary-bg);
color:var(--bs-secondary-color);
}
.viewer-portal-request-form {
padding: 1rem;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:linear-gradient(135deg, var(--s2-theme-accent-soft), var(--bs-body-bg));
}
.viewer-portal-request-form-title {
display: flex;
align-items: flex-start;
gap: .65rem;
margin-bottom: 1rem;
}
.viewer-portal-request-form-title > i {
display: grid;
place-items: center;
width: 2.3rem;
height: 2.3rem;
color:var(--s2-accent-text);
background:var(--bs-body-bg);
border-radius: var(--s2-radius-xs);
}
.viewer-portal-request-form-title strong,
.viewer-portal-request-form-title span {
display: block;
}
.viewer-portal-request-form-title span {
margin-top: .15rem;
color:var(--bs-secondary-color);
font-size: .82rem;
}
.portal-queue-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
padding: 1.35rem 1.45rem;
border-radius: var(--s2-radius-xs);
color: var(--s2-accent-on);
background:linear-gradient(135deg, var(--s2-theme-accent), var(--s2-theme-accent-strong));
box-shadow: 0 .7rem 1.6rem color-mix(in srgb, var(--s2-theme-accent) 26%, transparent);
}
.portal-queue-kicker,
.portal-queue-hero p {
color:rgba(255, 255, 255, .82);
}
.portal-queue-kicker {
margin-bottom: .25rem;
font-size: .8rem;
font-weight: 700;
}
.portal-queue-hero-actions,
.portal-queue-filter,
.portal-queue-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .55rem;
}
.portal-queue-filter {
padding: .75rem;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
}
.portal-queue-filter .form-select {
width: min(100%, 15rem);
}
.portal-queue-card {
overflow: hidden;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.portal-queue-table thead th {
color:var(--bs-emphasis-color);
font-size: .81rem;
white-space: nowrap;
background:var(--s2-theme-accent-soft);
}
.portal-queue-table td {
vertical-align: middle;
}
.portal-queue-quote-form {
display: grid;
grid-template-columns: minmax(7rem, 1fr) 4.2rem;
gap: .35rem;
min-width: 15rem;
}
.portal-queue-quote-form input[name="StaffNote"] {
grid-column: 1 / -1;
}
.portal-queue-quote-form button {
grid-column: 1 / -1;
}
.viewer-notification-icon {
width: 2.4rem;
height: 2.4rem;
flex: 0 0 2.4rem;
border-radius: var(--s2-radius-xs);
}
@media (max-width: 575.98px) {
.viewer-portal-hero {
align-items: stretch;
flex-direction: column;
}
.viewer-portal-hero .btn {
flex: 1;
}
.viewer-portal-tabs {
flex-wrap: nowrap;
overflow-x: auto;
}
.portal-queue-hero {
align-items: flex-start;
flex-direction: column;
padding: 1.1rem;
}
}
@media print {
.no-print,
nav,
header,
footer {
display: none !important;
}
body {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.card {
box-shadow: none !important;
}
thead {
display: table-header-group;
}
tr {
page-break-inside: avoid;
}
}
.hero {
background:linear-gradient(135deg, var(--s2-info-bg) 0%, var(--s2-surface-1) 100%);
border-radius: var(--s2-radius-xs);
padding: 2rem;
box-shadow: var(--s2-shadow-1);
}
.quick-link {
display: block;
text-decoration: none;
border-radius: var(--s2-radius-xs);
padding: 1.25rem;
background: var(--s2-surface-1);
box-shadow: var(--s2-shadow-1);
transition: transform .15s ease, box-shadow .15s ease;
}
.quick-link:hover {
transform: translateY(-2px);
box-shadow: var(--s2-shadow-1);
}
.home-dashboard-hero,
.home-dashboard-panel,
.home-dashboard-section {
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.customers-index-hero,
.customers-index-filter-panel,
.customers-index-table-panel,
.customers-index-card,
.customers-index-stat {
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.customers-index-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
background:linear-gradient(135deg, var(--s2-theme-accent-soft), var(--bs-body-bg) 68%);
}
.customers-index-hero h2 {
color:var(--bs-emphasis-color);
}
.customers-index-hero p,
.customers-index-filter-heading p {
color:var(--bs-secondary-color);
}
.customers-index-kicker,
.customers-index-card-label {
display: flex;
align-items: center;
gap: .45rem;
color:var(--s2-accent-text);
font-size: .82rem;
font-weight: 700;
}
.customers-index-total {
display: inline-flex;
align-items: center;
gap: .25rem;
margin-inline-start: .35rem;
padding: .2rem .5rem;
border-radius: var(--s2-radius-xl);
color:var(--s2-accent-text);
background:var(--s2-theme-accent-soft);
font-size: .76rem;
}
.customers-index-hero-actions,
.customers-index-actions,
.customers-index-view-toggle,
.customers-index-filter-heading,
.customers-index-pager-top {
display: flex;
align-items: center;
gap: .5rem;
}
.customers-index-hero-actions,
.customers-index-actions {
flex-wrap: wrap;
}
.customers-index-stat {
display: flex;
align-items: center;
gap: .8rem;
min-height: 5.75rem;
padding: 1rem;
}
.customers-index-stat-icon {
display: grid;
width: 2.7rem;
height: 2.7rem;
place-items: center;
border-radius: var(--s2-radius-xs);
background:color-mix(in srgb, currentColor 10%, transparent);
font-size: 1.2rem;
}
.customers-index-stat span:not(.customers-index-stat-icon) {
display: block;
color:var(--bs-secondary-color);
font-size: .83rem;
}
.customers-index-stat strong {
display: block;
margin-top: .1rem;
color:var(--bs-emphasis-color);
font-size: 1.45rem;
}
.customers-index-filter-panel {
padding: 1.15rem;
}
.customers-index-filter-heading {
justify-content: space-between;
margin-bottom: 1rem;
}
.customers-index-view-toggle {
justify-content: flex-end;
color:var(--bs-secondary-color);
font-size: .85rem;
}
.customers-index-pager-top {
justify-content: flex-end;
margin-bottom: 1rem;
}
.customers-index-table-panel {
overflow: hidden;
}
.customers-index-table-panel thead th {
padding-top: .8rem;
padding-bottom: .8rem;
color:var(--bs-secondary-color);
font-size: .82rem;
white-space: nowrap;
}
.customers-index-table-panel tbody td {
padding-top: .9rem;
padding-bottom: .9rem;
}
.customers-index-code {
display: inline-flex;
align-items: center;
padding: .2rem .5rem;
border-radius: var(--s2-radius-xs);
color:var(--s2-accent-text);
background:var(--s2-theme-accent-soft);
font-size: .8rem;
font-weight: 700;
white-space: nowrap;
}
.customers-index-contact-list {
margin: 0;
padding: 0;
list-style: none;
color:var(--bs-secondary-color);
font-size: .88rem;
}
.customers-index-contact-list li + li {
margin-top: .2rem;
}
.customers-index-balance-list {
display: flex;
flex-wrap: wrap;
gap: .35rem;
}
.customers-index-balance-chip {
display: inline-flex;
align-items: center;
gap: .35rem;
padding: .3rem .5rem;
border:1px solid currentColor;
border-radius: var(--s2-radius-xs);
font-size: .8rem;
line-height: 1.2;
}
.customers-index-balance-chip.is-positive {
color:var(--bs-success-text-emphasis);
background:rgba(20, 108, 67, .08);
}
.customers-index-balance-chip.is-negative {
color:var(--bs-danger-text-emphasis);
background:rgba(180, 35, 24, .08);
}
.customers-index-card {
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.customers-index-card:hover {
transform: translateY(-2px);
box-shadow: var(--s2-shadow-1);
}
.customers-index-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding: .9rem 1rem;
color: var(--s2-accent-on);
border-bottom-color:transparent;
background:linear-gradient(135deg, var(--s2-theme-accent), color-mix(in srgb, var(--s2-theme-accent) 78%, var(--s2-accent-deep)));
}
.customers-index-card-header .card-title {
color:inherit;
}
.customers-index-card-header .customers-index-code {
color: var(--s2-accent-on);
background:rgba(255, 255, 255, .16);
}
.customers-index-dashboard-btn {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 2.35rem;
padding: .38rem .55rem .38rem .7rem;
border:1px solid color-mix(in srgb, var(--s2-theme-accent) 38%, var(--s2-accent-on));
border-radius: var(--s2-radius-xs);
color:var(--s2-accent-text-strong);
background:color-mix(in srgb, var(--bs-body-bg) 88%, var(--s2-theme-accent-soft));
box-shadow: 0 .25rem .65rem color-mix(in srgb, var(--s2-theme-accent) 12%, transparent);
font-size: .78rem;
font-weight: 800;
text-decoration: none;
white-space: nowrap;
transition: transform .18s ease, color .18s ease, background .18s ease, box-shadow .18s ease;
}
.customers-index-dashboard-btn:hover,
.customers-index-dashboard-btn:focus-visible {
color: var(--s2-accent-on);
background:var(--s2-theme-accent);
box-shadow: 0 .45rem 1rem color-mix(in srgb, var(--s2-theme-accent) 25%, transparent);
transform: translateY(-1px);
}
.customers-index-dashboard-btn-icon {
display: grid;
width: 1.65rem;
height: 1.65rem;
place-items: center;
border-radius: var(--s2-radius-xs);
color: var(--s2-accent-on);
background:var(--s2-theme-accent);
font-size: .9rem;
}
.customers-index-dashboard-btn-arrow {
margin-inline-start: .1rem;
font-size: .8rem;
opacity: .7;
}
.customers-index-dashboard-btn:hover .customers-index-dashboard-btn-icon,
.customers-index-dashboard-btn:focus-visible .customers-index-dashboard-btn-icon {
color:var(--s2-accent-text);
background: var(--s2-accent-on);
}
.customers-index-card-contacts {
display: grid;
gap: .3rem;
color:var(--bs-secondary-color);
font-size: .88rem;
}
html[data-bs-theme="dark"] .customers-index-balance-chip.is-positive {
color:var(--s2-success-text);
background:rgba(117, 214, 165, .12);
}
html[data-bs-theme="dark"] .customers-index-balance-chip.is-negative {
color:var(--s2-danger-text);
background:rgba(255, 157, 150, .12);
}
@media (max-width: 575.98px) {
.customers-index-hero,
.customers-index-filter-heading,
.customers-index-card-header {
align-items: flex-start;
flex-direction: column;
}
.customers-index-hero-actions,
.customers-index-actions {
width: 100%;
}
.customers-index-card-header .customers-index-actions {
justify-content: stretch;
}
.customers-index-card-header .customers-index-dashboard-btn {
width: 100%;
justify-content: center;
}
.customers-index-hero-actions .btn {
flex: 1 1 auto;
}
.customers-index-view-toggle {
justify-content: space-between;
}
}
.home-dashboard-hero {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
color:var(--bs-emphasis-color);
background:linear-gradient(135deg, var(--s2-theme-accent-soft), var(--bs-body-bg) 68%);
}
.home-dashboard-hero p,
.home-dashboard-section-header p {
color:var(--bs-secondary-color);
}
.home-dashboard-kicker {
color:var(--s2-accent-text);
font-size: .82rem;
font-weight: 700;
margin-bottom: .35rem;
}
.home-dashboard-role {
display: inline-flex;
align-items: center;
gap: .45rem;
padding: .5rem .75rem;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xl);
/* The accent is user-configurable and the chip sits on a 10% tint of it, so accent-on-tint
text fails AA in dark themes for mid-tone accents (e.g. #2563eb on near-black). Use the
body text color, which is contrast-safe against a tint of any accent in both themes, and
keep the accent identity in the border and background. */
color:var(--bs-body-color);
background:color-mix(in srgb, var(--s2-theme-accent) 10%, var(--bs-body-bg));
white-space: nowrap;
}
.home-stat-card {
display: flex;
position: relative;
flex-direction: column;
min-height: 150px;
padding: 1.15rem;
padding-inline-start: 3.5rem;
overflow: hidden;
color:inherit;
text-decoration: none;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-stat-card:hover {
color:inherit;
border-color:var(--s2-theme-accent-border);
box-shadow: var(--s2-shadow-1);
transform: translateY(-2px);
}
.home-stat-icon {
position: absolute;
top: .9rem;
inset-inline-start: 1rem;
font-size: 1.5rem;
opacity: .82;
}
.home-stat-label {
color:var(--bs-secondary-color);
font-size: .86rem;
}
.home-stat-value {
margin-top: .6rem;
font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.home-stat-card small {
margin-top: auto;
color:var(--bs-secondary-color);
}
.home-dashboard-section,
.home-dashboard-panel {
padding: 1.2rem;
}
.home-dashboard-section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.home-dashboard-section-header p {
font-size: .84rem;
}
.home-quick-action,
.home-attention-item {
display: flex;
align-items: center;
gap: .75rem;
min-height: 76px;
padding: .8rem .9rem;
color:inherit;
text-decoration: none;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.home-quick-action:hover,
.home-attention-item:hover {
color:inherit;
border-color:var(--s2-theme-accent-border);
background:var(--s2-theme-accent-soft);
transform: translateY(-1px);
}
.home-quick-action > .bi:first-child {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.45rem;
height: 2.45rem;
color:var(--bs-emphasis-color);
border-radius: var(--s2-radius-xs);
background:var(--s2-theme-accent-soft);
font-size: 1.15rem;
}
.home-quick-action-success > .bi:first-child { color:var(--bs-success-text-emphasis); }
.home-quick-action-primary > .bi:first-child { color:var(--bs-primary-text-emphasis); }
.home-quick-action-info > .bi:first-child { color:var(--bs-info-text-emphasis); }
.home-quick-action-warning > .bi:first-child { color:var(--bs-warning-text-emphasis); }
.home-quick-action-danger > .bi:first-child { color:var(--bs-danger-text-emphasis); }
.home-quick-action span,
.home-attention-item span:not(.home-attention-icon),
.home-activity-item span:last-child {
display: flex;
flex: 1;
flex-direction: column;
gap: .15rem;
}
.home-quick-action small,
.home-attention-item small,
.home-activity-item small {
color:var(--bs-secondary-color);
font-size: .78rem;
}
.home-quick-chevron {
margin-right: auto;
color:var(--bs-secondary-color);
}
.home-attention-list,
.home-activity-list {
display: grid;
gap: .55rem;
}
.home-attention-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background:var(--bs-tertiary-bg);
}
.home-empty-state {
display: flex;
min-height: 170px;
align-items: center;
justify-content: center;
flex-direction: column;
gap: .4rem;
color:var(--bs-secondary-color);
text-align: center;
}
.home-empty-state .bi {
color:var(--bs-success-text-emphasis);
font-size: 2rem;
}
.home-activity-item {
display: flex;
align-items: flex-start;
gap: .65rem;
padding: .5rem 0;
border-bottom: 1px solid var(--bs-border-color-translucent);
}
.home-activity-item:last-child {
border-bottom: 0;
}
.home-activity-dot {
width: .55rem;
height: .55rem;
margin-top: .38rem;
border-radius: 50%;
background:var(--s2-theme-accent);
}
.home-access-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .65rem;
}
.home-access-grid a {
display: flex;
align-items: center;
gap: .5rem;
padding: .75rem;
color:inherit;
text-decoration: none;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
}
.home-access-grid a:hover {
color:var(--s2-accent-text);
border-color:var(--s2-theme-accent-border);
}
@media (max-width: 575.98px) {
.home-dashboard-hero,
.home-dashboard-section-header {
align-items: flex-start;
flex-direction: column;
}
.home-access-grid {
grid-template-columns: 1fr;
}
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color:var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* RTL global support */
html[lang="fa"] {
direction: rtl;
}
body {
text-align: right;
}
html[data-ui-layout="ltr"] body {
text-align: left;
}
.table th, .table td {
text-align: right;
}
html[data-ui-layout="ltr"] .table th,
html[data-ui-layout="ltr"] .table td {
text-align: left;
}
.form-control, .form-select {
text-align: right;
}
html[data-ui-layout="ltr"] .form-control,
html[data-ui-layout="ltr"] .form-select {
direction: ltr;
text-align: left;
}
.input-group {
direction: rtl;
}
html[data-ui-layout="ltr"] .input-group {
direction: ltr;
}
/* Dropdown alignment for RTL */
.dropdown-menu {
text-align: right;
max-width: min(calc(100vw - 1rem), 24rem);
overflow-wrap: anywhere;
}
html[data-ui-layout="rtl"] .dropdown-menu {
inset-inline-start: auto;
inset-inline-end: 0;
text-align: right;
}
html[data-ui-layout="ltr"] .dropdown-menu {
inset-inline-start: 0;
inset-inline-end: auto;
text-align: left;
}
html[data-ui-layout="ltr"] .main-navigation-user-area .dropdown-menu {
inset-inline-start: auto;
inset-inline-end: 0;
}
html[data-ui-layout="rtl"] .main-navigation-user-area .dropdown-menu {
inset-inline-start: auto;
inset-inline-end: 0;
}
.reports-dropdown-menu {
min-width: 18rem;
max-width: min(92vw, 25rem);
}
.reports-dropdown-menu .dropdown-item {
display: flex;
align-items: center;
min-height: 2.6rem;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.5;
}
html[data-ui-layout="ltr"] .reports-dropdown-menu .dropdown-item,
html[data-ui-layout="ltr"] #managementDropdown + .dropdown-menu .dropdown-item,
html[data-ui-layout="ltr"] #managementDropdown + .dropdown-menu .dropdown-header {
text-align: left;
}
/* Bootstrap utility overrides for RTL when default CSS is LTR */
html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; }
html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end { float: left !important; }
.btn-dashboard {
font-size: 1.05rem;
padding: .5rem .9rem;
}
.financial-operation-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.15rem;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:linear-gradient(135deg, var(--s2-theme-accent-soft), var(--bs-body-bg));
}
.financial-operation-header > :first-child {
flex: 1 1 22rem;
min-width: 0;
}
.financial-operation-kicker {
color:var(--s2-accent-text-strong);
font-size: .8rem;
font-weight: 700;
margin-bottom: .25rem;
}
.financial-operation-period-status {
white-space: nowrap;
}
.financial-operation-navigation {
display: flex;
flex: 1 0 100%;
align-items: center;
gap: .75rem;
padding-top: .75rem;
border-top: 1px solid var(--s2-theme-accent-border);
}
.financial-operation-navigation-label {
color:var(--bs-secondary-color);
font-size: .8rem;
font-weight: 700;
white-space: nowrap;
}
.financial-operation-navigation-links {
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.financial-operation-navigation-links .btn {
display: inline-flex;
align-items: center;
gap: .3rem;
}
.financial-operation-summary {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: .75rem;
padding: .85rem 1rem;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-tertiary-bg);
}
.financial-operation-summary > div {
display: flex;
flex-direction: column;
gap: .25rem;
}
.financial-operation-summary span {
color:var(--bs-secondary-color);
font-size: .8rem;
}
.financial-operation-summary strong {
font-variant-numeric: tabular-nums;
}
.financial-operation-actions {
position: sticky;
bottom: .75rem;
z-index: 10;
display: flex;
gap: .5rem;
align-items: center;
padding: .75rem;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:color-mix(in srgb, var(--bs-body-bg) 92%, transparent);
box-shadow: var(--s2-shadow-1);
}
@media (max-width: 767.98px) {
.page-header,
.currency-list-summary {
align-items: stretch;
flex-direction: column;
}
.currency-page-actions {
flex-wrap: wrap;
}
.currency-display-selector,
.currency-display-selector .form-select {
width: 100%;
}
.currency-composition-content {
flex-direction: column;
}
.currency-chart-frame {
align-self: center;
}
.financial-operation-header {
flex-direction: column;
}
.financial-operation-navigation {
align-items: flex-start;
flex-direction: column;
gap: .45rem;
width: 100%;
}
.financial-operation-summary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.financial-operation-actions {
flex-wrap: wrap;
}
}
.navbar-nav .nav-link {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .2rem;
min-width: 92px;
height: 56px;
border-radius: 14px 14px 0 0;
padding: .35rem 1rem .65rem;
margin-inline: .15rem;
margin-top: .3rem;
margin-bottom: -.4rem;
font-size: .9rem;
opacity: .85;
}
@media (max-width: 991.98px) {
.app-brand-subtitle {
display: none;
}
.app-brand-title {
letter-spacing: .12rem;
font-size: .92rem;
}
.app-brand-logo {
width: 36px;
height: 36px;
}
.navbar-collapse {
padding-top: .75rem;
}
.navbar-nav .nav-link {
flex-direction: row;
justify-content: flex-start;
min-width: 0;
height: auto;
margin: 0 0 .25rem;
padding: .7rem .85rem;
border-radius: var(--s2-radius-xs);
}
.navbar-nav .nav-link .bi {
width: 1.35rem;
text-align: center;
}
.navbar-nav .dropdown-menu {
margin-bottom: .5rem;
max-width: 100%;
}
}
.navbar-nav .nav-link .bi {
font-size: 1.1rem;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-item.show > .nav-link {
background-color: var(--s2-surface-1);
color:var(--s2-info-text) !important;
opacity: 1;
box-shadow: var(--s2-shadow-1);
}
.navbar-nav .nav-link:not(.active):hover {
background-color:rgba(255,255,255,.14);
opacity: 1;
}
.nav-date-pill {
appearance: none;
cursor: pointer;
}
@media (min-width: 1200px) {
body.menu-layout-right {
padding-right: 238px;
}
body.menu-layout-right .main-navigation {
position: fixed;
inset: 0 0 0 auto;
width: 222px;
margin: 0 !important;
overflow-y: auto;
z-index: 1030;
}
body.menu-layout-right .main-navigation .container-fluid {
min-height: 100%;
flex-direction: column;
align-items: stretch;
flex-wrap: nowrap;
padding: 1rem .75rem;
}
body.menu-layout-right .main-navigation .navbar-toggler {
align-self: flex-start;
margin: .75rem 0;
}
body.menu-layout-right .main-navigation .navbar-collapse {
display: flex !important;
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
}
body.menu-layout-right .main-navigation .navbar-nav {
flex-direction: column;
width: 100%;
margin: 0 !important;
}
body.menu-layout-right .main-navigation .navbar-nav .nav-link {
flex-direction: row;
justify-content: flex-start;
min-width: 0;
height: auto;
margin: 0 0 .25rem;
padding: .7rem .85rem;
border-radius: var(--s2-radius-xs);
}
body.menu-layout-right .main-navigation .navbar-nav .nav-link .bi {
width: 1.35rem;
text-align: center;
}
body.menu-layout-right .main-navigation-user-area {
width: 100%;
justify-content: space-between;
margin-top: auto;
}
body.menu-layout-right .main-navigation .dropdown-menu {
max-width: min(85vw, 24rem);
}
}
.data-list-toolbar {
display: flex;
align-items: end;
flex-wrap: wrap;
gap: .5rem;
}
.data-list-filter {
display: flex;
align-items: center;
gap: .4rem;
}
.data-list-filter .form-label {
margin: 0;
white-space: nowrap;
font-size: .85rem;
}
.data-list-filter .form-control,
.data-list-filter .form-select {
min-width: 11rem;
}
.data-list-result {
color:var(--bs-secondary-color);
font-size: .85rem;
white-space: nowrap;
}
.data-list-table thead th {
position: sticky;
top: 0;
z-index: 1;
background-color:var(--bs-tertiary-bg);
box-shadow: inset 0 -1px var(--bs-border-color);
}
.s2-customer-selector {
display: flex;
}
.s2-customer-selector > .form-control {
min-width: 0;
}
.s2-customer-selector > .dropdown-menu {
inset: auto 0 auto 0;
top: 100%;
max-height: 18rem;
overflow-y: auto;
}
@media (max-width: 767.98px) {
.data-list-toolbar {
width: 100%;
align-items: stretch;
}
.data-list-filter {
width: 100%;
}
.data-list-filter .form-control,
.data-list-filter .form-select {
min-width: 0;
flex: 1;
}
.data-list-result {
width: 100%;
}
}
.s2-sortable-header {
cursor: pointer;
user-select: none;
white-space: nowrap;
}
/*
* The sortable header keeps aria-sort on the | (the only element that may carry it) and
* delegates the interaction to this inner button, which must look like plain header text.
*/
.s2-sortable-header .s2-sort-trigger {
all: unset;
display: block;
width: 100%;
cursor: pointer;
text-align: inherit;
white-space: nowrap;
}
.s2-sortable-header .s2-sort-trigger:focus-visible {
outline: 2px solid var(--s2-theme-accent);
outline-offset: 2px;
border-radius: var(--s2-radius-xs);
}
.s2-sortable-header::after {
content: "↕";
display: inline-block;
margin-inline-start: .35rem;
color:var(--bs-secondary-color);
font-size: .8em;
}
.s2-sortable-header[aria-sort="ascending"]::after {
content: "↑";
color:var(--s2-accent-text-strong, var(--bs-primary));
}
.s2-sortable-header[aria-sort="descending"]::after {
content: "↓";
color:var(--s2-accent-text-strong, var(--bs-primary));
}
.s2-sortable-header:focus-visible {
outline: 2px solid var(--s2-theme-accent, var(--bs-primary));
outline-offset: -2px;
}
/* Authentication pages intentionally do not use the authenticated navigation shell. */
.auth-page {
min-height: calc(100vh - 11rem);
display: grid;
place-items: center;
padding: 2rem 0 3rem;
}
.auth-shell {
width: min(100%, 940px);
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
overflow: hidden;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: 0 1.5rem 3rem color-mix(in srgb, var(--bs-emphasis-color) 12%, transparent);
}
.auth-shell-compact {
width: min(100%, 820px);
}
.auth-intro {
padding: clamp(2rem, 5vw, 4.25rem);
color: var(--s2-accent-on);
background:linear-gradient(145deg, var(--s2-theme-accent), var(--s2-theme-accent-strong));
}
.auth-brand-mark {
width: 3.5rem;
height: 3.5rem;
display: grid;
place-items: center;
margin-bottom: 2rem;
border:1px solid rgba(255,255,255,.35);
border-radius: var(--s2-radius-xs);
background:rgba(255,255,255,.16);
font-size: 1.65rem;
}
.auth-eyebrow {
display: block;
margin-bottom: .7rem;
color:rgba(255,255,255,.78);
font-size: .82rem;
font-weight: 700;
letter-spacing: .03em;
}
.auth-intro h1 {
margin-bottom: 1rem;
font-size: clamp(1.7rem, 3vw, 2.35rem);
font-weight: 800;
}
.auth-intro p {
max-width: 31rem;
margin-bottom: 2rem;
color:rgba(255,255,255,.88);
line-height: 1.9;
}
.auth-trust-list {
display: grid;
gap: .85rem;
color:rgba(255,255,255,.92);
font-size: .9rem;
}
.auth-trust-list div {
display: flex;
align-items: center;
gap: .55rem;
}
.auth-trust-list i {
color:var(--s2-success-text);
font-size: 1.1rem;
}
.auth-form-panel {
padding: clamp(2rem, 5vw, 4.25rem);
background:var(--bs-body-bg);
}
.auth-form-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.auth-form-heading h2 {
margin: .25rem 0 0;
font-size: 1.55rem;
font-weight: 800;
}
.auth-form-icon {
width: 3rem;
height: 3rem;
display: grid;
place-items: center;
flex: 0 0 auto;
border-radius: var(--s2-radius-xs);
color:var(--s2-accent-text-strong);
background:var(--s2-theme-accent-soft);
font-size: 1.35rem;
}
.auth-form .input-group-text {
min-width: 3rem;
justify-content: center;
color:var(--s2-accent-text-strong);
background:var(--s2-theme-accent-soft);
border-color:var(--s2-theme-accent-border);
}
.auth-form .form-control:focus {
border-color:var(--s2-theme-accent);
box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--s2-theme-accent) 18%, transparent);
}
.auth-password-toggle {
border-color:var(--bs-border-color);
}
.auth-submit {
min-height: 3.25rem;
margin-top: .5rem;
font-weight: 700;
}
.auth-security-note {
display: flex;
gap: .55rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--bs-border-color);
color:var(--bs-secondary-color);
font-size: .78rem;
line-height: 1.8;
}
.auth-security-note i {
color:var(--s2-accent-text-strong);
}
.auth-mfa-input {
letter-spacing: .35em;
font-variant-numeric: tabular-nums;
}
html[data-bs-theme="dark"] .auth-shell {
box-shadow: var(--s2-shadow-1);
}
@media (max-width: 767.98px) {
.auth-page {
min-height: auto;
padding: 1rem 0 2rem;
}
.auth-shell {
grid-template-columns: 1fr;
border-radius: var(--s2-radius-xs);
}
.auth-intro,
.auth-form-panel {
padding: 1.65rem;
}
.auth-intro p {
margin-bottom: 1.25rem;
}
.auth-trust-list {
gap: .55rem;
}
}
.management-dashboard-hero,
.management-dashboard-range,
.management-dashboard-filter,
.management-panel-heading,
.management-queue-list a,
.management-operation-list > div {
display: flex;
align-items: center;
}
.management-dashboard-hero {
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:linear-gradient(135deg, var(--s2-theme-accent-soft), var(--bs-body-bg));
}
.management-dashboard-hero > div:first-child > span,
.management-panel-heading > div > span {
color:var(--s2-accent-text-strong);
font-size: .8rem;
font-weight: 800;
}
.management-dashboard-hero h1,
.management-panel-heading h2 {
margin: .25rem 0;
font-weight: 800;
}
.management-dashboard-hero p,
.management-panel-heading span,
.management-kpi small,
.management-queue-list small {
color:var(--bs-secondary-color);
}
.management-dashboard-range {
gap: .45rem;
padding: .65rem .8rem;
border:1px solid var(--s2-theme-accent-border);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
font-size: .85rem;
white-space: nowrap;
}
.management-dashboard-filter {
flex-wrap: wrap;
gap: .75rem;
padding: 1rem;
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-tertiary-bg);
}
.management-dashboard-filter > div { min-width: 12rem; }
.management-dashboard-filter label { display: block; margin-bottom: .3rem; font-size: .8rem; font-weight: 700; }
.management-kpi,
.management-panel,
.management-report-hub {
border:1px solid var(--bs-border-color);
border-radius: var(--s2-radius-xs);
background:var(--bs-body-bg);
box-shadow: var(--s2-shadow-1);
}
.management-kpi {
display: flex;
min-height: 145px;
flex-direction: column;
gap: .55rem;
padding: 1.15rem;
}
.management-kpi > span { color:var(--bs-secondary-color); font-size: .87rem; font-weight: 700; }
.management-kpi > strong { font-size: clamp(1.45rem, 3vw, 2rem); font-variant-numeric: tabular-nums; }
.management-kpi > small { margin-top: auto; }
.management-kpi-link { color:inherit; text-decoration: none; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.management-kpi-link:hover { color:inherit; border-color:var(--s2-theme-accent-border); box-shadow: var(--s2-shadow-1); transform: translateY(-1px); }
.kpi-profit { border-top: .25rem solid var(--bs-success); }
.kpi-operations { border-top: .25rem solid var(--bs-primary); }
.kpi-queue { border-top: .25rem solid var(--bs-warning); }
.management-panel { padding: 1.15rem; }
.management-panel-heading { justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.management-panel-heading h2 { font-size: 1.15rem; }
.management-panel-heading > strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.management-report-hub { padding: 1.15rem; }
.management-report-hub-icon { color:var(--s2-accent-text-strong); font-size: 1.45rem; }
.management-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .7rem; }
.management-report-card { display: flex; align-items: center; gap: .7rem; min-height: 4rem; padding: .75rem; color:inherit; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); background:var(--bs-tertiary-bg); font-weight: 700; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
.management-report-card:hover { color:inherit; border-color:var(--s2-theme-accent-border); background:var(--s2-theme-accent-soft); transform: translateY(-1px); }
.management-report-card > span:nth-child(2) { flex: 1; }
.management-report-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: var(--s2-radius-xs); background:var(--bs-body-bg); font-size: 1.05rem; }
.management-operation-list { display: grid; gap: .9rem; }
.management-operation-list > div { display: grid; grid-template-columns: minmax(6rem, 1fr) auto minmax(7rem, 2fr) 2.5rem; gap: .65rem; }
.management-operation-list > a { display: grid; grid-template-columns: minmax(6rem, 1fr) auto minmax(7rem, 2fr) 2.5rem; gap: .65rem; align-items: center; color:inherit; text-decoration: none; }
.management-operation-list > a:hover { color:inherit; }
.management-operation-list span { font-weight: 700; }
.management-operation-list strong,
.management-operation-list small { font-variant-numeric: tabular-nums; text-align: left; }
.management-operation-list .progress { height: .55rem; background:var(--bs-tertiary-bg); }
.management-queue-list { display: grid; gap: .55rem; }
.management-queue-list a { gap: .7rem; min-height: 4.2rem; padding: .7rem; color:inherit; text-decoration: none; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); transition: transform .16s ease, border-color .16s ease, background-color .16s ease; }
.management-queue-list a:hover { color:inherit; border-color:var(--s2-theme-accent-border); background:var(--s2-theme-accent-soft); transform: translateY(-1px); }
.management-queue-list a > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: .15rem; }
.management-queue-list b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.queue-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: var(--s2-radius-xs); font-size: 1.1rem; }
.management-panel-link { display: inline-block; margin-top: 1.15rem; color:var(--s2-accent-text-strong); font-size: .86rem; font-weight: 700; text-decoration: none; }
.management-panel-link:hover { color:var(--s2-accent-text); }
.management-trend-panel { overflow: hidden; }
.management-trend-state { margin: 0; padding: 1rem; border:1px dashed var(--bs-border-color); border-radius: var(--s2-radius-xs); color:var(--bs-secondary-color); background:var(--bs-tertiary-bg); }
.management-trend-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.75rem, 1fr)); gap: .65rem; align-items: end; min-height: 13rem; padding: 0; margin: 0; list-style: none; }
.management-trend-chart li { display: grid; grid-template-rows: minmax(7.5rem, 1fr) auto auto auto; gap: .28rem; min-width: 0; text-align: center; }
.management-trend-bar-wrap { display: flex; align-items: end; min-height: 7.5rem; padding: .35rem; border-radius: .55rem .55rem .3rem .3rem; background:var(--bs-tertiary-bg); }
.management-trend-bar { display: block; width: 100%; min-height: .45rem; border-radius: .4rem .4rem .18rem .18rem; background:linear-gradient(180deg, var(--s2-theme-accent), var(--s2-theme-accent-strong)); }
.management-trend-chart strong { font-variant-numeric: tabular-nums; }
.management-trend-chart time { overflow: hidden; color:var(--bs-secondary-color); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.management-trend-chart small { overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
html[data-ui-layout="ltr"] .management-operation-list strong,
html[data-ui-layout="ltr"] .management-operation-list small { text-align: right; }
html[data-ui-layout="ltr"] .management-panel-link .bi-arrow-left,
html[data-ui-layout="ltr"] .management-queue-list .bi-chevron-left,
html[data-ui-layout="ltr"] .management-report-card .bi-arrow-left { display: inline-block; transform: rotate(180deg); }
@media (max-width: 767.98px) {
.management-dashboard-hero { align-items: flex-start; flex-direction: column; padding: 1.2rem; }
.management-dashboard-range { white-space: normal; }
.management-dashboard-filter { align-items: stretch; flex-direction: column; }
.management-dashboard-filter > div { min-width: 0; }
.management-report-grid { grid-template-columns: 1fr; }
.management-trend-chart { grid-template-columns: repeat(auto-fit, minmax(4.9rem, 1fr)); }
.management-operation-list > div { grid-template-columns: minmax(5.5rem, 1fr) auto; }
.management-operation-list .progress { grid-column: 1 / -1; }
.management-operation-list small { grid-column: 2; grid-row: 1; }
}
.data-quality-page { max-width: 1440px; }
.data-quality-hero { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.7rem; border:1px solid var(--s2-theme-accent-border); border-radius: var(--s2-radius-xs); background:linear-gradient(135deg,var(--s2-theme-accent-soft),var(--bs-body-bg)); }
.data-quality-kicker { color:var(--s2-accent-text-strong); font-size:.8rem; font-weight:800; }.data-quality-hero h1 { margin:.35rem 0; font-weight:800; }.data-quality-hero p { margin:0; color:var(--bs-secondary-color); }
.data-quality-checked-at { padding:.7rem .85rem; border:1px solid var(--s2-theme-accent-border); border-radius: var(--s2-radius-xs); color:var(--bs-secondary-color); background:var(--bs-body-bg); font-size:.8rem; white-space:nowrap; }
.data-quality-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.data-quality-summary > div { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); background:var(--bs-body-bg); }.data-quality-summary span { color:var(--bs-secondary-color); font-size:.84rem; }.data-quality-summary strong { font-size:1.15rem; }
.data-quality-card { overflow:hidden; border:1px solid var(--bs-border-color); border-top-width:.28rem; border-radius: var(--s2-radius-xs); background:var(--bs-body-bg); box-shadow: var(--s2-shadow-1); }.data-quality-success{border-top-color:var(--bs-success-text-emphasis)}.data-quality-warning{border-top-color:var(--bs-warning)}.data-quality-danger{border-top-color:var(--bs-danger-text-emphasis)}
.data-quality-card header { display:flex; align-items:center; gap:.7rem; padding:1rem; border-bottom:1px solid var(--bs-border-color); }.data-quality-icon { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius: var(--s2-radius-xs); color:var(--s2-accent-text-strong); background:var(--s2-theme-accent-soft); font-size:1.1rem; }.data-quality-card h2 { margin:0 0 .25rem; font-size:1rem; font-weight:800; }.data-quality-card header > strong { margin-right:auto; font-size:1.35rem; font-variant-numeric:tabular-nums; }
.data-quality-body { display:flex; min-height:168px; flex-direction:column; padding:1rem; }.data-quality-body > p { margin:0; color:var(--bs-secondary-color); font-size:.86rem; line-height:1.8; }.data-quality-samples { display:grid; gap:.4rem; padding:0; margin:.85rem 0 0; list-style:none; }.data-quality-samples li { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding:.45rem .55rem; border-radius: var(--s2-radius-xs); background:var(--bs-tertiary-bg); font-size:.75rem; }.data-quality-samples code { direction:ltr; unicode-bidi:plaintext; }.data-quality-samples span { color:var(--bs-secondary-color); }
.data-quality-links { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; padding-top:1rem; }.data-quality-links a { padding:.4rem .6rem; border:1px solid var(--bs-border-color); border-radius: var(--s2-radius-xs); color:var(--s2-accent-text-strong); font-size:.76rem; font-weight:700; text-decoration:none; }.data-quality-links a:hover { color:var(--s2-accent-text); border-color:var(--s2-theme-accent-border); background:var(--s2-theme-accent-soft); }
@media (max-width: 767.98px) { .data-quality-hero { align-items:flex-start; flex-direction:column; }.data-quality-checked-at { white-space:normal; }.data-quality-summary { grid-template-columns:1fr; } }
/* --- Semantic text utilities -----------------------------------------------------------
Bootstrap paints .text-* with the raw palette colour (--bs-{name}-rgb). Measured on this
app those clear WCAG AA in neither theme: #198754 scores 3.89:1 on the light surfaces and
2.65:1 on the dark ones, #dc3545 3.88:1 / 2.65:1, #ffc107 1.63:1 on white, #6c757d 4.44:1
/ 3.28:1. The emphasis tokens are the ones Bootstrap tunes per theme, so point the
utilities at them. */
.text-primary { color:var(--bs-primary-text-emphasis) !important; }
.text-secondary { color:var(--bs-secondary-color) !important; }
.text-success { color:var(--bs-success-text-emphasis) !important; }
.text-danger { color:var(--bs-danger-text-emphasis) !important; }
.text-warning { color:var(--bs-warning-text-emphasis) !important; }
.text-info { color:var(--bs-info-text-emphasis) !important; }
/* Bootstrap paints .btn-outline-* text with the raw palette colour, which clears AA in neither
theme. Measured on this app: #6c757d 4.44:1 on the light surfaces and 3.28:1 in dark, #0d6efd
3.42:1 in dark, #dc3545 3.40:1 in dark. Only the label moves to the per-theme emphasis token;
the border and the hover fill keep the palette colour. */
.btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); }
.btn-outline-secondary { --bs-btn-color: var(--bs-secondary-color); }
.btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); }
.btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); }
.btn-outline-warning { --bs-btn-color: var(--bs-warning-text-emphasis); }
.btn-outline-info { --bs-btn-color: var(--bs-info-text-emphasis); }
/* Bootstrap's code colour is tuned for body copy on a white page; on this app's
layered greys it measures 4.02:1, so the token layer overrides it. */
|