/* Mobile supplier cards and detail popup. Desktop styles are isolated. */
body[data-mobile-view="suppliers"] .standard-topbar { display:grid;grid-template-columns:minmax(0,1fr) 40px;grid-template-rows:40px;gap:8px;box-sizing:border-box;width:100%;height:calc(58px + env(safe-area-inset-top));min-height:calc(58px + env(safe-area-inset-top));margin:0;padding:calc(8px + env(safe-area-inset-top)) 16px 10px;border:0;border-radius:0;background:#006495;box-shadow:0 2px 6px #0f172a12; }
body[data-mobile-view="suppliers"] .standard-topbar .standard-search-box { grid-column:1;grid-row:1;width:100%;min-width:0;height:40px;min-height:40px;background:#fff;border:0;border-radius:24px;box-shadow:none; }
body[data-mobile-view="suppliers"] .standard-topbar .mobile-module-sort,
body[data-mobile-view="suppliers"] .standard-topbar .mobile-module-filter { display:grid;place-items:center;grid-column:2;grid-row:1;justify-self:end;width:40px;height:40px;min-height:40px;padding:0;border:1px solid #ffffff30;border-radius:50%;color:#fff;background:#ffffff26; }
body[data-mobile-view="suppliers"] .main { background:#f4f7fb; }
body[data-mobile-view="suppliers"] .standard-topbar .topbar-title,body[data-mobile-view="suppliers"] .standard-topbar > .mobile-subpage-back { display:none; }
body[data-mobile-view="suppliers"] #suppliersView { width:100%;min-width:0;height:auto;padding:8px 16px 16px; }
body[data-mobile-view="suppliers"] #mobileModuleSummary { width:calc(100% - 32px);margin:0 16px;padding:16px;border:0;border-radius:16px;background:#fff;box-shadow:0 2px 8px #0f172a0a; }
body[data-mobile-view="suppliers"] .mobile-module-summary-main strong { font:700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
body[data-mobile-view="suppliers"] .mobile-module-summary-main small { font-size:12px; }
body[data-mobile-view="suppliers"] .mobile-module-summary-total small,body[data-mobile-view="suppliers"] .mobile-module-summary-total strong { color:#ba1a1a; }
.vendor-mobile-list { display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-rows:auto;align-content:start;gap:12px;width:100%;max-width:100%;min-width:0;height:auto; }
.vendor-mobile-card { width:100%;max-width:100%;min-width:0;height:auto;overflow:hidden;padding:16px;border:0;border-radius:16px;background:#fff;box-shadow:0 2px 10px #131b2e0a;color:#131b2e;font-family:Inter,Arial,sans-serif; }
.vendor-mobile-profile { display: flex; align-items: flex-start; gap: 12px; }
.vendor-mobile-avatar { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 16px; background: #dce1ff; color: #00164f; font: 600 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
.vendor-mobile-identity { flex: 1; min-width: 0; }
.vendor-mobile-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vendor-mobile-heading button { display: block; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; color: inherit; box-shadow: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: 600 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
.vendor-mobile-status { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 14px; font-weight: 600; }
.vendor-mobile-status.has-debt { color: #93000a; background: #ffdad6; }
.vendor-mobile-status.is-clear { color: #00714d; background: #6cf8bb; }
.vendor-mobile-contact { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px;color:#434656;font:400 12px/16px Inter,Arial,sans-serif; }
.vendor-mobile-contact > span { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }

.vendor-mobile-metrics { display: flex; justify-content: space-between; gap: 8px; margin-top: 12px; padding: 8px; border-radius: 12px; background: #f2f3ff; font-size: 14px; line-height: 20px; }
.vendor-mobile-metrics small { display: block; font-size: 12px; line-height: 16px; color: #434656; }
.vendor-mobile-metrics strong { font-weight:600;overflow-wrap:anywhere; }
.vendor-mobile-metrics > div { flex:1;min-width:0; }
.vendor-mobile-metrics > div:last-child { text-align: right; }
.vendor-mobile-metrics .has-debt,.vendor-mobile-metrics .has-debt small { color: #ba1a1a; }
.vendor-mobile-metrics .is-clear,.vendor-mobile-metrics .is-clear small { color: #006c49; }
.vendor-detail-dialog { width: calc(100% - 32px); max-width: 420px; max-height: 88dvh; margin: auto; padding: 0; border: 1px solid #c3c5d9; border-radius: 16px; color: #131b2e; background: #fff; box-shadow: 0 25px 50px #00000040; overflow: auto; font: 12px/16px Inter,Arial,sans-serif; }
.vendor-detail-dialog::backdrop { background: #0008; backdrop-filter: blur(4px); }
.vd-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.vd-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.vd-header h2,.vd-identity h3 { margin: 0; font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
.vd-header button { display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: #eaedff; color: #434656; font-size: 22px; box-shadow: none; }
.vd-profile { display: flex; align-items: flex-start; gap: 12px; padding: 12px; background: #f2f3ff; border-radius: 16px; }
.vd-avatar { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 16px; color: #00164f; background: #dce1ff; font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; }
.vd-identity { flex: 1; min-width: 0; }
.vd-identity > div { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.vd-identity h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-identity p { margin:4px 0 0;color:#434656; }
.vd-status { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; font-size: 11px; line-height: 14px; }
.vd-red { color: #93000a; background: #ffdad6; }
.vd-green { color: #00714d; background: #6cf8bb; }
.vd-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: #f2f3ff; }
.vd-tabs button { flex: 1; min-width: 0; min-height: 32px; padding: 6px 8px; border: 0; border-radius: 8px; box-shadow: none; background: transparent; color: #434656; font: 500 12px/16px Inter,Arial,sans-serif; white-space: nowrap; }
.vd-tabs button.active { background: #fff; color: #006495; font-weight: 600; box-shadow: 0 1px 3px #0000000d; }
.vd-finance { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.vd-finance > div { padding: 12px; border: 1px solid #dce1ff66; border-radius: 12px; background: #dce1ff33; }
.vd-finance > div:last-child { border-color: #ffdad6; background: #ffdad666; text-align: right; }
.vd-finance small,.vd-finance strong { display: block; }
.vd-finance strong { margin-top: 2px; color: #006495; font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; overflow-wrap: anywhere; }
.vd-finance > div:last-child small,.vd-finance > div:last-child strong { color: #ba1a1a; }
.vd-info { display: grid; gap: 10px; padding: 12px 0; margin-top: 12px; border-top: 1px solid #dae2fd66; border-bottom: 1px solid #dae2fd66; }
.vd-info-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vd-info-row > span { display: flex; align-items: center; gap: 8px; flex-shrink: 0; color: #434656; }
.vd-info-row .icon,.vd-info-row svg { width: 18px; height: 18px; flex-basis: 18px; color: #737687; }
.vd-info-row strong { min-width: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.vd-stat { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; padding: 8px 12px; border-radius: 12px; background: #f2f3ff; }
.vd-stat strong { color: #006495; }
.vd-scroll { display: grid; gap: 8px; max-height: 260px; margin-top: 10px; overflow-y: auto; }
.vd-receipt { padding: 10px; border: 1px solid #c3c5d9; border-radius: 12px; box-shadow: 0 1px 3px #0000000d; }
.vd-receipt header,.vd-receipt header > span { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: space-between; }
.vd-receipt header b { color: #006495; font-size: 13px; }
.vd-receipt small { color: #737687; font-size: 12px; }
.vd-receipt > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 6px; padding-top: 4px; border-top: 1px solid #dae2fd66; }
.vd-paid { color: #006c49; }.vd-debt { color: #ba1a1a; }
.vd-debt-summary { display: grid; gap: 10px; padding: 12px; border: 1px solid #c3c5d999; border-radius: 16px; background: #f2f3ff; }
.vd-debt-summary > div:not(.vd-progress) { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px; }
.vd-debt-summary strong { font: 700 16px/22px "Plus Jakarta Sans",Arial,sans-serif; color: #ba1a1a; }
.vd-progress { height: 6px; overflow: hidden; border-radius: 999px; background: #eaedff; }
.vd-progress i { display: block; height: 100%; background: #ba1a1a; border-radius: inherit; }
.vd-card h4 { margin: 12px 0 0; font-size: 12px; font-weight:700; }
.vd-ledger { max-height: 200px; }
.vd-ledger article { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border: 1px solid #c3c5d966; border-radius: 12px; background: #f2f3ff; }
.vd-ledger article > div:last-child { text-align: right; }
.vd-ledger p { margin: 2px 0 0; color: #737687; }
.vd-ledger small { display: block; font-size: 11px; }
.vd-actions { display: flex; gap: 12px; padding-top: 8px; }
.vd-actions button { flex: 1; min-width: 0; min-height: 42px; padding: 12px 8px; border: 1px solid #c3c5d9; border-radius: 12px; background: #fff; color: #131b2e; font: 600 12px/16px Inter,Arial,sans-serif; }
.vd-actions button:last-child { border-color: #006495; color: #fff; background: #006495; box-shadow: 0 4px 6px #0000001a; }
.vendor-detail-dialog [hidden] { display: none; }
.vendor-mobile-contact button { display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:50%;background:#eaedff;color:#737687; }
.vendor-mobile-contact .icon,.vendor-mobile-contact svg { width:18px;height:18px; }
.vendor-mobile-avatar.tone-1 { background:#dae2fd;color:#434656; }.vendor-mobile-avatar.tone-2 { background:#b6c4ff;color:#006495; }.vendor-mobile-avatar.tone-3 { background:#ffddb8;color:#653e00; }
.vendor-mobile-status.unknown { background:#eaedff;color:#434656; }.vendor-mobile-metrics .unknown { color:#737687; }
.vd-info-row a { color:#006495;font-weight:600;text-align:right;overflow-wrap:anywhere;text-decoration:none; }
.vd-receipt-view { display:grid;place-items:center;width:24px;height:24px;min-height:24px;padding:4px;border:0;background:transparent;color:#737687; }.vd-receipt-view .icon,.vd-receipt-view svg { width:16px;height:16px; }
.vd-actions button:disabled { opacity:.5; }
.vd-payment-box { display:flex;flex-direction:column;gap:10px;margin-top:12px;padding:12px;border:1px solid #b6c4ff;border-radius:16px;background:#dce1ff66; }
.vd-payment-box > header { display:flex;align-items:center;justify-content:space-between;gap:8px; }.vd-payment-box > header > div { display:flex;align-items:center;gap:8px;min-width:0; }.vd-payment-box > header > div > .icon { display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#dce1ff;color:#006495; }.vd-payment-box h4 { margin:0;color:#131b2e;font:600 13px/18px Inter,Arial,sans-serif; }.vd-payment-box header small { display:block;color:#434656;font-size:11px; }.vd-payment-box header small b { color:#ba1a1a; }.vd-payment-box > header > button { display:flex;align-items:center;gap:4px;min-height:30px;padding:6px 10px;border:0;border-radius:10px;background:#006495;color:#fff;font:600 11px/14px Inter,Arial,sans-serif; }.vd-payment-box > header > button .icon { width:15px;height:15px; }.vd-payment-box > header > button .icon.open { transform:rotate(180deg); }
.vd-payment-box form { display:flex;flex-direction:column;gap:9px;padding-top:10px;border-top:1px solid #b6c4ff; }.vd-payment-box form[hidden] { display:none; }.vd-payment-box label { display:flex;flex-direction:column;gap:5px;color:#434656;font:500 11px/14px Inter,Arial,sans-serif; }.vd-payment-box input,.vd-payment-box select { width:100%;min-height:38px;padding:8px 10px;border:1px solid #c3c5d9;border-radius:10px;background:#fff;color:#131b2e;font:600 14px/20px Inter,Arial,sans-serif; }.vd-payment-box input:focus,.vd-payment-box select:focus { outline:1px solid #006495; }.vd-payment-chips { display:flex;gap:5px;overflow-x:auto; }.vd-payment-chips button { flex:0 0 auto;min-height:26px;padding:5px 8px;border:1px solid #c3c5d9;border-radius:999px;background:#fff;color:#434656;font-size:10px; }.vd-payment-chips button:first-child { border-color:#006495;color:#006495;font-weight:600; }.vd-payment-submit { display:flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:9px;border:0;border-radius:10px;background:#006c49;color:#fff;font:600 12px/16px Inter,Arial,sans-serif; }.vd-payment-submit .icon,.vd-payment-submit svg { width:18px;height:18px; }
.vendor-detail-dialog *, .vendor-mobile-card * { box-sizing:border-box; }
body:has(.vendor-detail-dialog[open]),html:has(.vendor-detail-dialog[open]) { overflow:hidden; }