html, body {
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
a, .btn-link {
color: #008FD3;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}
.content {
padding-top: 1.1rem;
}
h1:focus {
outline: none;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid #e50000;
}
.validation-message {
color: #e50000;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
.darker-border-checkbox.form-check-input {
border-color: #929292;
}
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
color: var(--bs-secondary-color);
text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
text-align: start;
}
/* ============================================================
InvexImport UI kit — invex-ui theme (accent #008FD3)
============================================================ */
:root {
--ii-accent: #008FD3;
--ii-accent-dark: #007ab5;
--ii-ink: #111827;
--ii-muted: #6b7280;
--ii-line: #e5e7eb;
}
.ii-page { width: 100%; }
.ii-page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.ii-advisor-btn { flex: none; width: 44px; height: 44px; border-radius: 12px; background: #0b5563; color: #fff; display: grid; place-items: center; font-size: 22px; text-decoration: none; box-shadow: 0 4px 14px rgba(8,80,100,.28); transition: transform .15s, box-shadow .15s; }
.ii-advisor-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(8,80,100,.4); }
.ii-page-title { font-size: 1.35rem; font-weight: 700; color: var(--ii-ink); line-height: 1.15; }
.ii-page-sub { font-size: 0.85rem; color: var(--ii-muted); margin-top: 0.15rem; }
.ii-head-left { display: flex; align-items: center; gap: 0.85rem; }
/* ---- stat tiles ---- */
.ii-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.ii-stat { background: #fff; border: 1px solid var(--ii-line); border-radius: 10px; padding: 0.9rem 1rem; display: flex; align-items: center; gap: 0.8rem; }
.ii-ic { border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.ii-ic svg { width: 20px; height: 20px; fill: currentColor; }
.ii-stat .ii-ic { width: 40px; height: 40px; }
.ii-stat .ii-ic svg { width: 20px; height: 20px; }
.ii-stat-val { font-size: 1.3rem; font-weight: 700; color: var(--ii-ink); line-height: 1.1; }
.ii-stat-lbl { font-size: 0.7rem; color: var(--ii-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
/* ---- import cards ---- */
.ii-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ii-card { background: #fff; border: 1px solid var(--ii-line); border-radius: 12px; padding: 1.15rem; display: flex; flex-direction: column; gap: 0.55rem; text-decoration: none; transition: box-shadow .15s, border-color .15s, transform .15s; }
.ii-card:hover { box-shadow: 0 6px 18px rgba(2, 132, 199, 0.12); border-color: #bae6fd; transform: translateY(-2px); }
.ii-card .ii-ic { width: 44px; height: 44px; }
.ii-card .ii-ic svg { width: 22px; height: 22px; }
.ii-card-title { font-size: 1rem; font-weight: 700; color: var(--ii-ink); }
.ii-card-desc { font-size: 0.82rem; color: var(--ii-muted); line-height: 1.45; flex: 1; }
.ii-card-cta { font-size: 0.82rem; font-weight: 600; color: var(--ii-accent); display: inline-flex; align-items: center; gap: 0.3rem; }
/* ---- buttons ---- */
.ii-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.83rem; font-weight: 600; padding: 0.5rem 0.95rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s; }
.ii-btn svg { width: 15px; height: 15px; fill: currentColor; }
.ii-btn-primary { background: var(--ii-accent); color: #fff; }
.ii-btn-primary:hover { background: var(--ii-accent-dark); }
.ii-btn-primary:disabled { background: #cbd5e1; cursor: not-allowed; }
.ii-btn-ghost { background: #fff; color: #374151; border-color: var(--ii-line); }
.ii-btn-ghost:hover { background: #f9fafb; color: var(--ii-accent); border-color: #bae6fd; }
/* ---- panel ---- */
.ii-panel { background: #fff; border: 1px solid var(--ii-line); border-radius: 12px; }
.ii-panel-body { padding: 1.15rem; }
.ii-panel-foot { display: flex; justify-content: flex-end; gap: 0.6rem; padding: 0.85rem 1.15rem; border-top: 1px solid var(--ii-line); background: #fafafa; border-radius: 0 0 12px 12px; }
/* ---- stepper ---- */
.ii-steps { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.15rem; }
.ii-step { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--ii-muted); }
.ii-step-n { width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; color: #6b7280; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; }
.ii-step.active { color: var(--ii-ink); }
.ii-step.active .ii-step-n { background: var(--ii-accent); color: #fff; }
.ii-step.done .ii-step-n { background: #22c55e; color: #fff; }
.ii-step-bar { width: 40px; height: 2px; background: #e5e7eb; }
/* ---- dropzone ---- */
.ii-drop { position: relative; border: 2px dashed #cbd5e1; border-radius: 12px; padding: 2.2rem 1rem; text-align: center; background: #f8fafc; transition: border-color .15s, background .15s; }
.ii-drop:hover { border-color: var(--ii-accent); background: #f0f9ff; }
/* NOTE: plain descendant selector — ::deep is scoped-CSS only and is invalid here. */
.ii-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ii-drop-ic { width: 46px; height: 46px; margin: 0 auto 0.6rem; color: var(--ii-accent); }
.ii-drop-ic svg { width: 100%; height: 100%; fill: currentColor; }
.ii-drop-title { font-weight: 600; color: var(--ii-ink); font-size: 0.9rem; }
.ii-drop-sub { font-size: 0.78rem; color: var(--ii-muted); margin-top: 0.2rem; }
/* ---- file chip ---- */
.ii-file { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border: 1px solid var(--ii-line); border-radius: 10px; background: #f8fafc; }
.ii-file-ic { width: 34px; height: 34px; border-radius: 8px; background: #e0f2fe; color: var(--ii-accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ii-file-ic svg { width: 18px; height: 18px; fill: currentColor; }
.ii-file-name { font-size: 0.85rem; font-weight: 600; color: var(--ii-ink); }
.ii-file-meta { font-size: 0.74rem; color: var(--ii-muted); }
.ii-x { margin-left: auto; border: none; background: none; color: #9ca3af; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.2rem; border-radius: 6px; }
.ii-x:hover { background: #f3f4f6; color: #ef4444; }
/* ---- column chips ---- */
.ii-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ii-chip { font-size: 0.74rem; font-weight: 600; padding: 0.25rem 0.6rem; border-radius: 9999px; background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.ii-chip-req { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
/* ---- data table ---- */
.ii-table-wrap { overflow-x: auto; border: 1px solid var(--ii-line); border-radius: 10px; }
.ii-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ii-table th { text-align: left; background: #eff6ff; color: #1e40af; font-weight: 600; font-size: 0.72rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid #bfdbfe; white-space: nowrap; }
.ii-table td { padding: 0.45rem 0.7rem; border-bottom: 1px solid #f1f5f9; color: #334155; white-space: nowrap; }
.ii-table tbody tr:last-child td { border-bottom: none; }
.ii-table tr:hover td { background: #f8fafc; }
/* ---- alert ---- */
.ii-alert { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 10px; font-size: 0.83rem; font-weight: 500; }
.ii-alert-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.ii-sec-title { font-size: 0.9rem; font-weight: 700; color: var(--ii-ink); margin: 1.4rem 0 0.7rem; }
.ii-muted { color: var(--ii-muted); font-size: 0.82rem; }
@media (max-width: 900px) {
.ii-stats { grid-template-columns: repeat(2, 1fr); }
.ii-cards { grid-template-columns: 1fr; }
}
/* ============================================================
Purchase Invoice OCR — document scanner UI
============================================================ */
.ocr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1000px) { .ocr-grid { grid-template-columns: 1fr; } }
/* hero icon with a subtle gradient (AI feature) */
.ocr-hero-ic { width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #6366f1 0%, #008FD3 100%); }
.ocr-hero-ic svg { width: 22px; height: 22px; fill: currentColor; }
.ocr-tag-ai { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; color: #fff; background: linear-gradient(135deg, #6366f1, #008FD3); padding: 0.12rem 0.42rem; border-radius: 5px; vertical-align: middle; margin-left: 0.5rem; }
/* document panel */
.ocr-doc { position: relative; background: #0b1220; border-radius: 0 0 12px 12px; overflow: hidden; min-height: 440px; display: flex; align-items: center; justify-content: center; }
.ocr-doc img { width: 100%; height: auto; display: block; }
.ocr-doc-empty { text-align: center; color: #94a3b8; padding: 2rem; }
.ocr-doc-empty svg { width: 54px; height: 54px; fill: #475569; margin-bottom: 0.6rem; }
.ocr-doc-name { font-size: 0.85rem; color: #cbd5e1; font-weight: 600; }
/* scanner corner brackets */
.ocr-corner { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(0, 143, 211, 0.9); z-index: 3; }
.ocr-corner.tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.ocr-corner.tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.ocr-corner.bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.ocr-corner.br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
/* animated scan line */
.ocr-scanline { position: absolute; left: 0; right: 0; height: 90px; z-index: 2; background: linear-gradient(180deg, rgba(0,143,211,0) 0%, rgba(0,143,211,0.35) 50%, rgba(0,143,211,0) 100%); box-shadow: 0 0 22px rgba(0,143,211,0.55); animation: ocr-scan 1.7s ease-in-out infinite; }
@keyframes ocr-scan { 0% { top: -90px; } 100% { top: 100%; } }
/* confidence badge */
.ocr-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.42rem; border-radius: 9999px; }
.ocr-badge-hi { background: #dcfce7; color: #166534; }
.ocr-badge-md { background: #fef9c3; color: #854d0e; }
/* extracted fields */
.ocr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.85rem; }
.ocr-field { margin-bottom: 0.8rem; }
.ocr-field.full { grid-column: 1 / -1; }
.ocr-field-lbl { display: flex; align-items: center; justify-content: space-between; font-size: 0.66rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.22rem; }
.ocr-input { width: 100%; font-size: 0.85rem; padding: 0.42rem 0.6rem; border: 1px solid #e2e8f0; border-radius: 8px; color: #0f172a; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ocr-input:focus { outline: none; border-color: #008FD3; box-shadow: 0 0 0 3px rgba(0,143,211,0.15); }
/* processing tag + skeletons */
.ocr-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 600; }
.ocr-status.scan { color: #008FD3; }
.ocr-status.done { color: #166534; }
.ocr-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ocr-pulse 1s ease-in-out infinite; }
@keyframes ocr-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.ocr-sk { height: 38px; border-radius: 8px; margin-bottom: 0.8rem; background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%); background-size: 400% 100%; animation: ocr-shimmer 1.4s ease infinite; }
.ocr-sk.sm { height: 12px; width: 45%; margin-bottom: 0.35rem; }
@keyframes ocr-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
/* ---- section head ---- */
.ocr-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.75rem 1.15rem; border-bottom: 1px solid var(--ii-line); }
/* ---- upload form grid ---- */
.ocr-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem 0.85rem; }
@media (max-width: 900px) { .ocr-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ocr-form { grid-template-columns: 1fr; } }
select.ocr-input { height: 34px; }
.ocr-file-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.4rem; height: 34px; border: 1px dashed #cbd5e1; border-radius: 8px; font-size: 0.82rem; font-weight: 600; color: #475569; background: #f8fafc; cursor: pointer; transition: border-color .15s, background .15s; overflow: hidden; }
.ocr-file-btn:hover { border-color: var(--ii-accent); background: #f0f9ff; color: var(--ii-accent); }
.ocr-file-btn.has-files { border-style: solid; border-color: #bae6fd; background: #f0f9ff; color: var(--ii-accent); }
.ocr-file-btn.is-disabled { opacity: 0.55; cursor: not-allowed; }
/* NOTE: plain descendant selector — ::deep is scoped-CSS only and is invalid here. */
.ocr-file-btn input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.ocr-live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 600; color: #475569; cursor: pointer; }
/* ---- SearchSelect (searchable dropdown) ---- */
.ss { position: relative; }
.ss-btn { width: 100%; height: 34px; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.6rem; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; font-size: 0.85rem; color: #0f172a; text-align: left; transition: border-color .15s, box-shadow .15s; }
.ss-btn:hover:not(:disabled) { border-color: #cbd5e1; }
.ss-btn:focus-visible { outline: none; border-color: var(--ii-accent); box-shadow: 0 0 0 3px rgba(0,143,211,.15); }
.ss-btn:disabled { opacity: .55; cursor: not-allowed; background: #f8fafc; }
.ss.is-open .ss-btn { border-color: var(--ii-accent); box-shadow: 0 0 0 3px rgba(0,143,211,.15); }
.ss-ic { flex-shrink: 0; font-size: 0.85rem; }
.ss-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-lbl.is-ph { color: #94a3b8; }
.ss-cv { width: 11px; height: 11px; fill: #64748b; flex-shrink: 0; transition: transform .15s; }
.ss.is-open .ss-cv { transform: rotate(180deg); }
.ss-back { position: fixed; inset: 0; z-index: 40; }
.ss-pop { position: absolute; top: calc(100% + 5px); left: 0; right: 0; min-width: 220px; z-index: 50; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 12px 34px rgba(15,23,42,.16); overflow: hidden; }
.ss-search { width: 100%; border: none; border-bottom: 1px solid #f1f5f9; padding: 0.5rem 0.65rem; font-size: 0.82rem; outline: none; color: #0f172a; }
.ss-search::placeholder { color: #94a3b8; }
.ss-list { list-style: none; margin: 0; padding: 0.25rem; max-height: 260px; overflow-y: auto; }
.ss-list li button { width: 100%; display: block; text-align: left; border: none; background: none; padding: 0.42rem 0.55rem; border-radius: 6px; font-size: 0.82rem; color: #334155; cursor: pointer; }
.ss-list li button:hover { background: #f1f5f9; }
.ss-list li button.is-active { background: #e0f2fe; color: #007ab5; font-weight: 600; }
.ss-list li button.ss-clear { color: #dc2626; font-size: 0.76rem; }
.ss-empty { padding: 0.65rem; font-size: 0.8rem; color: #94a3b8; text-align: center; }
/* upload form footer: chips left, Scan right — no dead space */
.ocr-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid #f1f5f9; }
.ocr-form-foot .ii-chips { flex: 1; }
/* ---- error banner ---- */
.ocr-err { display: flex; align-items: center; gap: 0.5rem; background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; font-size: 0.83rem; font-weight: 500; padding: 0.6rem 0.9rem; border-radius: 10px; margin-bottom: 1rem; }
.ocr-err .ii-x { margin-left: auto; }
/* ---- progress bar ---- */
.ocr-prog-wrap { display: flex; align-items: center; gap: 0.45rem; }
.ocr-prog { width: 72px; height: 5px; flex-shrink: 0; background: #e5e7eb; border-radius: 999px; overflow: hidden; }
.ocr-prog span { display: block; height: 100%; background: #22c55e; border-radius: 999px; transition: width .3s; }
.ocr-prog-txt { font-size: 0.72rem; color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ---- status pills ---- */
.ocr-st { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 9999px; background: #f1f5f9; color: #475569; }
.ocr-st-scanned { background: #dcfce7; color: #166534; }
.ocr-st-submitted { background: #dbeafe; color: #1e40af; }
.ocr-st-approved { background: #e0e7ff; color: #3730a3; }
.ocr-st-failed { background: #fee2e2; color: #991b1b; }
.ocr-st-pending, .ocr-st-retrying { background: #fef9c3; color: #854d0e; }
.ocr-st-scanning { background: #e0f2fe; color: #075985; }
.ii-btn.ocr-mini { padding: 0.28rem 0.6rem; font-size: 0.75rem; margin-left: 0.3rem; }
/* ---- mapping row ---- */
.ocr-maprow th { background: #eef2ff !important; border-bottom: 1px solid #c7d2fe !important; min-width: 150px; vertical-align: top; }
.ocr-map-cell { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; }
.ocr-tag { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.4rem; border-radius: 5px; background: #dbeafe; color: #1e40af; border: 1px solid #bfdbfe; }
.ocr-tag.is-price { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ocr-tag button { border: none; background: none; cursor: pointer; color: inherit; opacity: 0.6; padding: 0; font-size: 0.7rem; }
.ocr-tag button:hover { opacity: 1; }
.ocr-map-sel { font-size: 0.7rem; padding: 0.15rem 0.3rem; border: 1px solid #c7d2fe; border-radius: 5px; background: #fff; color: #4338ca; font-weight: 600; max-width: 145px; }
th.ocr-calc, td.ocr-calc { background: #f0fdf4 !important; text-align: right; font-variant-numeric: tabular-nums; color: #166534; }
/* ---- scanned-image strip in the mapping dialog ---- */
.ocr-scan-strip { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--ii-line); background: #0b1220; overflow-x: auto; flex-shrink: 0; max-height: 320px; }
.ocr-scan-strip img { height: 300px; width: auto; border-radius: 8px; border: 1px solid rgba(255,255,255,.12); background: #fff; object-fit: contain; }
/* ---- approve dialog ---- */
.ocr-dlg-back { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.ocr-dlg { background: #fff; border-radius: 14px; width: min(1200px, 96vw); max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); }
.ocr-dlg-full { width: 97vw; height: 95vh; max-height: 95vh; }
/* item (ERP) column + per-row picker */
.ocr-item-c { min-width: 168px; }
.ocr-item-nm { font-size: 0.78rem; font-weight: 600; color: #0f172a; line-height: 1.2; margin-bottom: 0.18rem; }
.ocr-change { border: none; background: none; color: var(--ii-accent); font-size: 0.7rem; font-weight: 600; cursor: pointer; padding: 0.15rem 0 0; text-decoration: underline; }
.ocr-change:hover { color: var(--ii-accent-dark); }
.ocr-src { font-size: 0.64rem; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 0.3rem; }
.ocr-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.9rem 1.15rem; border-bottom: 1px solid var(--ii-line); }
.ocr-dlg-body { padding: 1.15rem; overflow: auto; flex: 1; }
.ocr-appr-in { width: 110px; font-size: 0.78rem; padding: 0.2rem 0.35rem; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #0f172a; }
.ocr-appr-in:hover:not(:disabled) { border-color: #e2e8f0; background: #fff; }
.ocr-appr-in:focus { outline: none; border-color: var(--ii-accent); background: #fff; box-shadow: 0 0 0 2px rgba(0,143,211,0.15); }
/* Approve table: keep #, Item name and Rate frozen on the left while the rest scrolls. */
.ocr-appr { border-collapse: separate; border-spacing: 0; }
.ocr-appr th.ocr-pin, .ocr-appr td.ocr-pin { position: sticky; background: #fff; z-index: 2; }
.ocr-appr thead th.ocr-pin { z-index: 3; background: #eef4fb; }
.ocr-appr tbody tr:hover td.ocr-pin { background: #f8fafc; }
.ocr-appr .pin-n { left: 0; min-width: 46px; width: 46px; text-align: center; }
.ocr-appr .pin-it { left: 46px; min-width: 250px; width: 250px; }
.ocr-appr .pin-rt { left: 296px; min-width: 110px; width: 110px; box-shadow: 6px 0 8px -6px rgba(15, 23, 42, 0.18); }
.ocr-appr-nm { width: 230px; font-weight: 600; }
.ocr-appr-sub { font-size: 0.68rem; color: #64748b; margin-top: 2px; display: flex; align-items: center; gap: 0.35rem; line-height: 1.2; }
/* ============================================================
Inventory dashboard — port of invex-ui's dashboard components
============================================================ */
.dash { min-height: 100%; background: #f1f5f9; padding: 1rem 1.25rem; }
.dash-stack { display: flex; flex-direction: column; gap: 1rem; }
@keyframes dash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* KPI grid: 2 / 3 / 6 columns */
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
@media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(6, 1fr); } }
.kpi { position: relative; background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); transition: box-shadow .15s; animation: dash-in .25s ease both; }
.kpi.clickable { cursor: pointer; }
.kpi.clickable:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.kpi-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.kpi-in { padding: 10px 12px 10px 14px; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 28px; }
.kpi-ic { width: 28px; height: 28px; border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-badge { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.kpi-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #0f172a; }
.kpi-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; font-weight: 600; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-prog-track { height: 4px; background: #f1f5f9; border-radius: 9999px; overflow: hidden; margin-top: 8px; }
.kpi-prog-fill { height: 100%; border-radius: 9999px; transition: width .6s ease; }
.kpi-hint { font-size: 10px; color: #94a3b8; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* badge tones */
.tone-good { background: #d1fae5; color: #047857; }
.tone-warn { background: #fef3c7; color: #b45309; }
.tone-bad { background: #fee2e2; color: #b91c1c; }
.tone-neutral { background: #f1f5f9; color: #475569; }
.tone-blue { background: #dbeafe; color: #1d4ed8; }
.tone-slate { background: #f1f5f9; color: #475569; }
/* Panel */
.panel { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; animation: dash-in .3s ease both; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid #f1f5f9; padding: 8px 12px; }
.panel-head-l { display: flex; align-items: center; gap: 6px; min-width: 0; }
.panel-ic { color: #008FD3; flex-shrink: 0; display: flex; }
.panel-title { font-size: 12px; font-weight: 700; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-head-r { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.panel-legend { display: flex; align-items: center; gap: 4px; font-size: 10px; color: #64748b; }
.panel-legend i { width: 8px; height: 8px; border-radius: 9999px; display: inline-block; }
.panel-note { font-size: 10px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.panel-body { padding: 12px; }
.panel-body.tight { padding: 10px; }
.dash-3 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .dash-3 { grid-template-columns: repeat(3, 1fr); } }
.dash-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 1024px) { .dash-2 { grid-template-columns: repeat(2, 1fr); } }
/* SecHead */
.sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sec-head span.bar { width: 4px; height: 16px; background: #008FD3; border-radius: 2px; }
.sec-head h2 { font-size: 14px; font-weight: 700; color: #1e293b; margin: 0; }
.sec-head .note { font-size: 11px; color: #94a3b8; }
/* chart center overlays */
.chart-wrap { position: relative; }
.chart-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.chart-center .big { font-size: 24px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; line-height: 1; }
.chart-center .big.lg { font-size: 30px; }
.chart-center .cap { font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; }
.donut-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.donut-legend span { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #475569; }
.donut-legend i { width: 9px; height: 9px; border-radius: 2px; }
/* expiry bars */
.exp-bars { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 220px; padding-top: 8px; }
.exp-col { display: flex; flex-direction: column; align-items: center; flex: 1; height: 100%; justify-content: flex-end; }
.exp-val { font-size: 10px; font-weight: 600; color: #334155; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.exp-bar { width: 100%; max-width: 48px; border-radius: 4px 4px 0 0; min-height: 3px; transition: height .8s ease; }
.exp-lbl { font-size: 10px; color: #64748b; margin-top: 6px; }
/* table rows */
.tcard-rows { display: flex; flex-direction: column; gap: 12px; }
.trow.click { cursor: pointer; }
.trow-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.trow-name { font-size: 11px; font-weight: 600; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trow.click:hover .trow-name { color: #008FD3; }
.trow-r { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.trow-val { font-size: 11px; font-variant-numeric: tabular-nums; color: #0f172a; font-weight: 700; }
.trow-sub { font-size: 10px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.trow-track { height: 6px; background: #f1f5f9; border-radius: 9999px; overflow: hidden; }
.trow-fill { height: 100%; border-radius: 9999px; transition: width .6s ease; }
.dash-empty { text-align: center; font-size: 12px; color: #94a3b8; padding: 40px 0; }
.dash-err { background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 1.5rem; text-align: center; }
.dash-err p { font-size: 13px; font-weight: 600; color: #b91c1c; margin: 0 0 0.75rem; }
/* ============================================================
Inventory board — port of Reference/InventoryDashboard.html
All selectors scoped under .ib-root so its .kpi/.btn/.topbar
classes never collide with the app header, bootstrap, or the
earlier dashboard styles above.
============================================================ */
.ib-root {
--bg: #f5f7fb; --panel: #fff; --ink: #0f2440; --ink-soft: #5b6b82;
--line: #e7edf5; --line-soft: #eef2f8;
--brand: #2f6bff; --brand-soft: #eaf1ff; --good: #12a366; --good-soft: #e7f7ef;
--warn: #e39a12; --warn-soft: #fdf3e0; --bad: #e2483d; --bad-soft: #fdecea;
--purple: #7a52e0; --purple-soft: #f0eafd; --teal: #0aa2b6; --teal-soft: #e2f6f8;
--slate: #64748b; --slate-soft: #eef1f6;
--shadow: 0 8px 24px rgba(15,36,64,0.06); --shadow-lg: 0 20px 60px rgba(15,36,64,0.18); --radius: 16px;
background: var(--bg); color: var(--ink);
font-family: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
min-height: 100%;
}
.ib-root * { box-sizing: border-box; }
.ib-root .topbar { position: sticky; top: 0; z-index: 20; background: linear-gradient(100deg, #16337a, #1f47a6); color: #fff; padding: 14px 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; box-shadow: 0 4px 16px rgba(20,48,110,0.18); }
.ib-root .brand { display: flex; align-items: center; gap: 12px; }
.ib-root .brand .logo { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.16); display: grid; place-items: center; font-size: 20px; border: 1px solid rgba(255,255,255,0.22); }
.ib-root .brand h1 { font-size: 19px; font-weight: 700; letter-spacing: 0.2px; margin: 0; }
.ib-root .brand p { font-size: 12px; opacity: 0.8; margin-top: 1px; }
.ib-root .filters { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; }
.ib-root .select { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.22); border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 500; appearance: none; cursor: pointer; min-width: 120px; }
.ib-root .select option { color: #0f2440; }
.ib-root .btn { border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all .15s ease; white-space: nowrap; }
.ib-root .btn-light { background: #fff; color: var(--brand); }
.ib-root .btn-light:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.ib-root .btn-ghost { background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.24); }
.ib-root .btn-ghost:hover { background: rgba(255,255,255,0.22); }
.ib-root .btn-primary { background: var(--brand); color: #fff; }
.ib-root .btn-primary:hover { background: #245ce0; }
.ib-root .btn-outline { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.ib-root .btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.ib-root .wrap { padding: 14px 18px 28px; }
.ib-root .section-title { font-size: 14px; font-weight: 700; color: var(--ink); margin: 18px 2px 10px; display: flex; align-items: center; gap: 8px; }
.ib-root .section-title .pill { font-size: 11px; font-weight: 600; color: var(--ink-soft); background: var(--slate-soft); padding: 3px 10px; border-radius: 20px; }
.ib-root .kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; }
.ib-root .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 12px 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
.ib-root .kpi:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,36,64,0.10); }
.ib-root .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent, var(--brand)); }
.ib-root .kpi .k-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.ib-root .kpi .k-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; background: var(--accent-soft, var(--brand-soft)); }
.ib-root .kpi .k-trend { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 20px; }
.ib-root .trend-up { color: var(--good); background: var(--good-soft); }
.ib-root .trend-down { color: var(--bad); background: var(--bad-soft); }
.ib-root .trend-flat { color: var(--slate); background: var(--slate-soft); }
.ib-root .kpi .k-label { font-size: 11.5px; color: var(--ink-soft); font-weight: 500; }
.ib-root .kpi .k-value { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; margin-top: 1px; }
.ib-root .kpi .k-sub { font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.ib-root .row { display: grid; gap: 14px; margin: 0; }
.ib-root .alert { margin: 0; }
.ib-root .row.r-3 { grid-template-columns: 1fr 1fr 1fr; }
.ib-root .card { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); padding: 14px 16px; }
.ib-root .card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ib-root .card-head h3 { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.ib-root .card-head .muted { font-size: 12px; color: var(--ink-soft); }
.ib-root .link { font-size: 12px; font-weight: 600; color: var(--brand); cursor: pointer; }
.ib-root .donut-wrap { display: flex; align-items: center; gap: 22px; }
.ib-root .donut { width: 150px; height: 150px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative; }
.ib-root .donut::after { content: ""; position: absolute; inset: 20px; background: var(--panel); border-radius: 50%; }
.ib-root .donut .d-center { position: relative; z-index: 1; text-align: center; }
.ib-root .donut .d-center b { font-size: 22px; font-weight: 800; }
.ib-root .donut .d-center span { font-size: 11px; color: var(--ink-soft); display: block; }
.ib-root .legend { display: flex; flex-direction: column; gap: 12px; }
.ib-root .legend .lg { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.ib-root .legend .dot { width: 12px; height: 12px; border-radius: 4px; }
.ib-root .legend b { margin-left: auto; font-weight: 700; }
.ib-root .bar-list { display: flex; flex-direction: column; gap: 13px; }
.ib-root .bar-item .bi-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.ib-root .bar-item .bi-top b { font-weight: 600; }
.ib-root .bar-item .bi-top span { color: var(--ink-soft); font-weight: 600; }
.ib-root .track { height: 9px; background: var(--line-soft); border-radius: 20px; overflow: hidden; }
.ib-root .fill { height: 100%; border-radius: 20px; }
.ib-root .ageing { display: flex; align-items: flex-end; gap: 14px; height: 150px; padding: 0 6px; }
.ib-root .ageing .ag { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.ib-root .ageing .ag .agcol { width: 100%; max-width: 42px; border-radius: 8px 8px 4px 4px; flex: none; }
.ib-root .ageing .ag small { font-size: 11px; color: var(--ink-soft); font-weight: 600; }
.ib-root .alert-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 9px; }
.ib-root .alert { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; border: 1px solid var(--line); background: #fbfdff; }
.ib-root .alert .a-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; flex: none; }
.ib-root .alert .a-body { flex: 1; min-width: 0; }
.ib-root .alert .a-title { font-size: 13px; font-weight: 600; }
.ib-root .alert .a-desc { font-size: 11.5px; color: var(--ink-soft); }
.ib-root .alert .a-count { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.ib-root .qa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.ib-root .qa { border: 1px solid var(--line); border-radius: 11px; padding: 11px 8px; text-align: center; cursor: pointer; background: #fbfdff; transition: all .15s ease; display: flex; align-items: center; gap: 10px; justify-content: center; }
.ib-root .qa:hover { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.ib-root .qa .qa-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; flex: none; }
.ib-root .qa .qa-lbl { font-size: 12px; font-weight: 600; color: var(--ink); }
.ib-root .config-band { background: linear-gradient(100deg, #eef3ff, #f6f9ff); border: 1px solid #dbe6ff; border-radius: var(--radius); padding: 18px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.ib-root .config-band .cb-ico { width: 52px; height: 52px; border-radius: 15px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 24px; }
.ib-root .config-band h3 { font-size: 15px; font-weight: 700; margin: 0; }
.ib-root .config-band p { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
/* dialog */
.ib-overlay { position: fixed; inset: 0; background: rgba(15,30,60,0.5); backdrop-filter: blur(3px); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 22px; }
.ib-overlay .dialog { width: 100%; max-width: 1080px; max-height: 92vh; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg, 0 20px 60px rgba(15,36,64,0.18)); display: flex; flex-direction: column; overflow: hidden; }
.ib-overlay .dlg-head { background: linear-gradient(100deg, #0f2c63, #2f6bff); color: #fff; padding: 18px 24px; display: flex; align-items: center; gap: 14px; }
.ib-overlay .dlg-head .dh-ico { width: 42px; height: 42px; border-radius: 12px; background: rgba(255,255,255,0.16); display: grid; place-items: center; font-size: 20px; }
.ib-overlay .dlg-head h2 { font-size: 18px; font-weight: 700; margin: 0; }
.ib-overlay .dlg-head p { font-size: 12px; opacity: 0.85; }
.ib-overlay .dlg-x { margin-left: auto; background: rgba(255,255,255,0.14); border: none; color: #fff; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.ib-overlay .dlg-body { display: flex; min-height: 0; flex: 1; }
.ib-overlay .tabs { width: 230px; border-right: 1px solid #e7edf5; padding: 14px 10px; background: #fafcff; overflow: auto; flex: none; }
.ib-overlay .tab { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 11px; font-size: 13px; font-weight: 600; color: #5b6b82; cursor: pointer; margin-bottom: 4px; }
.ib-overlay .tab .t-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; background: #eef1f6; }
.ib-overlay .tab:hover { background: #f0f4fb; color: #0f2440; }
.ib-overlay .tab.active { background: #eaf1ff; color: #2f6bff; }
.ib-overlay .tab.active .t-ico { background: #2f6bff; color: #fff; }
.ib-overlay .panes { flex: 1; overflow: auto; padding: 22px 26px; }
.ib-overlay .pane h4 { font-size: 15px; font-weight: 700; margin: 0 0 4px; }
.ib-overlay .pane .pane-sub { font-size: 12.5px; color: #5b6b82; margin-bottom: 18px; }
.ib-overlay .opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ib-overlay .opt { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid #e7edf5; border-radius: 13px; background: #fbfdff; }
.ib-overlay .opt .o-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 15px; background: #eaf1ff; flex: none; }
.ib-overlay .opt .o-body { flex: 1; min-width: 0; }
.ib-overlay .opt .o-title { font-size: 13px; font-weight: 600; }
.ib-overlay .opt .o-desc { font-size: 11px; color: #5b6b82; }
.ib-overlay .switch { position: relative; width: 44px; height: 25px; flex: none; }
.ib-overlay .switch input { display: none; }
.ib-overlay .slider { position: absolute; inset: 0; background: #cfd8e6; border-radius: 20px; transition: .2s; cursor: pointer; }
.ib-overlay .slider::before { content: ""; position: absolute; height: 19px; width: 19px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.ib-overlay .switch input:checked + .slider { background: #12a366; }
.ib-overlay .switch input:checked + .slider::before { transform: translateX(19px); }
.ib-overlay .field-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; }
.ib-overlay .field { display: flex; flex-direction: column; gap: 6px; }
.ib-overlay .field label { font-size: 12px; font-weight: 600; color: #5b6b82; }
.ib-overlay .field input, .ib-overlay .field select { border: 1px solid #e7edf5; border-radius: 10px; padding: 9px 11px; font-size: 13px; background: #fff; color: #0f2440; }
.ib-overlay .seg { display: inline-flex; background: #eef1f6; border-radius: 11px; padding: 3px; gap: 3px; }
.ib-overlay .seg button { border: none; background: transparent; padding: 8px 16px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #5b6b82; cursor: pointer; }
.ib-overlay .seg button.on { background: #fff; color: #2f6bff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.ib-overlay .widget-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px dashed #e7edf5; border-radius: 10px; font-size: 12.5px; font-weight: 600; background: #fff; cursor: grab; margin: 0 8px 8px 0; }
.ib-overlay .widget-chip .grip { color: #64748b; }
.ib-overlay .dlg-foot { border-top: 1px solid #e7edf5; padding: 14px 24px; display: flex; align-items: center; gap: 12px; }
.ib-overlay .dlg-foot .muted { font-size: 12px; color: #5b6b82; }
.ib-overlay .dlg-foot .spacer { margin-left: auto; }
@media (max-width: 1100px) {
.ib-root .row.r-3 { grid-template-columns: 1fr; }
.ib-root .qa-grid { grid-template-columns: repeat(2, 1fr); }
.ib-overlay .opt-grid { grid-template-columns: 1fr; }
.ib-overlay .tabs { width: 66px; }
.ib-overlay .tab span.t-txt { display: none; }
.ib-overlay .field-row { grid-template-columns: 1fr; }
}
.ib-root .kpi, .ib-root .alert { cursor: pointer; }
/* ── Drill-down dialog ── */
.ib-drill-back { position: fixed; inset: 0; background: rgba(15,30,60,0.5); backdrop-filter: blur(3px); z-index: 70; display: flex; align-items: center; justify-content: center; padding: 20px; font-family: "Segoe UI", Roboto, -apple-system, sans-serif; }
.ib-drill { width: 100%; max-width: 1120px; height: 88vh; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(15,36,64,0.28); display: flex; flex-direction: column; overflow: hidden; color: #0f2440; }
.ib-drill-head { background: linear-gradient(100deg, #0f2c63, #2f6bff); color: #fff; padding: 16px 22px; display: flex; align-items: center; gap: 14px; }
.ib-drill-head h2 { font-size: 17px; font-weight: 700; margin: 0; }
.ib-drill-head p { font-size: 12px; opacity: 0.85; margin: 0; }
.ib-drill-x { margin-left: auto; background: rgba(255,255,255,0.16); border: none; color: #fff; width: 34px; height: 34px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.ib-drill-x:hover { background: rgba(255,255,255,0.3); }
.ib-drill-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 22px; border-bottom: 1px solid #e7edf5; background: #fafcff; }
.ib-drill-tools .lbl { font-size: 12px; font-weight: 600; color: #5b6b82; }
.ib-drill-tools input[type=date] { border: 1px solid #dbe3ef; border-radius: 9px; padding: 7px 10px; font-size: 13px; color: #0f2440; background: #fff; }
.ib-drill-btn { border: none; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ib-drill-btn.primary { background: #2f6bff; color: #fff; }
.ib-drill-btn.primary:hover { background: #245ce0; }
.ib-drill-btn.ghost { background: #fff; color: #34517d; border: 1px solid #dbe3ef; }
.ib-drill-btn.ghost:hover { border-color: #2f6bff; color: #2f6bff; }
.ib-drill-btn.spacer { margin-left: auto; }
.ib-drill-body { flex: 1; overflow: auto; }
.ib-dtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.ib-dtable thead th { position: sticky; top: 0; background: #f2f7ff; color: #34517d; font-weight: 700; font-size: 12px; padding: 11px 14px; border-bottom: 1px solid #e2ebf7; text-align: left; white-space: nowrap; z-index: 1; }
.ib-dtable thead th.r { text-align: right; }
.ib-dtable tbody td { padding: 9px 14px; border-bottom: 1px solid #eef2f8; color: #23324a; white-space: nowrap; }
.ib-dtable tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
.ib-dtable tbody tr:hover td { background: #fafcff; }
.ib-dtable .nm { font-weight: 600; color: #14233d; }
.ib-dtable .warn { color: #b45309; font-weight: 600; }
.ib-dtable .bad { color: #b91c1c; font-weight: 600; }
.ib-drill-foot { border-top: 1px solid #e7edf5; padding: 12px 22px; display: flex; align-items: center; gap: 12px; }
.ib-drill-foot .muted { font-size: 12.5px; color: #5b6b82; }
.ib-drill-empty { text-align: center; color: #94a3b8; padding: 60px 0; font-size: 13px; }
/* ── Assistant chat (RAG) ── */
.ib-chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 80; width: 54px; height: 54px; border-radius: 50%; border: none; background: linear-gradient(135deg, #2f6bff, #16337a); color: #fff; font-size: 22px; cursor: pointer; box-shadow: 0 8px 24px rgba(20,48,110,0.35); }
.ib-chat-fab:hover { transform: translateY(-2px); }
.ib-chat { position: fixed; right: 22px; bottom: 88px; z-index: 80; width: 370px; max-width: calc(100vw - 32px); height: 520px; max-height: calc(100vh - 130px); background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; box-shadow: 0 20px 60px rgba(15,36,64,0.28); display: flex; flex-direction: column; overflow: hidden; font-family: "Segoe UI", Roboto, -apple-system, sans-serif; }
.ib-chat-head { background: linear-gradient(100deg, #16337a, #2f6bff); color: #fff; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.ib-chat-head b { font-size: 14px; display: block; }
.ib-chat-head span { font-size: 11px; opacity: 0.85; }
.ib-chat-head button { background: rgba(255,255,255,0.18); border: none; color: #fff; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; }
.ib-chat-body { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f6f8fb; }
.ib-chat-hint { font-size: 12.5px; color: #64748b; background: #eef3ff; border: 1px solid #dbe6ff; padding: 10px 12px; border-radius: 10px; }
.ib-chat-msg { max-width: 85%; font-size: 13px; line-height: 1.45; padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; }
.ib-chat-msg.u { align-self: flex-end; background: #2f6bff; color: #fff; border-bottom-right-radius: 4px; }
.ib-chat-msg.a { align-self: flex-start; background: #fff; color: #0f2440; border: 1px solid #e2e8f0; border-bottom-left-radius: 4px; }
.ib-chat-typing { letter-spacing: 2px; color: #94a3b8; animation: ib-blink 1s ease-in-out infinite; }
@keyframes ib-blink { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.ib-chat-in { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #e7edf5; background: #fff; }
.ib-chat-in input { flex: 1; border: 1px solid #dbe3ef; border-radius: 10px; padding: 9px 12px; font-size: 13px; outline: none; }
.ib-chat-in input:focus { border-color: #2f6bff; box-shadow: 0 0 0 3px #eaf1ff; }
.ib-chat-in button { border: none; background: #2f6bff; color: #fff; border-radius: 10px; padding: 0 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.ib-chat-in button:disabled { background: #cbd5e1; cursor: not-allowed; }
/* ============================================================
ERP dashboards (Sales / Purchase) — sidebar layout + cards
============================================================ */
.erp { display: flex; min-height: 100vh; background: #f6f7fb; font-family: "Segoe UI", Roboto, -apple-system, sans-serif; color: #0f1b2d; }
.erp-side { width: 232px; flex-shrink: 0; background: #fff; border-right: 1px solid #eef1f6; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
.erp-brand { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #f1f4f9; }
.erp-logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg,#2f6bff,#16337a); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.erp-brand-t { font-size: 15px; font-weight: 800; }
.erp-brand-s { font-size: 10.5px; color: #8a97a8; }
.erp-nav { flex: 1; overflow-y: auto; padding: 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.erp-sec { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #a3aebf; font-weight: 700; padding: 12px 10px 4px; }
.erp-nav ::deep .erp-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: #475569; text-decoration: none; }
.erp-nav ::deep .erp-link:hover { background: #f3f6fc; color: #2f6bff; }
.erp-nav ::deep .erp-link.active { background: #eaf1ff; color: #2f6bff; font-weight: 700; }
.erp-i { width: 18px; text-align: center; font-size: 14px; }
.erp-live { padding: 12px 16px; border-top: 1px solid #f1f4f9; font-size: 11.5px; color: #16a34a; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.erp-dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; box-shadow: 0 0 0 3px #dcfce7; }
.erp-main { flex: 1; min-width: 0; padding: 20px 22px 32px; }
/* page header */
.erp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.erp-head-r { flex-wrap: wrap; }
@media (max-width: 560px) { .erp-title { font-size: 18px; } .erp-head-r { width: 100%; } }
.erp-title { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.erp-sub { font-size: 12.5px; color: #64748b; margin-top: 2px; }
.erp-head-r { display: flex; align-items: center; gap: 8px; }
.erp-chip { border: 1px solid #e3e8f0; background: #fff; border-radius: 9px; padding: 7px 12px; font-size: 12.5px; color: #475569; font-weight: 500; }
.erp-export { border: none; background: #2f6bff; color: #fff; border-radius: 9px; padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
/* KPI row — fluid & responsive */
.erp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
@media (max-width: 1440px) { .erp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .erp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .erp-kpis { grid-template-columns: minmax(0, 1fr); } }
.erp-kpi { position: relative; overflow: hidden; background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 16px 16px 16px 20px; box-shadow: 0 6px 18px rgba(15,36,64,.05); transition: transform .16s ease, box-shadow .16s ease; }
.erp-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--ac, #2f6bff); }
.erp-kpi.erp-clk { cursor: pointer; }
.erp-kpi:hover { transform: translateY(-3px); box-shadow: 0 18px 34px rgba(15,36,64,.12); }
.erp-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.erp-kpi-lbl { font-size: 12px; font-weight: 700; }
.erp-kpi-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; box-shadow: inset 0 0 0 1px rgba(15,36,64,.03); }
.erp-kpi-val { font-size: 24px; font-weight: 800; margin-top: 12px; letter-spacing: -.4px; }
.erp-kpi-delta { font-size: 11.5px; margin-top: 4px; }
.erp-up { color: #16a34a; font-weight: 700; } .erp-down { color: #e2483d; font-weight: 700; }
.erp-kpi-delta .mut { color: #94a3b8; font-weight: 500; }
/* card + grids — responsive */
.erp-row { display: grid; gap: 14px; margin-bottom: 16px; }
.erp-r5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.erp-r2 { grid-template-columns: 1fr 1fr; }
.erp-r4 { grid-template-columns: 2fr 1.4fr 1.4fr 1.4fr; }
@media (max-width: 1440px) { .erp-r5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .erp-r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .erp-r5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .erp-r2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .erp-r5, .erp-r4 { grid-template-columns: minmax(0, 1fr); } .erp-row [style*="grid-column"] { grid-column: auto !important; } }
.erp-card { background: #fff; border: 1px solid #eef1f6; border-radius: 16px; padding: 16px 18px; box-shadow: 0 6px 18px rgba(15,36,64,.05); transition: box-shadow .16s ease; }
.erp-card:hover { box-shadow: 0 12px 28px rgba(15,36,64,.09); }
.erp-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.erp-card-h h3 { font-size: 14px; font-weight: 700; margin: 0; }
.erp-card-h a, .erp-card-h .lnk { font-size: 12px; color: #2f6bff; font-weight: 600; cursor: pointer; }
/* overview list */
.erp-ov { display: flex; flex-direction: column; gap: 4px; }
.erp-ov-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.erp-ov-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; }
.erp-ov-lbl { font-size: 13px; color: #475569; flex: 1; }
.erp-ov-val { font-size: 14px; font-weight: 700; }
/* ranked list */
.erp-rank { display: flex; flex-direction: column; }
.erp-rank-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #f4f6fa; font-size: 13px; }
.erp-rank-row:last-child { border-bottom: none; }
.erp-rank-n { width: 22px; height: 22px; border-radius: 6px; background: #f1f5fb; color: #64748b; display: grid; place-items: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.erp-rank-row { min-width: 0; }
.erp-rank-nm { flex: 1; min-width: 0; font-weight: 500; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.erp-rank-v { font-weight: 700; font-variant-numeric: tabular-nums; }
/* donut legend */
.erp-donut-wrap { display: flex; align-items: center; gap: 16px; min-width: 0; }
.erp-donut-c { position: relative; flex-shrink: 0; }
.erp-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.erp-donut-center small { font-size: 10px; color: #94a3b8; } .erp-donut-center b { font-size: 13px; }
.erp-leg { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.erp-leg span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.erp-leg i { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.erp-leg .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #475569; }
.erp-leg .pc { flex-shrink: 0; font-weight: 700; color: #334155; }
/* alerts */
.erp-alert { display: flex; align-items: flex-start; gap: 9px; padding: 8px 2px; font-size: 12.5px; border-bottom: 1px solid #f4f6fa; }
.erp-alert:last-child { border-bottom: none; }
.erp-alert-ic { font-size: 14px; }
.erp-alert-b { flex: 1; } .erp-alert-b b { font-weight: 600; display: block; color: #1e293b; }
.erp-alert-t { color: #94a3b8; font-size: 11px; white-space: nowrap; }
/* summary tiles */
.erp-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.erp-sum-t { border: 1px solid #eef1f6; border-radius: 10px; padding: 10px 12px; }
.erp-sum-t .l { font-size: 11px; color: #94a3b8; } .erp-sum-t .v { font-size: 16px; font-weight: 800; margin-top: 2px; }
/* quick actions */
.erp-qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.erp-qa-t { border: 1px solid #eef1f6; border-radius: 11px; padding: 12px 8px; text-align: center; cursor: pointer; transition: .15s; }
.erp-qa-t:hover { border-color: #2f6bff; background: #f5f8ff; }
.erp-qa-ic { width: 34px; height: 34px; border-radius: 9px; margin: 0 auto 6px; display: grid; place-items: center; font-size: 16px; }
.erp-qa-l { font-size: 11.5px; font-weight: 600; color: #334155; }
/* data table */
.erp-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.erp-tbl th { text-align: left; color: #8a97a8; font-weight: 600; font-size: 11px; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid #eef1f6; white-space: nowrap; }
.erp-tbl td { padding: 9px 10px; border-bottom: 1px solid #f4f6fa; color: #334155; white-space: nowrap; }
.erp-tbl tr:last-child td { border-bottom: none; }
.erp-tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .erp-tbl th, .erp-tbl td { white-space: normal; } }
.erp-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px; }
.erp-b-green { background: #e7f7ef; color: #12a366; } .erp-b-amber { background: #fdf3e0; color: #b45309; } .erp-b-blue { background: #eaf1ff; color: #2f6bff; }
/* trend line svg */
.erp-trend svg { width: 100%; height: 210px; display: block; }
.erp-block-title { font-size: 17px; font-weight: 800; margin: 24px 0 4px; }
/* Print: isolate the drill dialog only */
@media print {
html.ib-printing body * { visibility: hidden; }
html.ib-printing .ib-drill, html.ib-printing .ib-drill * { visibility: visible; }
html.ib-printing .ib-drill-back { position: static; background: none; padding: 0; display: block; }
html.ib-printing .ib-drill { position: static; width: 100%; height: auto; max-width: none; box-shadow: none; border-radius: 0; }
html.ib-printing .ib-drill-tools, html.ib-printing .ib-drill-x, html.ib-printing .ib-drill-foot { display: none !important; }
html.ib-printing .ib-dtable thead th { position: static; }
}
/* ============================================================
Item Import (Excel → items + batch + stock)
============================================================ */
.iimp-card { margin-bottom: 1rem; }
.iimp-drop { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; border: 1.5px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; }
.iimp-file { font-size: .85rem; }
.iimp-note { margin-top: .7rem; font-size: .85rem; color: #334155; }
.iimp-sum { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
.iimp-pill { font-size: .78rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px; }
.iimp-new { background: #e7f7ef; color: #12784f; }
.iimp-skip { background: #eef2f7; color: #64748b; }
.iimp-warn { background: #fdf3e0; color: #b45309; }
.iimp-qty { background: #eaf1ff; color: #2f6bff; }
.iimp-tbl { font-size: .8rem; }
.iimp-tbl th { position: sticky; top: 0; background: #eef4fb; z-index: 1; }
.iimp-tbl td.r, .iimp-tbl th.r { text-align: right; }
.iimp-nm { font-weight: 600; color: #14233d; }
.iimp-r-new td { background: #ffffff; }
.iimp-r-skip td { background: #fafbfc; color: #94a3b8; }
.iimp-r-blank td { background: #fffaf3; }
.iimp-st { font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; white-space: nowrap; }
.iimp-st.n { background: #e7f7ef; color: #12784f; }
.iimp-st.s { background: #eef2f7; color: #64748b; }
.iimp-st.b { background: #fdecea; color: #b91c1c; }
/* Item Import — column mapping grid + name cells */
.iimp-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .7rem .9rem; margin-bottom: 1.1rem; }
.iimp-mapcell { display: flex; flex-direction: column; gap: .25rem; }
.iimp-mapcell label { font-size: .74rem; font-weight: 600; color: #475569; }
.iimp-mapcell .req { color: #e2483d; }
.iimp-sel { width: 100%; font-size: .82rem; padding: .4rem .5rem; border: 1px solid #d7dee8; border-radius: 8px; background: #fff; color: #14233d; }
.iimp-sel:focus { outline: none; border-color: #2f6bff; box-shadow: 0 0 0 3px rgba(47,107,255,.14); }
.iimp-mapcell.miss .iimp-sel { border-color: #e2483d; background: #fff6f5; }
.iimp-cls { display: inline-flex; align-items: center; gap: .3rem; }
.iimp-cls.warn { color: #b45309; }
.iimp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #e39a12; flex: 0 0 auto; }
/* Item Import — sample value under each mapping dropdown */
.iimp-samp { font-size: .68rem; color: #64748b; margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iimp-samp.none { color: #cbd5e1; font-style: italic; }
/* Item Import — column-oriented mapping (Excel header on top, field dropdown below) */
.iimp-hdr { font-size: .8rem; font-weight: 700; color: #14233d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iimp-mapcell.on { position: relative; }
.iimp-mapcell.on .iimp-sel { border-color: #2f6bff; background: #f7faff; }
.iimp-reqwarn { background: #fdf3e0; color: #b45309; padding: .5rem .75rem; border-radius: 8px; font-size: .8rem; font-weight: 600; margin-bottom: .8rem; }
/* Party Import — vendor/customer segmented toggle + type chips */
.iimp-seg { display: inline-flex; gap: .4rem; background: #f1f5f9; padding: .3rem; border-radius: 10px; }
.iimp-segbtn { border: 1px solid transparent; background: transparent; color: #475569; font-size: .84rem; font-weight: 600; padding: .45rem .9rem; border-radius: 8px; cursor: pointer; transition: all .12s; }
.iimp-segbtn:hover { color: #14233d; }
.iimp-segbtn.on { background: #fff; color: #7a52e0; border-color: #e2d9f7; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.iimp-kind { font-size: .7rem; font-weight: 700; padding: .12rem .5rem; border-radius: 6px; }
.iimp-kind.vend { background: #eaf1ff; color: #2f6bff; }
.iimp-kind.cust { background: #f0eafd; color: #7a52e0; }
.iimp-pill.iimp-vend { background: #eaf1ff; color: #2f6bff; }
.iimp-pill.iimp-cust { background: #f0eafd; color: #7a52e0; }
/* Item/Party Import — OCR-style horizontal mapping table */
.iimp-mapwrap { overflow-x: auto; margin-bottom: 1rem; }
.iimp-maptbl th { vertical-align: top; min-width: 150px; }
.iimp-h { font-weight: 700; color: #14233d; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.iimp-samp3 { font-size: .66rem; color: #94a3b8; font-weight: 400; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
/* Item Import — classification dropdowns inside the review row */
.iimp-clsel { font-size: .74rem; padding: .2rem .3rem; border: 1px solid #d7dee8; border-radius: 6px; background: #fff; color: #14233d; max-width: 160px; }
.iimp-clsel:focus { outline: none; border-color: #2f6bff; box-shadow: 0 0 0 2px rgba(47,107,255,.14); }
.iimp-clsel.warn { border-color: #e39a12; background: #fffaf0; color: #b45309; }
/* OCR party template — copy-from row + mapped template chip */
.ocr-copyrow { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; padding: .6rem .75rem; margin-bottom: 1rem; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 10px; }
.ii-chip.ocr-chip-mapped { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; font-weight: 600; }
/* ============================================================
AI Business Advisor (/ai/advisor) — reuses .ib-root tokens
============================================================ */
.ib-root .adv-stamp { font-size: 12px; color: #fff; opacity: .8; margin-right: 4px; }
/* Morning brief hero */
.ib-root .adv-brief { display: flex; gap: 16px; align-items: flex-start; position: relative; background: linear-gradient(110deg, #0f2c63, #2f6bff); color: #fff; border-radius: 16px; padding: 20px 22px; margin: 4px 0 8px; box-shadow: 0 14px 34px rgba(20,48,110,.22); overflow: hidden; }
.ib-root .adv-brief::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%); }
.ib-root .adv-brief-badge { position: absolute; top: 14px; right: 16px; font-size: 10px; font-weight: 800; letter-spacing: .8px; background: rgba(255,255,255,.18); padding: 4px 10px; border-radius: 20px; }
.ib-root .adv-brief-ico { width: 48px; height: 48px; border-radius: 14px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 24px; flex: none; }
.ib-root .adv-brief-body { flex: 1; min-width: 0; }
.ib-root .adv-brief-title { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.ib-root .adv-brief-text { font-size: 14px; line-height: 1.55; opacity: .96; margin: 0; max-width: 900px; }
.ib-root .adv-brief-typing { font-size: 13px; opacity: .9; display: flex; align-items: center; gap: 8px; }
/* Suggestion cards */
.ib-root .adv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ib-root .adv-card { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--slate); border-radius: 13px; padding: 14px 15px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 7px; transition: transform .15s ease, box-shadow .15s ease; }
.ib-root .adv-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(15,36,64,.10); }
.ib-root .adv-card.sev-high { border-left-color: var(--bad); }
.ib-root .adv-card.sev-med { border-left-color: var(--warn); }
.ib-root .adv-card.sev-good { border-left-color: var(--good); }
.ib-root .adv-card.sev-low { border-left-color: var(--slate); }
.ib-root .adv-card-top { display: flex; align-items: center; justify-content: space-between; }
.ib-root .adv-card-ico { font-size: 20px; }
.ib-root .adv-card-impact { font-size: 18px; font-weight: 800; letter-spacing: -.4px; color: var(--ink); }
.ib-root .adv-card.sev-high .adv-card-impact { color: var(--bad); }
.ib-root .adv-card.sev-good .adv-card-impact { color: var(--good); }
.ib-root .adv-card-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.ib-root .adv-card-detail { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.ib-root .adv-card-action { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--brand-soft); border-radius: 9px; padding: 8px 10px; line-height: 1.4; }
.ib-root .adv-card-action.loading { color: var(--ink-soft); font-weight: 500; background: var(--slate-soft); }
.ib-root .adv-card-link { align-self: flex-start; border: none; background: none; color: var(--brand); font-size: 12px; font-weight: 700; cursor: pointer; padding: 0; }
/* Analysis lists */
.ib-root .adv-list { display: flex; flex-direction: column; gap: 2px; }
.ib-root .adv-li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line-soft); }
.ib-root .adv-li:last-child { border-bottom: none; }
.ib-root .adv-li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ib-root .adv-li-main b { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-root .adv-li-main span { font-size: 11px; color: var(--ink-soft); }
.ib-root .adv-li-val { font-size: 13px; font-weight: 700; color: var(--ink); flex: none; }
.ib-root .adv-li-val.bad { color: var(--bad); }
.ib-root .adv-empty { font-size: 12.5px; color: var(--ink-soft); padding: 14px 4px; text-align: center; }
.ib-root .adv-bar { padding: 7px 2px; }
.ib-root .adv-bar-top { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; }
.ib-root .adv-bar-top b { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
.ib-root .adv-bar-top span { color: var(--ink-soft); font-weight: 700; }
/* ===== Bottom-sheet detail dialog (full width, slides up) ===== */
.adv-sheet-back { position: fixed; inset: 0; background: rgba(6,40,50,.45); backdrop-filter: blur(3px); z-index: 90; display: flex; align-items: flex-end; justify-content: center; animation: adv-fade .2s ease; }
.adv-sheet { width: 100%; max-width: none; max-height: 88vh; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -18px 60px rgba(6,40,50,.30); display: flex; flex-direction: column; overflow: hidden; animation: adv-rise .28s cubic-bezier(.22,.61,.36,1); font-family: "Segoe UI", Roboto, -apple-system, sans-serif; }
.adv-sheet-grip { width: 44px; height: 5px; border-radius: 20px; background: #cfe3e8; margin: 10px auto 4px; flex: none; }
.adv-sheet-head { display: flex; align-items: flex-start; gap: 14px; padding: 8px 26px 16px; border-bottom: 1px solid #e6f2f5; }
.adv-sheet-head h2 { font-size: 19px; font-weight: 800; color: #0b5563; margin: 0; }
.adv-sheet-head p { font-size: 12.5px; color: #5c8892; margin: 3px 0 0; }
.adv-sheet-x { margin-left: auto; background: #e0f7fa; border: none; color: #0b5563; width: 38px; height: 38px; border-radius: 12px; font-size: 17px; cursor: pointer; flex: none; transition: background .15s; }
.adv-sheet-x:hover { background: #c4e8ee; }
.adv-sheet-body { flex: 1; overflow: auto; }
.adv-sheet-body .ib-dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.adv-sheet-body .ib-dtable thead th { position: sticky; top: 0; background: #ecfafc; color: #0b5563; font-weight: 700; font-size: 12px; padding: 12px 26px; border-bottom: 1px solid #d5eef2; text-align: left; white-space: nowrap; z-index: 1; }
.adv-sheet-body .ib-dtable thead th.r { text-align: right; }
.adv-sheet-body .ib-dtable tbody td { padding: 11px 26px; border-bottom: 1px solid #f0f6f8; color: #14384a; }
.adv-sheet-body .ib-dtable tbody td.r { text-align: right; font-weight: 600; }
.adv-sheet-body .ib-dtable tbody tr:hover { background: #f5fcfd; }
@keyframes adv-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes adv-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 700px) { .adv-sheet { max-height: 92vh; } .adv-sheet-head, .adv-sheet-body .ib-dtable thead th, .adv-sheet-body .ib-dtable tbody td { padding-left: 16px; padding-right: 16px; } }
/* "What's coming next" outlook tiles */
.ib-root .adv-ol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ib-root .adv-ol { display: flex; align-items: center; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.ib-root .adv-ol-ico { font-size: 26px; width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: var(--brand-soft); flex: none; }
.ib-root .adv-ol-body { flex: 1; min-width: 0; }
.ib-root .adv-ol-name { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.ib-root .adv-ol-val { font-size: 22px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.ib-root .adv-ol-sub { font-size: 11.5px; color: var(--ink-soft); }
.ib-root .adv-ol-dir { font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 20px; flex: none; }
.ib-root .adv-ol-dir.up { color: var(--good); background: var(--good-soft); }
.ib-root .adv-ol-dir.down { color: var(--bad); background: var(--bad-soft); }
.ib-root .adv-ol-dir.flat { color: var(--slate); background: var(--slate-soft); }
.ib-root.adv-premium .adv-ol-val { color: #0b5563; }
.ib-root .adv-ol-click { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ib-root .adv-ol-click:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8,110,140,.12); }
/* Payment behaviour grid */
.ib-root .adv-pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ib-root .card-head .link { cursor: pointer; }
.ib-root.adv-premium .card-head .link { color: #0891b2; }
/* Cash-flow net line */
.ib-root .adv-net { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 14px; font-weight: 800; }
.ib-root .adv-net.pos { color: var(--good); }
.ib-root .adv-net.neg { color: var(--bad); }
.ib-root .adv-net .adv-card-link { font-weight: 700; }
/* ML.NET customer segments */
.ib-root .adv-seg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ib-root .adv-seg { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fbfdff; }
.ib-root .adv-seg-ico { font-size: 24px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); flex: none; }
.ib-root .adv-seg-label { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ib-root .adv-seg-cnt { font-size: 15px; font-weight: 800; color: var(--ink); }
.ib-root .adv-seg-sub { font-size: 11px; color: var(--ink-soft); }
.ib-root .adv-seg { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.ib-root .adv-seg:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(8,110,140,.12); }
.ib-root .adv-seg-go { margin-left: auto; color: var(--brand); font-weight: 800; font-size: 15px; }
.ib-root.adv-premium .adv-seg { background: #fff; border-color: #cfeaef; }
/* ===== Compact / slick density (advisor page only) ===== */
.ib-root.adv-premium .topbar { padding: 8px 20px; gap: 12px; }
.ib-root.adv-premium .brand .logo { width: 32px; height: 32px; font-size: 16px; border-radius: 9px; }
.ib-root.adv-premium .brand h1 { font-size: 16px; }
.ib-root.adv-premium .brand p { font-size: 11px; margin-top: 0; }
.ib-root.adv-premium .btn { padding: 6px 12px; font-size: 12px; }
.ib-root.adv-premium .wrap { padding: 10px 14px 20px; }
.ib-root.adv-premium .section-title { font-size: 13px; margin: 12px 2px 7px; }
.ib-root.adv-premium .section-title .pill { padding: 2px 8px; font-size: 10.5px; }
.ib-root.adv-premium .row { gap: 10px; }
.ib-root.adv-premium .card { padding: 10px 13px; border-radius: 12px; }
.ib-root.adv-premium .card-head { margin-bottom: 8px; }
.ib-root.adv-premium .card-head h3 { font-size: 13.5px; }
.ib-root.adv-premium .kpi-grid { gap: 9px; }
.ib-root.adv-premium .kpi { padding: 9px 11px; border-radius: 11px; }
.ib-root.adv-premium .kpi .k-value { font-size: 18px; }
.ib-root.adv-premium .kpi .k-top { margin-bottom: 4px; }
.ib-root.adv-premium .kpi .k-ico { width: 28px; height: 28px; font-size: 14px; }
.ib-root.adv-premium .adv-brief { padding: 13px 16px; gap: 13px; }
.ib-root.adv-premium .adv-brief-ico { width: 40px; height: 40px; font-size: 20px; }
.ib-root.adv-premium .adv-cards { gap: 10px; }
.ib-root.adv-premium .adv-card { padding: 10px 12px; gap: 5px; border-radius: 12px; }
.ib-root.adv-premium .adv-card-action { padding: 6px 9px; }
.ib-root.adv-premium .adv-li { padding: 5px 3px; }
.ib-root.adv-premium .adv-bar { padding: 5px 2px; }
.ib-root.adv-premium .adv-ol-grid,
.ib-root.adv-premium .adv-pay-grid,
.ib-root.adv-premium .adv-seg-grid { gap: 10px; }
.ib-root.adv-premium .adv-ol { padding: 10px 13px; gap: 10px; }
.ib-root.adv-premium .adv-ol-ico { width: 40px; height: 40px; font-size: 22px; }
.ib-root.adv-premium .adv-ol-val { font-size: 19px; }
.ib-root.adv-premium .adv-seg { padding: 10px 12px; }
/* compact bottom sheet — very dense */
.adv-sheet-grip { width: 38px; height: 4px; margin: 5px auto 0; }
.adv-sheet-head { padding: 5px 18px 7px; }
.adv-sheet-head h2 { font-size: 14.5px; }
.adv-sheet-head p { font-size: 11px; margin-top: 1px; }
.adv-sheet-x { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
.adv-sheet-body .ib-dtable { font-size: 12.5px; }
.adv-sheet-body .ib-dtable thead th { padding: 6px 18px; font-size: 11px; }
.adv-sheet-body .ib-dtable tbody td { padding: 4px 18px; }
/* detail dialog — aqua theme on the advisor page (was inheriting the blue drill dialog) */
.ib-root.adv-premium .ib-drill-head { background: #0b5563; }
.ib-root.adv-premium .ib-dtable thead th { background: #e0f7fa; color: #0b5563; border-bottom-color: #cfeaef; }
.ib-root.adv-premium .ib-dtable tbody tr:hover { background: #f2fbfc; }
/* value label on each forecast bar (so the graph is readable on its own) */
.ib-root .ageing .ag .ag-val { font-size: 9.5px; font-weight: 700; color: var(--ink); white-space: nowrap; margin-bottom: 3px; line-height: 1; }
.ib-root .ageing .ag .ag-val.fc { color: var(--ink-soft); }
/* ML.NET forecast bars + note */
.ib-root .ageing .agcol.adv-fc { opacity: .55; }
.ib-root .adv-mlnote { margin-top: 10px; font-size: 11.5px; color: var(--ink-soft); border-top: 1px dashed var(--line); padding-top: 8px; }
/* Loading skeleton */
.ib-root .adv-skeleton { padding: 8px 0; }
.ib-root .adv-sk-brief { height: 96px; border-radius: 16px; background: linear-gradient(100deg, #e9eef6 30%, #f4f7fb 50%, #e9eef6 70%); background-size: 200% 100%; animation: adv-shine 1.3s linear infinite; margin-bottom: 16px; }
.ib-root .adv-sk-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 12px; }
.ib-root .adv-sk-kpi { height: 92px; border-radius: 13px; background: linear-gradient(100deg, #e9eef6 30%, #f4f7fb 50%, #e9eef6 70%); background-size: 200% 100%; animation: adv-shine 1.3s linear infinite; }
.ib-root .adv-loading-txt { text-align: center; color: var(--ink-soft); font-size: 13px; margin-top: 18px; }
@keyframes adv-shine { to { background-position: -200% 0; } }
@media (max-width: 1100px) {
.ib-root .adv-cards { grid-template-columns: 1fr; }
}
/* ============================================================
AI Advisor — PREMIUM magenta-pink theme (scoped to /ai/advisor)
Overrides the .ib-root tokens only on this page. Other
dashboards keep their blue theme untouched.
============================================================ */
.ib-root.adv-premium {
--brand: #0891b2; --brand-soft: #e0f7fa;
--ink: #0c3a44; --ink-soft: #5c8892;
--line: #cfeaef; --line-soft: #e6f6f9;
--bg: #f2fbfc;
--shadow: 0 4px 14px rgba(8,110,140,.06);
background: #f2fbfc;
}
/* premium tag — flat teal */
.ib-root.adv-premium .adv-premium-tag { font-size: 9px; font-weight: 800; letter-spacing: 1px; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: 20px; background: #0e7490; color: #e0f7fa; }
/* header bar — flat deep teal */
.ib-root.adv-premium .topbar { background: #0b5563; box-shadow: 0 2px 10px rgba(8,80,100,.18); }
.ib-root.adv-premium .brand .logo { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.26); }
.ib-root.adv-premium .btn-light { color: #0891b2; }
.ib-root.adv-premium .adv-stamp { color: #fff; }
/* morning brief hero — flat aqua */
.ib-root.adv-premium .adv-brief { background: #0891b2; box-shadow: 0 6px 20px rgba(8,110,140,.20); border: none; }
.ib-root.adv-premium .adv-brief::after { display: none; }
.ib-root.adv-premium .adv-brief-badge { background: rgba(255,255,255,.20); }
.ib-root.adv-premium .adv-brief-ico { background: rgba(255,255,255,.18); }
/* section titles + pills */
.ib-root.adv-premium .section-title { color: #0b5563; letter-spacing: .2px; }
.ib-root.adv-premium .section-title .pill { background: var(--brand-soft); color: #0e7490; }
/* KPI cards — flat white, solid value colour */
.ib-root.adv-premium .kpi { background: #fff; border: 1px solid #cfeaef; border-radius: 14px; box-shadow: 0 3px 12px rgba(8,110,140,.05); }
.ib-root.adv-premium .kpi:hover { box-shadow: 0 8px 20px rgba(8,110,140,.10); }
.ib-root.adv-premium .kpi .k-value { color: #0b5563; }
/* suggestion cards — flat */
.ib-root.adv-premium .adv-card { background: #fff; border: 1px solid #cfeaef; border-radius: 14px; box-shadow: 0 3px 12px rgba(8,110,140,.05); }
.ib-root.adv-premium .adv-card:hover { box-shadow: 0 8px 20px rgba(8,110,140,.10); }
.ib-root.adv-premium .adv-card-action { background: #e0f7fa; color: #0b5563; }
.ib-root.adv-premium .adv-card-link { color: #0891b2; }
/* analysis cards + bars */
.ib-root.adv-premium .card { background: #fff; border: 1px solid #cfeaef; border-radius: 14px; box-shadow: 0 3px 12px rgba(8,110,140,.05); }
.ib-root.adv-premium .card-head h3 { color: #0b5563; }
.ib-root.adv-premium .track { background: #d9f1f5; }
.ib-root.adv-premium .fill { background: #0891b2 !important; }
.ib-root.adv-premium .adv-li-val { color: #0b5563; }
.ib-root.adv-premium .ageing .agcol { background: #0891b2 !important; }
.ib-root.adv-premium .ageing .agcol.adv-fc { background: #7fd3e0 !important; opacity: 1; }
.ib-root.adv-premium .adv-mlnote { border-top-color: #e0eef1; }
.ib-root.adv-premium .adv-mlnote b { color: #0e7490; }
/* chatbot — flat aqua */
.ib-root.adv-premium .ib-chat-fab { background: #0891b2; box-shadow: 0 4px 14px rgba(8,110,140,.28); }
.ib-root.adv-premium .ib-chat-head { background: #0b5563; }
.ib-root.adv-premium .ib-chat-msg.u { background: #0891b2; }
.ib-root.adv-premium .ib-chat-hint { background: #e0f7fa; border-color: #c4e8ee; color: #5c8892; }
/* skeleton — flat aqua */
.ib-root.adv-premium .adv-sk-brief,
.ib-root.adv-premium .adv-sk-kpi { background: #d9eef2; animation: none; }
/* ── ErpLayout nav — premium AI Advisor link (flat aqua) ── */
.erp-link.erp-link-ai { position: relative; background: #e0f7fa; color: #0e7490; font-weight: 700; border: 1px solid #c4e8ee; }
.erp-link.erp-link-ai:hover { background: #cdeff4; }
.erp-link.erp-link-ai.active { background: #0891b2; color: #fff; border-color: #0891b2; }
.erp-ai-badge { margin-left: auto; font-size: 8px; font-weight: 800; letter-spacing: .6px; padding: 2px 6px; border-radius: 10px; background: #0e7490; color: #e0f7fa; }
/* ============================================================
Prescription Duplicate / Template-Fraud Check (/tools/duplicate-check)
============================================================ */
.dup-page { padding: 18px 22px 60px; max-width: 1300px; margin: 0 auto; color: #14233d; font-family: "Segoe UI", Roboto, -apple-system, Arial, sans-serif; }
.dup-head h1 { font-size: 20px; margin: 0 0 4px; }
.dup-head p { font-size: 13px; color: #5b6b82; margin: 0 0 14px; max-width: 900px; line-height: 1.5; }
.dup-drop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #f1f8fb; border: 1px dashed #b9dfe8; border-radius: 12px; padding: 16px 18px; }
.dup-btn { background: #0891b2; color: #fff; font-weight: 700; font-size: 13px; padding: 10px 16px; border-radius: 10px; cursor: pointer; }
.dup-btn:hover { background: #0b7f9c; }
.dup-hint { font-size: 12.5px; color: #5b6b82; }
.dup-busy { font-size: 13px; color: #0891b2; font-weight: 600; }
.dup-err { margin-top: 12px; color: #b91c1c; font-size: 13px; }
.dup-empty { margin-top: 20px; color: #5b6b82; font-size: 13px; }
.dup-summary { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; }
.dup-chip { font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 20px; }
.dup-chip.dup-forgery { background: #fdead0; color: #9a5b0c; }
.dup-chip.dup-dup { background: #fdecea; color: #b42318; }
.dup-chip.dup-review { background: #fef7e0; color: #9a7a0c; }
.dup-chip.dup-ok { background: #e7f7ef; color: #12703c; }
.dup-table-wrap { overflow-x: auto; border: 1px solid #e7edf5; border-radius: 12px; }
.dup-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dup-table thead th { background: #f2f7ff; color: #34517d; text-align: left; font-size: 12px; font-weight: 700; padding: 10px 12px; white-space: nowrap; border-bottom: 1px solid #e2ebf7; }
.dup-table th.r, .dup-table td.r { text-align: right; }
.dup-table td { padding: 8px 12px; border-bottom: 1px solid #f0f4f9; vertical-align: middle; }
.dup-table tr.lvl-forgery { background: #fffaf3; }
.dup-table tr.lvl-dup { background: #fff7f6; }
.dup-thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; background: #fff; }
.dup-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dup-pct { font-weight: 700; color: #5b6b82; }
.dup-pct.mid { color: #9a7a0c; }
.dup-pct.hi { color: #b42318; }
.dup-badge { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 9px; border-radius: 8px; line-height: 1.35; }
.dup-badge.b-forgery { background: #fdead0; color: #9a5b0c; }
.dup-badge.b-dup { background: #fdecea; color: #b42318; }
.dup-badge.b-review { background: #fef7e0; color: #9a7a0c; }
.dup-badge.b-ok { background: #e7f7ef; color: #12703c; }
.dup-legend { margin-top: 14px; font-size: 12px; color: #5b6b82; display: flex; flex-direction: column; gap: 4px; background: #f7fafc; border: 1px solid #e7edf5; border-radius: 10px; padding: 12px 14px; }
.dup-legend .dup-note { margin-top: 4px; color: #7a8aa0; }
/* ============================================================
Party Templates (/import/party-templates)
Which vendors are mapped for OCR and which still need setup.
============================================================ */
.ptl-search { width: 260px; }
.ptl-n { display: inline-block; min-width: 18px; margin-left: .35rem; padding: 0 .35rem; border-radius: 9999px; background: #e2e8f0; color: #475569; font-size: .68rem; font-weight: 700; }
.iimp-segbtn.on .ptl-n { background: #eef2ff; color: #4338ca; }
.ptl-name { font-weight: 600; color: #14233d; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.ptl-code { font-size: .68rem; color: #94a3b8; margin-top: 1px; }
.ptl-tpl { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.ptl-cols { display: flex; gap: .25rem; flex-wrap: wrap; max-width: 320px; }
.ptl-r { text-align: right; }
.ptl-act { text-align: right; white-space: nowrap; }
.ocr-badge.ptl-badge-none { background: #fff7ed; color: #9a3412; }
.ptl-bar { height: 5px; border-radius: 9999px; background: #e2e8f0; margin-top: .35rem; overflow: hidden; }
.ptl-bar span { display: block; height: 100%; border-radius: 9999px; background: #008FD3; }
/* ─────────────── OCR Updated (page-by-page invoice intake) ─────────────── */
.ou-step{display:flex;align-items:center;gap:.6rem;margin:1.4rem 0 .6rem;font-weight:800;color:#16337a;font-size:.98rem}
.ou-dot{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;
background:#c9d6ea;color:#16337a;font-size:.76rem;font-weight:800}
.ou-dot-done{background:#12a366;color:#fff}
.ou-search{width:100%;padding:.6rem .8rem;border:1px solid #d7e0ec;border-radius:10px;font-size:.92rem}
.ou-search:focus{outline:none;border-color:#16337a}
.ou-list{margin-top:.7rem;max-height:340px;overflow:auto;display:flex;flex-direction:column;gap:.4rem}
.ou-party{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;width:100%;text-align:left;
padding:.65rem .8rem;border:1px solid #e6edf6;border-radius:10px;background:#fff;cursor:pointer}
.ou-party:hover{border-color:#16337a;background:#f7fafd}
.ou-party-name{font-weight:700;color:#16337a;font-size:.92rem;line-height:1.35} /* wraps — never truncated */
.ou-party-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ou-code{background:#e8f4f8;color:#0e7490;border-radius:6px;padding:.1rem .45rem;font-size:.72rem;font-weight:700}
.ou-state{border-radius:999px;padding:.1rem .55rem;font-size:.68rem;font-weight:800}
.ou-ready{background:#dcfce7;color:#166534}
.ou-unmapped{background:#fef9c3;color:#854d0e}
.ou-none{background:#fff7ed;color:#9a3412}
.ou-picked{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.ou-picked-name{font-weight:700;color:#16337a;font-size:1rem;line-height:1.35}
.ou-tpl{margin-top:.8rem;border-top:1px solid #eef3f8;padding-top:.6rem}
.ou-tpl-line{display:flex;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer;
color:#5a6b85;font-size:.8rem;padding:0}
.ou-tpl-list{margin-top:.5rem}
.ou-tpl-row{font-size:.78rem;color:#7a8aa0;line-height:1.6}
.ou-page{margin-top:.8rem}
.ou-page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:.85rem 1rem}
.ou-page-no{font-size:.68rem;font-weight:800;color:#0891b2;letter-spacing:.05em}
.ou-page-src{font-size:.82rem;color:#5a6b85;margin-top:.15rem;word-break:break-all}
.ou-page-right{display:flex;align-items:center;gap:.6rem}
.ou-page-count{font-size:.82rem;font-weight:700;color:#16337a}
.ou-page-err{font-size:.8rem;color:#b3261e;max-width:38ch}
.ou-table-wrap{overflow-x:auto;padding:0 1rem 1rem}
.ou-table{border-collapse:collapse;width:100%;font-size:.8rem}
.ou-table th{text-align:left;padding:.4rem .5rem;background:#f2f6fb;color:#5a6b85;font-weight:700;
white-space:nowrap;border-bottom:1px solid #e6edf6}
.ou-table td{padding:.2rem .3rem;border-bottom:1px solid #f2f6fb}
.ou-rn{color:#a3b0c4;font-size:.72rem;text-align:right;padding-right:.5rem}
.ou-cell{width:100%;min-width:104px;padding:.3rem .4rem;border:1px solid #e6edf6;border-radius:6px;font-size:.8rem}
.ou-cell:focus{outline:none;border-color:#0891b2;background:#f7fdff}
.ou-total{font-size:1rem;color:#5a6b85;margin-bottom:.7rem}
.ou-total b{font-size:1.5rem;color:#16337a}
.ou-fields{display:flex;flex-wrap:wrap;gap:1rem}
.ou-fields label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:#5a6b85;font-weight:600}
.ou-fields input{padding:.45rem .6rem;border:1px solid #d7e0ec;border-radius:8px;font-size:.88rem}
.ou-done{border:1px solid #bfe8cf}
.ou-done-title{font-size:1.1rem;font-weight:800;color:#12703c;margin-bottom:.3rem}