/* SCT Nexus core UI foundation */
:root {
    --nx-navy: #1f3864;
    --nx-orange: var(--nexus-accent, #EE7326);
    --nx-ink: #243962;
    --nx-muted: #6b7280;
    --nx-border: #dce3ec;
    --nx-surface: #ffffff;
    --nx-canvas: #f3f6fa;
    --nx-success: #1e6b3a;
    --nx-danger: #a12a20;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--nx-ink);
    background: var(--nx-canvas);
    font-family: Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Application shell */
.shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    color: #fff;
    background: var(--nx-navy);
}
.brand { color: #fff; font-size: 20px; font-weight: 800; }
.tenant { margin: 4px 0 20px; color: var(--nx-orange); font-weight: 800; }
.sidebar nav { display: flex; flex-direction: column; gap: 6px; }
.sidebar a {
    padding: 9px 10px;
    color: #dfe6f3;
    text-decoration: none;
    border-radius: 7px;
}
.sidebar a:hover, .sidebar a.active { color: #fff; background: rgba(255,255,255,.12); }
.sidebar .nav-section {
    margin: 16px 10px 4px;
    color: var(--nx-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.role { margin-top: auto; color: #9fb0d0; font-size: 12px; }
.who { color: #fff; font-size: 13px; font-weight: 700; }
.who-role { margin-bottom: 8px; color: #9fb0d0; font-size: 11px; }
.logout {
    width: 100%;
    padding: 8px 12px;
    color: #fff;
    background: rgba(255,255,255,.12);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
}
.logout:hover { background: rgba(255,255,255,.2); }
.content { flex: 1; min-width: 0; padding: 28px 36px; }

/* Generic pages which do not yet have a dedicated stylesheet */
h1, h2 { color: var(--nx-navy); }
h1 { margin-top: 0; }
h3, h4 { color: var(--nx-orange); }
.muted { color: var(--nx-muted); }
.app-strong { font-weight: 700; }
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin: 20px 0;
}
.card, .panel {
    padding: 18px;
    background: var(--nx-surface);
    border: 1px solid var(--nx-border);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(31,56,100,.04);
}
.card h3, .panel h3 { margin: 0 0 8px; }
a.card-link, a.card-link:visited {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}
a.card-link:hover { box-shadow: 0 5px 16px rgba(31,56,100,.10); }
.card-go { margin-top: auto; padding-top: 12px; color: var(--nx-orange); font-weight: 800; }
.card-disabled { opacity: .68; }

/* Generic forms and actions. Dedicated page classes remain untouched. */
.form-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.form-row input, .form-row select, .form-row textarea,
.availability-grid input[type="number"] {
    padding: 10px 12px;
    color: var(--nx-ink);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    font: inherit;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
    outline: 3px solid color-mix(in srgb, var(--nexus-accent, #EE7326) 18%, transparent);
    border-color: var(--nx-orange);
}
.form-row button, button.primary {
    padding: 10px 16px;
    color: #fff;
    background: var(--nx-orange);
    border: 0;
    border-radius: 9px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.form-row button:disabled, button.primary:disabled { opacity: .5; cursor: not-allowed; }
button.secondary {
    padding: 10px 16px;
    color: var(--nx-ink);
    background: #edf2f7;
    border: 1px solid #d5deea;
    border-radius: 9px;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
button.link { padding: 0; color: var(--nx-navy); background: none; border: 0; font-weight: 700; cursor: pointer; }

/* Generic tables */
.grid { width: 100%; background: #fff; border-collapse: collapse; }
.grid th {
    padding: 10px 12px;
    color: #fff;
    text-align: left;
    background: var(--nx-navy);
}
.grid td { padding: 10px 12px; border-bottom: 1px solid #e8edf3; }
.grid tbody tr:hover { background: #f7f9fc; }

/* Notices */
.notice { margin: 12px 0; padding: 12px 14px; border-radius: 9px; }
.notice.ok { color: var(--nx-success); background: #e7f6ec; border: 1px solid #b9e2c6; }
.notice.err { color: var(--nx-danger); background: #fdecea; border: 1px solid #f5c6c2; }

/* Admin module selector */
.modules { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.mod {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: var(--nx-ink);
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: 9px;
}

/* Availability settings */
.availability-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.availability-grid label { display: grid; gap: 6px; color: var(--nx-navy); font-weight: 700; }
.availability-grid small { color: var(--nx-muted); font-weight: 400; line-height: 1.35; }
.availability-check { display: flex !important; align-items: center; gap: 10px; padding: 12px; background: #f6f8fb; border-radius: 9px; }
.availability-preview { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.availability-pill { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.availability-pill.good { color: #176b36; background: #e3f5e8; }
.availability-pill.low { color: #8a5a00; background: #fff3d6; }
.availability-pill.insufficient { color: #a64b00; background: #fde8d2; }
.availability-pill.out { color: var(--nx-danger); background: #fde8e6; }
.availability-pill.unknown { color: #56616a; background: #e7eaed; }
.availability-legend { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.availability-legend li { display: flex; align-items: center; gap: 12px; }
.availability-legend .availability-pill { min-width: 104px; text-align: center; flex: none; }

/* Login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: var(--nx-canvas); }
.login-card {
    width: min(100%, 360px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--nx-border);
    border-radius: 15px;
    box-shadow: 0 10px 32px rgba(31,56,100,.10);
}
.login-brand { color: var(--nx-navy); font-size: 24px; font-weight: 800; }
.login-card input { padding: 12px; border: 1px solid #cbd5e1; border-radius: 9px; font-size: 16px; }
.login-demo { margin-top: 8px; color: var(--nx-muted); font-size: 12px; }

@media (max-width: 760px) {
    .shell { flex-direction: column; }
    .sidebar { width: auto; flex: 0 0 auto; padding: 10px 14px; }
    .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 5px; }
    .sidebar .nav-section { flex-basis: 100%; margin: 8px 4px 0; }
    .role { margin-top: 8px; }
    .content { padding: 12px; }
}

/* STABLE APPLICATION CONTENT WIDTH */
/*
 * The shell is a row flex container. width:0 with flex-grow makes the
 * content column consume the remaining viewport width instead of using
 * the active tab's intrinsic content width.
 */
.shell > .content {
    box-sizing: border-box;
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}

.shell > .content > .app-content-frame {
    box-sizing: border-box;
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.shell > .content > .app-content-frame > .fx-head,
.shell > .content > .app-content-frame > .fx-tabs,
.shell > .content > .app-content-frame > .fx-card,
.shell > .content > .app-content-frame > .fx-quick,
.shell > .content > .app-content-frame > .fx-toast,
.shell > .content > .app-content-frame > .oc-shell {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

@media (max-width: 760px) {
    .shell > .content {
        width: auto !important;
        flex: 1 1 auto !important;
    }
}

.stock-product-with-image{display:flex;align-items:center;gap:.65rem;min-width:0}
.sc-product{display:flex!important;align-items:center;gap:.65rem}.sc-product>span{display:flex;flex-direction:column;min-width:0}
.oc-line,.oc-result{align-items:center}

/* SYNC AUTOMATION PAGE START */
.sync-auto-page{display:grid;gap:20px;max-width:1480px;margin:0 auto;padding:4px 0 42px;color:var(--nx-ink)}
.sync-auto-hero{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:8px 2px 2px}
.sync-auto-eyebrow{margin:0 0 6px;color:var(--nx-orange);font-size:.76rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.sync-auto-hero h1{margin:0;color:var(--nx-navy);font-size:clamp(2.2rem,4vw,3.5rem);line-height:1;letter-spacing:-.045em}
.sync-auto-intro{max-width:760px;margin:14px 0 0;color:#667389;font-size:1rem;line-height:1.55}
.sync-auto-server-status{display:flex;align-items:center;gap:11px;min-width:205px;padding:12px 16px;border:1px solid #d9e2ed;border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(31,56,100,.06)}
.sync-auto-server-status small,.sync-auto-server-status strong{display:block}.sync-auto-server-status small{color:#778297;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.sync-auto-server-status strong{margin-top:2px;color:var(--nx-navy)}
.sync-auto-status-dot{width:11px;height:11px;border-radius:50%;background:#a1aabd;box-shadow:0 0 0 5px #edf0f5}.sync-auto-server-status.is-on .sync-auto-status-dot{background:#32a05c;box-shadow:0 0 0 5px #e2f3e8}.sync-auto-server-status.is-off .sync-auto-status-dot{background:#c84a3e;box-shadow:0 0 0 5px #f9e8e5}
.sync-auto-master{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:19px 22px;border:1px solid #d9e2ed;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(31,56,100,.05)}.sync-auto-master.is-enabled{border-color:#b9dfc6;background:linear-gradient(90deg,#f5fcf7,#fff)}
.sync-auto-switch-row{display:flex;align-items:center;gap:14px;cursor:pointer}.sync-auto-switch-row>input{position:absolute;opacity:0;pointer-events:none}.sync-auto-toggle{position:relative;width:48px;height:27px;flex:0 0 auto;border-radius:999px;background:#cbd4e0;transition:.2s}.sync-auto-toggle:after{content:'';position:absolute;top:4px;left:4px;width:19px;height:19px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.18);transition:.2s}.sync-auto-switch-row>input:checked+.sync-auto-toggle{background:var(--nx-orange)}.sync-auto-switch-row>input:checked+.sync-auto-toggle:after{transform:translateX(21px)}
.sync-auto-switch-copy{display:grid;gap:4px}.sync-auto-switch-copy strong{font-size:1rem;color:var(--nx-navy)}.sync-auto-switch-copy small{color:#6d788a;line-height:1.35}
.sync-auto-state-pill{padding:7px 12px;border-radius:999px;font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.sync-auto-state-pill.is-on{color:#23703e;background:#e4f4e9}.sync-auto-state-pill.is-paused{color:#6d7788;background:#edf1f6}
.sync-auto-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sync-auto-card{display:grid;align-content:start;gap:18px;padding:22px;border:1px solid #d9e2ed;border-radius:18px;background:#fff;box-shadow:0 6px 20px rgba(31,56,100,.045)}
.sync-auto-card-head{display:flex;align-items:flex-start;gap:13px;padding-bottom:15px;border-bottom:1px solid #edf0f5}.sync-auto-card-head h2,.sync-auto-section-head h2{margin:0;color:var(--nx-navy);font-size:1.25rem}.sync-auto-card-head p,.sync-auto-section-head p{margin:5px 0 0;color:#758095;line-height:1.4}
.sync-auto-icon{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:11px;color:#fff;background:linear-gradient(145deg,var(--nx-navy),#385a92);font-size:.9rem;font-weight:900}.sync-auto-safety .sync-auto-icon{background:linear-gradient(145deg,#df681f,#f18a42)}
.sync-auto-options{display:grid;gap:10px}.sync-auto-check{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border:1px solid #e1e7ef;border-radius:11px;background:#f8fafc;cursor:pointer}.sync-auto-check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--nx-orange)}.sync-auto-check>span{display:grid;gap:3px;font-weight:750;color:var(--nx-navy)}.sync-auto-check small{font-weight:400;color:#778297}.sync-auto-check.is-disabled{opacity:.62;cursor:not-allowed}
.sync-auto-field{display:grid;gap:7px;color:#5f6d82;font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.04em}.sync-auto-field input{width:100%;padding:11px 12px;border:1px solid #cfd8e4;border-radius:10px;background:#fff;color:var(--nx-navy);font:inherit;font-size:.95rem;font-weight:700;text-transform:none}.sync-auto-field input:focus{outline:3px solid color-mix(in srgb, var(--nexus-accent, #EE7326) 18%, transparent);border-color:var(--nx-orange)}
.sync-auto-input-suffix{display:grid;grid-template-columns:110px auto;align-items:center;gap:10px}.sync-auto-input-suffix>span{font-size:.9rem;font-weight:650;text-transform:none;letter-spacing:0;color:#778297}.sync-auto-time-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sync-auto-run,.sync-auto-refresh{justify-self:start;padding:10px 15px;border:1px solid #d4dce7;border-radius:10px;color:var(--nx-navy);background:#f2f5f9;font:inherit;font-weight:850;cursor:pointer}.sync-auto-run:hover,.sync-auto-refresh:hover{border-color:#b9c6d7;background:#e9eef5}.sync-auto-run:disabled,.sync-auto-refresh:disabled{opacity:.5;cursor:not-allowed}
.sync-auto-safety{background:linear-gradient(145deg,#fffaf5,#fff);border-color:#efd6bf}
.sync-auto-status-card{gap:16px}.sync-auto-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.sync-auto-status-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.sync-auto-status-grid article{display:grid;gap:5px;min-height:105px;padding:15px;border:1px solid #e2e8f0;border-radius:13px;background:#f8fafc}.sync-auto-status-grid span{color:#748096;font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.sync-auto-status-grid strong{color:var(--nx-navy);font-size:1rem;overflow-wrap:anywhere}.sync-auto-status-grid small{align-self:end;color:#8590a2}
.sync-auto-notice{display:flex;gap:8px;padding:12px 14px;border-radius:11px;font-weight:700}.sync-auto-notice.is-success{color:#256c3d;background:#e8f5ec;border:1px solid #bde0c7}.sync-auto-notice.is-error{display:grid;color:#9e352b;background:#fcedea;border:1px solid #f2c9c4}.sync-auto-loading{color:#6f7a8d}
.sync-auto-save-bar{position:sticky;bottom:12px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 18px;border:1px solid #ccd7e5;border-radius:15px;background:rgba(255,255,255,.94);box-shadow:0 12px 34px rgba(31,56,100,.16);backdrop-filter:blur(10px)}.sync-auto-save-bar>div{display:grid;gap:3px}.sync-auto-save-bar strong{color:var(--nx-navy)}.sync-auto-save-bar span{color:#748096;font-size:.86rem}.sync-auto-save{padding:12px 18px;border:0;border-radius:11px;color:#fff;background:var(--nx-orange);font:inherit;font-weight:900;box-shadow:0 5px 13px color-mix(in srgb, var(--nexus-accent, #EE7326) 18%, transparent);cursor:pointer}.sync-auto-save:hover{background:#d96119}.sync-auto-save:disabled{opacity:.55;cursor:not-allowed}
@media(max-width:920px){.sync-auto-grid,.sync-auto-status-grid{grid-template-columns:1fr}.sync-auto-hero{align-items:flex-start}.sync-auto-server-status{min-width:180px}}
@media(max-width:650px){.sync-auto-page{gap:14px}.sync-auto-hero,.sync-auto-master,.sync-auto-section-head,.sync-auto-save-bar{display:grid}.sync-auto-server-status{width:100%}.sync-auto-state-pill{justify-self:start}.sync-auto-card{padding:17px}.sync-auto-time-row{grid-template-columns:1fr 1fr}.sync-auto-time-row label:last-child{grid-column:1/-1}.sync-auto-save{width:100%}}
/* SYNC AUTOMATION PAGE END */

/* COMMERCE SYNC PREVIEW UI START */
.commerce-sync-preview-page{max-width:100%;display:grid;gap:16px}
.commerce-sync-preview-page .app-page-header{align-items:flex-end}
.commerce-sync-preview-page .app-card{border-radius:16px;box-shadow:0 5px 18px rgba(31,56,100,.045)}
.commerce-sync-preview-page .app-table-wrap{overflow:auto;border:1px solid #dce3ec;border-radius:14px;background:#fff}
.commerce-sync-preview-page .app-table{width:100%;min-width:1540px;border-collapse:separate;border-spacing:0;table-layout:auto}
.commerce-sync-preview-page .app-table thead th{position:sticky;top:0;z-index:2;padding:11px 10px;color:#fff;background:#243f70;border-bottom:0;font-size:.7rem;line-height:1.25;font-weight:850;letter-spacing:.035em;text-transform:uppercase;white-space:normal}
.commerce-sync-preview-page .app-table thead th:first-child{min-width:275px;border-top-left-radius:12px}
.commerce-sync-preview-page .app-table thead th:last-child{border-top-right-radius:12px}
.commerce-sync-preview-page .app-table tbody td{padding:10px;vertical-align:middle;border-bottom:1px solid #e8edf3;color:#263d68;font-size:.79rem;line-height:1.3}
.commerce-sync-preview-page .app-table tbody tr:nth-child(even){background:#f8fafc}
.commerce-sync-preview-page .app-table tbody tr:hover{background:#f1f6fb}
.commerce-sync-preview-page .app-table tbody tr:last-child td{border-bottom:0}
.commerce-sync-preview-page .stock-product-with-image{display:grid;grid-template-columns:48px minmax(160px,1fr);align-items:center;gap:11px;min-width:250px}
.commerce-sync-preview-page .stock-product-with-image .catalogue-thumbnail{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important;border-radius:9px;background:#f2f5f9}
.commerce-sync-preview-page .stock-product-with-image .catalogue-thumbnail img{width:48px!important;height:48px!important;max-width:48px!important;max-height:48px!important;object-fit:cover!important}
.commerce-sync-preview-page .stock-product-with-image strong{display:block;color:#203a67;font-size:.82rem;line-height:1.2;overflow-wrap:anywhere}
.commerce-sync-preview-page .stock-product-with-image small{display:block;margin-top:4px;color:#6e7c92;font-size:.7rem;line-height:1.25}
.commerce-sync-preview-page .app-table td:nth-child(2){text-align:center;font-weight:800}
.commerce-sync-preview-page .app-table td:nth-child(3),
.commerce-sync-preview-page .app-table td:nth-child(4),
.commerce-sync-preview-page .app-table td:nth-child(5){min-width:170px;max-width:230px;overflow-wrap:anywhere}
.commerce-sync-preview-page .app-table td:nth-child(6){min-width:125px;color:#637188}
.commerce-sync-preview-page .app-table td:nth-child(7){min-width:112px}
.commerce-sync-preview-page .app-table td:nth-child(8),
.commerce-sync-preview-page .app-table td:nth-child(9),
.commerce-sync-preview-page .app-table td:nth-child(10),
.commerce-sync-preview-page .app-table td:nth-child(11),
.commerce-sync-preview-page .app-table td:nth-child(12){white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right;font-weight:750}
.commerce-sync-preview-page .app-table td:last-child{text-align:center;white-space:nowrap}
.commerce-sync-preview-page .app-link-action{display:inline-flex;align-items:center;justify-content:center;min-width:94px;padding:7px 10px;border:1px solid #efbd98;border-radius:8px;color:#cf5e18;background:#fff8f2;font-size:.7rem;line-height:1.15;font-weight:850;text-align:center;text-decoration:none;cursor:pointer}
.commerce-sync-preview-page button.app-link-action:hover{background:#ffefe3;border-color:#e89b64}
.commerce-sync-preview-page button.app-link-action:disabled{opacity:.5;cursor:not-allowed}
.commerce-sync-preview-page .app-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;color:#31516f;background:#eaf0f6;font-size:.68rem;font-weight:850;white-space:nowrap}
@media(max-width:900px){.commerce-sync-preview-page .app-table{min-width:1420px}.commerce-sync-preview-page .app-card{padding:12px}.commerce-sync-preview-page .app-table tbody td{padding:9px 8px}}
/* COMMERCE SYNC PREVIEW UI END */

/* COMMERCE SYNC PREVIEW FIT START */
/* Desktop-first compact layout. The table now fits the remaining content width
   at common laptop/desktop resolutions. Narrow screens still scroll safely. */
.commerce-sync-preview-page{width:100%;min-width:0;overflow:hidden}
.commerce-sync-preview-page .app-card{min-width:0}
.commerce-sync-preview-page .app-table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.commerce-sync-preview-page .app-table{width:100%;min-width:1180px;table-layout:fixed}
.commerce-sync-preview-page .app-table thead th{padding:10px 7px;font-size:.64rem;letter-spacing:.02em}
.commerce-sync-preview-page .app-table tbody td{padding:9px 7px;font-size:.73rem;line-height:1.22}
.commerce-sync-preview-page .app-table th:nth-child(1){width:205px}
.commerce-sync-preview-page .app-table th:nth-child(2){width:58px}
.commerce-sync-preview-page .app-table th:nth-child(3){width:145px}
.commerce-sync-preview-page .app-table th:nth-child(4){width:145px}
.commerce-sync-preview-page .app-table th:nth-child(5){width:105px}
.commerce-sync-preview-page .app-table th:nth-child(6){width:92px}
.commerce-sync-preview-page .app-table th:nth-child(7),
.commerce-sync-preview-page .app-table th:nth-child(8),
.commerce-sync-preview-page .app-table th:nth-child(9){width:88px}
.commerce-sync-preview-page .app-table th:nth-child(10),
.commerce-sync-preview-page .app-table th:nth-child(11){width:72px}
.commerce-sync-preview-page .app-table th:nth-child(12){width:70px}
.commerce-sync-preview-page .stock-product-with-image{grid-template-columns:42px minmax(0,1fr);gap:8px;min-width:0}
.commerce-sync-preview-page .stock-product-with-image .catalogue-thumbnail,
.commerce-sync-preview-page .stock-product-with-image .catalogue-thumbnail img{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important}
.commerce-sync-preview-page .stock-product-with-image strong{font-size:.75rem}
.commerce-sync-preview-page .stock-product-with-image small{font-size:.64rem}
.commerce-sync-preview-page .app-table td:nth-child(2){text-align:center}
.commerce-sync-preview-page .app-table td:nth-child(3),
.commerce-sync-preview-page .app-table td:nth-child(4),
.commerce-sync-preview-page .app-table td:nth-child(5){min-width:0;max-width:none;overflow-wrap:anywhere}
.commerce-sync-preview-page .app-table td:nth-child(6){min-width:0}
.commerce-sync-preview-page .app-table td:nth-child(7){min-width:0}
.commerce-sync-preview-page .app-table td:nth-child(7),
.commerce-sync-preview-page .app-table td:nth-child(8),
.commerce-sync-preview-page .app-table td:nth-child(9),
.commerce-sync-preview-page .app-table td:nth-child(10),
.commerce-sync-preview-page .app-table td:nth-child(11){white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.commerce-sync-preview-page .app-table td:nth-child(12){text-align:center;white-space:nowrap}
.commerce-sync-preview-page .app-link-action{min-width:76px;padding:6px 7px;font-size:.63rem}
.commerce-sync-preview-page .app-pill{padding:4px 7px;font-size:.62rem}
@media(min-width:1450px){.commerce-sync-preview-page .app-table{min-width:0}}
@media(max-width:1250px){.commerce-sync-preview-page .app-table{min-width:1120px}.commerce-sync-preview-page .app-table thead th{font-size:.61rem}.commerce-sync-preview-page .app-table tbody td{font-size:.69rem}}
/* COMMERCE SYNC PREVIEW FIT END */

/* Tenant appearance runtime mappings */
body,
.shell,
.content {
    background: var(--nexus-surface, #F6F7F9);
}

.sidebar {
    background: var(--nexus-sidebar, #1F3864);
    color: var(--nexus-sidebar-text, #FFFFFF);
}

.sidebar .brand,
.sidebar .who,
.sidebar .logout {
    color: var(--nexus-sidebar-text, #FFFFFF);
}

.sidebar .tenant,
.sidebar .nav-section {
    color: var(--nexus-accent, #EE7326);
}

.sidebar a:hover,
.sidebar a.active {
    color: var(--nexus-sidebar-text, #FFFFFF);
    background: color-mix(in srgb, var(--nexus-primary, #1F3864) 72%, white 28%);
}

.app-button-primary,
button.primary,
.btn-primary {
    background: var(--nexus-primary, #1F3864);
    border-color: var(--nexus-primary, #1F3864);
    color: var(--nexus-primary-text, #FFFFFF);
}

.app-eyebrow,
.eyebrow,
.card h3 {
    color: var(--nexus-accent, #EE7326);
}