:root {
    --app-bg: #f5f7fb;
    --app-surface: #fff;
    --app-surface-tint: #e5efec;
    --app-text: #182033;
    --app-muted: #667085;
    --app-border: #e4e7ec;
    --app-content-top-space: 20px;
    --app-content-bottom-space: 40px;
    --app-primary: #127c74;
    --app-primary-hover: #0d6962;
    --app-sidebar: #111827;
    --app-brand-navy: #12314a;
    --app-accent: #2dd4bf;
    --app-red: #b84a51;
    --app-danger-hover-bg: color-mix(in srgb, var(--app-red) 9%, var(--app-surface));
    --app-error-bg: #f4d5d4;
    --app-error-text: #963a42;
    --sidebar-width: 252px;
    --topbar-height: 76px;
    --bs-body-color: var(--app-text);
    --bs-body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[x-cloak] { display: none !important; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--app-text); background: var(--app-bg); font-size: .925rem; -webkit-font-smoothing: antialiased; }
a { color: var(--app-primary); text-underline-offset: 3px; }
a:hover { color: var(--app-primary-hover); }
button, input { font: inherit; }
label, .form-label { font-weight: 700; }
button, a { -webkit-tap-highlight-color: transparent; }
/* Shared disabled-control cursor across admin, authentication and storefront pages. */
:disabled,
:disabled *,
[aria-disabled="true"],
[aria-disabled="true"] *,
.disabled,
.disabled *,
.ms-parent.app-select-widget.is-disabled,
.ms-parent.app-select-widget.is-disabled * {
    cursor: not-allowed !important;
}
/* Native disabled controls remain inert while receiving the pointer for their cursor. */
button:disabled, input:disabled, select:disabled, textarea:disabled,
.btn:disabled, fieldset:disabled button.btn {
    pointer-events: auto;
}
/* Shared policy: no focus outlines or outer focus rings, including vendor controls. */
:focus, :focus-visible { outline: none !important; box-shadow: none !important; }
.brand { display: inline-block; font-size: 1.75rem; font-weight: 730; letter-spacing: -.065em; text-decoration: none; line-height: 1.2; }
.brand-labs { color: #49c3b4; }
.btn { border-radius: 6px; font-weight: 550; padding: .6rem 1rem; }
.btn-primary { --bs-btn-bg: var(--app-primary); --bs-btn-border-color: var(--app-primary); --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: #095c56; --bs-btn-active-border-color: #095c56; --bs-btn-disabled-bg: var(--app-primary); --bs-btn-disabled-border-color: var(--app-primary); }
.btn-outline-primary {
    --bs-btn-color: var(--app-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-focus-shadow-rgb: 18, 124, 116;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #095c56;
    --bs-btn-active-border-color: #095c56;
    --bs-btn-disabled-color: var(--app-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-primary);
}
.btn-outline-secondary { --bs-btn-color: #475467; --bs-btn-border-color: #d0d5dd; --bs-btn-hover-bg: #f2f4f7; --bs-btn-hover-color: #163047; --bs-btn-hover-border-color: #98a2b3; --bs-btn-active-bg: #e4e7ec; --bs-btn-active-color: #163047; }
.btn-sm { padding: .4rem .8rem; font-size: .8rem; }
.pagination {
    --bs-pagination-border-radius: 3px;
    --bs-pagination-font-size: .875rem;
    --bs-pagination-padding-x: .375rem;
    --bs-pagination-padding-y: .5rem;
    --bs-pagination-color: var(--app-text);
    --bs-pagination-bg: var(--app-surface);
    --bs-pagination-border-color: var(--app-border);
    --bs-pagination-hover-color: var(--app-primary-hover);
    --bs-pagination-hover-bg: var(--app-surface-tint);
    --bs-pagination-hover-border-color: #98a2b3;
    --bs-pagination-focus-color: var(--app-primary-hover);
    --bs-pagination-focus-bg: var(--app-surface-tint);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--app-primary);
    --bs-pagination-active-border-color: var(--app-primary);
    --bs-pagination-disabled-color: var(--app-muted);
    --bs-pagination-disabled-bg: #f8fafc;
    --bs-pagination-disabled-border-color: var(--app-border);
    flex-wrap: wrap;
    gap: 4px;
}
.pagination .page-link { width: 36px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--bs-pagination-border-radius); text-decoration: none; }
.pagination .page-item:not(:first-child) .page-link { margin-left: 0; }
.pagination .page-link .ti { font-size: 1.125rem; }
.pagination .page-item.ellipsis { --bs-pagination-disabled-bg: var(--app-surface-tint); }
.app-pagination { padding: 18px 24px 0; border-top: 1px solid var(--app-border); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.app-pagination-summary { margin: 8px 0; color: var(--app-muted); font-size: .8rem; }
.app-pagination .pagination { justify-content: center; }
.alert { border-radius: 8px; font-size: .9rem; }
/* One status-badge system for all admin and storefront pages. */
.status-badge { display: inline-flex; align-items: center; justify-content: center; justify-self: start; max-width: 100%; padding: 3px 8px; border: 0; border-radius: 4px; font-size: .8rem; font-weight: 600; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; background: #f2f4f7; color: #475467; }
.status-badge--warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.status-badge--nowrap { max-width: none; white-space: nowrap; overflow-wrap: normal; }
.status-badge--success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.status-badge--danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.status-badge--info { background: var(--bs-primary-bg-subtle); color: var(--bs-primary-text-emphasis); }
.status-badge--orange { background: #ffedd5; color: #9a3412; }
.status-badge--queued { background: #f2da78; color: #66551c; }
.admin-table-cell-stack { display: grid; justify-items: start; gap: 4px; }
.admin-table-cell-stack > .field-help { margin: 0; }
.admin-table-inactive-value { color: #98a2b3; }
.app-flash, .admin-detail-message { display: flex; align-items: start; gap: 14px; border: 0; font-size: .875rem; line-height: 1.65; }
.app-flash { overflow: hidden; border: 0; }
.app-flash > i, .admin-detail-message > i { flex-shrink: 0; font-size: 1.5rem; }
.app-flash-message { min-width: 0; overflow-wrap: anywhere; }
.app-flash-success {
    transition: height .35s ease, opacity .25s ease, margin .35s ease,
        padding .35s ease, border-width .35s ease;
}
.app-flash-success.is-dismissing {
    opacity: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
    border-bottom-width: 0;
}
.required-indicator { color: var(--app-red); font-weight: 700; }
/* Authentication uses Cogniveon's quiet background, centered card and full-width controls. */
.auth-main { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: clamp(40px, 10vh, 100px) 20px 36px; }
.auth-brand { color: var(--app-brand-navy); font-size: 2.1rem; margin-bottom: 34px; }
.auth-flash { width: min(100%, 550px); }
.auth-card { width: min(100%, 550px); padding: 48px 78px; border-radius: 10px; background: #fff; box-shadow: 0 6px 12px -10px rgb(18 31 43 / 50%); }
.auth-card h1 { margin: 0 0 12px; font-size: 1.6rem; font-weight: 450; text-align: center; letter-spacing: -.035em; }
.auth-intro { color: var(--app-muted); line-height: 1.6; text-align: center; margin-bottom: 30px; font-size: .9rem; }
.auth-card h1 + .auth-form { margin-top: 28px; }
.auth-form label { display: block; font-size: .925rem; margin-bottom: 7px; color: #344054; }
.auth-form .form-control { min-height: 54px; padding: 14px 16px; border: 1px solid transparent; border-radius: 4px; background: #edf4f4; color: var(--app-text); }
.auth-form .form-control:focus { background: #e8f3f1; border-color: #127c74; }
.auth-form .has-error .form-control { border-color: var(--app-red); }
.auth-form .form-error:focus { border-color: var(--app-red); }
.auth-submit { width: 100%; min-height: 50px; margin-top: 8px; border-radius: 4px; }
.auth-links { margin-top: 22px; text-align: right; font-size: .875rem; }
.auth-links a { text-decoration: none; }
.auth-links a:hover { text-decoration: underline; }
/* Fixed navigation and topbar; content is independent of the future commerce layout. */
.app-sidebar { width: var(--sidebar-width); position: fixed; inset: 0 auto 0 0; z-index: 1050; background: var(--app-sidebar); color: #d0d5dd; display: flex; flex-direction: column; height: 100dvh; }
.sidebar-brand-row { padding: 29px 28px 36px; display: flex; align-items: center; justify-content: space-between; }
.sidebar-brand, .sidebar-brand:hover { color: #fff; }
.workspace-label { color: #98a2b3; letter-spacing: .14em; font-size: .62rem; font-weight: 650; padding: 0 28px; margin-bottom: 13px; }
.sidebar-brand-row, .workspace-label, .sidebar-bottom { flex-shrink: 0; }
.sidebar-nav { flex: 1; min-height: 0; padding: 0 14px 14px; display: grid; align-content: start; gap: 5px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #475467 transparent; }
.nav-item { color: #d0d5dd; display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 7px; text-decoration: none; font-size: .875rem; font-weight: 550; }
.nav-item svg { width: 19px; height: 19px; }
.nav-item > .ti { width: 19px; font-size: 19px; text-align: center; }
.nav-item.is-active { background: #163638; color: #fff; }
.nav-item:hover { background: #1f2937; color: #fff; }
.nav-active-dot { width: 5px; height: 5px; background: #2dd4bf; border-radius: 50%; margin-left: auto; }
/* Submenus fly out beside the desktop rail and expand within the mobile drawer. */
.nav-group { position: relative; }
.nav-group-row { display: flex; align-items: stretch; border-radius: 7px; }
.nav-group-row.is-active { background: #163638; color: #fff; }
.nav-group-row > .nav-item { flex: 1; min-width: 0; border-radius: 7px 0 0 7px; }
.nav-group-row.is-active > .nav-item { color: #fff; }
.nav-group-row.is-open > .nav-item { background: #1f2937; color: #fff; }
.nav-submenu-toggle { display: grid; place-items: center; flex: 0 0 40px; border: 0; border-radius: 0 7px 7px 0; background: transparent; color: inherit; }
.nav-submenu-toggle:hover, .nav-submenu-toggle[aria-expanded="true"] { background: #1f2937; color: #fff; }
.sidebar-nav .nav-item:focus-visible, .nav-submenu-toggle:focus-visible { outline: 2px solid #5eead4 !important; outline-offset: -3px; }
.nav-submenu-toggle .ti { font-size: 17px; }
.nav-submenu { position: fixed; left: 0; top: 0; width: max-content; min-width: 218px; max-width: calc(100vw - var(--sidebar-width) - 16px); margin-left: 0; padding: 10px; border: 1px solid #344054; border-radius: 9px; background: var(--app-sidebar); box-shadow: 0 12px 28px rgb(16 24 40 / 22%); z-index: 1; }
.nav-submenu::before { content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 15px; }
.nav-submenu-heading { display: block; padding: 5px 14px 9px; color: #98a2b3; font-size: .72rem; font-weight: 650; }
.nav-submenu .nav-item { padding: 9px 14px; font-size: .8125rem; }
.nav-submenu .nav-item > .ti { flex: 0 0 19px; font-size: 16px; }
.nav-submenu .nav-item > span:not(.nav-active-dot) { min-width: 0; overflow-wrap: anywhere; }
.nav-submenu .nav-active-dot { flex-shrink: 0; }
.sidebar-bottom { margin-top: auto; padding: 22px 24px; border-top: 1px solid #344054; }
.sidebar-account { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sidebar-account > div { min-width: 0; }
.sidebar-account strong { font-size: .8rem; font-weight: 550; display: block; overflow-wrap: anywhere; }
.sidebar-account div span { display: block; color: #98a2b3; font-size: .7rem; margin-top: 3px; }
.avatar { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #1f2937; color: #99f6e4; display: inline-grid; place-items: center; font-weight: 650; font-size: .82rem; }
.sidebar-signout { border: 0; background: transparent; color: #d0d5dd; font-size: .75rem; padding: 0; margin: 17px 0 0 47px; }
.sidebar-signout:hover { color: #fff; text-decoration: underline; }
.app-frame { margin-left: var(--sidebar-width); min-height: 100dvh; display: flex; flex-direction: column; }
.app-topbar { height: var(--topbar-height); position: fixed; top: 0; right: 0; left: var(--sidebar-width); z-index: 1030; background: #fff; border-bottom: 1px solid var(--app-border); padding: 0 38px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-left, .topbar-account { display: flex; align-items: center; gap: 13px; min-width: 0; }
.topbar-context { color: var(--app-muted); font-size: .8rem; }
.topbar-context span { margin: 0 14px; color: #98a2b3; }
.topbar-context strong { color: #344054; font-weight: 550; }
.topbar-account { gap: 12px; }
.account-label { font-size: .78rem; font-weight: 550; }
.avatar-light { background: #eff6ff; color: #0d6962; width: 33px; height: 33px; flex-basis: 33px; }
.app-content { width: 100%; max-width: 1680px; margin: var(--topbar-height) auto 0; padding: 38px; flex: 1; }
.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 30px; }
.page-heading-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.page-heading-actions .btn { white-space: nowrap; }
.btn-surface { justify-self: start; width: fit-content; max-width: 100%; }
.page-heading .btn[class*="btn-outline-"], .btn-surface[class*="btn-outline-"] { --bs-btn-bg: var(--app-surface); }
.page-heading .btn-outline-secondary, .btn-surface.btn-outline-secondary {
    --bs-btn-hover-bg: var(--app-surface-tint);
    --bs-btn-hover-color: var(--app-primary-hover);
}
.page-heading--detail { flex-wrap: wrap; }
.page-heading--detail > :first-child { flex-shrink: 0; }
.page-heading--detail .page-heading-actions { align-items: center; margin-left: auto; }

.admin-form.modal-content { --bs-modal-border-color: var(--app-border); --bs-modal-bg: var(--app-surface); --bs-modal-color: var(--app-text); }
.admin-form.modal-content :where(.modal-header, .modal-body, .modal-footer) { padding: var(--admin-form-panel-padding, 24px); }
.app-modal-heading { display: block; }
.app-modal-heading p { margin: 8px 0 0; color: var(--app-muted); font-size: var(--admin-form-control-size); }
.app-modal-heading .field-help { margin: 8px 0 0; font-size: .75rem; }
.column-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--admin-form-field-gap); }
.column-choice { min-height: var(--admin-form-control-height); padding: .625rem .75rem; border: 1px solid var(--admin-form-control-border); border-radius: 5px; background: var(--app-surface); overflow-wrap: anywhere; }
.column-choice:focus-within { border-color: var(--app-primary); }
.column-choice input { flex-shrink: 0; }
.column-choice-all { grid-column: 1 / -1; background: var(--app-bg); }
.column-download-modal { --bs-modal-width: 680px; }
.column-download-modal .modal-content { max-height: 80dvh; }
@media (max-width: 575.98px) {
    .column-choices { grid-template-columns: minmax(0, 1fr); }
    .page-heading-actions { width: 100%; justify-content: flex-start; }
}
.eyebrow { font-size: .63rem; letter-spacing: .16em; font-weight: 650; color: #667085; margin: 0 0 11px; }
.admin-page-title { font-size: 1.85rem; letter-spacing: -.045em; font-weight: 620; margin: 0 0 9px; }
.page-subtitle { color: var(--app-muted); margin: 0; font-size: .85rem; }
.welcome-panel { background: #ffffff; border: 1px solid #e4e7ec; border-radius: 10px; min-height: 300px; display: flex; overflow: hidden; position: relative; }
.welcome-copy { padding: 34px 38px; position: relative; z-index: 1; flex: 1; }
.welcome-copy h2 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 530; letter-spacing: -.045em; margin: 0 0 16px; }
.welcome-copy > p:not(.eyebrow):not(.refresh-error) { color: #667085; font-size: .95rem; line-height: 1.7; margin: 0; }
.welcome-footer { margin-top: 30px; display: flex; align-items: center; gap: 16px; }
.welcome-footer > span { color: #667085; font-size: .69rem; }
.refresh-error { color: #a43d46; margin-top: 15px; font-size: .8rem; }
.welcome-art { position: relative; width: 34%; min-width: 200px; overflow: hidden; background: linear-gradient(125deg, #ffffff 0%, #edf2fc 90%); display: grid; place-items: center; }
.art-orbit { width: 270px; height: 270px; border: 1px solid #d0d5dd; border-radius: 50%; position: absolute; }
.orbit-one { transform: rotate(-35deg) scaleX(.65); }
.orbit-two { transform: rotate(35deg) scaleX(.65); }
.art-center { width: 112px; height: 112px; border: 1px solid #d0d5dd; border-radius: 28px; background: #fff9; box-shadow: 0 20px 35px -25px #127c7425; display: grid; place-content: center; grid-auto-flow: column; font-size: 3.5rem; font-weight: 500; letter-spacing: -.08em; color: #182033; transform: rotate(-8deg); }
.art-center span { color: #0f766e; }
.art-node { position: absolute; border: 5px solid #f5f7fb; background: #2dd4bf; width: 19px; height: 19px; border-radius: 50%; }
.node-one { top: 25px; left: 40%; }
.node-two { bottom: 35px; right: 40%; background: #127c74; }
.node-three { top: 52%; right: 7%; width: 14px; height: 14px; border-width: 3px; }
.dashboard-details { margin-top: 4px; }
.panel { background: #fff; border: 1px solid var(--app-border); border-radius: 9px; height: 100%; padding: 26px 28px; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid #eaecf0; }
.panel h2, .admin-card-title { font-size: 1rem; letter-spacing: -.025em; margin: 0; font-weight: 600; }
.admin-card-title { display: flex; align-items: center; gap: 10px; }
.admin-card-title > .ti { color: var(--app-primary); font-size: 1.15rem; width: 1.15rem; flex-shrink: 0; }
.admin-card-subtitle { padding-inline-start: calc(1.15rem + 10px); }

.subtle-tag { font-size: .64rem; color: #667085; background: #f2f4f7; border-radius: 4px; padding: 4px 7px; }
.account-details { margin: 0; }
.account-details div { display: grid; grid-template-columns: 100px 1fr; padding-top: 20px; font-size: .8rem; gap: 10px; }
.account-details dt { font-weight: 450; color: var(--app-muted); }
.account-details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.workspace-panel { background: #f8fafc; }
.workspace-panel .eyebrow { margin-bottom: 20px; }
.workspace-panel h2 { margin-bottom: 12px; }
.workspace-panel > p:last-child { font-size: .81rem; line-height: 1.7; color: var(--app-muted); max-width: 300px; margin: 0; }
.products-heading .btn { display: inline-flex; align-items: center; gap: 7px; }
.products-panel { padding: 0; overflow: hidden; height: auto; }
.products-toolbar { min-height: 92px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #eaecf0; }
.products-toolbar h2 { font-size: 1rem; margin: 0 0 5px; }
.products-toolbar p { color: var(--app-muted); font-size: .72rem; margin: 0; }
.product-search { width: min(100%, 420px); }
.product-search .input-group-text { background: #f8fafc; border-color: #d0d5dd; color: #667085; }
.product-search .form-control { border-color: #d0d5dd; font-size: .82rem; }
.products-table { margin: 0; width: 100%; min-width: 0; table-layout: fixed; }
.products-table > :not(caption) > * > * { padding: 14px 16px; border-color: #eaecf0; }
.products-table thead th { color: #667085; background: #f8fafc; font-size: .67rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 650; white-space: normal; }
.products-table thead a { color: inherit; text-decoration: none; }
.products-table tbody td { color: #475467; font-size: .79rem; }
.products-table tbody tr:last-child td { border-bottom: 0; }
.product-sku { color: var(--app-text); font-size: .78rem; letter-spacing: .02em; }
.table-actions-column { width: 64px; white-space: nowrap; text-align: right; }
.publication-toggle { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.publication-toggle input[type="checkbox"] { margin: 0; cursor: pointer; }
.publication-toggle-feedback { font-size: .72rem; color: var(--app-muted); }
.publication-toggle-feedback:empty { display: none; }
.publication-toggle.has-error .publication-toggle-feedback { color: var(--app-red); width: 180px; white-space: normal; }
.entity-edit-link {
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    cursor: pointer;
}
.entity-edit-link:hover { color: var(--app-primary); text-decoration: underline; }
.entity-edit-link:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 3px; }
.admin-body { --app-actions-background: var(--app-surface); }
.table-actions { display: flex; justify-content: flex-end; white-space: nowrap; }
.table-actions-toggle {
    width: 36px;
    flex-shrink: 0;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-actions-background, transparent);
    color: var(--app-muted);
    font-size: 1.1rem;
}
.table-actions-toggle:hover, .table-actions-toggle:focus-visible, .table-actions-toggle[aria-expanded="true"] {
    background: var(--app-surface-tint);
    color: var(--app-primary-hover);
}
.table-actions-toggle:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
/* Match standard buttons: 1.5rem line height, .6rem vertical padding, and borders. */
.page-heading > .page-heading-actions .table-actions-toggle {
    --app-actions-background: var(--app-surface);
    width: calc(2.7rem + 2px);
    height: calc(2.7rem + 2px);
    border-color: #d0d5dd;
    color: #475467;
}
.page-heading > .page-heading-actions .table-actions-toggle:is(:hover, :focus-visible, [aria-expanded="true"]) {
    border-color: #98a2b3;
    background: var(--app-surface-tint);
    color: var(--app-primary-hover);
}

.table-actions .dropdown-menu {
    min-width: 150px;
    padding: 6px;
    border-color: var(--app-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgb(18 31 43 / 16%);
    z-index: 1050;
}
.table-actions .dropdown-menu form { margin: 0; }
.table-actions-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 7px;
    color: var(--app-text);
    font-size: .82rem;
    font-weight: 700;
}
.table-actions-item:hover, .table-actions-item:focus-visible {
    background: color-mix(in srgb, var(--app-primary) 9%, var(--app-surface));
    color: var(--app-primary-hover);
}
.table-actions-item-danger { color: var(--app-red); }
.table-actions-item-danger:hover, .table-actions-item-danger:focus-visible {
    background: var(--app-danger-hover-bg);
    color: var(--app-red);
}
.product-thumbnail { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid #e4e7ec; border-radius: 7px; object-fit: cover; background: #f8fafc; }
.product-thumbnail-placeholder { color: #98a2b3; font-size: 1.15rem; }
.image-lightbox-trigger { display: block; cursor: zoom-in; border-radius: 7px; }
.image-lightbox-trigger:focus-visible { outline: 3px solid #127c74; outline-offset: 3px; }
.image-lightbox .modal-header { gap: 16px; }
.image-lightbox .modal-title { overflow-wrap: anywhere; }
.image-lightbox-no-title .modal-header { border-bottom: 0; padding-bottom: 0; }
.image-lightbox .btn-close { flex-shrink: 0; min-width: 24px; min-height: 24px; }
.image-lightbox .modal-body { display: grid; place-items: center; min-height: 120px; }
.image-lightbox-image { max-width: 100%; max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); width: auto; height: auto; object-fit: contain; }
.image-lightbox-image[hidden], .image-lightbox-status[hidden] { display: none; }
.image-lightbox-status { margin: 0; color: #475467; text-align: center; }
.products-empty { min-height: 330px; padding: 58px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.empty-icon { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; color: #127c74; background: #eff6ff; font-size: 1.6rem; margin-bottom: 18px; }
.products-empty h3 { font-size: 1rem; margin: 0 0 8px; }
.products-empty p { color: var(--app-muted); font-size: .82rem; margin: 0 0 18px; }
.app-drawer { --bs-offcanvas-width: min(640px, 100vw); }
.app-drawer .offcanvas-header { padding: 27px 28px 22px; border-bottom: 1px solid var(--app-border); align-items: flex-start; }
.app-drawer .offcanvas-header .eyebrow { margin-bottom: 7px; }
.app-drawer .offcanvas-title { font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; }
.drawer-form { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.drawer-form-flash { padding: 24px 28px 0; }
.drawer-form-flash .alert { margin: 0; }
.drawer-form-flash:empty { display: none; padding: 0; }
.drawer-body { padding: 24px 28px 12px; }
.drawer-intro { color: var(--app-muted); font-size: .8rem; line-height: 1.55; margin: 0 0 23px; }
.field-help { color: var(--app-muted); font-size: .7rem; line-height: 1.5; margin: -5px 0 16px; }
.offcanvas-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 28px; border-top: 1px solid var(--app-border); background: #f8fafc; }
.modal { z-index: 1090; }
.modal-backdrop.show { z-index: 1085; }
/* Editing locks retain a fixed notice while the saved record scrolls behind it. */
body.modal-open.admin-edit-lock-visible { overflow-y: auto; }
.admin-edit-lock-close { position: absolute; top: 16px; right: 16px; }
.app-confirm-dialog { padding: 28px; border: 1px solid var(--app-border); border-radius: 12px; text-align: center; }
.app-confirm-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; align-self: center; margin-bottom: 16px; border-radius: 50%; background: #fbe4e5; color: var(--app-red); font-size: 1.35rem; }
.app-confirm-icon--primary { background: var(--app-surface-tint); color: var(--app-primary); }
.app-confirm-dialog h2 { margin: 0 0 10px; font-size: 1.35rem; font-weight: 700; }
.app-confirm-dialog p { margin: 0; color: var(--app-muted); }
.app-confirm-actions[hidden] { display: none; }
.app-confirm-actions { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }

/* Global searchable select controls, powered by Cogniveon's Multiple Select plugin. */
select.app-select.ms-offscreen {
    min-width: 0 !important;
    min-height: 0 !important;
}

.ms-parent.app-select-widget {
    width: 100% !important;
    min-width: 0;
    height: auto;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.ms-parent.app-select-widget .ms-choice {
    width: 100%;
    min-height: 45px;
    height: auto;
    display: block;
    position: relative;
    padding: 0;
    overflow: hidden;
    border: 1px solid #d0d5dd;
    border-radius: 5px;
    background: var(--app-surface);
    color: var(--app-text);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
    box-shadow: none;
    outline: 0;
}

.ms-parent.app-select-widget .ms-choice > span {
    min-width: 0;
    min-height: 43px;
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    position: relative;
    inset: auto;
    margin-right: 2.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ms-parent.app-select-widget .ms-choice > span.ms-placeholder {
    color: var(--app-muted);
}

.ms-parent.app-select-widget .ms-choice > div.icon-caret {
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
    right: .85rem;
    margin: 0;
    border-color: var(--app-muted) transparent transparent;
    border-style: solid;
    border-width: 5px 4px 0;
    transform: translateY(-50%);
}

.ms-parent.app-select-widget .ms-choice > div.icon-caret.open {
    border-color: transparent transparent var(--app-muted);
    border-width: 0 4px 5px;
}

.ms-parent.app-select-widget .ms-choice:focus,
.ms-parent.app-select-widget.ms-parent-open .ms-choice {
    border-color: var(--app-primary);
}

.ms-parent.app-select-widget.is-disabled .ms-choice,
.ms-parent.app-select-widget .ms-choice.disabled {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--app-muted);
}

.ms-parent.app-select-widget.form-error .ms-choice,
.ms-parent.app-select-widget .ms-choice[aria-invalid="true"] {
    border-color: var(--app-error-text);
}

.app-select-dropdown.ms-drop {
    min-width: 0 !important;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    z-index: 1110;
    border: 1px solid var(--app-border);
    border-radius: 3px;
    background: var(--app-surface);
    color: var(--app-text);
    font-family: inherit;
    font-size: .875rem;
    box-shadow: 0 4px 5px rgb(0 0 0 / 15%);
}

.app-select-dropdown.ms-drop ul {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    overflow-y: auto;
}

.app-select-dropdown.ms-drop ul > li {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 0;
    background: transparent;
    color: var(--app-text);
}

.app-select-dropdown.ms-drop ul > li label {
    width: 100%;
    min-width: 0;
    min-height: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 5px 9px;
    color: inherit;
    font-size: .82rem;
    font-weight: 400;
    line-height: 22px;
    cursor: pointer;
}

.app-select-dropdown.ms-drop ul > li:not(.group).selected {
    background: var(--app-surface-tint);
    color: var(--app-primary-hover);
}

.app-select-dropdown.ms-drop ul > li:not(.group):hover,
.app-select-dropdown.ms-drop ul > li:not(.group):focus-within {
    background: color-mix(in srgb, var(--app-primary) 15%, var(--app-surface));
    color: var(--app-text);
}

.app-select-dropdown.ms-drop input[type="checkbox"],
.app-select-dropdown.ms-drop input[type="radio"] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    position: static;
    margin: 0;
    accent-color: var(--app-primary);
}

.app-select-dropdown.ms-drop .ms-search {
    width: 100%;
    min-height: 43px;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid var(--app-border);
    background: var(--app-surface);
}

.app-select-dropdown.ms-drop .ms-search::before {
    content: "\eb1c";
    position: absolute;
    top: 50%;
    left: 10px;
    z-index: 1;
    color: var(--app-muted);
    font-family: "tabler-icons" !important;
    font-size: 16px;
    transform: translateY(-50%);
    pointer-events: none;
}

.app-select-dropdown.ms-drop .ms-search input {
    width: 100%;
    min-width: 0;
    min-height: 42px !important;
    margin: 0;
    padding: 9px 10px 9px 32px;
    border: 0 !important;
    border-radius: 0;
    background: transparent;
    color: var(--app-text);
    font-family: inherit;
    font-size: .85rem;
    box-shadow: none !important;
    outline: 0;
}

.app-select-dropdown.ms-drop .ms-no-results {
    width: 100%;
    padding: 8px;
    color: var(--app-muted);
    text-align: left;
}
.app-footer { display: flex; justify-content: space-between; padding: 22px 38px; color: #667085; font-size: .67rem; gap: 20px; }
.icon-button { border: 0; background: transparent; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; color: inherit; padding: 8px; }
.icon-button svg { width: 22px; height: 22px; }
.icon-button:hover { background: #e4e7ec; }
.menu-toggle, .sidebar-close, .sidebar-backdrop { display: none; }
.skip-link { position: fixed; z-index: 2000; top: -100px; left: 16px; background: #fff; padding: 10px 20px; }
.skip-link:focus { top: 10px; }
@media (max-width: 1199px) { :root { --sidebar-width: 228px; } .app-content { padding: 28px; } .app-topbar { padding: 0 28px; } .welcome-copy { padding: 30px; } }
@media (max-width: 991px) {
    :root { --topbar-height: 66px; }
    .app-sidebar { transform: translateX(-100%); transition: transform .18s ease; width: 264px; }
    .app-sidebar.is-open { transform: translateX(0); }
    .nav-submenu { position: static; width: auto; min-width: 0; max-width: none; margin: 5px 0 0 12px; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
    .nav-submenu::before, .nav-submenu-heading { display: none; }
    .nav-submenu-toggle { display: none; }
    .nav-group-row > .nav-item { border-radius: 7px; }
    .nav-group-row.is-active:has(> .nav-item:not(.is-active)) { background: transparent; }
    .nav-group-row.is-active > .nav-item:not(.is-active) { color: #d0d5dd; }
    .nav-group-row.is-active > .nav-item:not(.is-active):hover { color: #fff; }
    .app-frame { margin-left: 0; }
    .app-topbar { left: 0; padding: 0 20px; }
    .app-content { padding: 28px 24px; }
    .menu-toggle, .sidebar-close { display: grid; }
    .sidebar-close:hover { background: #1f2937; }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; background: #1118276b; z-index: 1040; }
    .menu-open { overflow: hidden; }
    .menu-open .app-frame { pointer-events: none; }
    .app-footer { padding: 22px 24px; }
}
@media (max-width: 575px) {
    .auth-main { padding: 40px 18px 28px; }
    .auth-brand { margin-bottom: 26px; }
    .auth-card { padding: 32px 25px; }
    .auth-card h1 { font-size: 1.45rem; }
    .app-content { padding: 26px 18px; }
    .app-topbar { padding: 0 14px; }
    .topbar-context { font-size: .73rem; }
    .topbar-context span { margin: 0 8px; }
    .account-label { display: none; }
    .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 23px; }
    .admin-page-title { font-size: 1.7rem; }
    .welcome-copy { padding: 28px 24px; }
    .welcome-panel { min-height: 0; }
    .welcome-art { display: none; }
    .welcome-copy h2 { font-size: 1.6rem; }
    .welcome-footer { flex-wrap: wrap; gap: 12px; }
    .panel { padding: 24px; }
    .account-details div { grid-template-columns: 60px 1fr; }
    .app-footer { padding: 20px 18px; }
    .products-toolbar { align-items: stretch; flex-direction: column; gap: 15px; }
    .product-search { width: 100%; }
    .app-drawer .offcanvas-header { padding: 23px 20px 18px; }
    .drawer-form-flash { padding: 21px 20px 0; }
    .drawer-body { padding: 21px 20px 10px; }
    .offcanvas-footer { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Keep vertical spacing inside bordered content panels at every breakpoint. */
.panel { padding-top: var(--app-content-top-space); padding-bottom: var(--app-content-bottom-space); }


/* Shared administration form system: use these classes for new pages and drawers. */
.admin-form {
    min-width: 0;
    --admin-form-field-gap: 16px;
    --admin-form-section-gap: 24px;
    --admin-form-panel-padding: 24px;
    --admin-form-control-height: 45px;
    --admin-form-control-size: .875rem;
    --admin-form-control-border: #d0d5dd;
}
.admin-form .input { min-width: 0; margin-bottom: var(--admin-form-field-gap) !important; }
.admin-form label:not(:where(.ms-drop *)), .admin-form legend, .admin-form .form-label {
    display: block; margin-bottom: 8px; color: #344054; font-size: .875rem; font-weight: 700; line-height: 1.5;
}
.admin-form :where(.form-control, .form-select) {
    min-height: var(--admin-form-control-height); padding: .625rem .75rem;
    border: 1px solid var(--admin-form-control-border); border-radius: 5px;
    background-color: var(--app-surface); color: var(--app-text); font-size: var(--admin-form-control-size); line-height: 1.5;
}
.admin-form :where(.form-control, .form-select):focus { border-color: var(--app-primary); }
.admin-form :where(.form-control, .form-select):disabled { background-color: var(--bs-secondary-bg, #e9ecef); color: var(--app-muted); }
.admin-form textarea.form-control { min-height: 120px; }
.admin-form .ms-parent.app-select-widget .ms-choice { min-height: var(--admin-form-control-height); font-size: var(--admin-form-control-size); }
.admin-form .ms-parent.app-select-widget .ms-choice > span { min-height: calc(var(--admin-form-control-height) - 2px); }
.admin-form .drawer-body { padding: var(--admin-form-panel-padding) var(--admin-form-panel-padding) 12px; }
.admin-form .offcanvas-footer { padding-inline: var(--admin-form-panel-padding); }
.admin-form .field-help { margin: -4px 0 var(--admin-form-field-gap); color: var(--app-muted); font-size: .75rem; line-height: 1.5; }
.admin-form-column { display: grid; gap: var(--admin-form-section-gap, 24px); min-width: 0; align-content: start; }
.admin-form-panel { height: auto; min-width: 0; padding: var(--admin-form-panel-padding, 24px); }
.admin-form-panel > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: var(--admin-form-section-gap, 24px); padding-bottom: 16px; border-bottom: 1px solid var(--app-border); }
.admin-form-panel > h2 .ti { color: var(--app-primary); font-size: 1.15rem; flex-shrink: 0; }
.admin-form-panel > .input:last-child, .admin-form-panel > p:last-child { margin-bottom: 0 !important; }
.admin-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--admin-form-field-gap, 16px); }
.admin-form-row > * { min-width: 0; }
.admin-form-field-wide { grid-column: 1 / -1; }
.admin-repeatable-items { display: grid; gap: var(--admin-form-field-gap); margin-bottom: var(--admin-form-field-gap); }
.admin-repeatable-item { border: 1px solid var(--app-border); border-radius: 6px; }
.admin-repeatable-item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.admin-repeatable-item-actions p { margin: 0; }
.admin-form-row--wide-first { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.admin-form-row--address { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) minmax(0, 1fr); }
@media (max-width: 575px) {
    .admin-form { --admin-form-section-gap: 18px; --admin-form-panel-padding: 20px; }
    .admin-form-row { grid-template-columns: minmax(0, 1fr); }
}

/* Compact repeated field pairs with an inline remove action, including in drawers. */
.admin-form-row--compact-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    align-items: start;
    column-gap: 12px;
}
.admin-form-row--compact-actions > .input {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 3;
    margin-bottom: 0 !important;
}
.admin-form-row--compact-actions > .input > label { grid-row: 1; }
.admin-form-row--compact-actions > .input > :is(input, select, textarea) { grid-row: 2; }
.admin-form-row--compact-actions > .input > .element-error { grid-row: 3; }
.admin-form-row--compact-actions > .btn {
    display: grid;
    grid-column: 3;
    grid-row: 2;
    place-items: center;
    width: 38px;
    height: var(--admin-form-control-height, 45px);
    padding: 0;
}

/* Shared inline validation, copied from Cogniveon. */
:where(.app-content form) .form-error {
    border-color: var(--app-red);
}

:where(.app-content form) .form-error:focus {
    border-color: var(--app-red);
}

.input > .element-error {
    position: relative;
    width: 100%;
    clear: both;
    margin-top: 10px;
    line-height: 24px;
}

.input > .element-error::before {
    position: absolute;
    z-index: 0;
    top: -7px;
    left: 12px;
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 2px 0 2px;
    background: var(--app-error-bg);
    content: "";
    transform: rotate(45deg);
}

.input > .element-error .error-message {
    position: relative;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 13px;
    border: 0;
    border-radius: 4px;
    background: var(--app-error-bg);
    color: var(--app-error-text);
    font-size: 0.875rem;
    line-height: 24px;
}

.input > .element-error div.error-message,
.input > .element-error .error-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.input > .element-error .error-message .icon {
    flex: 0 0 auto;
    color: inherit;
    font-size: 1.125rem;
    line-height: 24px;
    transform: translateX(-2px);
}

.input > .element-error .error-message-text {
    min-width: 0;
    flex: 1 1 auto;
}

.input > .element-error .error-list {
    list-style: none;
}

.input > .element-error .error-list li {
    margin: 0 0 6px;
    padding: 0;
}

.input > .element-error .error-list li:last-child {
    margin-bottom: 0;
}

.product-form-intro { color: var(--app-muted); font-size: .8rem; margin: 0 0 20px; }
.admin-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--admin-form-section-gap, 24px); align-items: start; }

.product-image-card > p { font-size: .8rem; color: var(--app-muted); line-height: 1.6; }
.product-image-card .generated-product-image { margin: 16px 0; }
.product-image-card .product-thumbnail { width: 160px; height: 160px; max-width: 100%; }
@media (min-width: 1200px) {
    .admin-editor-sidebar {
        position: sticky;
        top: calc(var(--topbar-height) + 24px);
        max-height: calc(100dvh - var(--topbar-height) - 48px);
        overflow-y: auto;
    }
}
@media (max-width: 1199px) {
    .admin-editor-grid { grid-template-columns: minmax(0, 1fr); }
    /* The shared Update heading identifies the action card and its column. */
    .admin-form :is(.admin-form-column, .admin-editor-grid) > :has(.admin-update-heading) { order: 1; }
    .admin-form.admin-editor-grid > .admin-editor-sidebar { order: 1; }
}
@media (max-width: 575px) {
    .admin-editor-grid { gap: var(--admin-form-section-gap, 24px); }
}
.product-measurement { display: block; font-size: .75rem; color: var(--app-muted); margin-top: 4px; }
.admin-contained-layout { container-type: inline-size; }
@media (min-width: 1200px) {
    .admin-preview-modal .modal-dialog.modal-xl { --bs-modal-width: min(1320px, calc(100vw - 64px)); }
}
.admin-preview-modal .admin-detail-table :is(th, td) { font-size: .78rem; }
.admin-preview-navigation { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--app-border); }
.admin-preview-navigation-counter { flex: 1; min-width: 0; color: var(--app-muted); font-size: .8rem; text-align: center; font-variant-numeric: tabular-nums; }
.modal-footer > .admin-preview-navigation { width: 100%; margin: 0; padding: 0; border: 0; }
.admin-contained-layout .admin-detail-layout { grid-template-columns: minmax(0, 1fr) 300px; }
.admin-contained-layout .admin-editor-sidebar { position: sticky; top: 0; max-height: none; overflow: visible; }
@container (max-width: 799px) {
    .admin-contained-layout .admin-detail-layout { grid-template-columns: minmax(0, 1fr); }
    .admin-contained-layout .admin-editor-sidebar { position: static; }
}
.product-image-error { display: block; font-size: .7rem; max-width: 170px; margin-top: 6px; color: var(--app-muted); }

/* Keep visually hidden headings anchored inside their responsive table panel. */
.products-panel .table-responsive { position: relative; margin-top: 20px; border-top: 1px solid #eaecf0; }
.products-toolbar:has(+ .table-responsive) { border-bottom: 0; }


.product-publication-status { font-size: .82rem; color: var(--app-muted); margin-bottom: 20px; }
.product-publication-status strong { color: var(--app-text); }
.admin-form-actions { display: grid; gap: 16px; width: 100%; }
/* Drawer actions share a row; narrow drawers stack the complete button set. */
.drawer-form .offcanvas-footer { container-type: inline-size; flex-wrap: wrap; gap: 16px; }
.drawer-form .offcanvas-footer .admin-form-actions { display: contents; }
.drawer-form .offcanvas-footer .btn { flex: 1 1 0; min-width: 100px; width: auto !important; }
@container (max-width: 359px) {
    .drawer-form .offcanvas-footer:not(.offcanvas-footer--compact) .btn { flex-basis: 100%; }
}
.product-category-list { max-height: 320px; overflow-y: auto; padding: 2px; }
.product-category-list .input { margin: 0 !important; }
.product-category-list .checkbox + .checkbox { margin-top: 12px; }
.product-editor .product-category-list label { align-items: flex-start; overflow-wrap: anywhere; }
.product-status-list { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }


.product-content-card .ql-toolbar.ql-snow { border: 1px solid var(--app-border); border-radius: 6px 6px 0 0; background: #f9fafb; display: flex; flex-wrap: wrap; gap: 4px 0; }
.product-content-card .ql-toolbar.ql-snow[hidden] { display: none; }
.product-content-card .ql-toolbar.ql-snow .ql-formats { margin-right: 10px; }
.product-content-card .ql-container.ql-snow { height: auto; border-color: var(--app-border); border-radius: 0 0 6px 6px; font: inherit; }
.product-content-card .ql-editor { height: auto; min-height: 240px; font-size: .9rem; line-height: 1.65; overflow-wrap: anywhere; }
.product-content-card .ql-editor[aria-invalid="true"] { border: 1px solid var(--bs-danger); }
.product-content-card .ql-snow .ql-tooltip { left: 0 !important; max-width: 100%; white-space: normal; z-index: 2; }
.product-content-card .ql-snow .ql-tooltip input[type=text] { max-width: 100%; }
.description-sections { display: grid; gap: var(--admin-form-section-gap); margin-bottom: var(--admin-form-field-gap); }
.description-sections[hidden] { display: none; }
.description-section { border: 1px solid var(--app-border); border-radius: 6px; min-width: 0; }
.description-section-title { cursor: pointer; overflow-wrap: anywhere; }
.description-section-title::marker { color: var(--app-primary); }
.description-section-title .admin-card-title { display: inline; margin: 0; }
.description-section[open] > .description-section-title { margin-bottom: var(--admin-form-field-gap); }
.description-section-actions { margin-bottom: var(--admin-form-field-gap); }
.description-section-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.description-image-preview { max-width: 100%; max-height: 240px; object-fit: contain; }
.description-section [data-description-remove-image] { display: block; margin-bottom: var(--admin-form-field-gap); }
.description-section [data-description-remove-image][hidden] { display: none; }


/* Shared checkbox presentation; Multiple Select keeps its own compact controls. */
label:has(> input[type="checkbox"]):not(:where(.ms-drop *)),
.admin-form label:has(> input[type="checkbox"]):not(:where(.ms-drop *)) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
input[type="checkbox"]:not(:where(.ms-drop *)) {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--app-primary);
}

/* Shared radios for native and Bootstrap markup; select-widget choices stay compact. */
label:has(> input[type="radio"]):not(:where(.ms-drop *)),
.admin-form label:has(> input[type="radio"]):not(:where(.ms-drop *)) {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
input[type="radio"]:not(:where(.ms-drop *)) {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    padding: 0;
    border: 1px solid #aeb8c5;
    border-radius: 50%;
    background: #fff;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--app-primary);
}
input[type="radio"]:checked:not(:where(.ms-drop *)) {
    border-color: var(--app-primary);
    background: radial-gradient(circle, #fff 0 3px, var(--app-primary) 3.5px);
}
input[type="radio"]:focus-visible:not(:where(.ms-drop *)) {
    outline: 2px solid var(--app-primary) !important;
    outline-offset: 3px;
}
input[type="radio"]:disabled:not(:where(.ms-drop *)) { opacity: .5; cursor: not-allowed; }
input[type="radio"]:is(.is-invalid, [aria-invalid="true"]):not(:where(.ms-drop *)),
.input.has-error input[type="radio"]:not(:where(.ms-drop *)) { border-color: #dc3545; }
@media (forced-colors: active) {
    input[type="radio"]:not(:where(.ms-drop *)) { appearance: auto; }
}

.admin-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-filter-grid .input { margin: 0 !important; min-width: 0; }
.admin-filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.activity-results-heading { padding: 20px 24px; }
.activity-results-heading h2 { font-size: 1rem; margin-bottom: 4px; }

.activity-table td { vertical-align: top; }

.activity-secondary { display: block; color: var(--app-muted); font-size: .75rem; margin-top: 4px; overflow-wrap: anywhere; }
.activity-details { min-width: 0; }
.activity-details summary { color: var(--app-primary); cursor: pointer; white-space: normal; }
.activity-details > div { padding-top: 8px; }
.activity-details pre { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .75rem; }
@media (max-width: 1100px) { .admin-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .admin-filter-grid { grid-template-columns: minmax(0, 1fr); }
    .activity-results-heading { padding: 18px; }
}

/* Shared tables fit their container; smaller panels show labeled records. */
.admin-body .table-responsive, .table-responsive:has(> .admin-table) { min-width: 0; overflow: visible; container-type: inline-size; }
.admin-table { width: 100%; min-width: 0; table-layout: fixed; }
.admin-table :is(th, td) { overflow-wrap: anywhere; white-space: normal; }
.admin-table :is(td > *, th > *) { min-width: 0; max-width: 100%; }
.admin-body .admin-table { --app-table-hover-bg: color-mix(in srgb, var(--app-surface-tint) 40%, var(--app-surface)); }
@media (hover: hover) {
    .admin-body .admin-table > tbody > tr:hover { background: var(--app-table-hover-bg); }
    .admin-body .admin-table > tbody > tr:hover > * { --bs-table-bg: var(--app-table-hover-bg); }
}
.admin-body .admin-table > tbody > tr[data-preview-active] { background: var(--bs-info-bg-subtle); }
.admin-body .admin-table > tbody > tr[data-preview-active] > * { --bs-table-bg: var(--bs-info-bg-subtle); }
.admin-table pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-table .product-thumbnail { max-width: 100%; }

.admin-table-sort { display: none; padding: 16px; border-bottom: 1px solid var(--app-border); }
.admin-table-sort-controls { display: inline-flex; align-items: stretch; gap: 8px; max-width: 100%; }
.admin-table-sort-controls > .dropdown-toggle { min-width: 0; white-space: normal; text-align: left; }
.admin-table-sort-direction { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 40px; padding: 8px; }
.admin-table-sort-menu { max-height: 320px; max-width: calc(100vw - 48px); overflow-y: auto; }
.admin-table-sort-menu .dropdown-item { display: flex; align-items: center; gap: 8px; white-space: normal; }
.admin-table-sort-menu [aria-current="true"] { color: var(--app-primary); font-weight: 650; }

@container (max-width: 559px) {
    .admin-table-sort { display: block; }
    .admin-table { display: block; }
    .admin-table thead { display: none; }
    .admin-table tbody { display: block; }
    .admin-table tbody tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--app-border); }
    .admin-table tbody tr:last-child { border-bottom: 0; }
    .admin-table tbody td { display: grid; grid-template-columns: minmax(0, 100px) minmax(0, 1fr); align-items: start; gap: 4px 12px; width: auto; padding: 8px 16px; border: 0; text-align: left; }
    .admin-table tbody td > * { grid-column: 2; }
    .admin-table tbody td::before { content: attr(data-label); color: var(--app-muted); font-size: .72rem; font-weight: 650; }
    .admin-table .table-actions { justify-content: flex-start; }
}

@container (min-width: 560px) and (max-width: 999px) {
    .admin-table-sort:not(.admin-table-sort--compact) { display: block; }
    .admin-table:not(.admin-table--compact) { display: block; }
    .admin-table:not(.admin-table--compact) thead { display: none; }
    .admin-table:not(.admin-table--compact) tbody { display: block; }
    .admin-table:not(.admin-table--compact) tbody tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--app-border); }
    .admin-table:not(.admin-table--compact) tbody tr:last-child { border-bottom: 0; }
    .admin-table:not(.admin-table--compact) tbody td { display: grid; grid-template-columns: minmax(0, 100px) minmax(0, 1fr); align-items: start; gap: 4px 12px; width: auto; padding: 8px 16px; border: 0; text-align: left; }
    .admin-table:not(.admin-table--compact) tbody td > * { grid-column: 2; }
    .admin-table:not(.admin-table--compact) tbody td::before { content: attr(data-label); color: var(--app-muted); font-size: .72rem; font-weight: 650; }
    .admin-table:not(.admin-table--compact) .table-actions { justify-content: flex-start; }
}

/* Compact selection records keep related information together in narrow panels. */
.admin-selection-list { min-width: 0; container-type: inline-size; }
.admin-selection-row { display: grid; grid-template-columns: 22px minmax(0, 1.5fr) minmax(0, 1.5fr) minmax(0, 1fr) 60px; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--app-border); font-size: .875rem; }
.admin-selection-row > * { min-width: 0; overflow-wrap: anywhere; }
.admin-selection-heading { color: var(--app-muted); font-size: .72rem; font-weight: 650; }
.admin-selection-check { display: flex; align-items: center; }
.admin-selection-detail { display: block; margin-top: 4px; }
.admin-selection-detail, .admin-selection-terms { color: var(--app-muted); font-size: .78rem; line-height: 1.5; }
.admin-selection-amount { text-align: right; font-variant-numeric: tabular-nums; }
.admin-selection-actions-label { text-align: center; }
.admin-selection-actions .table-actions { justify-content: center; }
.admin-selection-list [role="list"] > :last-child { border-bottom: 0; }
@container (max-width: 559px) {
    .admin-selection-row { grid-template-columns: 22px minmax(0, 1fr) auto 28px; gap: 8px 10px; }
    .admin-selection-check { grid-column: 1; grid-row: 1; }
    .admin-selection-identity { grid-column: 2; grid-row: 1; }
    .admin-selection-amount { grid-column: 3; grid-row: 1; }
    .admin-selection-actions { grid-column: 4; grid-row: 1; align-self: start; }
    .admin-selection-actions .table-actions { justify-content: flex-end; }
    .admin-selection-terms { grid-column: 2 / 4; grid-row: 2; }
    .admin-selection-heading .admin-selection-terms { display: none; }
    .admin-selection-actions-label { display: none; }
}

/* Shared date/time picker, matching Cogniveon with Peptaris theme variables. */
/* Related commerce records use compact cards with actions in the top corner. */
/* Form panels already supply an inset; flush list panels need the same card spacing. */
.products-panel > .table-responsive > .admin-table { --admin-record-card-inset: var(--admin-form-panel-padding, 24px); }
@media (max-width: 575px) {
    .products-panel > .table-responsive > .admin-table { --admin-record-card-inset: 0px; }
}
@container (max-width: 999px) {
    .admin-table-sort:has(+ .admin-table--records) { display: block; }
    .admin-table.admin-table--records { display: block; margin-bottom: 0; border: 0; }
    .admin-table.admin-table--records thead { display: none; }
    .admin-table.admin-table--records tbody { display: grid; gap: 16px; margin-inline: var(--admin-record-card-inset, 0px); padding: 0; border: 0; background: var(--app-surface); }
    .admin-table.admin-table--records tbody tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 18px 16px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface); }
    .admin-table.admin-table--records tbody tr:last-child { border-bottom: 1px solid var(--app-border); }
    .admin-table.admin-table--records tbody td { display: block; padding: 0; width: auto; border: 0; }
    .admin-table.admin-table--records tbody td.admin-table-cell--wide { grid-column: 1 / -1; }
    .admin-table.admin-table--records tbody td.admin-table-cell--empty { display: none; }
    .admin-table.admin-table--records tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--app-muted); font-size: .72rem; font-weight: 650; }
    .admin-table.admin-table--records tbody tr:not(:has(> .admin-table-cell--identity)) > td:first-child,
    .admin-table.admin-table--records tbody td.admin-table-cell--identity { grid-column: 1 / -1; order: -1; padding: 0 46px 12px 0; border-bottom: 1px solid var(--app-border); }
    .admin-table.admin-table--records tbody tr:not(:has(> .admin-table-cell--identity)) > td:first-child .entity-edit-link,
    .admin-table.admin-table--records tbody td.admin-table-cell--identity .entity-edit-link { color: var(--app-text); font-size: .9rem; font-weight: 650; }
    .admin-table.admin-table--records tbody tr:not(:has(> .admin-table-cell--identity)) > td:first-child::before,
    .admin-table.admin-table--records tbody td.admin-table-cell--identity::before { display: none; }
    .admin-table.admin-table--records tbody .table-actions-column { position: absolute; top: 14px; right: 16px; width: 36px; }
    .admin-table.admin-table--records tbody .table-actions-column::before { display: none; }
    .admin-table.admin-table--records .table-actions { justify-content: flex-end; }
}

/* Explicit tabular mode keeps small comparison tables in columns at every panel width. */
.admin-table.admin-table--tabular { display: table; }
.admin-table.admin-table--tabular thead { display: table-header-group; }
.admin-table.admin-table--tabular tbody { display: table-row-group; }
.admin-table.admin-table--tabular tbody tr { display: table-row; padding: 0; }
.admin-table.admin-table--tabular tbody td { display: table-cell; padding: var(--bs-table-cell-padding-y, .5rem) var(--bs-table-cell-padding-x, .5rem); border-bottom: 1px solid var(--app-border); }
.admin-table.admin-table--tabular tbody td::before { display: none; }
.admin-table.admin-table--tabular.table-sm :is(th, td) { padding: .25rem; }
.admin-table.admin-table--tabular.products-table:not(.table-sm) :is(th, td) { padding: 14px 16px; }
.admin-table-col--reference { width: calc(7ch + 32px); }
.admin-table-col--quantity { width: calc(6.5ch + 32px); }
@media (max-width: 575px) {
    .admin-table.admin-table--tabular.products-table:not(.table-sm) :is(th, td) { padding-inline: 8px; }
    .admin-table.admin-table--tabular .table-actions-column { width: 48px; }
    .admin-table.admin-table--tabular .admin-table-col--quantity { width: calc(6.5ch + 16px); }
}
.admin-table.admin-table--summary tbody :is(th, td) { border: 1px solid var(--app-border); }
.admin-table.admin-table--summary th { width: 70%; color: var(--app-muted); font-weight: 400; }
.admin-table.admin-table--summary tbody td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.admin-table--summary tbody tr.admin-detail-total > * { background: var(--app-surface-tint); color: var(--app-text); font-weight: 650; }
.admin-table--summary tbody tr.table-warning > * { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); font-weight: 650; }

.admin-selection-list--summary .admin-selection-row { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, .8fr)) 60px; }
.admin-selection-paid, .admin-selection-outstanding { text-align: right; font-variant-numeric: tabular-nums; }
.admin-record-label { display: none; }
@container (max-width: 559px) {
    .admin-selection-list--summary .admin-selection-heading { display: none; }
    .admin-selection-list--summary .admin-selection-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 28px; gap: 10px 12px; }
    .admin-selection-list--summary .admin-selection-identity { grid-column: 1 / 3; grid-row: 1; }
    .admin-selection-list--summary .admin-selection-actions { grid-column: 3; grid-row: 1; align-self: start; }
    .admin-selection-list--summary .admin-selection-actions .table-actions { justify-content: flex-end; }
    .admin-selection-list--summary .admin-selection-amount { grid-column: 1; grid-row: 2; text-align: left; }
    .admin-selection-list--summary .admin-selection-paid { grid-column: 2; grid-row: 2; text-align: left; }
    .admin-selection-list--summary .admin-selection-outstanding { grid-column: 1 / 3; grid-row: 3; text-align: left; }
    .admin-selection-list--summary .admin-record-label { display: block; color: var(--app-muted); font-size: .72rem; }
}

.flatpickr-wrapper {
    display: block;
    width: 100%;
}

.flatpickr-calendar {
    border: 1px solid var(--app-border);
    border-radius: 10px;
    color: var(--app-text);
    font-family: inherit;
    box-shadow: 0 14px 38px rgb(22 48 71 / 18%);
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
span.flatpickr-weekday {
    color: var(--app-muted);
    font-weight: 700;
}

.flatpickr-day {
    color: var(--app-text);
}

.flatpickr-day.today {
    border-color: var(--app-primary);
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    border-color: var(--app-primary-hover);
    background: var(--app-primary-hover);
    color: #ffffff;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    border-color: var(--app-primary-hover);
    background: var(--app-primary-hover);
    color: #ffffff;
}

.flatpickr-time {
    border-top-color: var(--app-border);
}

.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
    background: color-mix(in srgb, var(--app-primary) 10%, var(--app-surface));
}

.flatpickr-calendar { z-index: 1090; }
.flatpickr-calendar.static { position: absolute; }
.flatpickr-calendar .flatpickr-monthDropdown-months { min-height: 0; }
.flatpickr-calendar :is(.numInput, .flatpickr-am-pm) { min-height: 0; box-shadow: none; }

/* Shared read-only form presentation; values remain focusable and selectable. */
.admin-form .form-control[readonly], .admin-form .admin-readonly-value { background-color: var(--app-bg); }
.admin-readonly-value { overflow-wrap: anywhere; }
.admin-readonly-group { min-width: 0; margin: 0 0 var(--admin-form-field-gap); padding: 0; border: 0; }
.admin-readonly-group > legend { float: none; width: auto; }
.admin-readonly-group > .input:last-child { margin-bottom: 0 !important; }

/* Shared read-only detail cards and summaries. */
.admin-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0; }
.admin-form .admin-detail-facts,
.admin-form-panel > .admin-detail-facts:not(:last-child) { margin-bottom: var(--admin-form-field-gap, 16px); }
.admin-detail-facts > div { min-width: 0; }
.admin-detail-fact-wide { grid-column: 1 / -1; }
.admin-detail-facts dt, .admin-detail-subtitle { margin: 0 0 6px; color: var(--app-muted); font-size: .8rem; font-weight: 600; }
.admin-detail-facts dd, .admin-detail-address, .admin-detail-copy { margin: 0; color: var(--app-text); font-size: .875rem; line-height: 1.6; overflow-wrap: anywhere; }
.admin-detail-facts--metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.admin-detail-facts--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-detail-facts--metrics > div { padding: 16px; border-radius: 6px; background: var(--app-bg); }
.admin-detail-facts--metrics dd { font-size: 1.125rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.admin-detail-cards > div { padding: 16px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-bg); }
.admin-detail-message { margin: 0; }
.admin-detail-message > div { min-width: 0; }
.admin-detail-message p { margin: 0; overflow-wrap: anywhere; }
.admin-detail-message--neutral { padding: 16px; border-radius: 8px; background: var(--app-surface-tint); color: var(--app-text); }
.admin-detail-summary { margin: 0; }
.admin-detail-summary + .admin-form-actions { margin-top: var(--admin-form-field-gap, 16px); }
.admin-detail-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 12px; border-bottom: 1px solid var(--app-border); }
.admin-detail-summary dt { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; color: var(--app-muted); font-size: .8rem; font-weight: 400; }
.admin-detail-summary dd { flex: 0 0 auto; margin: 0; text-align: right; white-space: nowrap; font-size: .875rem; font-variant-numeric: tabular-nums; }
.admin-detail-summary > :is(.admin-detail-total, .admin-detail-outstanding) { margin-inline: -12px; padding-inline: 12px; border: 0; }
.admin-detail-summary > :has(+ :is(.admin-detail-total, .admin-detail-outstanding)) { border-bottom: 0; }
.admin-detail-summary > .admin-detail-total { background: var(--app-surface-tint); }
/* Bordered label/value summaries for compact drawers and detail panels. */
.admin-detail-summary--bordered { border: 1px solid var(--app-border); border-radius: 6px; overflow: hidden; }
.admin-detail-summary.admin-detail-summary--bordered > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(80px, auto);
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--app-border);
}
.admin-detail-summary--bordered :is(dt, dd) { padding: 12px 14px; }
.admin-detail-summary--bordered dd { border-left: 1px solid var(--app-border); }
.admin-detail-summary.admin-detail-summary--bordered > div:last-child { border-bottom: 0; }
.admin-detail-facts--metrics > .admin-detail-paid { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.admin-detail-summary > .admin-detail-outstanding,
.admin-detail-facts--metrics > .admin-detail-outstanding { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.admin-detail-summary :is(.admin-detail-total, .admin-detail-outstanding) :is(dt, dd),
.admin-detail-facts--metrics > :is(.admin-detail-paid, .admin-detail-outstanding) :is(dt, dd) { color: inherit; font-weight: 650; }
.admin-detail-table th:first-child { width: 30%; }
.admin-detail-table th:nth-child(2) { width: 18%; }
.admin-detail-table th:nth-child(3) { width: 12%; }
.admin-detail-table :is(th:nth-child(4), th:nth-child(5)) { width: 16%; }
.admin-detail-table th:last-child { width: 8%; }
.admin-detail-table--readonly th:first-child { width: 38%; }
.admin-detail-table--readonly th:last-child { width: 16%; }
@media (max-width: 767.98px) {
    .admin-detail-facts--metrics { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
    .admin-detail-facts { grid-template-columns: 1fr; }
}

/* Shared nested rule editors: groups, levels, product prices and shipping conditions. */
.admin-rule-toolbar { margin-bottom: 0; gap: 20px; }
.admin-rule-toolbar-actions, .admin-form-actions.admin-form-actions--inline { display: flex; align-items: center; gap: 10px; }
.admin-form-actions.admin-form-actions--inline { margin: 0; width: auto; }
.admin-form-actions--inline .btn { width: auto !important; white-space: nowrap; }
.admin-rule-toolbar-actions > .btn { white-space: nowrap; }
.admin-rule-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.admin-rule-summary span { display: block; color: var(--app-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.admin-rule-summary strong { display: block; margin-top: 8px; font-size: 1.6rem; }
.admin-rule-group, .admin-rule-level, .admin-rule-product { min-width: 0; overflow: visible; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-surface); }
.admin-rule-group { padding: 0; }
.admin-rule-header { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.admin-rule-level > .admin-rule-header { background: var(--app-background, #f5f7fb); border-radius: 8px; }
.admin-rule-toggle { flex: 0 0 28px; width: 28px; height: 32px; border: 0; background: transparent; color: var(--app-muted); }
.admin-rule-toggle[aria-expanded=true] .ti { display: inline-block; transform: rotate(180deg); }
.admin-rule-heading { flex: 1; min-width: 0; }
.admin-rule-heading h2, .admin-rule-heading h3 { padding: 0; margin: 0; border: 0; font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.admin-rule-heading p, .admin-rule-product-meta { margin: 5px 0 0; color: var(--app-muted); font-size: .8rem; }
.admin-rule-icons { display: flex; flex-shrink: 0; align-items: center; gap: 6px; }
.admin-rule-icons .btn { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; }
.admin-rule-body { border-top: 1px solid var(--app-border); }
.admin-rule-body[hidden], .admin-rule-price-body[hidden] { display: none; }
.admin-rule-product-header { display: flex; align-items: center; gap: 16px; padding: 16px; }
.admin-rule-product-selection { flex: 1; min-width: 0; }
.admin-rule-product-selection .input { margin-bottom: 0 !important; }
.admin-rule-product-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow-wrap: anywhere; }
.admin-rule-product-meta strong { color: var(--app-text); }
.admin-rule-price-body { border-top: 1px solid var(--app-border); }
@media(max-width:767px) {
    .admin-rule-toolbar, .admin-rule-toolbar-actions { align-items: stretch; flex-direction: column; }
    .admin-rule-toolbar-actions .admin-form-actions--inline, .admin-rule-toolbar-actions .admin-form-actions--inline .btn { width: 100% !important; }
    .admin-rule-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .admin-rule-header { flex-wrap: wrap; gap: 8px; padding: 14px; }
    .admin-rule-header .admin-rule-icons { margin-left: 36px; }
    .admin-rule-product-header { flex-wrap: wrap; padding: 14px; }
    .admin-rule-product-selection { flex-basis: 100%; }
}

/* Shared detail sections and three-control form rows. */
.admin-form-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 575px) {
    .admin-form-row--three { grid-template-columns: 1fr; }
}
.admin-detail-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--app-border); }
.admin-detail-section > summary { color: var(--app-primary); font-size: .875rem; }
.admin-section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.admin-section-heading h2 { display: flex; align-items: center; gap: 10px; margin: 0; }
.admin-section-heading h2 .ti { color: var(--app-primary); }
.admin-section-heading .field-help { margin: 6px 0 0; }

/* Shared labeled quantity tiles, using the storefront summary palette. */
.admin-detail-facts--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-quantity-record { min-width: 0; padding-block: 28px; border-bottom: 1px solid var(--app-border); }
.admin-quantity-record:last-child { border-bottom: 0; }
.admin-quantity-record .admin-detail-subtitle { color: var(--app-text); font-weight: 650; }
.admin-quantity-record .field-help { margin: 6px 0 16px; }
.admin-quantity-record .admin-detail-facts { margin: 0; }
.admin-detail-facts--metrics > .admin-metric--info { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.admin-detail-facts--metrics > .admin-metric--success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.admin-detail-facts--metrics > .admin-metric--warning { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.admin-detail-facts--metrics > .admin-metric--danger { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }
.admin-detail-facts--metrics > .admin-metric--primary { background: var(--app-surface-tint); color: var(--app-primary); }
.admin-detail-facts--metrics > [class^="admin-metric--"] :is(dt, dd) { color: inherit; }
.admin-metric-note { display: block; margin-top: 6px; font-size: .75rem; font-weight: 400; }
@media (max-width: 575px) {
    .admin-detail-facts--three { grid-template-columns: 1fr; }
}

/* Shared spacing between item quantities and supporting details. */
.admin-detail-facts--divided { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--app-border); }
.admin-quantity-record:has(+ .admin-detail-facts--divided) { padding-bottom: 0; border-bottom: 0; }

/* Order correction timelines share spacing in administration and the storefront. */
.order-change-record + .order-change-record { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--app-border); }

/* Shared invoice documents use the same paper layout on screen and in print. */
.invoice-body { background: white; color: var(--app-text); }
.invoice-document { max-width: 1120px; margin: 0 auto; padding: 32px; font-size: .875rem; line-height: 1.55; }
.invoice-document :is(section, header, footer, div) { min-width: 0; }
.invoice-toolbar { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.invoice-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px;
    padding-bottom: 24px; margin-bottom: 28px; border-bottom: 2px solid var(--app-primary); }
.invoice-heading .brand { margin-bottom: 12px; }
.invoice-title { text-align: right; }
.invoice-title h1 { margin: 0 0 8px; font-size: 1.75rem; font-weight: 750; }
.invoice-document p { margin: 0; overflow-wrap: anywhere; }
.invoice-overview { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 48px;
    align-items: start; margin-bottom: 32px; }
.invoice-section-title { margin: 0 0 16px; font-size: 1rem; font-weight: 700; color: var(--app-brand-navy); }
.invoice-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.invoice-facts dt, .invoice-subheading { font-size: .75rem; font-weight: 650; color: var(--app-muted); margin: 0 0 4px; }
.invoice-facts dd { margin: 0; overflow-wrap: anywhere; }
.invoice-addresses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 24px 0; }
.invoice-address { font-style: normal; margin: 0; overflow-wrap: anywhere; }
.invoice-totals { margin: 0; font-variant-numeric: tabular-nums; }
.invoice-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0;
    border-bottom: 1px solid var(--app-border); break-inside: avoid; }
.invoice-totals dt { font-weight: 500; }
.invoice-totals dd { margin: 0; text-align: right; }
.invoice-totals :is(dt, dd) { overflow-wrap: anywhere; }
.invoice-totals .invoice-total, .invoice-totals .invoice-balance { padding: 10px 12px; }
.invoice-total { background: var(--app-surface-tint); }
.invoice-balance { background: var(--bs-warning-bg-subtle); }
.invoice-totals :is(.invoice-total, .invoice-balance) dt { font-weight: 700; }
.invoice-order { margin-bottom: 28px; }
.invoice-order-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    border-bottom: 1px solid var(--app-border); padding-bottom: 10px; margin-bottom: 14px; break-after: avoid; }
.invoice-order-heading .invoice-section-title { margin: 0; }
.invoice-order-heading p, .invoice-note { font-size: .75rem; color: var(--app-muted); }
.invoice-items { width: 100%; table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.invoice-product-column { width: 38%; }
.invoice-sku-column { width: 15%; }
.invoice-quantity-column { width: 13%; }
.invoice-price-column { width: 17%; }
.invoice-items--quantities .invoice-sku-column { width: 12%; }
.invoice-items--quantities .invoice-quantity-column { width: 10%; }
.invoice-reference-column { width: 15%; }
.invoice-items--quantities th.invoice-number { white-space: nowrap; }
.invoice-items :is(th, td) { padding: 10px 8px; vertical-align: top; border-bottom: 1px solid var(--app-border);
    overflow-wrap: anywhere; }
.invoice-items th { background: var(--app-bg); font-size: .75rem; font-weight: 700; }
.invoice-items small { display: block; margin-top: 4px; color: var(--app-muted); }
.invoice-number { text-align: right; }
.invoice-order-totals { max-width: 320px; margin: 16px 0 0 auto; break-inside: avoid; }
.invoice-instructions { border-top: 1px solid var(--app-border); padding-top: 20px; }
.invoice-note { margin-top: 12px !important; }
@media screen and (max-width: 575.98px) {
    .invoice-document { padding: 20px; }
    .invoice-heading { gap: 20px; }
    .invoice-title h1 { font-size: 1.25rem; }
    .invoice-heading .brand { font-size: 1.4rem; }
    .invoice-overview { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .invoice-order-heading { flex-direction: column; gap: 4px; }
    .invoice-items :is(th, td) { padding: 8px 4px; font-size: .75rem; }
}
@media print {
    @page { margin: 12mm; }
    .invoice-document { max-width: none; padding: 0; font-size: 9pt; }
    .invoice-toolbar { display: none; }
    .invoice-heading { gap: 24px; margin-bottom: 20px; padding-bottom: 16px; }
    .invoice-title h1 { font-size: 20pt; }
    .invoice-overview { gap: 24px; margin-bottom: 24px; }
    .invoice-summary, .invoice-addresses { break-inside: avoid; }
    .invoice-items thead { display: table-header-group; }
    .invoice-items tr { break-inside: avoid; }
    .invoice-items :is(th, td) { padding: 7px 6px; }
    .invoice-document { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .invoice-document a { color: inherit; text-decoration: none; }
}

/* Reusable inline record editors use the shared form grid at every screen size. */
.admin-record-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-record-toolbar .admin-card-title { margin-bottom: 4px; }
.admin-record-editor { background-color: var(--app-surface); }
@media (max-width: 575px) {
    .admin-record-toolbar { align-items: stretch; flex-direction: column; }
}
.admin-record-editor-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-bottom: 16px; margin-bottom: var(--admin-form-field-gap, 16px);
    border-bottom: 1px solid var(--app-border);
}
.admin-record-editor-heading > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.admin-record-editor-heading > .btn { flex-shrink: 0; }
.admin-record-editor .admin-form-row { row-gap: var(--admin-form-field-gap, 16px); }
.admin-record-editor .admin-form-row > .input { margin-bottom: 0 !important; }
.admin-choice-stack { display: grid; gap: var(--admin-form-field-gap, 16px); align-content: start; }
.admin-form-row > .admin-choice-stack { align-self: center; }
.admin-form .admin-choice-stack .input { margin: 0 !important; }
.admin-record-editor--new { background-color: #eff8f6; }

/* Shared compact document attachment thumbnail; full documents open only on request. */
.admin-document-thumbnail { display: inline-flex; align-items: center; gap: .75rem; max-width: 100%; color: var(--app-text); text-decoration: none; overflow-wrap: anywhere; }
.admin-document-thumbnail-page { display: grid; place-items: center; flex: 0 0 3rem; width: 3rem; height: 4rem; border: 1px solid var(--app-border); border-radius: .35rem; background: var(--app-surface); color: var(--app-primary); font-size: 1.8rem; }
.admin-document-thumbnail:hover, .admin-document-thumbnail:focus-visible { color: var(--app-primary); text-decoration: underline; }