:root { /* ── vault gold theme — global tokens (mirrors wizard-theme vault) ── */ --bg: #f3f1ec; --surface: #ffffff; --surface-alt: #f7f5f1; --field: #f7f5f1; --chip: #f1eee8; --track-bg: #faf8f4; --text: #211d17; --ink: #211d17; --ink-2: #5f584c; --muted: #5f584c; --border: #ebe6dc; --line: #ebe6dc; --nav-bg: #ffffff; --gold: #a9803b; --gold-hover: #946b27; --gold-soft: #f6edda; --accent: #a9803b; --on-accent: #fff8ec; --accent-ink: #946b27; --accent-soft: #f6edda; --accent-ring: rgba(169, 128, 59, .18); --green: #1f7a52; --red: #b23a2b; --amber: #8c6727; --blue: #2f6bbf; /* semantic backgrounds + dark hero (tokenized so theme controls them) */ --green-bg: #e8f5ee; --amber-bg: #fff3d7; --red-bg: #fdecec; --hero-1: #211d17; --hero-2: #3a3023; --hero-ink: #f7eede; --hero-mid: #2e2820; --hero-border: #4a3d28; --hero-empty-1: #2a2118; --hero-empty-2: #3a2c1c; /* cash / treasury navy accent (surface + accent pair, follows theme) */ --cash: #33507a; --cash-strong: #0c447c; --cash-on: #b5d4f4; --cash-soft: #eef1f6; /* soft gold stat-icon gradient (brand surface, follows theme) */ --gold-icon-1: #fff8e8; --gold-icon-2: #f5e4b8; /* category palette (transaction rows / badges) */ --cat-sell: #1f7a52; --cat-sell-bg: #e9f4ee; --cat-buy: #b23a2b; --cat-buy-bg: #f9ebe8; --cat-recv: #2f6bbf; --cat-recv-bg: #ebf1fa; --cat-pay: #7d54b8; --cat-pay-bg: #f1ebfa; --cat-exp: #8c6727; --cat-exp-bg: #f3ead7; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --shadow-sm: 0 2px 5px rgba(72, 53, 28, .05), 0 8px 20px rgba(72, 53, 28, .06); --shadow: 0 2px 4px rgba(72, 53, 28, .04), 0 14px 34px rgba(72, 53, 28, .09); --shadow-lifted: 0 5px 10px rgba(72, 53, 28, .06), 0 20px 42px rgba(72, 53, 28, .13); --transition: 160ms ease; } /* Theme variant: مرکوری — applied app-wide via . Vault is the :root default; this overrides token VALUES when mercury is selected so every page (not just the wizard) reflects the chosen theme. WCAG AA kept on text. */ [data-app-theme="mercury"] { --bg: #f4f6f8; --surface: #ffffff; --surface-alt: #f8fafc; --field: #f8fafc; --chip: #f1f4f7; --track-bg: #f8fafc; --text: #0e1726; --ink: #0e1726; --ink-2: #4d5867; --muted: #4d5867; --border: #e6eaef; --line: #e6eaef; --nav-bg: #ffffff; --gold: #1b2940; --gold-hover: #0e1726; --gold-soft: #eef1f5; --accent: #1b2940; --on-accent: #ffffff; --accent-ink: #97701f; --accent-soft: #faf3e3; --accent-ring: rgba(14, 23, 38, .13); --green: #1f8a5b; --red: #c0392b; --amber: #b97e10; --blue: #2a6fdb; --green-bg: #e8f5ee; --amber-bg: #fdf3df; --red-bg: #fbecea; --hero-1: #1b2433; --hero-2: #0e1726; --hero-ink: #eef2f7; --hero-mid: #141d2c; --hero-border: #2b3852; --hero-empty-1: #222d42; --hero-empty-2: #131c2e; --cash: #2d5aa0; --cash-strong: #1e4785; --cash-on: #cfe0f7; --cash-soft: #eaf1fc; --gold-icon-1: #eef1f5; --gold-icon-2: #d8e0ea; --cat-sell: #1f8a5b; --cat-sell-bg: #e8f5ee; --cat-buy: #c0392b; --cat-buy-bg: #fbecea; --cat-recv: #2a6fdb; --cat-recv-bg: #eaf1fc; --cat-pay: #8a5cc4; --cat-pay-bg: #f2ecfb; --cat-exp: #b97e10; --cat-exp-bg: #f3ead7; } * { box-sizing: border-box; } html { min-height: 100%; } body { min-height: 100%; margin: 0; background: var(--bg); color: var(--text); font-family: Vazirmatn, Tahoma, sans-serif; font-size: 15px; line-height: 1.65; letter-spacing: 0; overflow-x: clip; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; } .app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 18px; background: var(--nav-bg); border-bottom: 1px solid var(--border); } .brand-lockup { display: flex; align-items: center; gap: 10px; } .brand-lockup strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; } .brand-lockup small { display: block; color: var(--muted); font-size: 11px; } .brand-mark, .brand-orb { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; background: var(--gold); } .brand-mark::before, .brand-orb::before { content: ""; width: 14px; height: 14px; border: 2px solid #fff; transform: rotate(45deg); } .brand-mark.large { width: 52px; height: 52px; margin-bottom: 14px; } .brand-orb { background: var(--gold-soft); } .brand-orb::before { border-color: var(--gold); } .page-container { width: min(100%, 920px); margin: 0 auto; padding: 24px 16px calc(160px + env(safe-area-inset-bottom, 0px)); } .hero-heading, .page-title { display: flex; align-items: center; gap: 14px; margin: 0 0 24px; } .hero-heading > div, .page-title > div { flex: 1; min-width: 0; } .hero-heading h1, .page-title h1, .welcome-card h1 { margin: 0; font-size: clamp(27px, 7vw, 38px); font-weight: 850; line-height: 1.25; } .hero-heading p, .welcome-card p, .card-heading p, .receipt-header p { margin: 4px 0 0; color: var(--muted); font-size: 13px; } .eyebrow { display: block; margin-bottom: 3px; color: var(--gold); font-size: 12px; font-weight: 800; } .lux-card, .luxury-panel, .receipt-card, .filter-panel, .transaction-row, .payment-summary, .stat-card, .operation-card, .welcome-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); } .lux-card, .luxury-panel, .receipt-card, .filter-panel { padding: 20px; margin-bottom: 16px; } .card-heading, .receipt-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .section-title { margin-bottom: 16px; } .section-title h2 { margin: 0; font-size: 18px; font-weight: 850; } .section-title p { margin: 3px 0 0; color: var(--muted); font-size: 12px; } .card-heading h2, .receipt-header h2, .ornament-title h2 { margin: 0; font-size: 19px; font-weight: 850; } .gold-icon, .operation-icon, .profile-orb { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px; background: var(--gold-soft); color: var(--gold); } .gold-icon::before, .operation-icon::before, .profile-orb::before, .nav-symbol::before { content: ""; width: 15px; height: 15px; border: 2px solid currentColor; border-radius: 4px; } .tag-icon::before, .gem-icon::before { transform: rotate(45deg); } .user-icon::before, .account-icon::before, .profile-orb::before { border-radius: 50%; } .stepper { position: sticky; top: 64px; z-index: 20; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: -8px -16px 20px; padding: 12px 16px; background: var(--nav-bg); border-bottom: 1px solid var(--border); } .stepper-line { display: none; } .stepper-item { display: grid; gap: 4px; color: var(--muted); font-weight: 750; } .stepper-item span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 1px solid var(--border); font-size: 13px; } .stepper-item small { font-size: 11px; } .stepper-item.is-active { color: var(--text); } .stepper-item.is-active span, .stepper-item.is-complete span { color: #fff; background: var(--gold); border-color: var(--gold); } /* Wizard stepper (form.html): completed mark drawn as a CSS character, not an SVG — prevents the oversized checkmark that was breaking page placement. */ .wizard-shell .step .dot-check { display: none !important; } /* completed step = filled gold circle keeping its number; no checkmark */ /* Steps hide by default (no .wizard-ready dependency) so a JS-less/stale-JS render shows only the active step instead of dumping everything flat. */ .form-step { display: none; } .form-step.is-active { display: block; } .wizard-ready .form-step.is-active { animation: stepIn 150ms ease-out; } @keyframes stepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .field { min-width: 0; margin-bottom: 14px; } label { display: block; margin-bottom: 6px; color: #4e4e4e; font-size: 13px; font-weight: 750; } .field-label { margin-bottom: 7px; color: #4e4e4e; font-size: 13px; font-weight: 750; } .required-mark { margin-inline-start: 2px; color: var(--red); font-weight: 900; } .is-client-invalid { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 8px; } .draft-actions { display: inline-flex; align-items: center; gap: 8px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select, textarea { width: 100%; min-height: 52px; border: 1px solid #d8d6d0; border-radius: 8px; background: #fff; color: var(--text); padding: 11px 13px; font-size: 16px; } input[data-jalali-date], input[data-jalali-datetime] { text-align: left; } textarea { min-height: 96px; resize: vertical; } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(173,123,34,.12); } .input-suffix { position: relative; } .input-suffix input { padding-left: 70px; width: 100%; } .input-suffix span { position: absolute; left: 10px; top: 50%; color: var(--muted); font-size: 12px; font-weight: 750; transform: translateY(-50%); pointer-events: none; } .operation-selector ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; } .operation-selector label { display: grid; place-items: center; gap: 5px; min-height: 76px; margin: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer; } .operation-selector label::before { content: ""; width: 18px; height: 18px; border: 2px solid var(--gold); border-radius: 4px; } .operation-selector label:has(input[value="buy"])::before { transform: rotate(45deg); } .operation-selector label:has(input[value="sell"])::before { border-radius: 50%; } .operation-selector label:has(input[value="payment"])::before { border-width: 2px 2px 5px; } .operation-selector label:has(input[value="receipt"])::before { border-style: dashed; } .operation-selector label:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-hover); } .operation-selector input { position: absolute; opacity: 0; pointer-events: none; } /* ─── Operation picker — redesign op-pick cards (icon + label) ─────── */ /* نوع عملیات — full-width navy pill selector that opens a bottom sheet. Radios stay in the DOM (.op-radio-store) so validation, flow config, draft-restore and the review summary keep working. */ .op-select { margin-top: 10px; } .op-trigger { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; cursor: pointer; text-align: right; color: var(--on-accent); background: var(--accent); border: 1.5px solid var(--accent); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: filter var(--transition), transform var(--transition), box-shadow var(--transition); } .op-trigger:hover { filter: brightness(1.07); } .op-trigger:active { transform: translateY(1px); } .op-trigger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); } .op-trigger-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: rgba(255, 255, 255, .12); color: #c2a24a; } .op-trigger-ic:empty { display: none; } .op-trigger-ic .ui-icon { width: 22px; height: 22px; color: inherit; } .op-trigger-text { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 800; color: var(--on-accent); } .op-trigger.is-placeholder .op-trigger-text { font-weight: 700; opacity: .8; } .op-trigger-chev { display: grid; place-items: center; flex: 0 0 auto; color: #c2a24a; } .op-trigger-chev .ui-icon { width: 20px; height: 20px; transform: rotate(-90deg); } .op-select.is-client-invalid .op-trigger, .op-select.is-invalid .op-trigger { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-bg); } /* radios kept reachable for validation/flow but visually hidden (no [hidden]) */ .op-radio-store { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .field-grid, .filter-grid, .detail-grid, .payment-card-fields { display: grid; grid-template-columns: 1fr; gap: 10px; } .segmented { margin: 8px 0 16px; } .segmented ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; } .segmented input[type="radio"], .segmented input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; margin: 0; } .segmented label { display: flex; align-items: center; justify-content: center; min-height: 58px; margin: 0; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: #fff; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; transition: background var(--transition), border-color var(--transition), color var(--transition); } .segmented label:hover { border-color: var(--op-color); background: var(--op-soft); color: var(--op-color); } .segmented label:has(input:checked) { border-color: var(--op-color); color: var(--op-color); background: var(--op-soft); font-weight: 800; } .product-panel { margin-top: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); } .product-panel h3 { margin: 0 0 14px; font-size: 16px; font-weight: 800; } .payment-card { margin-bottom: 12px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 3px rgba(20,20,20,.06); } .payment-card input[type="checkbox"][name$="-DELETE"] { display: none; } .payment-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 9px; border-bottom: 1px solid var(--border); } .payment-card-header strong { font-size: 14px; } .payment-delete { display: grid; place-items: center; width: 42px; min-height: 42px; padding: 0; border: 1px solid #efcaca; border-radius: 8px; background: #fff; color: var(--red); cursor: pointer; } .payment-delete span { width: 13px; height: 15px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 3px 3px; } .payment-delete:disabled { opacity: .35; cursor: not-allowed; } .payment-core { display: grid; grid-template-columns: 1fr; gap: 8px 10px; } @media (min-width: 480px) { .payment-core { grid-template-columns: 1fr 1fr; } } .pc-amount-wrap[hidden] { display: none; } .btn-primary, .btn-secondary, .btn-danger, .ghost-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; border: 1px solid transparent; padding: 9px 16px; font-weight: 800; cursor: pointer; } .btn-primary { color: #fff; background: var(--gold); } .btn-primary:hover { background: var(--gold-hover); } .btn-secondary, .ghost-pill { color: var(--gold); background: #fff; border-color: #d6b97e; } .btn-danger { color: #fff; background: var(--red); } .btn-primary:active, .btn-secondary:active, .btn-danger:active { transform: translateY(1px); } .tall { min-height: 54px; } .compact { min-height: 40px; padding-inline: 13px; white-space: nowrap; } .full { width: 100%; } .wizard-actions { position: fixed; right: 0; bottom: 78px; left: 0; z-index: 60; display: flex; gap: 10px; padding: 12px 16px; background: var(--nav-bg); border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(20,20,20,.06); } .wizard-actions button { min-height: 46px; font-size: 15px; font-weight: 800; border-radius: var(--radius-md); gap: 8px; } .wizard-actions [data-prev-step] { flex: 0 0 34%; } .wizard-actions [data-next-step], .wizard-actions [data-submit-step] { flex: 1 1 auto; } .wizard-actions [data-prev-step] { background: var(--surface-alt); color: var(--text); border-color: var(--border); } .wizard-actions [data-prev-step]:hover { background: #fff; border-color: var(--gold); color: var(--gold-hover); } .wizard-actions .btn-icon { display: inline-flex; } .wizard-actions .btn-icon .ui-icon { width: 18px; height: 18px; } .wizard-actions.is-first-step [data-prev-step] { flex: 0 0 30%; } .receipt-list, .detail-grid { display: grid; gap: 0; margin: 0; } .receipt-list div, .detail-grid div { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); } dt { color: var(--muted); font-size: 13px; } dd { margin: 0; font-weight: 800; text-align: left; } .receipt-total { color: var(--green); font-size: 18px; } dd a { color: var(--gold-hover); text-decoration: underline; text-decoration-color: rgba(167,120,43,.35); } dd a:hover { text-decoration-color: var(--gold-hover); } .telegram-preview { margin-top: 16px; padding: 16px; border: 1px solid #cfe2d7; border-radius: 8px; background: #f7fbf8; white-space: pre-line; } .telegram-preview strong, .telegram-preview span { color: var(--blue); } .welcome-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px; margin-bottom: 18px; } .operation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; } .operation-card { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px; } .operation-card strong { font-size: 16px; font-weight: 800; } .operation-icon { width: 38px; height: 38px; } .stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; } .stat-card { padding: 14px; } .stat-card span, .transaction-row span, .payment-summary span { color: var(--muted); font-size: 12px; } .stat-card strong { display: block; margin-top: 5px; font-size: 22px; font-weight: 850; } .wide-stat { grid-column: 1 / -1; } .receipt-total-card strong { color: var(--green); } .ornament-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 22px 0 12px; } .ornament-title span { display: none; } .ornament-title h2 { font-size: 18px; } .list-stack, .stack-form, .lux-form { display: grid; gap: 10px; } .transaction-row, .payment-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; } .row-medallion { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--op-soft); color: var(--op-color); } .row-medallion .ui-icon { width: 19px; height: 19px; } .row-main { min-width: 0; flex: 1; } .transaction-row strong, .payment-summary strong { display: block; font-weight: 800; } .row-meta { display: grid; justify-items: end; gap: 5px; min-width: 84px; } .badge { display: inline-flex; min-height: 23px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; } .success { color: var(--green); background: var(--green-bg); } .warning { color: var(--amber); background: var(--amber-bg); } .danger, .error { color: var(--red); background: var(--red-bg); } .muted-row { opacity: .65; } /* #معامله_باز — open deal: must read as urgent at a glance, not a subtle badge */ .transaction-row.is-open-deal { border-inline-start: 4px solid var(--red); background: #fdf4f4; } .badge.open-deal { display: flex; width: fit-content; align-items: center; gap: 5px; margin-top: 6px; padding: 3px 10px; color: #fff; background: var(--red); font-size: 11px; font-weight: 800; white-space: nowrap; } .badge.open-deal .ui-icon { width: 13px; height: 13px; } .field-checkbox { display: flex; align-items: center; } .field-checkbox label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 700; } .field-checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--red); } .receipt-line-card { background: var(--surface-alt); box-shadow: none; } .mini-form { display: grid; grid-template-columns: minmax(90px,1fr) auto; gap: 8px; } .inline-form { display: grid; gap: 10px; margin-bottom: 16px; } .danger-zone { padding-top: 16px; border-top: 1px solid var(--border); } .filter-grid { margin: 8px 0; } .messages { display: grid; gap: 8px; margin-bottom: 14px; } .message { border-radius: 8px; padding: 11px 13px; background: #eef7f1; color: var(--green); border: 1px solid currentColor; font-weight: 750; } .errorlist { margin: 5px 0 0; padding: 0; color: var(--red); list-style: none; font-size: 12px; } .empty-state { margin: 0; padding: 22px; color: var(--muted); text-align: center; background: #fff; border: 1px dashed var(--border); border-radius: 8px; } .pagination { display: flex; justify-content: center; gap: 14px; margin-top: 18px; color: var(--muted); } .login-shell { min-height: calc(100vh - 48px); display: grid; place-items: center; } .login-panel { width: min(100%, 420px); } .login-title { margin-bottom: 22px; text-align: center; } .login-title h1 { margin: 0; font-size: 34px; font-weight: 850; } .login-title p { margin: 6px 0 0; color: var(--muted); } .bottom-nav { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; width: min(100%, 920px); margin-inline: auto; box-sizing: border-box; display: grid; grid-template-columns: repeat(5,1fr); height: 78px; padding: 7px 8px; border-top: 1px solid var(--border); background: var(--nav-bg); } .nav-item { display: grid; place-items: center; gap: 2px; color: #5f5f5f; font-size: 11px; font-weight: 750; } .nav-symbol { display: grid; place-items: center; width: 20px; height: 20px; color: currentColor; } .home-symbol::before { transform: rotate(45deg); } .nav-primary { color: var(--gold); } .nav-plus { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gold); } .nav-plus::before, .nav-plus::after { content: ""; position: absolute; width: 18px; height: 3px; border-radius: 99px; background: #fff; } .nav-plus::after { transform: rotate(90deg); } .settings-symbol::before { content: "⚙"; font-size: 20px; } .brand-logo { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--border); flex: 0 0 auto; } .logo-preview { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; } .logo-preview img { width: 64px; height: 64px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--border); } .logo-preview p { margin: 0; color: var(--muted); font-size: 12px; } .settings-form { display: grid; gap: 12px; padding-bottom: 30px; } .settings-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; } .settings-subtabs { grid-template-columns: 1fr 1fr; margin-top: -6px; } .settings-subtabs a { font-size: 13px; min-height: 40px; } .workflow-settings-card .card-heading { margin-bottom: 8px; } .toggle-list { display: grid; gap: 0; } .requirement-toggle { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 62px; margin: 0; border-bottom: 1px solid var(--border); cursor: pointer; } .requirement-toggle:last-child { border-bottom: 0; } .requirement-toggle strong { display: block; color: var(--text); font-size: 14px; } .requirement-toggle small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; } .requirement-toggle input { width: 44px; height: 24px; min-height: 24px; accent-color: var(--gold); } .core-fields-note { padding: 14px 16px; color: #5c4a25; background: #fbf7ee; border: 1px solid #e6d6b5; border-radius: 8px; font-size: 12px; line-height: 1.9; } @media (min-width: 720px) { .page-container { padding-inline: 24px; } .field-grid, .filter-grid, .payment-card-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } .detail-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 18px; } .stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .operation-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .operation-selector ul { grid-template-columns: repeat(4,minmax(0,1fr)); } .inline-form { grid-template-columns: 1fr auto; } .wizard-actions { right: auto; bottom: 16px; left: 50%; width: min(calc(100% - 32px), 920px); transform: translateX(-50%); border: 1px solid var(--border); border-radius: 8px; } } /* Premium visual refinement: shared surfaces, icons, and interaction states. */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ui-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } body { background: radial-gradient(circle at 85% -10%, rgba(195, 158, 91, .15), transparent 34rem), linear-gradient(180deg, #faf7f1 0, var(--bg) 32rem); } .app-header { background: var(--nav-bg); box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 8px 24px rgba(33,29,23,.06); } .brand-mark, .brand-orb { border: 1px solid rgba(255,255,255,.55); border-radius: 12px; background: linear-gradient(145deg, var(--gold), var(--gold-hover)); color: var(--on-accent, #fffaf0); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 7px 16px rgba(112,76,26,.2); } .brand-mark::before, .brand-orb::before, .gold-icon::before, .operation-icon::before, .profile-orb::before, .nav-symbol::before { content: none; } .brand-mark.large .ui-icon { width: 27px; height: 27px; } .brand-orb { background: var(--gold-soft); color: var(--gold-hover); border-color: rgba(167,120,43,.2); } .lux-card, .luxury-panel, .receipt-card, .filter-panel, .transaction-row, .payment-summary, .stat-card, .operation-card, .welcome-card { background: var(--surface); border-color: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .gold-icon, .operation-icon, .profile-orb { border: 1px solid rgba(167,120,43,.2); border-radius: 12px; background: linear-gradient(145deg, #fffaf1, #ecddbf); color: var(--gold-hover); box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(112,76,26,.1); } .profile-orb { width: 44px; height: 44px; } .stepper { background: var(--nav-bg); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), select, textarea { border-color: var(--border); border-radius: var(--radius-sm); background: var(--field); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus, select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 4px rgba(167,120,43,.13), 0 5px 15px rgba(72,53,28,.06); } .operation-selector label { min-height: 86px; border-radius: var(--radius-md); background: linear-gradient(145deg, #fff, #fbf6ed); box-shadow: var(--shadow-sm); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition); } .operation-selector label::before { width: 24px; height: 24px; border: 0; border-radius: 0; background: var(--gold); transform: none !important; mask: var(--operation-icon) center / contain no-repeat; } .operation-selector label:has(input[value="buy"]) { --operation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a2 2 0 0 0 2 1.6H18a2 2 0 0 0 2-1.6L21 8H7'/%3E%3Cpath d='M15 3v6M12 6h6'/%3E%3C/svg%3E"); } .operation-selector label:has(input[value="sell"]) { --operation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13 12 21 3 12V4h8Z'/%3E%3Cpath d='M13 8h7M17 4l4 4-4 4'/%3E%3C/svg%3E"); } .operation-selector label:has(input[value="payment"]) { --operation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h15a2 2 0 0 1 2 2v11H5a2 2 0 0 1-2-2V6a3 3 0 0 1 3-3h11'/%3E%3Cpath d='m12 10 4 4m0-4v4h-4'/%3E%3C/svg%3E"); } .operation-selector label:has(input[value="receipt"]) { --operation-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h15a2 2 0 0 1 2 2v11H5a2 2 0 0 1-2-2V6a3 3 0 0 1 3-3h11'/%3E%3Cpath d='m16 10-4 4m0-4v4h4'/%3E%3C/svg%3E"); } .operation-selector label:has(input:checked) { background: linear-gradient(145deg, #fffaf0, #f0dfbd); box-shadow: inset 0 1px 0 #fff, 0 10px 24px rgba(112,76,26,.14); } .operation-selector label:active { transform: translateY(1px); box-shadow: var(--shadow-sm); } .segmented label, .product-panel, .payment-card, .payment-delete, .core-fields-note { border-radius: var(--radius-md); } .product-panel { background: linear-gradient(145deg, var(--surface-alt), #fffdf9); } .payment-card { box-shadow: var(--shadow-sm); } .payment-delete { background: #fffafa; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .payment-delete span { width: auto; height: auto; border: 0; } .payment-delete:hover { background: #fff0f0; box-shadow: 0 5px 12px rgba(159,69,69,.12); } .btn-primary, .btn-secondary, .btn-danger, .ghost-pill { gap: 7px; border-radius: var(--radius-sm); transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition); } .btn-primary { color: var(--on-accent); background: linear-gradient(145deg, var(--gold), var(--gold-hover)); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 18px rgba(112,76,26,.2); } .btn-primary:hover { background: linear-gradient(145deg, var(--gold-hover), var(--gold)); transform: translateY(-1px); box-shadow: var(--shadow-lifted); } .btn-secondary, .ghost-pill { color: var(--accent-ink); background: var(--surface); border-color: var(--border); box-shadow: 0 3px 9px rgba(72,53,28,.05); } .btn-secondary:hover, .ghost-pill:hover { background: var(--accent-soft); border-color: var(--gold); transform: translateY(-1px); } .btn-danger { background: linear-gradient(145deg, #ad5555, #8f3737); } .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible, .ghost-pill:focus-visible, .operation-card:focus-visible, .transaction-row:focus-visible, .nav-item:focus-visible, .payment-delete:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; } .welcome-card { overflow: hidden; background: radial-gradient(circle at 8% 0%, var(--gold-soft), transparent 15rem), linear-gradient(145deg, var(--surface), var(--gold-soft)); } .operation-card { min-height: 84px; padding: 14px 13px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .operation-card span:last-child { min-width: 0; } .operation-card strong { display: block; } .operation-card small { display: block; margin-top: 1px; color: var(--muted); font-size: 10px; font-weight: 650; white-space: nowrap; } .operation-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lifted); } .operation-card:active { transform: translateY(0); box-shadow: var(--shadow-sm); } .operation-icon { width: 42px; height: 42px; } .stat-card { box-shadow: var(--shadow-sm); } .transaction-row, .payment-summary { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .transaction-row:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: var(--shadow-lifted); } .row-medallion { box-shadow: inset 0 1px 0 rgba(255,255,255,.5); } .bottom-nav { height: 80px; background: var(--nav-bg); box-shadow: 0 -10px 30px rgba(33,29,23,.08); } .nav-item { align-content: center; gap: 3px; min-width: 48px; color: #716a60; border-radius: 14px; transition: color var(--transition), background var(--transition), transform var(--transition); } .nav-item.is-current { color: var(--gold-hover); background: linear-gradient(180deg, rgba(245,234,212,.75), rgba(245,234,212,.18)); } .nav-item:active { transform: scale(.97); } .nav-symbol { width: 22px; height: 22px; } .nav-plus { background: linear-gradient(145deg, #c3974c, #8d6222); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 7px 16px rgba(112,76,26,.25); } .nav-plus::before, .nav-plus::after { content: none; } .nav-plus .ui-icon { width: 22px; height: 22px; stroke-width: 2.1; } @media (hover: none) { .operation-card:hover, .transaction-row:hover, .btn-primary:hover, .btn-secondary:hover, .ghost-pill:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* Second-pass mobile and RTL polish. */ dd, .stat-card strong, .transaction-row strong, .payment-summary strong, .receipt-total { font-variant-numeric: tabular-nums; } .settings-tabs a { min-height: 48px; } @media (max-width: 520px) { .hero-heading { align-items: flex-start; flex-wrap: wrap; } .hero-heading > .compact { min-height: 44px; margin-inline-start: auto; } .payment-summary { align-items: stretch; flex-direction: column; } .payment-summary .mini-form { width: 100%; } .settings-tabs { gap: 6px; } .settings-tabs a { padding-inline: 8px; font-size: 12px; text-align: center; } } @media (max-width: 380px) { .operation-grid { gap: 8px; } .operation-card { gap: 9px; padding-inline: 10px; } .operation-icon { width: 38px; height: 38px; } .operation-card strong { font-size: 14px; } .operation-card small { font-size: 9px; } .nav-item { font-size: 10px; } } /* ─── Payment tracker ─────────────────────────────────────────────────────── */ #payment-tracker { margin-bottom: 16px; padding: 14px 16px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); } .payment-tracker-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; } .payment-tracker-row span { color: var(--muted); } .payment-tracker-row strong { font-variant-numeric: tabular-nums; font-size: 14px; } .payment-tracker-divider { height: 1px; background: var(--border); margin: 6px 0; } .payment-tracker-remaining strong { font-size: 17px; font-weight: 900; } .tracker-zero strong { color: var(--green); } .tracker-positive strong { color: var(--red); } .tracker-negative strong { color: var(--amber); } /* ─── Amount in words (زیرِ فیلدهای پولیِ کلیدی) ────────────────────────── */ .amount-words { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; direction: rtl; font-variant-numeric: normal; } .amount-words[hidden] { display: none; } /* ─── Per-operation accent colors ─────────────────────────────────────────── */ :root { --op-color: var(--gold); --op-hover: var(--gold-hover); --op-soft: var(--gold-soft); --op-shadow: rgba(112,76,26,.18); } [data-op="buy"] { --op-color:#2f6bbf; --op-hover:#1e4f96; --op-soft:#e8f0fc; --op-shadow:rgba(30,70,150,.16); } [data-op="sell"] { --op-color:#2e7d5a; --op-hover:#1e5c40; --op-soft:#e6f5ee; --op-shadow:rgba(20,80,50,.16); } [data-op="payment"] { --op-color:#a03535; --op-hover:#7c2424; --op-soft:#fdeaea; --op-shadow:rgba(130,40,40,.16); } [data-op="receipt"] { --op-color:#2a7a7a; --op-hover:#1d5a5a; --op-soft:#e6f5f5; --op-shadow:rgba(20,90,90,.16); } [data-op="expense"] { --op-color:#8c6727; --op-hover:#6e4f1d; --op-soft:#efe4d2; --op-shadow:rgba(140,103,39,.16); } /* Operation selector: unique per-type color when selected */ .operation-selector label:has(input[value="buy"]:checked) { background:linear-gradient(145deg,#e8f0fc,#cfe0f7); border-color:#2f6bbf; color:#1e4f96; } .operation-selector label:has(input[value="sell"]:checked) { background:linear-gradient(145deg,#e6f5ee,#c9ecdb); border-color:#2e7d5a; color:#1e5c40; } .operation-selector label:has(input[value="payment"]:checked) { background:linear-gradient(145deg,#fdeaea,#f6c9c9); border-color:#a03535; color:#7c2424; } .operation-selector label:has(input[value="receipt"]:checked) { background:linear-gradient(145deg,#e6f5f5,#c5e9e9); border-color:#2a7a7a; color:#1d5a5a; } /* Stepper uses op accent */ .stepper-item.is-active span, .stepper-item.is-complete span { background: var(--op-color); border-color: var(--op-color); } /* Focus ring uses op accent */ #transaction-form input:focus, #transaction-form select:focus, #transaction-form textarea:focus { border-color: var(--op-color); box-shadow: 0 0 0 4px rgba(from var(--op-color) r g b / .12), 0 5px 15px rgba(from var(--op-color) r g b / .06); } /* Primary button uses op accent */ #transaction-form .btn-primary { background: linear-gradient(145deg, color-mix(in srgb, var(--op-color) 85%, white), var(--op-hover)); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 8px 18px var(--op-shadow); } #transaction-form .btn-primary:hover { background: linear-gradient(145deg, var(--op-color), var(--op-hover)); box-shadow: 0 12px 28px var(--op-shadow); } /* Product panels get a colored top border */ .product-panel { border-top: 3px solid var(--op-color); } /* Section card top strip */ .lux-card#gold-operation-section { border-top: 3px solid var(--op-color); } /* Gold total in review */ .review-calc-total { color: var(--op-color) !important; font-size: 20px; } /* Review receipt op badge */ .review-receipt { position: relative; } .review-op-badge { display: inline-flex; align-items: center; margin-bottom: 12px; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: var(--op-soft); border: 1px solid var(--op-color); color: var(--op-hover); font-size: 13px; font-weight: 800; letter-spacing: .02em; } /* Dashboard op cards: unique colors */ .operation-grid .operation-icon { border-radius: 12px; display: grid; place-items: center; border: 1px solid transparent; flex: 0 0 42px; padding: 4px; } .operation-grid a[href*="type=sell"] .operation-icon { background:linear-gradient(145deg,#e6f5ee,#c9ecdb); color:#2e7d5a; border-color:rgba(46,125,90,.2); } .operation-grid a[href*="type=buy"] .operation-icon { background:linear-gradient(145deg,#e8f0fc,#cfe0f7); color:#2f6bbf; border-color:rgba(47,107,191,.2); } .operation-grid a[href*="type=receipt"] .operation-icon { background:linear-gradient(145deg,#e6f5f5,#c5e9e9); color:#2a7a7a; border-color:rgba(42,122,122,.2); } .operation-grid a[href*="type=payment"] .operation-icon { background:linear-gradient(145deg,#fdeaea,#f6c9c9); color:#a03535; border-color:rgba(160,53,53,.2); } .operation-grid a[href*="type=sell"] { border-color:rgba(46,125,90,.2); } .operation-grid a[href*="type=buy"] { border-color:rgba(47,107,191,.2); } .operation-grid a[href*="type=receipt"] { border-color:rgba(42,122,122,.2); } .operation-grid a[href*="type=payment"] { border-color:rgba(160,53,53,.2); } .dashboard-section-label { font-size: 13px; font-weight: 800; color: var(--muted); margin: 16px 0 8px; letter-spacing: .02em; } .quick-links-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; } .quick-link-card { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); font-size: 13px; font-weight: 700; transition: all var(--transition); } .quick-link-card:hover { border-color: var(--gold); color: var(--gold-hover); transform: translateY(-1px); } .quick-link-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; } /* Section title accent bar */ .lux-card .section-title h2::before { content: ""; display: inline-block; width: 3px; height: 1em; margin-inline-end: 8px; border-radius: 2px; background: var(--op-color); vertical-align: middle; transition: background 200ms ease; } /* ─── Dashboard hero ────────────────────────────────────────────────────────── */ .dash-hero { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 22px 20px 18px; margin-bottom: 4px; border-radius: var(--radius-lg); background: radial-gradient(circle at 8% 0%, var(--gold-soft), transparent 15rem), linear-gradient(145deg, var(--surface), var(--gold-soft)); border: 1px solid var(--border); box-shadow: var(--shadow); } .dash-hero-text { min-width: 0; } .dash-date { display: inline-flex; align-items: center; margin: 0 0 8px; padding: 3px 11px; border-radius: 999px; background: var(--gold-soft); font-size: 11px; font-weight: 800; color: var(--gold-hover); letter-spacing: .03em; } .dash-hero-text h1 { margin: 0 0 4px; font-size: 21px; font-weight: 850; line-height: 1.25; } .dash-sub { margin: 0; font-size: 13px; color: var(--muted); } .dash-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(145deg, #fff9ee, #ead8b6); border: 1px solid rgba(167,120,43,.22); box-shadow: inset 0 1px 0 #fff; color: var(--gold); } .dash-ops-label { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; font-size: 13px; font-weight: 800; color: var(--muted); letter-spacing: .02em; text-transform: uppercase; } .dash-see-all { font-size: 12px; font-weight: 700; color: var(--gold); text-decoration: none; letter-spacing: 0; } .dash-see-all:hover { color: var(--gold-hover); text-decoration: underline; } .dash-see-all-group { display: flex; align-items: center; gap: 10px; } /* ─── Op cards: solid accent left border ────────────────────────────────────── */ .operation-card { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px; min-height: 104px; border-inline-start: 3px solid transparent; } .op-sell { border-color: #2e7d5a; } .op-buy { border-color: #2f6bbf; } .op-receipt { border-color: #2a7a7a; } .op-payment { border-color: #a03535; } .op-expense { border-color: var(--amber); } .op-tool { border-color: var(--gold); } .op-card-body { min-width: 0; width: 100%; } .op-card-body strong { display: block; font-size: 14px; font-weight: 800; } .op-card-body small { display: block; margin-top: 2px; font-size: 11px; font-weight: 650; color: var(--muted); } /* ─── Dashboard stats ────────────────────────────────────────────────────────── */ .dash-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 4px; } .dstat { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; color: inherit; transition: transform var(--transition), box-shadow var(--transition); } .dstat:is(a):hover { transform: translateY(-2px); box-shadow: var(--shadow-lifted); } .dstat-icon { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--muted); } .dstat-body { min-width: 0; } .dstat-body span { display: block; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 3px; } .dstat-body strong { display: block; font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; line-height: 1.1; } .dstat-wide { grid-column: 1 / -1; } .dstat-gold .dstat-icon { background: linear-gradient(145deg,var(--gold-icon-1, #fff8e8),var(--gold-icon-2, #f5e4b8)); color: var(--gold); border-color: rgba(167,120,43,.2); } .dstat-sell .dstat-icon { background: linear-gradient(145deg,#e6f5ee,#c9ecdb); color: #2e7d5a; border-color: rgba(46,125,90,.2); } .dstat-warn .dstat-icon { background: linear-gradient(145deg,#fff4e0,#ffe0a0); color: #8c6727; border-color: rgba(140,103,39,.2); } .dstat-green .dstat-icon { background: linear-gradient(145deg,#e6f5ee,#c9ecdb); color: #2e7d5a; border-color: rgba(46,125,90,.2); } .dstat-green .dstat-body strong { color: var(--green); } /* Feature stat — today's receipts get extra visual weight */ .dstat-wide.dstat-green { padding: 18px; gap: 14px; background: linear-gradient(145deg, #eef8f2, #dbf0e3); border-color: rgba(46,125,90,.25); } .dstat-wide.dstat-green .dstat-icon { width: 46px; height: 46px; border-radius: 12px; } .dstat-wide.dstat-green .dstat-body strong { font-size: 26px; } /* Feature stat — open deals (#معامله_باز) demand immediate attention */ .dstat-wide.dstat-red { padding: 18px; gap: 14px; background: linear-gradient(145deg, #fdeeee, #fad6d6); border-color: rgba(159,69,69,.3); } .dstat-wide.dstat-red .dstat-icon { width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(145deg,#fdeeee,#f8c9c9); color: var(--red); border-color: rgba(159,69,69,.25); } .dstat-wide.dstat-red .dstat-body strong { font-size: 26px; color: var(--red); } /* ─── Empty state card ───────────────────────────────────────────────────────── */ .empty-state-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 30px 20px; border-radius: var(--radius-md); border: 1px dashed var(--border); background: var(--surface); color: var(--muted); text-align: center; } .empty-state-card p { margin: 0; font-size: 14px; } /* ─── Draft restored bar ────────────────────────────────────────────────────── */ .draft-restored-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .draft-clear-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid currentColor; background: transparent; color: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; transition: opacity var(--transition); } .draft-clear-btn:hover { opacity: .75; } /* ─── Segmented sub (gold sub-type) ──────────────────────────────────────────── */ .segmented-sub { margin: 0 0 14px; } .segmented-sub .segmented ul, .segmented-sub ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .segmented-sub label { flex-direction: column; gap: 4px; min-height: 52px; font-size: 13px; padding: 8px 6px; text-align: center; } .segmented-sub label:has(input:checked) { box-shadow: 0 2px 8px rgba(0,0,0,.07); } @media (min-width: 640px) { .dash-hero-text h1 { font-size: 26px; } .dash-stats { grid-template-columns: repeat(4, 1fr); } .dstat-wide { grid-column: auto; } } /* ─── In-app navigation (nav.js) ─────────────────────────────────────────────── */ /* Slim top progress bar shown while a page is being fetched. */ #nav-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; width: 0; z-index: 100; background: linear-gradient(90deg, var(--gold), var(--gold-hover)); box-shadow: 0 0 8px rgba(167, 120, 43, .5); opacity: 0; transition: width 220ms ease, opacity 220ms ease; pointer-events: none; } #nav-progress.is-active { opacity: 1; } /* Gently dim the outgoing content while the next page loads. */ body.is-navigating main.page-container { opacity: .55; transition: opacity 160ms ease; } /* Cross-document fallback for browsers that support it natively. */ @view-transition { navigation: auto; } /* Same-document transition (document.startViewTransition in nav.js): a quick crossfade + subtle rightward slide that respects RTL. */ @keyframes nav-fade-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } } @keyframes nav-fade-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-8px); } } ::view-transition-old(root) { animation: nav-fade-out 180ms ease both; } ::view-transition-new(root) { animation: nav-fade-in 220ms ease both; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } body.is-navigating main.page-container { transition: none; } } /* ─── User & role management ─────────────────────────────────────────────────── */ .user-list { margin-top: 14px; } .user-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .user-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .user-row.muted-row { opacity: .6; } .user-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-hover); } .user-avatar svg { width: 22px; height: 22px; } .user-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .user-row-main strong { font-size: 15px; font-weight: 700; } .user-meta { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-row-side { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 0 0 auto; } .badge.role-owner { background: var(--gold-soft); color: var(--gold-hover); } .badge.role-accountant { background: #e4edf1; color: var(--blue); } .badge.role-seller { background: var(--surface-alt); color: var(--muted); } .checkbox-grid ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } .checkbox-grid li { margin: 0; } .checkbox-grid label { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); cursor: pointer; font-size: 14px; transition: border-color var(--transition), background var(--transition); } .checkbox-grid label:hover { border-color: var(--gold); } .checkbox-grid input { width: 18px; height: 18px; accent-color: var(--gold); } .inline-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; } .inline-check input { width: 18px; height: 18px; accent-color: var(--gold); } @media (min-width: 640px) { .checkbox-grid ul { grid-template-columns: repeat(2, 1fr); } } /* ===== نرخ روز طلا (manual gold rate) ===== */ .rate-banner { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; padding: 16px 18px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-mid, #2e2820) 60%, var(--hero-2) 100%); color: var(--hero-ink); box-shadow: var(--shadow); border: 1px solid var(--hero-border, #4a3d28); text-decoration: none; } .rate-banner-empty { background: linear-gradient(135deg, var(--hero-empty-1, #2a2118) 0%, var(--hero-empty-2, #3a2c1c) 100%); } .rate-banner-icon { flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: rgba(167, 120, 43, .22); color: #e8c98a; } .rate-banner-icon .ui-icon { width: 24px; height: 24px; } .rate-banner-body { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; } .rate-banner-label { font-size: 12px; color: #d8c6a6; font-weight: 700; } .rate-banner-value { font-size: 22px; font-weight: 850; color: #fff; line-height: 1.1; } .rate-banner-value small { font-size: 12px; font-weight: 600; color: #cbb78f; } .rate-banner-meta { font-size: 11px; color: #b6a585; } .rate-banner-cta { flex: 0 0 auto; font-size: 12px; font-weight: 750; color: #e8c98a; } /* current-rate hero on the نرخ روز page */ .rate-hero { display: flex; flex-direction: column; gap: 4px; margin: 0 0 18px; padding: 22px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%); color: var(--hero-ink); box-shadow: var(--shadow); border: 1px solid var(--hero-border, #4a3d28); } .rate-hero-empty { background: linear-gradient(135deg, var(--hero-empty-1, #2a2118) 0%, var(--hero-empty-2, #3a2c1c) 100%); } .rate-hero-label { font-size: 13px; color: #d8c6a6; font-weight: 700; } .rate-hero-value { font-size: 34px; font-weight: 850; color: #fff; line-height: 1.1; } .rate-hero-value small { font-size: 14px; font-weight: 600; color: #cbb78f; } .rate-hero-meta { font-size: 12px; color: #b6a585; } .rate-hero-note { font-size: 12px; color: #e8c98a; margin-top: 4px; } /* rate history list */ .rate-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rate-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-alt); border: 1px solid var(--border); } .rate-row-current { border-color: var(--gold); background: var(--gold-soft); } .rate-row-value { font-weight: 800; color: var(--text); } .rate-row-value small { font-size: 11px; font-weight: 600; color: var(--muted); } .rate-row-time { font-size: 12px; color: var(--muted); margin-inline-start: auto; } .rate-row-note { flex-basis: 100%; font-size: 12px; color: var(--muted); } /* ===== مخارج / ابزارها / اتیکت / آبشده ===== */ .operation-card.op-expense .operation-icon { background: #efe4d2; color: var(--amber); } .operation-card.op-tool .operation-icon { background: var(--gold-soft); color: var(--gold-hover); } .tag-search-bar { display: flex; gap: 8px; margin: 0 0 14px; } .tag-search-bar input[type="search"] { flex: 1 1 auto; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); font: inherit; } .tag-search-bar .btn-secondary { flex: 0 0 auto; } .tag-badge { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin-inline-start: auto; } .tag-badge-available { background: #e3f0e8; color: var(--green); } .tag-badge-used { background: #efe4e4; color: var(--red); } .rate-row-used { opacity: .72; } /* ─── Counterparty wallet (کیف‌پول طرف‌حساب) ───────────────────────── */ .wallet-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 6px; } .wallet-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; } .wallet-card::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; height: 4px; background: var(--muted); } .wallet-card.is-plus::before { background: var(--green); } .wallet-card.is-minus::before { background: var(--red); } .wallet-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wallet-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(145deg, #fffaf1, #ecddbf); border: 1px solid rgba(167, 120, 43, .2); color: var(--gold-hover); } .wallet-ic .ui-icon { width: 21px; height: 21px; } .wallet-dir { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--surface-alt); color: var(--muted); white-space: nowrap; } .wallet-card.is-plus .wallet-dir { background: #e8f5ee; color: var(--green); } .wallet-card.is-minus .wallet-dir { background: #fdecec; color: var(--red); } .wallet-val { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; } .wallet-val b { font-size: 28px; font-weight: 850; letter-spacing: -.5px; line-height: 1.1; } .wallet-card.is-plus .wallet-val b { color: var(--green); } .wallet-card.is-minus .wallet-val b { color: var(--red); } .wallet-val small { font-size: 13px; font-weight: 700; color: var(--muted); } .wallet-sub { font-size: 12px; color: var(--muted); font-weight: 600; } .wallet-legend { margin: 4px 2px 16px; font-size: 11.5px; color: var(--muted); text-align: center; } .wallet-opendeal { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid rgba(159, 69, 69, .3); background: linear-gradient(145deg, #fdeeee, #fad6d6); color: var(--red); } .wallet-opendeal-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #fff; color: var(--red); flex: 0 0 auto; } .wallet-opendeal-ic .ui-icon { width: 20px; height: 20px; } .wallet-opendeal-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wallet-opendeal-body strong { font-size: 14px; font-weight: 800; } .wallet-opendeal-body small { font-size: 12px; color: #8a4a4a; font-variant-numeric: tabular-nums; } /* sold items — اتیکت‌دار cards (image placeholder for now) */ .sold-items-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; } .sold-item-card { display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .sold-item-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow); } .sold-item-thumb { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; background: linear-gradient(145deg, #fffaf1, #ecddbf); border: 1px solid rgba(167, 120, 43, .2); color: var(--gold-hover); } .sold-item-thumb .ui-icon { width: 23px; height: 23px; } .sold-item-thumb.has-img { padding: 0; overflow: hidden; background: var(--surface-alt); } .sold-item-thumb.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* اتیکت image upload field inside the tagged card */ .tagged-image-field { margin-top: 10px; } .tagged-image-field label { display: block; margin-bottom: 6px; color: #4e4e4e; font-size: 13px; font-weight: 750; } .tagged-image-field input[type="file"] { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px dashed var(--gold); border-radius: var(--radius-sm); background: var(--gold-soft); color: var(--gold-hover); font-size: 13px; } .sold-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .sold-item-body strong { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sold-item-meta { font-size: 12px; color: var(--gold-hover); font-weight: 700; font-variant-numeric: tabular-nums; } .sold-item-date { font-size: 11px; color: var(--muted); } @media (max-width: 380px) { .wallet-val b { font-size: 24px; } } /* ─── Store treasury card (موجودی صندوق گالری — owner-only) ────────── */ .treasury { margin-bottom: 18px; } .treasury-hero { display: flex; flex-direction: column; gap: 5px; padding: 18px 20px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--hero-1) 0%, var(--hero-2) 100%); color: var(--hero-ink); border: 1px solid var(--hero-border, #4a3d28); box-shadow: var(--shadow); margin-bottom: 10px; } .treasury-hero-label { font-size: 12.5px; color: #d8c6a6; font-weight: 700; } .treasury-hero-val { font-size: 30px; font-weight: 850; line-height: 1.1; font-variant-numeric: tabular-nums; } .treasury-hero-val small { font-size: 13px; font-weight: 600; color: #cbb78f; } .treasury-hero.is-plus .treasury-hero-val { color: #7fe0b0; } .treasury-hero.is-minus .treasury-hero-val { color: #f3a6a6; } .treasury-hero-val.is-muted { font-size: 16px; color: #cbb78f; font-weight: 700; } .treasury-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .treasury-cell { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); } .treasury-cell .t-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; background: linear-gradient(145deg, #fffaf1, #ecddbf); border: 1px solid rgba(167, 120, 43, .2); color: var(--gold-hover); } .treasury-cell .t-ic .ui-icon { width: 20px; height: 20px; } .treasury-cell .t-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .treasury-cell .t-body span { font-size: 11.5px; color: var(--muted); font-weight: 600; } .treasury-cell .t-body strong { font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; } .treasury-cell.is-plus .t-body strong { color: var(--green); } .treasury-cell.is-minus .t-body strong { color: var(--red); } .treasury-note { margin: 8px 2px 0; font-size: 11.5px; color: var(--muted); } .treasury-convert-btn { margin-top: 12px; gap: 8px; } .treasury-convert-btn .ui-icon { width: 18px; height: 18px; } /* ════════════════════════════════════════════════════════════════════ صفحات دارایی — منتقل‌شده از