/* ===================================================================== ExpenseAI – Corporate SaaS theme (navy / blue, white cards) Uses logical properties (margin-inline, inset-inline…) so an RTL/Arabic layout works by switching . ===================================================================== */ :root { --navy-950: #061429; --navy-900: #0a1f3d; --navy-800: #102b52; --navy-700: #173a6b; --blue-600: #1f5eff; --blue-500: #3b74ff; --blue-100: #e6eeff; --blue-50: #f3f7ff; --gold: #d4a940; --ink: #0f1b2d; --ink-2: #3d4b61; --muted: #6b7a90; --line: #e3e8f0; --line-2: #eef2f7; --bg: #f5f7fb; --card: #ffffff; --green: #12a150; --green-bg: #e8f7ef; --amber: #c27803; --amber-bg: #fff6e0; --amber-line: #f6c94c; --red: #d93636; --red-bg: #fdecec; --red-line: #f19a9a; --purple:#7c4ddb; --purple-bg:#f1ebfd; --radius: 14px; --radius-sm: 9px; --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06); --shadow-lg: 0 12px 40px rgba(10, 31, 61, .16); --font: 'Inter', 'Noto Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --sidebar-w: 256px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); } [dir="rtl"] body { font-family: 'Noto Sans Arabic', var(--font); } a { color: var(--blue-600); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; color: var(--ink); } p { margin: 0; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; background: var(--line-2); padding: 1px 6px; border-radius: 5px; } [hidden] { display: none !important; } .icon { width: 18px; height: 18px; flex: none; } .icon--xs { width: 12px; height: 12px; } .icon--sm { width: 15px; height: 15px; } .icon--xl { width: 36px; height: 36px; } .muted { color: var(--muted); } .muted-light { color: rgba(255,255,255,.72); } .small { font-size: 12.5px; } .block { display: block; } .nowrap { white-space: nowrap; } .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-block-end: 4px; } .h-sm { font-size: 14px; display: flex; align-items: center; gap: 8px; margin-block: 16px 10px; } .spacer { flex: 1; } .stack { display: flex; flex-direction: column; gap: 20px; } /* ---------------- Layout ---------------- */ .layout { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-w); flex: none; background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); color: #cfd9ea; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 20px 14px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 22px; color: #fff; text-decoration: none !important; } .brand strong { display: block; font-size: 17px; letter-spacing: -.01em; } .brand small { display: block; font-size: 11.5px; color: #8fa3c2; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav__label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6f86aa; padding: 16px 12px 6px; } .nav__item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px; color: #c6d2e6; font-weight: 500; text-decoration: none !important; transition: background .15s, color .15s; } .nav__item:hover { background: rgba(255,255,255,.06); color: #fff; } .nav__item.is-active { background: var(--blue-600); color: #fff; box-shadow: 0 6px 18px rgba(31,94,255,.35); } .nav__item.is-disabled { opacity: .5; cursor: not-allowed; } .nav__item em { margin-inline-start: auto; font-style: normal; font-size: 10px; background: rgba(255,255,255,.1); padding: 2px 7px; border-radius: 20px; } .sidebar__foot { margin-block-start: auto; } .company-chip { display: flex; gap: 10px; align-items: flex-start; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 12px; } .company-chip strong { display: block; color: #fff; font-size: 13px; } .company-chip small { color: #8fa3c2; font-size: 11.5px; } .company-chip .icon { color: var(--gold); margin-block-start: 2px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 28px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-block-end: 1px solid var(--line); } .topbar h1 { font-size: 18px; font-weight: 650; } .topbar__title { flex: 1; min-width: 0; } .topbar__right { display: flex; align-items: center; gap: 12px; } .topbar__menu { display: none; } .user-menu { display: flex; align-items: center; gap: 10px; } .user-menu__meta strong { display: block; font-size: 13px; } .user-menu__meta small { display: block; font-size: 11.5px; color: var(--muted); } .avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--blue-600), var(--navy-700)); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px; } .icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); background: transparent; border: 1px solid var(--line); cursor: pointer; } .icon-btn:hover { background: var(--line-2); text-decoration: none; } .content { padding: 24px 28px 40px; flex: 1; display: flex; flex-direction: column; gap: 20px; max-width: 1480px; width: 100%; } .footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 28px; color: var(--muted); font-size: 12px; border-block-start: 1px solid var(--line); } .backdrop { display: none; } /* ---------------- Components ---------------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; } .card--soft { background: var(--blue-50); border-color: var(--blue-100); box-shadow: none; } .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-block-end: 16px; } .card__head h3 { font-size: 15.5px; font-weight: 650; } .card__head p { margin-block-start: 3px; font-size: 13px; } .card__head--wrap { flex-wrap: wrap; } .head-actions { display: flex; gap: 8px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border-radius: 10px; border: 1px solid transparent; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: none !important; transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: not-allowed; } .btn--primary { background: var(--blue-600); color: #fff; box-shadow: 0 4px 12px rgba(31,94,255,.28); } .btn--primary:hover:not(:disabled) { background: #174fe0; } .btn--accent { background: #fff; color: var(--navy-900); } .btn--accent:hover { background: var(--blue-50); } .btn--ghost { background: #fff; color: var(--ink-2); border-color: var(--line); } .btn--ghost:hover { background: var(--line-2); } .btn--ghost-light { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); } .btn--ghost-light:hover { background: rgba(255,255,255,.16); } .btn--danger-text { color: var(--red); } .btn--link { background: none; color: var(--blue-600); padding-inline: 6px; } .btn--sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; } .btn--lg { padding: 11px 20px; font-size: 14.5px; } .btn--block { width: 100%; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .badge--lg { padding: 5px 13px; font-size: 13px; } .badge--success { background: var(--green-bg); color: var(--green); } .badge--danger { background: var(--red-bg); color: var(--red); } .badge--info { background: var(--blue-100); color: var(--blue-600); } .badge--warning { background: var(--amber-bg); color: var(--amber); } .badge--purple { background: var(--purple-bg); color: var(--purple); } .badge--neutral { background: var(--line-2); color: var(--ink-2); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 20px; font-size: 12.5px; font-weight: 600; } .pill--soft { background: var(--blue-50); color: var(--navy-700); border: 1px solid var(--blue-100); } .cur { font-weight: 600; font-size: 12px; background: var(--line-2); padding: 2px 7px; border-radius: 6px; letter-spacing: .03em; } .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 11px; border: 1px solid; font-size: 13.5px; } .alert .icon { margin-block-start: 1px; } .alert > span { flex: 1; } .alert--success { background: var(--green-bg); border-color: #b5e5c8; color: #0b6b36; } .alert--error { background: var(--red-bg); border-color: var(--red-line); color: #a42323; } .alert--warning { background: var(--amber-bg); border-color: var(--amber-line); color: #8a5500; } .alert--info { background: var(--blue-50); border-color: var(--blue-100); color: var(--navy-700); } .alert__close { background: none; border: 0; cursor: pointer; color: inherit; opacity: .6; padding: 0; } .swatch { padding: 0 6px; border-radius: 4px; font-weight: 600; } .swatch--medium { background: var(--amber-bg); border: 1px solid var(--amber-line); } .swatch--low { background: var(--red-bg); border: 1px solid var(--red-line); } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; font-size: 13px; align-self: flex-start; } /* ---------------- Tables ---------------- */ .table-wrap { overflow-x: auto; margin-inline: -20px; } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { text-align: start; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; padding: 10px 20px; background: #fafbfd; border-block: 1px solid var(--line); } .table td { padding: 12px 20px; border-block-end: 1px solid var(--line-2); vertical-align: middle; } .table .num { text-align: end; font-variant-numeric: tabular-nums; } .table--click tbody tr { cursor: pointer; transition: background .12s; } .table--click tbody tr:hover { background: var(--blue-50); } .table--compact td, .table--compact th { padding: 7px 10px; } .table .actions { text-align: end; } /* ---------------- Dashboard ---------------- */ .hero-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 26px 28px; border-radius: var(--radius); color: #fff; background: radial-gradient(1200px 300px at 90% -40%, rgba(59,116,255,.55), transparent 60%), linear-gradient(120deg, var(--navy-900), var(--navy-700)); box-shadow: var(--shadow-lg); } .hero-card h2 { color: #fff; font-size: 24px; letter-spacing: -.01em; } .hero-card .eyebrow { color: #9fb4d6; } .hero-card p { margin-block-start: 6px; font-size: 13px; } .hero-card__actions { display: flex; gap: 10px; flex-wrap: wrap; } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .stat { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); } .stat small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; } .stat strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; margin-block: 2px; font-variant-numeric: tabular-nums; } .stat em { font-style: normal; font-size: 12px; color: var(--muted); } .stat__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; } .stat__icon--navy { background: #e8edf7; color: var(--navy-800); } .stat__icon--blue { background: var(--blue-100); color: var(--blue-600); } .stat__icon--amber { background: var(--amber-bg); color: var(--amber); } .stat__icon--green { background: var(--green-bg); color: var(--green); } .grid { display: grid; gap: 20px; } .grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); align-items: start; } .grid--scan { grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); align-items: start; } .bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .bars__row { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-block-end: 5px; } .bars__track { height: 7px; background: var(--line-2); border-radius: 10px; overflow: hidden; } .bars__track span { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--navy-700)); border-radius: 10px; } .mini-steps { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 13px; } .empty { text-align: center; padding: 36px 16px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 8px; } .empty h4 { color: var(--ink); font-size: 15px; } .empty .icon--xl { color: #b8c4d6; } .empty--sm { padding: 40px 10px; } /* ---------------- Forms ---------------- */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; } .field__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .field__label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .req { color: var(--red); font-style: normal; } input[type=text], input[type=password], input[type=date], input[type=time], input[type=search], input[type=email], input[type=file], select, textarea { width: 100%; font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid #d5dce7; border-radius: var(--radius-sm); padding: 9px 12px; transition: border-color .15s, box-shadow .15s, background .15s; } input[type=file] { padding: 7px; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px rgba(59,116,255,.18); } .num-input { text-align: end; font-variant-numeric: tabular-nums; } [dir="rtl"] .num-input { text-align: start; } .field.is-medium input, .field.is-medium select, .field.is-medium textarea { background: var(--amber-bg); border-color: var(--amber-line); } .field.is-low input, .field.is-low select, .field.is-low textarea { background: var(--red-bg); border-color: var(--red-line); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--red); background: #fff; } .field.is-edited input, .field.is-edited select, .field.is-edited textarea { background: #fff; border-color: var(--green); } .field.is-edited .field__top::after { content: 'Edited'; font-size: 11px; font-weight: 600; color: var(--green); background: var(--green-bg); padding: 1px 7px; border-radius: 10px; } .field.is-edited .conf { display: none; } .field__error { color: var(--red); font-size: 12px; font-weight: 500; } .field__warn { color: #8a5500; font-size: 12px; } .field--total input { font-size: 17px; font-weight: 700; } .conf { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 10px; font-variant-numeric: tabular-nums; } .conf--high { background: var(--green-bg); color: var(--green); } .conf--medium { background: var(--amber-bg); color: var(--amber); } .conf--low { background: var(--red-bg); color: var(--red); } .conf--none { background: var(--line-2); color: var(--muted); } .form-section { border: 0; padding: 0; margin: 0 0 22px; } .form-section legend { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy-700); padding: 0 0 10px; width: 100%; border-block-end: 1px solid var(--line-2); margin-block-end: 14px; } .form-section legend small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--muted); } .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .col-2 { grid-column: span 2; } .review .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-block-start: 16px; border-block-start: 1px solid var(--line); position: sticky; bottom: 0; background: #fff; padding-block-end: 12px; box-shadow: 0 -10px 16px -12px rgba(16,24,40,.18); z-index: 2; } .form-error { color: var(--red); font-weight: 500; margin-block-start: 10px; } .fx-box { margin-block-start: 16px; display: grid; grid-template-columns: 1fr auto 1fr 1fr; gap: 14px; align-items: center; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 12px; padding: 14px 16px; } .fx-box small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; } .fx-box strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .fx-box span { font-size: 12px; } .fx-box__arrow { font-size: 20px; color: var(--blue-600); } [dir="rtl"] .fx-box__arrow { transform: scaleX(-1); } .fx-box__rate { border-inline-start: 1px dashed #c5d4f5; padding-inline-start: 14px; } .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-block-end: 16px; } .filters input[type=search] { flex: 1 1 240px; width: auto; } .filters select { width: auto; flex: 0 1 190px; } /* ---------------- Scan page ---------------- */ .dropzone { display: block; position: relative; border: 2px dashed #c3cfe2; border-radius: 14px; background: #fafcff; cursor: pointer; transition: border-color .15s, background .15s; min-height: 250px; } .dropzone:hover, .dropzone.is-drag { border-color: var(--blue-500); background: var(--blue-50); } .dropzone input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; } .dropzone__empty { min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 24px; } .dropzone__icon { width: 68px; height: 68px; border-radius: 50%; background: var(--blue-100); color: var(--blue-600); display: grid; place-items: center; margin-block-end: 8px; } .dropzone__preview { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px; } .dropzone__preview img { max-height: 320px; max-width: 100%; border-radius: 8px; box-shadow: var(--shadow); } .dropzone__file { text-align: center; } .pdf-chip { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--red); padding: 30px; } .scan-actions { display: flex; gap: 10px; align-items: center; margin-block-start: 14px; flex-wrap: wrap; } .scan-actions #scanBtn { margin-inline-start: auto; } .tips { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12.5px; } .tips li { display: flex; gap: 8px; align-items: center; } .tips .icon { color: var(--green); } .progress { height: 6px; background: var(--line-2); border-radius: 10px; overflow: hidden; margin-block-end: 16px; } .progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-500), var(--blue-600)); transition: width .4s ease; } .pipeline { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; } .pipeline__step { display: flex; gap: 12px; padding: 8px 0; position: relative; color: var(--muted); } .pipeline__step:not(:last-child)::after { content: ''; position: absolute; inset-inline-start: 13px; top: 36px; bottom: -6px; width: 2px; background: var(--line); } .pipeline__step strong { display: block; font-size: 13.5px; font-weight: 600; color: inherit; } .pipeline__detail { display: block; font-size: 12px; color: var(--muted); word-break: break-word; } .pipeline__dot { width: 28px; height: 28px; flex: none; border-radius: 50%; border: 2px solid var(--line); background: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: var(--muted); z-index: 1; } .pipeline__dot .icon { display: none; } .pipeline__step.is-active { color: var(--ink); } .pipeline__step.is-active .pipeline__dot { border-color: var(--blue-600); color: var(--blue-600); animation: pulse 1.2s infinite; } .pipeline__step.is-done { color: var(--ink); } .pipeline__step.is-done .pipeline__dot { background: var(--green); border-color: var(--green); color: #fff; } .pipeline__step.is-warning { color: var(--ink); } .pipeline__step.is-warning .pipeline__dot { background: var(--amber); border-color: var(--amber); color: #fff; } .pipeline__step.is-failed { color: var(--red); } .pipeline__step.is-failed .pipeline__dot { background: var(--red); border-color: var(--red); color: #fff; } .pipeline__step.is-done .pipeline__dot > span, .pipeline__step.is-warning .pipeline__dot > span, .pipeline__step.is-failed .pipeline__dot > span { display: none; } .pipeline__step.is-done .pipeline__dot .ok, .pipeline__step.is-warning .pipeline__dot .warn, .pipeline__step.is-failed .pipeline__dot .fail { display: block; } .pipeline__step.is-done:not(:last-child)::after { background: var(--green); } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(31,94,255,.35); } 50% { box-shadow: 0 0 0 7px rgba(31,94,255,0); } } /* ---------------- OCR result / details ---------------- */ .workflow { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; overflow-x: auto; padding-block-end: 4px; } .workflow li { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px 4px 4px; white-space: nowrap; } .workflow li span { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--line-2); font-size: 11px; } .workflow li.is-done { color: var(--green); border-color: #bfe6cf; } .workflow li.is-done span { background: var(--green); color: #fff; } .workflow li.is-current { color: var(--blue-600); border-color: var(--blue-500); background: var(--blue-50); } .workflow li.is-current span { background: var(--blue-600); color: #fff; } .detect-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .detect { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .detect small { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; } .detect strong { font-size: 15px; } .review { display: grid; grid-template-columns: minmax(300px, 0.85fr) minmax(0, 1.25fr); gap: 20px; align-items: start; } .review__left { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 84px; } .receipt-view__frame { background: #eef1f6; border-radius: 10px; overflow: auto; max-height: 72vh; display: flex; justify-content: center; align-items: flex-start; } .receipt-view__frame img { max-width: 100%; display: block; cursor: zoom-in; } .receipt-view__frame.is-zoomed img { max-width: none; width: 180%; cursor: zoom-out; } .receipt-view__frame iframe { width: 100%; height: 70vh; border: 0; background: #fff; } .collapsible summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; } .collapsible summary::-webkit-details-marker { display: none; } .collapsible summary::after { content: '▾'; color: var(--muted); } .collapsible[open] summary { margin-block-end: 14px; } .collapsible summary h3 { font-size: 15px; } .collapsible-inline { margin-block-start: 10px; } .collapsible-inline summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--blue-600); padding: 6px 0; } .log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .log__item { display: flex; gap: 10px; align-items: flex-start; } .log__item > .icon { margin-block-start: 2px; color: var(--green); } .log__item--warning > .icon { color: var(--amber); } .log__item strong { font-size: 13px; margin-inline-end: 6px; } .log__item small { display: block; color: var(--muted); font-size: 12px; word-break: break-word; } .notes { margin: 14px 0 0; padding: 12px 12px 12px 30px; background: var(--amber-bg); border-radius: 10px; color: #7a4d00; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; } [dir="rtl"] .notes { padding: 12px 30px 12px 12px; } .evidence { margin: 14px 0 0; font-size: 12.5px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; } .evidence dt { color: var(--muted); font-weight: 600; } .evidence dd { margin: 0; } .raw-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Noto Sans Arabic', monospace; font-size: 12.5px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 12px; max-height: 360px; overflow: auto; } .raw-text--code { direction: ltr; text-align: left; } .detail-head { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; } .detail-head__main { display: flex; gap: 14px; align-items: center; min-width: 0; } .detail-head__main h2 { font-size: 21px; } .detail-head__icon { width: 50px; height: 50px; border-radius: 14px; background: var(--blue-100); color: var(--blue-600); display: grid; place-items: center; flex: none; } .detail-head__amount { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .detail-head__amount strong { font-size: 24px; font-variant-numeric: tabular-nums; } .sep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .sep { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fbfcfe; } .sep small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; } .sep strong { font-size: 14px; } .sep--hl { background: var(--blue-50); border-color: var(--blue-100); } .fx-note { margin-block-start: 12px; font-size: 12.5px; color: var(--muted); } .kv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; } .kv { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-block-end: 1px solid var(--line-2); font-size: 13.5px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; font-weight: 500; text-align: end; word-break: break-word; } .amounts { margin-block-start: 16px; background: #fafbfd; border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; } .amounts > div { display: flex; justify-content: space-between; padding: 7px 0; font-size: 13.5px; font-variant-numeric: tabular-nums; } .amounts__total { border-block-start: 1px solid var(--line); font-size: 15px !important; } .desc { margin-block-start: 14px; } .conf-bars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } .conf-bars__item { display: grid; grid-template-columns: 80px 1fr 42px; align-items: center; gap: 10px; font-size: 12.5px; } .conf-bars__item strong { text-align: end; font-variant-numeric: tabular-nums; } .conf-bars__item--medium .bars__track span { background: var(--amber); } .conf-bars__item--low .bars__track span { background: var(--red); } .conf-bars__item--high .bars__track span { background: var(--green); } .timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .timeline li { display: flex; gap: 12px; align-items: flex-start; } .timeline li p { font-size: 13px; margin-block-start: 2px; } .timeline__future { opacity: .7; } .narrow { max-width: 1060px; width: 100%; } /* ---------------- Login ---------------- */ .auth { background: var(--bg); } .auth__wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; } .auth__hero { color: #fff; padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between; background: radial-gradient(900px 400px at 100% 0%, rgba(59,116,255,.5), transparent 60%), radial-gradient(600px 300px at 0% 100%, rgba(212,169,64,.18), transparent 60%), linear-gradient(135deg, var(--navy-950), var(--navy-700)); } .brand--light small { color: #9fb4d6; } .auth__pitch h2 { color: #fff; font-size: 36px; letter-spacing: -.02em; line-height: 1.15; margin-block-end: 16px; } .auth__pitch p { color: #c6d4ea; max-width: 520px; font-size: 15px; } .auth__features { list-style: none; padding: 0; margin: 28px 0; display: flex; flex-direction: column; gap: 12px; } .auth__features li { display: flex; gap: 12px; align-items: center; color: #e2e9f5; } .auth__features .icon { color: var(--gold); } .auth__arabic { font-family: 'Noto Sans Arabic', var(--font); font-size: 17px !important; color: #fff !important; opacity: .85; } .auth__foot { color: #7f94b6; } .auth__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; } .auth__form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; background: #fff; padding: 34px; border-radius: 18px; border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .auth__form h1 { font-size: 23px; } .demo-creds { display: flex; flex-direction: column; gap: 4px; background: var(--blue-50); border: 1px dashed #b9cbf5; border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--navy-700); } /* ---------------- Responsive ---------------- */ @media (max-width: 1200px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detect-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .grid--2-1, .grid--scan, .review { grid-template-columns: 1fr; } .review__left { position: static; } .auth__wrap { grid-template-columns: 1fr; } .auth__hero { padding: 28px; } .auth__pitch h2 { font-size: 26px; } .auth__features, .auth__foot { display: none; } } @media (max-width: 860px) { .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 50; transform: translateX(-100%); transition: transform .25s ease; } [dir="rtl"] .sidebar { transform: translateX(100%); } .sidebar-open .sidebar { transform: none; } .sidebar-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(6,20,41,.45); z-index: 40; } .topbar { padding: 12px 16px; } .topbar__menu { display: grid; } .user-menu__meta, .topbar .pill { display: none; } .content { padding: 16px; } .footer { padding: 14px 16px; } .kv-grid, .conf-bars { grid-template-columns: 1fr; } .fx-box { grid-template-columns: 1fr; } .fx-box__arrow { display: none; } .fx-box__rate { border: 0; padding: 0; } .detail-head__amount { align-items: flex-start; } } @media (max-width: 640px) { .stats, .detect-strip, .form-grid, .sep-grid { grid-template-columns: 1fr; } .col-2 { grid-column: auto; } .hero-card { padding: 20px; } .hero-card__actions, .hero-card__actions .btn { width: 100%; } .scan-actions #scanBtn { width: 100%; margin: 0; } .form-actions .btn--lg { width: 100%; } .table--responsive thead { display: none; } .table--responsive tr { display: block; padding: 10px 20px; border-block-end: 1px solid var(--line); } .table--responsive td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: end; } .table--responsive td::before { content: attr(data-label); color: var(--muted); font-size: 12px; text-align: start; } .table--responsive td.actions::before { content: ''; } } body.is-busy { cursor: progress; }