:root {
    --blue-900: #08152f;
    --blue-800: #173f83;
    --blue-700: #245ed8;
    --blue-600: #2f73f6;
    --blue-100: #edf4ff;
    --gray-900: #071126;
    --gray-700: #47536c;
    --gray-500: #6f7b91;
    --gray-200: #dde5f1;
    --gray-100: #f5f8fd;
    --white: #ffffff;
    --shadow: 0 28px 70px rgba(25, 62, 120, 0.16);
    --shadow-soft: 0 16px 40px rgba(25, 62, 120, 0.1);
    --radius: 22px;
    --app-header-height: 64px;
}

/* Consistent vendor pickers for the standalone sales theme. */
select[data-vendor-selector] + .form-lookup-button,
.vendor-selector-input {
    min-height: 48px;
    padding: 11px 14px;
    border: 1px solid #9b9a6c;
    border-radius: 12px;
    background: #e5e5c6;
    color: #11120f;
    font-weight: 750;
    line-height: 1.35;
    box-shadow: 0 5px 14px rgba(72, 73, 45, .12);
}

select[data-vendor-selector] + .form-lookup-button:hover,
select[data-vendor-selector] + .form-lookup-button:focus-visible,
.vendor-selector-input:focus {
    border-color: #77784f;
    background: #eeeece;
    box-shadow: 0 0 0 3px rgba(119, 120, 79, .18);
    outline: none;
}

/* Sales-site component accents. */
.app-header,
.app-footer,
.breadcrumb-wrap,
.pos-transfer-actions {
    border-color: rgba(92, 94, 62, 0.22);
}

.app-header,
.login-panel,
.content-panel,
.module-card,
.sales-step-card,
.pos-transfer-form,
.pos-transfer-product,
.data-table-wrap {
    background-color: rgba(255, 255, 239, 0.94);
    box-shadow: var(--shadow-soft);
}

.brand__logo,
.module-card__icon,
.management-icon,
.login-button,
.primary-button,
.form-lookup-button,
.pos-transfer-total {
    border-color: #85875f;
    background: #85875f;
    color: #ffffef;
}

.brand__name span,
.section-kicker,
.module-card__arrow,
.login-field i,
.login-form a,
.internal-page-header__back,
.pos-transfer-search i:last-child {
    color: #707247;
}

/* Final SPW Sales surface palette: no white or blue page backgrounds. */
html,
body,
.app-shell,
.app-main,
.dashboard {
    background: #e5e5c6 !important;
}

.app-header,
.app-header--home,
.app-header--internal {
    border-color: #85845b !important;
    background: #aaa977 !important;
    box-shadow: 0 4px 12px rgba(48, 48, 31, .32) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.internal-page-header__title,
.internal-page-header__back,
.app-header .brand__wordmark,
.app-header .brand__system,
.app-header .header-icon-button {
    color: #11120f !important;
}

.breadcrumb-wrap,
.breadcrumb,
.app-footer {
    background: #d4d3a6 !important;
}

.dashboard,
.module-card,
.content-panel,
.login-panel,
.sales-step-card,
.pos-transfer-form,
.pos-transfer-product,
.data-table-wrap,
.form-panel,
.management-panel,
.pos-sales-form,
.pos-sales-field__body,
.pos-sale-products,
.pos-sale-product,
.pos-sale-product__fields,
.pos-sales-live-receipt,
.pos-report-card,
.pos-report-summary > div {
    border-color: #b5b482 !important;
    background: #d9d8ad !important;
    background-image: none !important;
}

.module-card {
    background: #eeeed0 !important;
}

input,
select,
textarea,
.login-field,
.pos-transfer-search,
.pos-transfer-money,
.pos-transfer-field .form-lookup-button {
    border-color: #b5b482 !important;
    background: #e5e5c6 !important;
    color: #11120f !important;
}

/* Dedicated SPW Sales login screen. */
.spwsales-login,
.spwsales-login .login-shell {
    background: #e5e5c6 !important;
}

.spwsales-login .login-shell {
    position: relative;
    isolation: isolate;
}

.spwsales-login .login-shell::before {
    content: none;
}

.spwsales-login .login-panel {
    width: min(460px, 100%);
    border: 1px solid #aaa977 !important;
    background: #d9d8ad !important;
    box-shadow: 0 24px 60px rgba(48, 48, 31, .25) !important;
}

.spwsales-login .login-brand .brand__logo {
    width: 58px;
    height: 58px;
    border-color: #85845b !important;
    background: #aaa977 !important;
    color: #11120f !important;
    font-size: 1.35rem;
}

.spwsales-login .brand__company,
.spwsales-login .login-brand h1,
.spwsales-login .login-brand p,
.spwsales-login .login-form label,
.spwsales-login .login-remember,
.spwsales-login .login-form__help .login-remember {
    color: #11120f !important;
}

.spwsales-login .brand__company {
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.spwsales-login .login-field {
    border-color: #aaa977 !important;
    background: #e5e5c6 !important;
}

.spwsales-login .login-button {
    border-color: #85845b !important;
    background: #aaa977 !important;
    color: #11120f !important;
    box-shadow: 0 10px 22px rgba(48, 48, 31, .2);
}

.spwsales-login .login-button:hover,
.spwsales-login .login-button:focus-visible {
    background: #9a996a !important;
    box-shadow: 0 14px 28px rgba(48, 48, 31, .27);
}

.spwsales-login .login-form__help a,
.spwsales-login .login-password-toggle,
.spwsales-login .login-field i {
    color: #62613f !important;
}

/* Exact dominant colors sampled from the supplied reference image. */
body,
.app-main,
.dashboard {
    background: #e5e5c6 !important;
}

.app-header,
.breadcrumb-wrap,
.app-footer {
    background: #e5e5c6 !important;
}

.app-header {
    box-shadow: 0 3px 9px rgba(17, 18, 15, .24) !important;
}

.module-card,
.content-panel,
.login-panel,
.sales-step-card,
.pos-transfer-form,
.pos-transfer-product,
.data-table-wrap,
.form-panel,
.management-panel {
    border-color: #c5c498 !important;
    background: #f5f5dc !important;
}

.module-card__icon,
.management-icon,
.brand__logo,
.login-button,
.primary-button,
.form-lookup-button,
.pos-transfer-total {
    border-color: #9b9a6c !important;
    background: #c5c498 !important;
    color: #11120f !important;
}

.module-card:hover,
.login-button:hover,
.primary-button:hover,
.form-lookup-button:hover {
    border-color: #8d8c61 !important;
    background: #b5b482 !important;
}

input:focus,
select:focus,
textarea:focus,
.login-field:focus-within,
.pos-transfer-search:focus-within,
.pos-transfer-money:focus-within {
    border-color: #85875f !important;
    box-shadow: 0 0 0 4px rgba(133, 135, 95, 0.16) !important;
}

/* SPW Sales palette, sampled from the supplied Autoplus reference. */
:root {
    --blue-900: #24251f;
    --blue-800: #555744;
    --blue-700: #85875f;
    --blue-600: #9b9d6c;
    --blue-100: #eeeed5;
    --gray-900: #11120f;
    --gray-700: #515243;
    --gray-500: #747560;
    --gray-200: #d3d3ad;
    --gray-100: #e8e8c9;
    --white: #ffffef;
    --shadow: 0 28px 70px rgba(72, 73, 48, 0.18);
    --shadow-soft: 0 16px 40px rgba(72, 73, 48, 0.13);
}

body {
    background:
        linear-gradient(180deg, rgba(239, 239, 211, 0.96), rgba(229, 229, 194, 0.82)),
        radial-gradient(circle at 15% 15%, rgba(156, 158, 109, 0.18), transparent 31rem),
        radial-gradient(circle at 85% 85%, rgba(92, 94, 62, 0.12), transparent 34rem),
        #e8e8c9;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100dvh;
    max-width: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--gray-900);
    background:
        linear-gradient(180deg, rgba(245, 248, 253, 0.94), rgba(232, 241, 255, 0.62)),
        radial-gradient(circle at 15% 15%, rgba(47, 115, 246, 0.1), transparent 31rem),
        radial-gradient(circle at 85% 85%, rgba(17, 63, 131, 0.08), transparent 34rem),
        var(--gray-100);
}

a {
    color: inherit;
}

.login-body {
    overflow-y: auto;
}

.login-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 28px;
}

.login-panel {
    width: min(440px, 100%);
    padding: 34px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow);
}

.login-brand {
    display: grid;
    justify-items: center;
    gap: 8px;
    margin-bottom: 26px;
    text-align: center;
}

.login-brand h1 {
    margin: 4px 0 0;
    color: var(--gray-900);
    font-size: 1.6rem;
    line-height: 1.15;
}

.login-brand p {
    margin: 0;
    color: var(--gray-700);
    line-height: 1.5;
}

.login-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid rgba(170, 80, 0, 0.18);
    border-radius: 14px;
    color: #8a4a00;
    background: #fff7e8;
    font-weight: 650;
}

.login-form {
    display: grid;
    gap: 11px;
}

.login-form label {
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 750;
}

.login-form__help,
.login-form__footer {
    color: var(--gray-700);
    font-size: 0.9rem;
    text-align: right;
}
.login-form__help { display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left; }
.login-form__help .login-remember { display:inline-flex;align-items:center;gap:7px;margin:0;color:#53647c;font-size:.78rem;font-weight:650;cursor:pointer; }
.login-form__help .login-remember input { width:16px;height:16px;margin:0;accent-color:#2867d9;cursor:pointer; }

.login-form__footer {
    margin: 20px 0 0;
    text-align: center;
}

.login-form__help a,
.login-form__footer a {
    color: var(--blue-700);
    font-weight: 750;
    text-decoration: none;
}

.login-form__help a:hover,
.login-form__footer a:hover {
    text-decoration: underline;
}

.login-alert--success {
    border-color: rgba(28, 130, 76, 0.2);
    color: #176b3d;
    background: #eefbf3;
}

.login-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 14px;
    background: var(--white);
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.login-field:focus-within {
    border-color: rgba(36, 94, 216, 0.55);
    box-shadow: 0 0 0 4px rgba(36, 94, 216, 0.1);
}

.login-field i {
    color: var(--blue-700);
}

.login-field input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--gray-900);
    background: transparent;
    font: inherit;
}

.login-password-toggle {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    color: var(--blue-700);
    background: transparent;
    cursor: pointer;
}

.login-password-toggle:hover,
.login-password-toggle:focus-visible {
    background: rgba(36, 94, 216, 0.1);
    outline: none;
}

.login-button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    color: var(--white);
    background: linear-gradient(145deg, var(--blue-800), var(--blue-600));
    box-shadow: 0 10px 22px rgba(36, 94, 216, 0.2);
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 800;
    transition: transform 180ms ease, box-shadow 180ms ease;
}

.login-button:hover,
.login-button:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(36, 94, 216, 0.24);
    outline: none;
}

.app-shell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding-top: var(--app-header-height);
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 90;
    flex: 0 0 auto;
    align-self: stretch;
    min-height: var(--app-header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 clamp(12px, 2vw, 24px);
    border-top: 1px solid rgba(15, 47, 86, 0.42);
    border-bottom: 1px solid rgba(90, 114, 151, 0.1);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 22px rgba(17, 45, 91, 0.08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: left;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    margin-left: auto;
}

.header-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    color: #44516a;
    background: transparent;
    font-size: 1.12rem;
    text-decoration: none;
    transition: color 160ms ease, background 160ms ease, transform 160ms ease;
}

.header-icon-button:hover,
.header-icon-button:focus-visible {
    color: var(--blue-800);
    background: rgba(36, 94, 216, 0.06);
    outline: none;
    transform: translateY(-1px);
}

.header-icon-button--logout {
    position: relative;
    margin-left: 4px;
}

.header-icon-button--logout::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: rgba(90, 114, 151, 0.18);
}

.user-avatar {
    width: 26px;
    height: 26px;
    display: block;
    border: 1px solid rgba(36, 94, 216, 0.16);
    border-radius: 999px;
    object-fit: cover;
    background: var(--blue-100);
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}

.brand__logo {
    position: relative;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 2px solid #113763;
    border-radius: 999px;
    color: #113763;
    background: var(--white);
    box-shadow: none;
    font-size: 1.18rem;
}

.brand__logo i {
    color: inherit;
}

.brand__wordmark {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    color: #10213c;
    line-height: 1.1;
    white-space: nowrap;
}

.brand__name {
    display: inline-flex;
    align-items: baseline;
    font-size: clamp(1.22rem, 1.7vw, 1.5rem);
    line-height: 1;
}

.brand__name strong,
.brand__name span {
    font-weight: 850;
}

.brand__name span {
    color: #f08a00;
}

.brand__system {
    margin-top: 3px;
    color: var(--gray-700);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: uppercase;
}

.breadcrumb-wrap {
    flex: 0 0 auto;
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
}

.breadcrumb {
    width: fit-content;
    max-width: 100%;
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 14px;
    border: 1px solid rgba(22, 77, 134, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--gray-500);
    font-size: 0.94rem;
}

.breadcrumb a {
    color: var(--blue-700);
    font-weight: 700;
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--blue-900);
}

.breadcrumb__separator {
    color: var(--gray-500);
}

.app-main {
    flex: 1;
    min-height: 0;
    display: grid;
    align-content: start;
    width: min(1220px, calc(100% - 32px));
    margin: 0 auto;
    padding: 32px 0 22px;
    overflow: visible;
    overscroll-behavior-y: auto;
    scroll-padding-top: 32px;
    -webkit-overflow-scrolling: touch;
}

.app-main::-webkit-scrollbar {
    width: 10px;
}

.app-main::-webkit-scrollbar-track {
    background: transparent;
}

.app-main::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: rgba(111, 123, 145, 0.42);
    background-clip: content-box;
}

.app-main::-webkit-scrollbar-thumb:hover {
    background: rgba(36, 94, 216, 0.55);
    background-clip: content-box;
}

.dashboard {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(22px, 3vw, 32px);
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.dashboard__intro {
    max-width: 680px;
    margin: 0 auto 18px;
    text-align: center;
    color: var(--gray-700);
    font-size: 0.94rem;
    line-height: 1.5;
}

.vendor-personnel-welcome { display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:20px;border:1px solid #cfe0f7;border-radius:18px;background:linear-gradient(135deg,#eef6ff 0%,#fff 72%);box-shadow:0 10px 28px rgba(27,72,135,.08); }
.vendor-personnel-welcome__icon { width:52px;height:52px;display:grid;place-items:center;flex:0 0 52px;border-radius:15px;color:#fff;background:#2563d9;font-size:1.25rem; }
.vendor-personnel-welcome small { color:#5d7190;font-size:.65rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase; }
.vendor-personnel-welcome h1 { margin:3px 0 2px;color:#15396d;font-size:1.3rem; }
.vendor-personnel-welcome p { margin:0;color:#455c7b;font-size:.88rem;font-weight:700; }
@media (max-width:640px) { .vendor-personnel-welcome { align-items:flex-start;padding:15px; }.vendor-personnel-welcome__icon { width:44px;height:44px;flex-basis:44px;border-radius:12px; }.vendor-personnel-welcome h1 { font-size:1.08rem; } }

.tile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.tile-grid--compact {
    max-width: none;
    margin: 0 auto;
    grid-template-columns: 1fr;
}

.tile-grid--three {
    max-width: none;
    margin: 0 auto;
    grid-template-columns: 1fr;
}

.vendor-personnel-menu-wrap { max-width:1080px;margin:0 auto; }
.vendor-personnel-menu-wrap .tile-grid--three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.vendor-personnel-menu-wrap .module-card {
    min-height:72px;
    gap:12px;
    padding:10px 14px;
    border-radius:14px;
}
.vendor-personnel-menu-wrap .module-card__icon {
    width:46px;
    height:46px;
    font-size:1.16rem;
}
.vendor-personnel-menu-wrap .module-card h2 {
    margin-bottom:3px;
    font-size:1rem;
    line-height:1.15;
}
.vendor-personnel-menu-wrap .module-card p {
    font-size:.8rem;
    line-height:1.3;
}
.vendor-personnel-menu-wrap .module-card__arrow {
    width:28px;
    height:28px;
    font-size:.9rem;
}
body .management-panel .secondary-button[href*="vendor-personnel.php"] {
    width:auto;
    min-width:0;
    min-height:34px;
    gap:6px;
    padding:0 11px;
    border-color:#c9d7eb;
    border-radius:9px;
    color:#2458a6;
    background:#f7faff;
    box-shadow:none;
    font-size:.78rem;
    white-space:nowrap;
    transition:background-color 160ms ease,border-color 160ms ease,color 160ms ease,transform 160ms ease;
}
body .management-panel .secondary-button[href*="vendor-personnel.php"]:hover,
body .management-panel .secondary-button[href*="vendor-personnel.php"]:focus-visible {
    border-color:#90afe0;
    color:#17478f;
    background:#edf4ff;
    transform:translateX(-2px);
    outline:none;
}
body .management-panel .secondary-button[href*="vendor-personnel.php"] i {
    font-size:.7rem;
}
.vendor-personnel-access {
    min-width:0;
}
.vendor-personnel-access .standalone-promo-choice {
    margin:0;
}
.vendor-personnel-access > p {
    margin:6px 2px 0;
    color:var(--gray-600);
    font-size:.76rem;
    line-height:1.35;
}
@media (max-width:900px) { .vendor-personnel-menu-wrap { max-width:680px; }.vendor-personnel-menu-wrap .tile-grid--three { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) { .vendor-personnel-menu-wrap .tile-grid--three { grid-template-columns:1fr; } }

.menu-group-grid,
.permission-groups {
    display: grid;
    gap: 8px;
}

.menu-group-grid { gap: 11px; }

.menu-group-card,
.permission-group {
    overflow: hidden;
    border: 1px solid rgba(22, 77, 134, 0.14);
    border-radius: 12px;
    background: #fff;
}

.menu-group-card__summary {
    min-height: 62px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
}

.menu-group-card__summary::-webkit-details-marker { display: none; }
.menu-group-card__icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(145deg, #164f9f, #2f73f6);
}
.menu-group-card__content { min-width: 0; display: grid; gap: 3px; }
.menu-group-card__content strong { color: var(--gray-900); font-size: 0.94rem; font-weight: 650; }
.menu-group-card__content small { color: var(--gray-600); font-size: 0.8rem; line-height: 1.25; }
.menu-group-card__count { min-width: 25px; padding: 3px 7px; border-radius: 999px; color: #174d91; background: #edf4ff; text-align: center; font-size: 0.82rem; font-weight: 700; }
.menu-group-card__chevron { color: #55708f; transition: transform 180ms ease; }
.menu-group-card[open] .menu-group-card__chevron { transform: rotate(180deg); }
.menu-group-card__items {
    display: grid;
    gap: 5px;
    max-height: min(360px, 48vh);
    padding: 0 10px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    border-top: 1px solid #edf1f7;
}
.menu-group-card__items::-webkit-scrollbar { width: 7px; }
.menu-group-card__items::-webkit-scrollbar-track { background: transparent; }
.menu-group-card__items::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(70, 99, 138, 0.42); background-clip: content-box; }
.menu-group-link { display: grid; grid-template-columns: 32px minmax(0,1fr) 18px; align-items: center; gap: 8px; min-height: 52px; padding: 7px 6px; color: var(--gray-900); text-decoration: none; border: 1px solid #edf1f7; border-radius: 9px; }
.menu-group-link:last-child { border-bottom: 1px solid #edf1f7; }
.menu-group-link > span:first-child { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #245ed8; background: #edf4ff; font-size: 0.82rem; }
.menu-group-link > span:nth-child(2) { min-width: 0; display: grid; gap: 1px; }
.menu-group-link strong { font-size: 0.88rem; line-height: 1.15; font-weight: 650; }
.menu-group-link small { color: var(--gray-600); font-size: 0.74rem; line-height: 1.2; }
.menu-group-link > i { color: #5d7593; font-size: 0.82rem; justify-self: center; }

.permission-group__heading { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f5f8fd; cursor: pointer; }
.permission-group__heading input { width: 19px; height: 19px; }
.permission-group__heading span { display: grid; gap: 2px; }
.permission-group__heading small { color: var(--gray-600); }
.permission-group .permission-list { padding: 8px; }

.module-card {
    position: relative;
    min-height: 88px;
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    justify-content: flex-start;
    padding: 14px 20px 14px 16px;
    overflow: hidden;
    border: 1px solid rgba(22, 77, 134, 0.1);
    border-radius: 16px;
    color: var(--gray-900);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 24px rgba(25, 62, 120, 0.06);
    text-decoration: none;
    transform: translateY(0);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background-color 220ms ease;
}

.module-card.is-ready {
    animation: tileIn 420ms ease both;
}

.module-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(47, 115, 246, 0.08), transparent 62%);
    opacity: 0;
    transition: opacity 220ms ease;
}

@keyframes tileIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.module-card:hover,
.module-card:focus-visible {
    border-color: rgba(36, 120, 198, 0.34);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px rgba(25, 62, 120, 0.13);
    transform: translateY(-3px) scale(1.005);
    outline: none;
}
.module-card.is-disabled {
    cursor: not-allowed;
    opacity: 0.62;
    filter: grayscale(0.35);
}
.module-card.is-disabled:hover { transform: none; box-shadow: none; }

.module-card:hover::before,
.module-card:focus-visible::before {
    opacity: 1;
}

.module-card__icon,
.module-card__content,
.module-card__arrow {
    position: relative;
    z-index: 1;
}

.module-card__icon {
    flex: 0 0 auto;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--blue-700);
    background: linear-gradient(145deg, #edf4ff, #dceaff);
    box-shadow: inset 0 0 0 1px rgba(47, 115, 246, 0.08);
    font-size: 1.48rem;
}

.module-card:nth-child(2) .module-card__icon {
    color: #10a66e;
    background: linear-gradient(145deg, #e9fff5, #d4f7e7);
}

.module-card:nth-child(3) .module-card__icon {
    color: #6545cf;
    background: linear-gradient(145deg, #f2edff, #e6ddff);
}

.module-card:nth-child(4) .module-card__icon {
    color: #c68a00;
    background: linear-gradient(145deg, #fff7df, #ffedba);
}

.module-card:nth-child(5) .module-card__icon {
    color: #0f7ea7;
    background: linear-gradient(145deg, #e8faff, #d5f1fb);
}

.module-card__content {
    flex: 1;
    margin-top: 0;
}

.module-card h2 {
    margin: 0 0 5px;
    color: var(--blue-900);
    font-size: 1.14rem;
    line-height: 1.2;
}

.module-card p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.92rem;
    line-height: 1.42;
}

.module-card__arrow {
    flex: 0 0 auto;
    align-self: center;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    margin-top: 0;
    border-radius: 999px;
    color: var(--gray-900);
    background: transparent;
    font-size: 1rem;
    transition: transform 220ms ease, background-color 220ms ease, color 220ms ease;
}

.module-card:hover .module-card__arrow,
.module-card:focus-visible .module-card__arrow {
    color: var(--white);
    background: var(--blue-700);
    transform: translateX(4px);
}

.content-panel {
    max-width: 820px;
    margin: 0 auto;
    padding: 42px;
    border: 1px solid rgba(22, 77, 134, 0.1);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.management-panel {
    width: 100%;
    min-width: 0;
    max-width: 1040px;
    margin: 0 auto 12px;
    padding: 18px 20px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-soft);
}

.vin-search-panel {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

.vin-search-hero {
    position: relative;
    padding: 18px 20px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 14px;
    color: var(--blue-900);
    background: var(--white);
    box-shadow: var(--shadow-soft);
    text-align: center;
}

.vin-search-hero::after {
    content: none;
}

.vin-search-kicker {
    color: var(--blue-600);
}

.vin-search-hero h1 {
    position: relative;
    z-index: 1;
    margin: 3px 0 0;
    font-size: clamp(1.35rem, 2.5vw, 1.7rem);
    letter-spacing: -0.025em;
}

.vin-search-hero p {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 5px auto 0;
    color: var(--gray-700);
    font-size: 0.82rem;
    line-height: 1.42;
}

.vin-search-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    width: min(100%, 500px);
    margin: 14px auto 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    box-shadow: none;
    text-align: left;
}

.vin-search-label {
    grid-column: 1 / -1;
    margin-bottom: 6px;
    color: var(--blue-900);
    font-size: 0.78rem;
    font-weight: 850;
}

.vin-search-label span {
    color: var(--blue-600);
    font-weight: 750;
}

.vin-search-form input {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(90, 114, 151, 0.2);
    border-right: 0;
    border-radius: 9px 0 0 9px;
    outline: 0;
    color: var(--gray-900);
    background: var(--white);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 750;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.vin-search-form input::placeholder {
    color: #94a3b8;
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.025em;
    opacity: 1;
}

.vin-search-form:focus-within {
    outline: 3px solid rgba(36, 94, 216, 0.16);
    outline-offset: 2px;
}

.vin-search-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 112px;
    min-height: 42px;
    padding: 8px 14px;
    border: 0;
    border-radius: 0 9px 9px 0;
    color: var(--white);
    background: var(--blue-600);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    cursor: pointer;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.vin-search-form button:hover,
.vin-search-form button:focus-visible {
    background: var(--blue-700);
    box-shadow: 0 8px 18px rgba(36, 94, 216, 0.24);
    transform: translateY(-1px);
}

.vin-search-message {
    margin-top: 14px;
}

.vin-image-placeholder {
    display: grid;
    place-items: center;
    min-height: 230px;
    color: var(--blue-300);
    background: linear-gradient(145deg, #eff5ff, #f8fafc);
}

.vin-image-placeholder > i {
    font-size: clamp(4rem, 10vw, 7rem);
    opacity: 0.55;
}

.vin-alert {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 13px 14px;
    border: 1px solid;
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(25, 62, 120, 0.06);
}

.vin-alert__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
}

.vin-alert strong {
    display: block;
    margin: 1px 0 3px;
    font-size: 0.88rem;
}

.vin-alert p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.vin-alert small {
    display: block;
    margin-top: 5px;
    font-size: 0.7rem;
    line-height: 1.4;
}

.vin-alert--error {
    border-color: #f0c3c3;
    color: #7d2525;
    background: #fff7f7;
}

.vin-alert--error .vin-alert__icon {
    color: #a83232;
    background: #fde4e4;
}

.vin-alert--partial {
    border-color: #d8c987;
    color: #675410;
    background: #fffbeb;
}

.vin-alert--partial .vin-alert__icon {
    color: #806713;
    background: #f7edbd;
}

.vin-alert--partial small {
    color: #74652d;
}

.vin-result {
    margin-top: 18px;
}

.vin-result-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.vin-result-heading h2 {
    margin: 3px 0 0;
    color: var(--blue-900);
    font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.vin-result-chip {
    padding: 8px 11px;
    border-radius: 9px;
    color: var(--blue-800);
    background: #dbeafe;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    font-weight: 850;
}

.vin-result-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.vin-result-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.5fr);
    gap: 24px;
    align-items: start;
}

.vin-vehicle-card,
.vin-details-card {
    overflow: hidden;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 16px;
    background: var(--white);
    box-shadow: var(--shadow-soft);
}

.vin-vehicle-card {
    align-self: start;
}

.vin-image-wrap {
    position: relative;
    height: 260px;
    background: linear-gradient(145deg, #dbeafe, #f8fafc);
}

.vin-image-wrap img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vin-image-slider,
.vin-image-slides,
.vin-image-slide {
    width: 100%;
    height: 100%;
}

.vin-image-slider {
    position: relative;
    overflow: hidden;
}

.vin-image-slide {
    display: none;
    margin: 0;
}

.vin-image-slide.is-active {
    display: block;
}

.vin-slider-button {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    color: #fff;
    background: rgba(15, 32, 66, 0.76);
    box-shadow: 0 5px 14px rgba(15, 32, 66, 0.24);
    cursor: pointer;
    transform: translateY(-50%);
}

.vin-slider-button:hover,
.vin-slider-button:focus-visible {
    background: var(--blue-700);
}

.vin-slider-button--previous {
    left: 12px;
}

.vin-slider-button--next {
    right: 12px;
}

.vin-image-counter {
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: 12px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(15, 32, 66, 0.78);
    font-size: 0.72rem;
    font-weight: 800;
}

.vin-year-badge {
    position: absolute;
    z-index: 1;
    top: 13px;
    left: 13px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--white);
    background: rgba(15, 23, 42, 0.88);
    font-size: 0.75rem;
    font-weight: 850;
}

.vin-vehicle-summary {
    padding: 20px;
}

.vin-vehicle-summary > strong {
    display: block;
    color: var(--blue-900);
    font-size: 1.02rem;
    line-height: 1.45;
}

.vin-quick-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.vin-quick-stats span,
.vin-detail-item {
    padding: 14px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 11px;
    background: #f8fafc;
    overflow-wrap: anywhere;
}

.vin-quick-stats small,
.vin-detail-item span {
    display: block;
    margin-bottom: 4px;
    color: var(--gray-600);
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.vin-quick-stats span {
    color: var(--gray-900);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.vin-details-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 22px;
}

.vin-detail-item strong {
    color: var(--gray-900);
    line-height: 1.5;
}

.vin-detail-item--wide {
    grid-column: 1 / -1;
}

.vin-history-scroll-tools {
    display: none;
}

@media (max-width: 820px) {
    .vin-result-grid {
        grid-template-columns: 1fr;
    }

    .vin-image-wrap {
        height: 320px;
    }
}

@media (max-width: 620px) {
    .vin-search-panel {
        max-width: none;
    }

    .vin-search-hero {
        width: 100%;
        min-width: 0;
        padding: 14px 12px;
        border-radius: 12px;
        overflow: hidden;
        text-align: left;
    }

    .vin-search-hero h1 {
        margin-top: 2px;
        font-size: 1.42rem;
    }

    .vin-search-hero p {
        width: 100%;
        max-width: 100%;
        margin: 4px 0 0;
        font-size: 0.78rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .vin-search-form {
        width: 100%;
        min-width: 0;
        gap: 6px;
        margin-top: 10px;
        padding: 0;
    }

    .vin-search-form,
    .vin-details-card {
        grid-template-columns: 1fr;
    }

    .vin-search-form button {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        border-radius: 9px;
        font-size: 0.82rem;
    }

    .vin-search-form input {
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding-inline: 10px;
        border-right: 1px solid rgba(90, 114, 151, 0.2);
        border-radius: 9px;
        font-size: 0.86rem;
        letter-spacing: 0.025em;
    }

    .vin-search-label {
        margin-bottom: 1px;
        font-size: 0.72rem;
    }

    .vin-search-message {
        margin-top: 10px;
    }

    .vin-alert {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
        padding: 10px;
        border-radius: 10px;
    }

    .vin-alert__icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: 0.82rem;
    }

    .vin-alert strong {
        font-size: 0.8rem;
    }

    .vin-alert p {
        font-size: 0.73rem;
        line-height: 1.4;
    }

    .vin-alert small {
        font-size: 0.66rem;
    }

    .vin-result {
        margin-top: 14px;
    }

    .vin-result-heading {
        gap: 8px;
        margin-bottom: 9px;
        align-items: flex-start;
        flex-direction: column;
    }

    .vin-result-heading h2 {
        font-size: 1.22rem;
        overflow-wrap: anywhere;
    }

    .vin-result-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        gap: 6px;
    }

    .vin-result-chip {
        display: flex;
        min-width: 0;
        align-items: center;
        padding: 7px 8px;
        overflow-wrap: anywhere;
        font-size: 0.72rem;
    }

    .vin-result-actions .secondary-button {
        min-height: 34px;
        padding: 6px 9px;
        white-space: nowrap;
    }

    .vin-detail-item--wide {
        grid-column: auto;
    }

    .vin-image-wrap {
        height: clamp(190px, 58vw, 235px);
    }

    .vin-vehicle-card,
    .vin-details-card {
        border-radius: 12px;
    }

    .vin-vehicle-summary {
        padding: 15px;
    }

    .vin-quick-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        margin-top: 12px;
    }

    .vin-quick-stats span {
        padding: 10px 7px;
        font-size: 0.7rem;
        text-align: center;
    }

    .vin-quick-stats small {
        font-size: 0.56rem;
        letter-spacing: 0.04em;
    }

    .vin-details-card {
        gap: 10px;
        padding: 13px;
    }

    .vin-detail-item {
        padding: 11px;
    }

    .vin-detail-item strong {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .vin-history-panel {
        margin-top: 14px;
        padding: 12px;
        border-radius: 12px;
    }

    .vin-history-panel .management-heading {
        margin-bottom: 8px;
    }

    .vin-history-panel .management-heading h2 {
        font-size: 1.05rem;
    }

    .vin-history-panel .management-heading p {
        font-size: 0.72rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .vin-history-scroll-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
        color: var(--gray-600);
        font-size: 0.66rem;
        font-weight: 700;
    }

    .vin-history-scroll-tools > span:first-child {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .vin-history-scroll-buttons {
        display: inline-flex;
        gap: 4px;
    }

    .vin-history-scroll-buttons button {
        display: inline-grid;
        width: 30px;
        height: 28px;
        padding: 0;
        place-items: center;
        border: 1px solid #c8d7ed;
        border-radius: 7px;
        color: var(--blue-800);
        background: #f5f8ff;
        cursor: pointer;
    }

    .vin-history-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-inline: -4px;
        padding: 0 4px 5px;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-inline: contain;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .vin-history-table {
        width: 100%;
        min-width: 530px;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid rgba(90, 114, 151, 0.16);
        border-radius: 9px;
        overflow: hidden;
        background: #fff;
    }

    .vin-history-table thead {
        display: table-header-group;
        background: #eef4ff;
    }

    .vin-history-table th {
        padding: 8px 9px;
        border-bottom: 1px solid #dbe5f2;
        color: var(--blue-800);
        font-size: 0.62rem;
        font-weight: 850;
        letter-spacing: 0.045em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .vin-history-table td {
        display: table-cell;
        width: auto;
        padding: 8px 9px;
        border: 0;
        border-bottom: 1px solid #edf1f6;
        color: var(--gray-800);
        font-size: 0.7rem;
        line-height: 1.25;
        vertical-align: middle;
    }

    .vin-history-table tbody tr:nth-child(even) {
        background: #f9fbfe;
    }

    .vin-history-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .vin-history-table td:first-child strong {
        color: var(--blue-900);
        font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
        font-size: 0.62rem;
        letter-spacing: 0.015em;
        white-space: nowrap;
    }

    .vin-history-table th:nth-child(1),
    .vin-history-table td:nth-child(1) {
        width: 132px;
    }

    .vin-history-table th:nth-child(2),
    .vin-history-table td:nth-child(2) {
        min-width: 135px;
    }

    .vin-history-table th:nth-child(3),
    .vin-history-table td:nth-child(3) {
        width: 54px;
        text-align: center;
        white-space: nowrap;
    }

    .vin-history-table th:nth-child(4),
    .vin-history-table td:nth-child(4) {
        width: 78px;
        white-space: nowrap;
    }

    .vin-history-table th:last-child,
    .vin-history-table td:last-child {
        width: 58px;
        text-align: center;
    }

    .vin-history-table td:last-child .secondary-button {
        width: auto;
        min-height: 30px;
        padding: 5px 10px;
        border-radius: 7px;
        font-size: 0.66rem;
    }

    .vin-history-table td.empty-state {
        display: table-cell;
        padding: 12px;
        text-align: center;
    }
}

.management-panel--table {
    margin-bottom: 0;
}

.management-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.management-heading--compact {
    margin-bottom: 10px;
}

.management-heading h1,
.management-heading h2 {
    margin: 2px 0 4px;
    color: var(--blue-900);
    line-height: 1.15;
}

.management-heading h1 {
    font-size: clamp(1.42rem, 2.4vw, 1.82rem);
}

.management-heading h2 {
    font-size: 1.08rem;
}

.management-heading p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.9rem;
    line-height: 1.38;
}

.section-kicker {
    color: var(--blue-700);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.management-icon {
    width: 42px;
    height: 42px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 14px;
    color: var(--white);
    background: linear-gradient(145deg, var(--blue-800), var(--blue-600));
    box-shadow: 0 10px 22px rgba(36, 94, 216, 0.18);
    font-size: 1.08rem;
}

.record-form {
    display: grid;
    gap: 16px;
}

.record-form--section {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(90, 114, 151, 0.12);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    min-width: 0;
}

.form-field {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.form-field label {
    color: var(--gray-700);
    font-size: 0.86rem;
    font-weight: 800;
}

.form-field input,
.form-field select,
.form-field textarea,
.readonly-value {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-900);
    background: var(--white);
    font: inherit;
}

.form-field textarea {
    min-height: 96px;
    padding: 12px 13px;
    resize: vertical;
}

.form-field--wide {
    grid-column: span 3;
}

.form-field select {
    appearance: none;
    background:
        linear-gradient(45deg, transparent 50%, var(--gray-500) 50%),
        linear-gradient(135deg, var(--gray-500) 50%, transparent 50%),
        var(--white);
    background-position:
        calc(100% - 18px) 19px,
        calc(100% - 13px) 19px,
        100% 0;
    background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    background-repeat: no-repeat;
}

.form-field input[type="file"] {
    min-height: 44px;
    padding: 9px 12px;
    color: var(--gray-700);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: rgba(36, 94, 216, 0.55);
    box-shadow: 0 0 0 4px rgba(36, 94, 216, 0.1);
    outline: none;
}

.readonly-value {
    display: flex;
    align-items: center;
    color: var(--gray-500);
    background: #f8fafd;
}

.field-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.time-picker-input[readonly] {
    padding-right: 44px;
    background-image:
        linear-gradient(45deg, transparent 50%, #1f2937 50%),
        linear-gradient(135deg, #1f2937 50%, transparent 50%);
    background-position:
        calc(100% - 24px) 50%,
        calc(100% - 15px) 50%;
    background-size: 9px 9px, 9px 9px;
    background-repeat: no-repeat;
    cursor: pointer;
    caret-color: transparent;
}

.time-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(7, 17, 38, 0.32);
}

.time-picker-dialog {
    width: min(430px, calc(100vw - 28px));
    overflow: hidden;
    border-radius: 28px;
    background: #252932;
    box-shadow: 0 28px 80px rgba(7, 17, 38, 0.32);
}

.time-picker-display {
    min-height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 18px;
    color: #e2e6f0;
    background: #565656;
    font-size: clamp(3.4rem, 16vw, 5rem);
    font-weight: 850;
    line-height: 1;
}

.time-picker-display.is-manual-entry {
    justify-content: flex-start;
    min-height: 104px;
    padding: 24px 28px;
    font-size: clamp(3rem, 13vw, 4.1rem);
}

.time-picker-display__title {
    display: none;
}

.time-picker-display.is-manual-entry .time-picker-display__title {
    display: block;
}

.time-picker-display__value {
    display: flex;
    align-items: center;
    justify-content: center;
}

.time-picker-display.is-manual-entry .time-picker-display__value {
    display: none;
}

.time-picker-display__part {
    border: 0;
    border-radius: 16px;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
    line-height: 1;
}

.time-picker-display__part.is-active {
    color: #a9c5ff;
}

.time-picker-body {
    padding: 22px 18px 18px;
    background: #252932;
}

.time-picker-dialog.is-manual-entry .time-picker-body {
    padding: 32px 28px 22px;
}

.time-picker-face {
    position: relative;
    width: min(310px, 76vw);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 999px;
    background: #585858;
}

.time-picker-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: #a9c5ff;
    transform: translate(-50%, -50%);
}

.time-picker-hand {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    height: 3px;
    border-radius: 999px;
    background: #a9c5ff;
    transform-origin: left center;
}

.time-picker-option {
    position: absolute;
    z-index: 4;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    color: #e9edf7;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0;
    transform: translate(-50%, -50%);
    transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}

.time-picker-option.has-label {
    width: 42px;
    height: 42px;
    font-size: 1.24rem;
}

.time-picker-option.is-inner {
    color: #d1d6e2;
    font-size: 0.96rem;
}

.time-picker-option.is-active {
    color: #1a2d52;
    background: #a9c5ff;
    font-size: 1.05rem;
    font-weight: 800;
}

.time-picker-option:hover {
    background: rgba(169, 197, 255, 0.28);
}

.time-picker-manual {
    min-height: 310px;
    display: grid;
    align-content: start;
    gap: 54px;
    width: 100%;
    margin: 0;
}

.time-picker-manual[hidden] {
    display: none;
}

.time-picker-manual h3 {
    margin: 0;
    color: #e2e6f0;
    font-size: 1.42rem;
    font-weight: 800;
}

.time-picker-manual__fields {
    display: inline-grid;
    grid-template-columns: 120px auto 120px;
    align-items: start;
    gap: 16px;
    width: fit-content;
    max-width: 100%;
}

.time-picker-manual__fields label {
    display: grid;
    gap: 9px;
    min-width: 0;
    color: #cfd4df;
    font-size: 1.08rem;
    font-weight: 800;
    text-align: center;
}

.time-picker-manual__fields input {
    width: 100%;
    min-width: 0;
    height: 66px;
    padding: 0 0 7px;
    border: 0;
    border-bottom: 2px solid #a7abb5;
    border-radius: 0;
    color: #a7abb5;
    background: transparent;
    font: inherit;
    font-size: 2.65rem;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.time-picker-manual__fields input:focus {
    border-bottom-color: #dfe5f1;
    color: #e8ecf5;
    outline: none;
}

.time-picker-manual__fields strong {
    color: #dfe5f1;
    font-size: 2.65rem;
    line-height: 1.12;
}

.time-picker-actions {
    display: grid;
    grid-template-columns: 42px repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 12px;
    margin-top: 20px;
}

.time-picker-actions button {
    min-width: 74px;
    min-height: 42px;
    border: 0;
    border-radius: 12px;
    color: #a9c5ff;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 850;
}

.time-picker-actions .time-picker-actions__icon {
    min-width: 42px;
    width: 42px;
    padding: 0;
    color: #e2e6f0;
    font-size: 1.42rem;
}

.time-picker-actions button:hover,
.time-picker-actions button:focus-visible {
    background: rgba(169, 197, 255, 0.1);
    outline: none;
}

.form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.form-actions .login-button {
    min-width: 112px;
    margin-top: 0;
}

.secondary-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
}

.secondary-button--small {
    min-height: 36px;
    padding: 0 10px;
    font-size: 0.84rem;
}

.secondary-button:disabled,
.login-button:disabled,
.danger-button:disabled {
    cursor: wait;
    opacity: 0.68;
    transform: none;
}

.location-button.is-loading i {
    animation: locationPulse 900ms ease-in-out infinite alternate;
}

@keyframes locationPulse {
    from {
        opacity: 0.45;
    }

    to {
        opacity: 1;
    }
}

.sales-step-form {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sales-step-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 16px;
    background: #f8fafd;
}

.sales-step-card--action {
    grid-template-columns: minmax(0, 1fr) auto;
}

.sales-step-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 0 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.sales-step-card__header--plain {
    grid-template-columns: minmax(0, 1fr);
}

.sales-step-card__meta {
    display: grid;
    gap: 6px;
    min-width: 132px;
}

.sales-step-card__meta strong {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: 10px;
    color: #173311;
    background: #8bd257;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: 0 12px 24px rgba(90, 175, 49, 0.16);
}

.sales-step-card h2,
.sales-step-card__header h2 {
    margin: 0 0 6px;
    color: var(--blue-900);
}

.sales-step-card p,
.sales-step-card__header p {
    margin: 0;
    color: var(--gray-700);
    line-height: 1.5;
}

.sales-step-actions {
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(90, 114, 151, 0.12);
}

.sales-step-actions .sales-step-card__meta {
    margin-right: auto;
}

.sales-step-actions .login-button,
.sales-step-actions .danger-button {
    width: auto;
    min-width: 108px;
    min-height: 40px;
    margin-top: 0;
    padding: 0 14px;
    border-radius: 12px;
    font-size: 0.9rem;
    box-shadow: 0 10px 22px rgba(36, 94, 216, 0.16);
}

.sales-step-actions .danger-button {
    box-shadow: 0 10px 22px rgba(190, 18, 60, 0.14);
}

.sales-trip-empty,
.active-trip-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 16px;
    background: #f8fafd;
}

.sales-trip-empty h2,
.active-trip-card h2 {
    margin: 4px 0 6px;
    color: var(--blue-900);
}

.sales-trip-empty p {
    margin: 0;
    color: var(--gray-700);
}

.sales-trip-action {
    min-width: 128px;
    margin-top: 0;
    text-decoration: none;
}

.sales-entry-menu {
    display: grid;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(90, 114, 151, 0.14);
    border-radius: 16px;
    background: #f8fafd;
}

.sales-page-back {
    display: flex;
    margin: 14px 0;
}

.sales-entry-menu__item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 34px;
    gap: 12px;
    align-items: center;
    min-height: 66px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--gray-900);
    background: var(--white);
    text-decoration: none;
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.sales-entry-menu__item:hover {
    border-color: rgba(36, 94, 216, 0.2);
    color: var(--blue-900);
    background: #fbfdff;
    transform: translateX(2px);
}

.sales-entry-menu__item--primary {
    border-color: rgba(36, 94, 216, 0.14);
    background: #f5f9ff;
}

.sales-entry-menu__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.sales-entry-menu__item--primary .sales-entry-menu__icon {
    color: var(--white);
    background: var(--blue-700);
}

.sales-entry-menu__content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.sales-entry-menu__content strong {
    font-size: 0.94rem;
    line-height: 1.2;
}

.sales-entry-menu__content small {
    overflow: hidden;
    color: var(--gray-700);
    font-size: 0.78rem;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sales-entry-menu__arrow {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--gray-700);
}

.sales-entry-menu__item:hover .sales-entry-menu__arrow {
    color: var(--blue-700);
    background: var(--blue-100);
}

.sales-entry-menu__item.is-disabled {
    grid-template-columns: 42px minmax(0, 1fr);
    opacity: 0.65;
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .sales-entry-menu__item {
        min-height: 62px;
    }

    .sales-entry-menu__content small {
        white-space: normal;
    }
}

/* POS transfer interface */
.pos-transfer-form {
    max-width: 880px;
    margin: 18px auto 0;
    overflow: hidden;
    border: 1px solid #dce5f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(31, 69, 126, .07);
}

.pos-transfer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 22px;
}

.pos-transfer-products { padding: 0 22px 18px; }
.pos-transfer-products__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.pos-transfer-products__heading > div { display: grid; gap: 2px; }
.pos-transfer-products__heading strong { color: #12213a; font-size: .95rem; }
.pos-transfer-add { width: auto; min-width: 0; min-height: 36px; padding: 7px 11px; border-radius: 9px; font-size: .76rem; }
.pos-transfer-product-list { display: grid; gap: 12px; }
.pos-transfer-product {
    overflow: hidden;
    border: 1px solid #dbe5f1;
    border-radius: 14px;
    background: #f9fbfe;
}
.pos-transfer-product__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 8px 13px;
    border-bottom: 1px solid #e2e9f2;
    background: #f1f6fd;
    color: #183b71;
    font-size: .82rem;
}
.pos-transfer-product__identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pos-transfer-product__identity > strong { flex: 0 0 auto; }
.pos-transfer-product__identity > small {
    overflow: hidden;
    color: #64758e;
    font-size: .72rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pos-transfer-product__head-actions { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.pos-transfer-edit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 30px;
    padding: 5px 8px;
    border: 0;
    border-radius: 8px;
    background: #e7effd;
    color: #245ed8;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
}
.pos-transfer-remove {
    display: inline-grid;
    width: 30px;
    height: 30px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: #fff0f0;
    color: #c53b3b;
    cursor: pointer;
}
.pos-transfer-product.is-collapsed .pos-transfer-product__head { min-height: 38px; border-bottom: 0; background: #fff; }
.pos-transfer-product.is-collapsed .pos-transfer-product__fields,
.pos-transfer-product.is-collapsed .pos-transfer-line-total { display: none; }
.pos-transfer-product:not(.is-collapsed) .pos-transfer-edit { display: none; }
.pos-transfer-product__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 13px;
}
.pos-transfer-line-total {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 0;
    padding: 0;
    border-top: 1px solid #e2e9f2;
    background: #f7faff;
    color: #526580;
    font-weight: 800;
}
.pos-transfer-line-total > span { display: grid; min-width: 0; gap: 3px; justify-items: center; padding: 11px 8px; text-align: center; }
.pos-transfer-line-total > span + span { border-left: 1px solid #e2e9f2; }
.pos-transfer-line-total small { color: #71819a; font-size: .58rem; letter-spacing: .07em; text-transform: uppercase; }
.pos-transfer-line-total strong { color: #153d7a; font-size: .88rem; white-space: nowrap; }
.pos-transfer-line-total em { overflow: hidden; max-width: 100%; color: #8290a4; font-size: .56rem; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.pos-transfer-money input[readonly] { cursor: default; color: #153d7a; font-weight: 800; }
.pos-transfer-product .form-lookup-button:disabled,
.pos-transfer-product .form-lookup-button.is-disabled { opacity: .55; cursor: not-allowed; }
.pos-transfer-field .form-lookup-button { min-height: 50px; padding: 11px 14px; border-radius: 12px; font-size: .95rem; }

.pos-transfer-field { display: grid; gap: 7px; min-width: 0; }
.pos-transfer-field--wide { grid-column: 1 / -1; }
.pos-transfer-field > span {
    color: #526580;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pos-transfer-field > input,
.pos-transfer-field > select,
.pos-transfer-search,
.pos-transfer-money {
    width: 100%;
    min-height: 48px;
    border: 1px solid #d6e0ed;
    border-radius: 12px;
    background: #f9fbfe;
}

.pos-transfer-field > input,
.pos-transfer-field > select {
    padding: 10px 13px;
    color: #12213a;
    font: inherit;
}

.pos-transfer-search,
.pos-transfer-money { display: flex; align-items: center; }
.pos-transfer-search { gap: 10px; padding: 0 13px; }
.pos-transfer-search i { color: #7890ad; font-size: .76rem; }
.pos-transfer-search i:last-child { margin-left: auto; color: #2f73f6; }
.pos-transfer-search input,
.pos-transfer-money input {
    min-width: 0;
    flex: 1;
    min-height: 46px;
    padding: 9px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #12213a;
    font: inherit;
}
.pos-transfer-money { padding: 0 13px; }
.pos-transfer-money span { margin-right: 8px; color: #526580; font-weight: 800; }
.pos-transfer-field > :is(input,select):focus,
.pos-transfer-search:focus-within,
.pos-transfer-money:focus-within {
    border-color: #2f73f6;
    box-shadow: 0 0 0 3px rgba(47, 115, 246, .12);
    outline: 0;
}

.pos-transfer-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 22px;
    padding: 17px 19px;
    border-radius: 13px;
    background: #163f83;
    color: #fff;
}
.pos-transfer-total span { font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.pos-transfer-total strong { font-size: 1.35rem; }
.pos-transfer-note { display: grid; gap: 7px; margin: 14px 22px 0; }
.pos-transfer-note label { color: #526580; font-size: .75rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.pos-transfer-note label span { font-weight: 600; text-transform: none; }
.pos-transfer-note textarea { width: 100%; min-height: 76px; padding: 10px 12px; resize: vertical; border: 1px solid #d6e0ed; border-radius: 12px; outline: 0; background: #f9fbfe; color: #12213a; font: inherit; }
.pos-transfer-note textarea:focus { border-color: #2f73f6; box-shadow: 0 0 0 3px rgba(47,115,246,.12); }
.pos-transfer-actions { margin-top: 16px; padding: 15px 22px; background: #f5f8fc; }
.pos-transfer-actions button:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 560px) {
    .pos-transfer-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
    .pos-transfer-heading p { font-size: .82rem; }
    .pos-transfer-form { width: 100%; margin-top: 12px; border-radius: 16px; }
    .pos-transfer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 12px; padding: 18px 16px; }
    .pos-transfer-products { padding: 0 16px 18px; }
    .pos-transfer-products__heading { margin-bottom: 12px; }
    .pos-transfer-products__heading strong { font-size: .94rem; }
    .pos-transfer-add { min-height: 40px; padding: 8px 12px; border-radius: 10px; font-size: .78rem; }
    .pos-transfer-product-list { gap: 13px; }
    .pos-transfer-product { border-radius: 14px; }
    .pos-transfer-product__head { min-height: 46px; padding: 9px 12px; }
    .pos-transfer-product__identity { gap: 9px; }
    .pos-transfer-product__identity > strong { font-size: .84rem; }
    .pos-transfer-product__identity > small { font-size: .74rem; }
    .pos-transfer-edit { width: 34px; min-height: 34px; padding: 0; justify-content: center; }
    .pos-transfer-edit span { display: none; }
    .pos-transfer-remove { width: 34px; height: 34px; }
    .pos-transfer-product__fields { gap: 15px 10px; padding: 14px 12px; }
    .pos-transfer-line-total { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; padding: 12px; }
    .pos-transfer-line-total > span { min-width: 0; }
    .pos-transfer-line-total > span:nth-child(2) { justify-items: center; text-align: center; }
    .pos-transfer-line-total b { font-size: .76rem; }
    .pos-transfer-line-total small { font-size: .58rem; }
    .pos-transfer-line-total strong { font-size: .88rem; }
    .pos-transfer-field--wide { grid-column: 1 / -1; }
    .pos-transfer-field { min-width: 0; text-align: left; }
    .pos-transfer-field > span {
        overflow: hidden;
        font-size: .75rem;
        letter-spacing: .035em;
        line-height: 1.2;
        text-align: left;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .pos-transfer-field > input,
    .pos-transfer-field > select,
    .pos-transfer-search,
    .pos-transfer-money { min-width: 0; min-height: 50px; border-radius: 12px; }
    .pos-transfer-field > input,
    .pos-transfer-field > select { padding: 10px 12px; font-size: 1rem; }
    .pos-transfer-field .form-lookup-button { min-height: 52px; padding: 11px 13px; border-radius: 12px; font-size: 1rem; }
    .pos-transfer-search { padding: 0 11px; }
    .pos-transfer-search input,
    .pos-transfer-money input { min-width: 0; min-height: 48px; font-size: 1rem; }
    .pos-transfer-money { padding: 0 12px; }
    .pos-transfer-money span { flex: 0 0 auto; margin-right: 6px; font-size: .86rem; }
    .pos-transfer-total { margin: 4px 16px 0; padding: 16px; border-radius: 13px; }
    .pos-transfer-total span { font-size: .78rem; }
    .pos-transfer-total strong { font-size: 1.25rem; white-space: nowrap; }
    .pos-transfer-note { margin: 15px 16px 0; }
    .pos-transfer-note label { font-size: .75rem; }
    .pos-transfer-note textarea { min-height: 82px; padding: 12px; border-radius: 12px; font-size: .96rem; }
    .pos-transfer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; }
    .pos-transfer-actions .secondary-button,
    .pos-transfer-actions .login-button { display: inline-flex; width: auto; min-width: 0; min-height: 44px; padding: 9px 14px; font-size: .82rem; }
}

/* Transfer form sits directly on the page; only fields and product rows are cards. */
.pos-transfer-form {
    max-width: none;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.pos-transfer-actions { background: transparent; }

@media (max-width: 560px) {
    .pos-transfer-form { margin-top: 10px; border-radius: 0; }
    .pos-transfer-grid { gap: 12px 10px; padding: 14px 12px; }
    .pos-transfer-products { padding: 0 12px 14px; }
    .pos-transfer-products__heading { margin-bottom: 9px; }
    .pos-transfer-products__heading strong { font-size: .83rem; }
    .pos-transfer-add { min-height: 34px; padding: 6px 9px; border-radius: 9px; font-size: .7rem; }
    .pos-transfer-product-list { gap: 10px; }
    .pos-transfer-product { border-radius: 11px; }
    .pos-transfer-product__head { min-height: 38px; padding: 6px 10px; }
    .pos-transfer-product__identity { gap: 7px; }
    .pos-transfer-product__identity > strong { font-size: .74rem; }
    .pos-transfer-product__identity > small { font-size: .65rem; }
    .pos-transfer-edit { width: 28px; min-height: 28px; }
    .pos-transfer-remove { width: 28px; height: 28px; }
    .pos-transfer-product__fields { gap: 10px 8px; padding: 10px; }
    .pos-transfer-line-total { gap: 0; padding: 0; }
    .pos-transfer-line-total > span { gap: 2px; padding: 10px 4px; }
    .pos-transfer-line-total small { font-size: .5rem; }
    .pos-transfer-line-total strong { font-size: .78rem; }
    .pos-transfer-line-total em { font-size: .49rem; }
    .pos-transfer-field > span { font-size: .66rem; letter-spacing: .025em; }
    .pos-transfer-field > input,
    .pos-transfer-field > select,
    .pos-transfer-money { min-height: 42px; border-radius: 10px; }
    .pos-transfer-field > input,
    .pos-transfer-field > select { padding: 8px 10px; font-size: .9rem; }
    .pos-transfer-field .form-lookup-button { min-height: 44px; padding: 9px 11px; border-radius: 10px; font-size: .9rem; }
    .pos-transfer-money input { min-height: 40px; font-size: .88rem; }
    .pos-transfer-money { padding: 0 10px; }
    .pos-transfer-money span { margin-right: 5px; font-size: .76rem; }
    .pos-transfer-total { margin: 2px 12px 0; padding: 13px 14px; border-radius: 11px; }
    .pos-transfer-total span { font-size: .7rem; }
    .pos-transfer-total strong { font-size: 1.08rem; }
    .pos-transfer-note { margin: 12px 12px 0; }
    .pos-transfer-note label { font-size: .68rem; }
    .pos-transfer-note textarea { min-height: 68px; padding: 10px; border-radius: 10px; font-size: .9rem; }
    .pos-transfer-actions { padding: 12px; }
    .pos-transfer-actions .secondary-button,
    .pos-transfer-actions .login-button { min-height: 38px; padding: 7px 11px; font-size: .75rem; }
}

.place-choice-heading {
    margin-bottom: 1rem;
}

.place-choice-heading h3 {
    margin: 0.25rem 0;
    color: var(--blue-900);
    font-size: 1.08rem;
}

.place-choice-heading p,
.place-workspace__header p,
.place-field-group__heading p {
    margin: 0;
    color: var(--gray-500);
    line-height: 1.45;
}

.place-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1rem;
}

.place-choice-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    min-height: 92px;
    padding: 1rem;
    border: 1px solid #dce5f1;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.place-choice-card:hover {
    transform: translateY(-1px);
    border-color: #a9c5f1;
    box-shadow: 0 9px 22px rgba(25, 62, 120, 0.09);
}

.place-choice-card:has(input:checked) {
    border-color: var(--blue-600);
    background: linear-gradient(135deg, #f8fbff, #eef5ff);
    box-shadow: 0 10px 25px rgba(47, 115, 246, 0.13);
}

.place-choice-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.place-choice-card__icon,
.place-workspace__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.place-choice-card__copy {
    display: grid;
    gap: 0.25rem;
}

.place-choice-card__copy strong {
    color: var(--blue-900);
}

.place-choice-card__copy small {
    color: var(--gray-500);
    line-height: 1.4;
}

.place-choice-card__check {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border: 1px solid #ccd8e9;
    border-radius: 50%;
    color: transparent;
    background: #fff;
    font-size: 0.7rem;
}

.place-choice-card:has(input:checked) .place-choice-card__check {
    border-color: var(--blue-700);
    color: #fff;
    background: var(--blue-700);
}

.place-workspace {
    margin-top: 1rem;
    padding: 1.15rem;
    border: 1px solid #dce5f1;
    border-radius: 18px;
    background: #f9fbfe;
}

.place-workspace--new {
    background: #fff;
}

.place-workspace__header {
    display: flex;
    gap: 0.85rem;
    align-items: center;
    margin-bottom: 1.15rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e3eaf4;
}

.place-workspace__header h3 {
    margin: 0 0 0.2rem;
    color: var(--blue-900);
    font-size: 1rem;
}

.place-search-control {
    position: relative;
}

.place-search-control > i {
    position: absolute;
    top: 50%;
    left: 0.9rem;
    z-index: 1;
    color: #7890b2;
    transform: translateY(-50%);
}

.place-search-control input {
    padding-left: 2.55rem !important;
}

.place-result-source {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.place-live-results {
    display: grid;
    max-height: 320px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #c9d8ee;
    border-radius: 11px;
    background: #fff;
}

.place-live-results > p {
    margin: 0;
    padding: 0.9rem 1rem;
    color: var(--gray-500);
    font-size: 0.78rem;
}

.place-live-results > p.is-empty {
    color: #8a6514;
    background: #fffaf0;
}

.place-live-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
    width: 100%;
    min-height: 54px;
    padding: 0.35rem 0.45rem;
    border: 0;
    border-bottom: 1px solid #e5ebf4;
    color: var(--blue-900);
    background: #fff;
    text-align: left;
}

.place-live-result:last-child {
    border-bottom: 0;
}

.place-live-result:hover {
    background: #f7faff;
}

.place-live-result.is-selected {
    color: #174aa9;
    background: #edf4ff;
}

.place-live-result__icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 8px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.place-live-result__select {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: center;
    min-width: 0;
    padding: 0.2rem;
    border: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
}

.place-live-result__select > span:nth-child(2) {
    overflow: hidden;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.place-live-result__select > i {
    color: var(--blue-600);
    font-size: 0.72rem;
}

.place-live-result:hover .place-live-result__select > i {
    transform: translateX(2px);
}

.place-live-result__select > i {
    transition: transform 160ms ease;
}

.place-live-result__action {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid #c6d7f0;
    border-radius: 7px;
    color: var(--blue-700);
    background: #f7faff;
    font-size: 0.68rem;
    font-weight: 750;
    text-decoration: none;
}

.place-live-results > .place-selected-card {
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    border-width: 1px 0;
    border-radius: 0;
    box-shadow: inset 3px 0 0 var(--blue-600);
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.place-live-results > .place-selected-card .place-selected-card__header {
    position: static;
    padding: 0.7rem 0.8rem;
}

.place-live-results > .place-selected-card .place-selected-card__content {
    max-height: none;
    overflow: visible;
    padding: 0.75rem;
}

.place-customer-directory {
    padding: 0.75rem;
    border-top: 1px solid #dfe8f4;
    background: #fbfcff;
}

.place-customer-directory__heading {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.6rem;
}

.place-customer-directory__heading h4 {
    margin: 0.1rem 0 0;
    color: var(--blue-900);
    font-size: 0.88rem;
}

.place-customer-directory__heading > strong {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 8px;
    color: var(--blue-700);
    background: var(--blue-100);
    font-size: 0.75rem;
}

.place-customer-list {
    display: grid;
    gap: 0.45rem;
}

.place-customer-item {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid #e0e7f1;
    border-radius: 9px;
    background: #fff;
}

.place-customer-item > img,
.place-customer-item__avatar {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    color: var(--blue-700);
    background: var(--blue-100);
    object-fit: cover;
}

.place-customer-item > div {
    display: grid;
    min-width: 0;
    gap: 0.08rem;
}

.place-customer-item > div strong {
    overflow: hidden;
    color: var(--blue-900);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-customer-item > div small {
    overflow: hidden;
    color: var(--gray-500);
    font-size: 0.66rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-customer-item__count {
    color: var(--blue-700);
    font-size: 0.66rem;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 520px) {
    .place-customer-item {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .place-customer-item__count {
        grid-column: 2;
    }
}

.place-selected-card {
    overflow: hidden;
    margin-top: 1rem;
    border: 1px solid #bdd3f4;
    border-radius: 17px;
    background: #fff;
}

.place-selected-card__header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid #e3ebf7;
    background: linear-gradient(135deg, #f8fbff, #edf5ff);
}

.place-selected-card__header h3 {
    margin: 0.2rem 0;
    color: var(--blue-900);
}

.place-selected-card__header p {
    margin: 0;
    color: var(--gray-600, #5d6a80);
}

.place-selected-card__content {
    display: grid;
    grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.place-selected-card__content > .trip-summary-grid:only-child {
    grid-column: 1 / -1;
}

.place-selected-card__content .record-media-preview {
    width: 100%;
    height: 190px;
    margin: 0;
}

.place-reuse-note {
    margin: 0;
    padding: 0.8rem 1rem;
    color: #315d4b;
    background: #eef9f4;
    font-size: 0.82rem;
    line-height: 1.45;
}

.place-field-group {
    margin-bottom: 1rem;
    padding: 1rem;
    border: 1px solid #e1e8f2;
    border-radius: 15px;
    background: #fbfcfe;
}

.place-field-group:last-child {
    margin-bottom: 0;
}

.place-field-group__heading {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1rem;
}

.place-field-group__heading > span {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    place-items: center;
    border-radius: 10px;
    color: var(--blue-700);
    background: var(--blue-100);
    font-size: 0.74rem;
    font-weight: 800;
}

.place-field-group__heading h4 {
    margin: 0 0 0.15rem;
    color: var(--blue-900);
    font-size: 0.92rem;
}

@media (max-width: 720px) {
    .place-choice-grid,
    .place-selected-card__content {
        grid-template-columns: 1fr;
    }

    .place-selected-card__header {
        flex-direction: column;
    }
}

.marketing-notes-table-wrap { border: 1px solid #dce5f1; border-radius: 15px; box-shadow: 0 8px 24px rgba(31,67,112,.06); }
.marketing-notes-filter { display: grid; grid-template-columns: minmax(260px,1.3fr) minmax(330px,1fr) auto; align-items: end; gap: 14px; padding: 16px; border: 1px solid #dce5f1; border-radius: 15px; background: linear-gradient(135deg,#f9fbff,#f3f7fc); box-shadow: 0 7px 20px rgba(31,67,112,.05); }
.marketing-notes-filter .form-field { margin: 0; gap: 7px; }
.marketing-notes-filter .form-field > span { display: flex; align-items: center; gap: 7px; color: #35516f; font-size: .78rem; font-weight: 750; }
.marketing-notes-filter .form-field > span i { color: #2867d8; }
.marketing-notes-filter__search > div { position: relative; }
.marketing-notes-filter__search > div > i { position: absolute; top: 50%; left: 14px; z-index: 1; color: #7890aa; transform: translateY(-50%); pointer-events: none; }
.marketing-notes-filter__search input { width: 100%; padding-left: 41px; background: #fff; }
.marketing-notes-filter__dates { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.marketing-notes-filter__dates input { width: 100%; background: #fff; }
.marketing-notes-filter__actions { display: flex; align-items: center; gap: 8px; }
.marketing-notes-filter__actions .login-button,.marketing-notes-filter__actions .secondary-button { min-height: 46px; white-space: nowrap; }
.marketing-notes-filter.is-loading { opacity: .72; }
.marketing-notes-filter.is-loading .login-button { cursor: wait; }
.marketing-notes-table { margin: 0; min-width: 1040px; }
.marketing-notes-table thead th { padding: 13px 14px; color: #35516f; background: linear-gradient(180deg,#f7faff,#edf3fa); border-bottom: 1px solid #d6e0ed; font-size: .74rem; text-transform: uppercase; letter-spacing: .045em; }
.marketing-notes-table tbody td { padding: 15px 14px; vertical-align: top; border-bottom-color: #e8eef6; }
.marketing-notes-table tbody tr:last-child td { border-bottom: 0; }
.marketing-notes-table tbody tr:hover td { background: #f8fbff; }
.marketing-note-date { display: grid; gap: 4px; min-width: 112px; }
.marketing-note-date span { display: flex; align-items: center; gap: 6px; color: var(--gray-800); font-weight: 650; }
.marketing-note-date small { color: var(--gray-600); }
.marketing-note-date strong { width: max-content; margin-top: 3px; padding: 3px 7px; border-radius: 999px; color: #245ed8; background: #edf4ff; font-size: .72rem; }
.marketing-note-text { min-width: 230px; max-width: 430px; }
.marketing-note-text p { margin: 0; color: var(--gray-900); line-height: 1.55; }
.marketing-note-text > span { display: flex; align-items: flex-start; gap: 5px; margin-top: 9px; padding: 6px 8px; border-radius: 8px; color: #315f92; background: #edf5ff; font-size: .76rem; }
.marketing-note-entity { display: flex; align-items: flex-start; gap: 9px; min-width: 175px; }
.marketing-note-entity__icon { width: 30px; height: 30px; display: grid; flex: 0 0 30px; place-items: center; border-radius: 9px; color: #2867d8; background: #edf4ff; }
.marketing-note-entity > span:last-child,.marketing-note-visit { display: grid; gap: 3px; min-width: 0; }
.marketing-note-entity strong,.marketing-note-visit strong { color: var(--gray-900); }
.marketing-note-entity small,.marketing-note-visit small { color: var(--gray-600); font-size: .76rem; line-height: 1.35; }
.marketing-note-visit small { display: flex; align-items: center; gap: 5px; }
.marketing-note-view { white-space: nowrap; }
.marketing-promo-value { display: grid; justify-items: start; gap: 5px; min-width: 105px; }
.marketing-promo-value strong { color: var(--gray-900); font-size: .96rem; }
.marketing-promo-value small { color: var(--gray-600); font-size: .72rem; }
@media (max-width: 720px) {
    .marketing-notes-filter { grid-template-columns: 1fr; gap: 12px; padding: 14px; }
    .marketing-notes-filter__dates { gap: 9px; }
    .marketing-notes-filter__actions { display: grid; grid-template-columns: 1fr; }
    .marketing-notes-filter__actions .login-button,.marketing-notes-filter__actions .secondary-button { width: 100%; justify-content: center; }
    .marketing-notes-table { min-width: 0; }
    .marketing-notes-table tbody tr { padding: 8px 0; }
    .marketing-notes-table tbody td { padding: 10px 14px; }
    .marketing-note-text,.marketing-note-entity { min-width: 0; max-width: none; }
    .marketing-note-view { width: 100%; justify-content: center; }
}

.separated-report-filters {
    margin: 0 0 0.8rem;
    padding: 0.8rem;
    border: 1px solid #dce5f1;
    border-radius: 10px;
    background: #f9fbfe;
}

.separated-report-filters .form-grid {
    gap: 0.65rem;
}

.separated-report-filters .form-field label {
    font-size: 0.72rem;
}

.separated-report-filters input,
.separated-report-filters select {
    min-height: 40px;
}

.report-result-summary {
    display: inline-flex;
    gap: 0.45rem;
    align-items: baseline;
    margin-bottom: 0.65rem;
    padding: 0.42rem 0.65rem;
    border: 1px solid #dbe6f5;
    border-radius: 8px;
    color: var(--gray-700);
    background: #f8fbff;
    font-size: 0.76rem;
}

.report-result-summary strong {
    color: var(--blue-700);
    font-size: 1rem;
}

.separated-reports-panel .data-table td .muted-text {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.7rem;
}

.place-detail-overview {
    display: grid;
    grid-template-columns: minmax(210px, 320px) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.place-detail-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.65rem;
    align-items: center;
    margin-bottom: 0.8rem;
}

.place-detail-actions form {
    margin: 0;
}

.place-detail-actions a,
.place-detail-actions button {
    min-height: 40px;
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
}

.place-detail-page > form.record-form:has(> .place-admin-action) {
    display: inline-block;
    width: auto;
    margin: 0 0.45rem 0.8rem 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    vertical-align: top;
}

.place-admin-action > summary {
    width: fit-content;
    list-style: none;
    cursor: pointer;
}

.place-admin-action > summary::-webkit-details-marker {
    display: none;
}

.place-admin-action__body {
    width: min(680px, calc(100vw - 3rem));
    margin-top: 0.65rem;
    padding: 0.9rem;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(31, 54, 88, 0.08);
}

.place-admin-action__body > p {
    margin: 0 0 0.75rem;
}

.place-detail-overview > .trip-summary-grid:only-child {
    grid-column: 1 / -1;
}

.place-detail-media {
    overflow: hidden;
    min-height: 230px;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #f6f8fc;
}

.place-detail-media img {
    width: 100%;
    height: 100%;
    max-height: 320px;
    object-fit: contain;
}

.place-detail-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.place-detail-customer-card {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
    padding: 0.65rem;
    border: 1px solid #dfe7f2;
    border-radius: 10px;
    background: #fff;
}

.place-detail-customer-card > img,
.place-detail-customer-card > .place-customer-item__avatar {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
}

.place-detail-customer-card > div {
    min-width: 0;
}

.place-detail-customer-card h3 {
    overflow: hidden;
    margin: 0.12rem 0;
    color: var(--blue-900);
    font-size: 0.88rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-detail-customer-card p {
    overflow: hidden;
    margin: 0.08rem 0;
    color: var(--gray-500);
    font-size: 0.68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.place-detail-customer-card > strong {
    color: var(--blue-700);
    font-size: 0.68rem;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .place-detail-overview,
    .place-detail-customer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .place-detail-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 8px;
    }

    .place-detail-actions form {
        width: 100%;
    }

    .place-detail-actions a,
    .place-detail-actions button {
        width: 100%;
        min-height: 34px;
        justify-content: center;
        padding: 0.38rem 0.5rem;
        border-radius: 9px;
        font-size: 0.7rem;
        white-space: nowrap;
    }

    .place-detail-customer-card {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .place-detail-customer-card > img,
    .place-detail-customer-card > .place-customer-item__avatar {
        width: 42px;
        height: 42px;
    }

    .place-detail-customer-card > strong {
        grid-column: 2;
    }
}

/* Portable customer registration layout */
.customer-place-flow {
    width: min(100%, 1120px);
    margin-inline: auto;
}

.customer-place-flow .management-heading {
    margin-bottom: 0.8rem;
}

.customer-place-flow .management-heading h1 {
    margin: 0.15rem 0;
    font-size: clamp(1.25rem, 2.6vw, 1.7rem);
}

.customer-place-flow .management-heading p {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
}

.customer-place-flow .continue-existing-place {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    padding: 0.48rem 0.7rem;
    border: 1px solid #b9cef0;
    border-radius: 9px;
    color: var(--blue-800);
    background: var(--blue-50);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.15;
    text-decoration: none;
}

.customer-place-flow .continue-existing-place:hover {
    border-color: var(--blue-500);
    background: #e7f0ff;
}

.customer-place-flow .record-form {
    width: 100%;
}

.customer-place-flow .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.customer-place-flow .form-field {
    min-width: 0;
    gap: 0.3rem;
}

.customer-place-flow .form-field label {
    font-size: 0.75rem;
    line-height: 1.3;
}

.customer-place-flow .form-field input,
.customer-place-flow .form-field select,
.customer-place-flow .form-field textarea {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0.58rem 0.68rem;
    border-radius: 9px;
    font-size: 0.85rem;
}

.customer-place-flow .form-field textarea {
    min-height: 78px;
    resize: vertical;
}

.customer-place-flow .field-control-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.45rem;
}

.customer-place-flow .field-control-row .secondary-button--small {
    min-height: 42px;
    padding: 0.5rem 0.65rem;
    border-radius: 9px;
    white-space: nowrap;
}

.customer-place-flow .registration-accordion__body > .form-grid:last-child {
    margin-bottom: 0;
}

.customer-place-flow input[type="file"] {
    min-height: 44px;
    padding: 0.42rem;
    font-size: 0.76rem;
}

.customer-place-flow .checkbox-row {
    min-height: 40px;
    padding: 0.55rem 0.65rem;
    border: 1px solid #dfe6f0;
    border-radius: 9px;
    background: #fff;
}

.customer-place-flow .checkbox-row input {
    width: 17px;
    height: 17px;
}

.customer-place-flow .record-media-preview,
.customer-place-flow .place-detail-media img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 760px) {
    .customer-place-flow {
        border-radius: 14px;
    }

    .customer-place-flow .management-heading {
        align-items: center;
    }

    .customer-place-flow .management-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 10px;
    }

    .customer-place-flow .registration-flow-banner {
        gap: 0.75rem;
    }

    .customer-place-flow .form-grid {
        grid-template-columns: 1fr;
    }

    .customer-place-flow .form-field--wide {
        grid-column: auto;
    }

    .customer-place-flow .registration-accordion__summary {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .customer-place-flow .place-workspace {
        padding: 0.65rem;
    }
}

@media (max-width: 520px) {
    .customer-place-flow {
        padding: 0.7rem;
        border-radius: 12px;
    }

    .customer-place-flow .management-heading {
        gap: 0.6rem;
    }

    .customer-place-flow .management-heading h1 {
        font-size: 1.2rem;
    }

    .customer-place-flow .customer-visit-heading {
        align-items: flex-end;
    }

    .customer-place-flow .continue-existing-place {
        min-height: 34px;
        max-width: 142px;
        padding: 0.4rem 0.55rem;
        font-size: 0.7rem;
        text-align: center;
    }

    .customer-place-flow .management-heading p {
        font-size: 0.74rem;
    }

    .customer-place-flow .management-icon {
        display: none;
    }

    .customer-place-flow .registration-flow-banner {
        padding: 0.7rem;
    }

    .customer-place-flow .registration-flow-progress {
        gap: 0.4rem;
    }

    .customer-place-flow .registration-flow-progress b {
        width: 27px;
        height: 27px;
        font-size: 0.7rem;
    }

    .customer-place-flow .registration-accordion__summary {
        min-height: 54px;
        gap: 0.6rem;
        padding: 0.58rem 0.65rem;
    }

    .customer-place-flow .registration-accordion__title strong {
        font-size: 0.86rem;
    }

    .customer-place-flow .registration-accordion__title small {
        font-size: 0.62rem;
    }

    .customer-place-flow .registration-accordion__body {
        padding: 0.65rem;
    }

    .customer-place-flow .form-field input,
    .customer-place-flow .form-field select,
    .customer-place-flow .form-field textarea {
        font-size: 16px;
    }

    .customer-place-flow .field-control-row {
        grid-template-columns: 1fr;
    }

    .customer-place-flow .field-control-row .secondary-button--small {
        width: 100%;
    }

    .customer-place-flow .activity-action-form > .form-actions {
        position: sticky;
        bottom: 0.35rem;
        z-index: 8;
        margin-inline: -0.2rem;
        padding: 0.5rem;
        border: 1px solid #d7e2f1;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 8px 22px rgba(25, 62, 120, 0.13);
        backdrop-filter: blur(8px);
    }
}

@media (max-width: 480px) {
    .place-choice-card,
    .place-workspace,
    .place-field-group {
        padding: 0.85rem;
    }

    .place-choice-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .place-choice-card__check {
        position: absolute;
        top: 0.65rem;
        right: 0.65rem;
    }
}

.place-flow-intro {
    max-width: 680px;
    margin: 0 auto 1.35rem;
    text-align: center;
}

.place-flow-intro h2 {
    margin: 0.3rem 0;
    color: var(--blue-900);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
}

.place-flow-intro p {
    margin: 0;
    color: var(--gray-500);
    line-height: 1.55;
}

.place-entry-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.place-entry-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    min-height: 132px;
    padding: 1.25rem;
    border: 1px solid #dce5f1;
    border-radius: 20px;
    color: inherit;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 10px 28px rgba(25, 62, 120, 0.07);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.place-entry-card:hover {
    transform: translateY(-3px);
    border-color: #a9c5f1;
    box-shadow: 0 16px 34px rgba(25, 62, 120, 0.13);
}

.place-entry-card--primary {
    border-color: #a9c5f1;
    background: linear-gradient(135deg, #f9fbff, #edf4ff);
}

.place-entry-card__icon {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 17px;
    color: #fff;
    background: var(--blue-700);
    box-shadow: 0 10px 22px rgba(36, 94, 216, 0.24);
    font-size: 1.25rem;
}

.place-entry-card > span:nth-child(2) {
    display: grid;
    gap: 0.35rem;
}

.place-entry-card strong {
    color: var(--blue-900);
    font-size: 1.04rem;
}

.place-entry-card small {
    color: var(--gray-500);
    line-height: 1.45;
}

.place-entry-card > i {
    color: var(--blue-700);
}

.current-place-strip {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid #bcdccf;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fcfa, #edf9f4);
}

.current-place-strip h2 {
    margin: 0.2rem 0;
    color: #173f35;
}

.current-place-strip p {
    margin: 0;
    color: #527067;
}

.current-place-strip__status {
    display: grid;
    justify-items: end;
    gap: 0.35rem;
    color: #315d4b;
    font-size: 0.8rem;
}

.draft-reminder {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid #f0d89a;
    border-radius: 15px;
    color: #715916;
    background: #fffaf0;
}

.draft-reminder > i {
    font-size: 1.25rem;
}

.draft-reminder > div {
    display: grid;
    gap: 0.1rem;
}

.draft-reminder span {
    font-size: 0.78rem;
}

.draft-reminder__links {
    display: flex !important;
    flex-flow: row wrap;
    gap: 0.4rem !important;
    margin-left: auto;
}

.draft-reminder__links a {
    padding: 0.35rem 0.55rem;
    border: 1px solid #e4c879;
    border-radius: 8px;
    color: #715916;
    background: #fff;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
}

.flow-decision-dialog {
    width: min(92vw, 560px);
    padding: 1.5rem;
    border: 0;
    border-radius: 22px;
    text-align: center;
    box-shadow: 0 30px 90px rgba(8, 21, 47, 0.3);
}

.flow-decision-dialog::backdrop {
    background: rgba(8, 21, 47, 0.58);
    backdrop-filter: blur(4px);
}

.flow-decision-dialog__icon {
    display: grid;
    width: 62px;
    height: 62px;
    margin: 0 auto 0.8rem;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #168451;
    box-shadow: 0 12px 25px rgba(22, 132, 81, 0.24);
    font-size: 1.35rem;
}

.flow-decision-dialog h2 {
    margin: 0 0 0.4rem;
    color: var(--blue-900);
}

.flow-decision-dialog p {
    margin: 0 auto 1.15rem;
    color: var(--gray-500);
    line-height: 1.5;
}

.flow-decision-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.flow-decision-actions > * {
    justify-content: center;
    min-height: 46px;
}

@media (max-width: 680px) {
    .place-entry-menu,
    .flow-decision-actions {
        grid-template-columns: 1fr;
    }

    .current-place-strip,
    .draft-reminder {
        align-items: flex-start;
        flex-direction: column;
    }

    .current-place-strip__status {
        justify-items: start;
    }

    .draft-reminder__links {
        margin-left: 0;
    }
}

/* Slim, flat cards for the place-based customer registration flow. */
.customer-place-flow .current-place-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    margin-bottom: 0.75rem;
    padding: 0.72rem 0.8rem;
    border-color: #bfded2;
    border-radius: 9px;
    background: linear-gradient(90deg, #fbfefd, #f3fbf7);
    box-shadow: none;
}

.customer-place-flow .current-place-strip > div:first-child {
    min-width: 0;
}

.customer-place-flow .current-place-strip h2 {
    margin: 0.12rem 0;
    color: #123f34;
    font-size: 1rem;
    line-height: 1.25;
}

.customer-place-flow .current-place-strip p {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
}

.customer-place-flow .current-place-strip .section-kicker {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 0.58rem;
    letter-spacing: 0.09em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-place-flow .current-place-strip__status {
    display: grid;
    min-width: 112px;
    justify-items: end;
    gap: 0.2rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid #c4e4d7;
    border-radius: 8px;
    background: #eaf8f1;
    white-space: nowrap;
}

.customer-place-flow .current-place-strip__status .status-badge {
    padding: 0;
    border: 0;
    color: #17704a;
    background: transparent;
    font-size: 0.7rem;
}

.customer-place-flow .current-place-strip__status strong {
    color: #315d4b;
    font-size: 0.7rem;
    font-weight: 650;
}

.customer-place-flow .current-place-strip > .status-badge {
    align-self: center;
    justify-self: end;
    padding: 0.35rem 0.55rem;
    border: 1px solid #b7ddce;
    border-radius: 999px;
    color: #176342;
    background: #eaf8f1;
    font-size: 0.7rem;
    font-weight: 750;
    white-space: nowrap;
}

.customer-place-flow .place-entry-card,
.customer-place-flow .report-destination-card {
    min-height: 82px;
    padding: 0.8rem 0.9rem;
    border-radius: 10px;
    box-shadow: none;
}

.customer-place-flow .report-destination-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
}

.customer-place-flow .report-destination-card {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 0.75rem;
    row-gap: 0.12rem;
    align-content: center;
    align-items: center;
    text-align: left;
}

.customer-place-flow .report-destination-card__icon {
    grid-column: 1;
    grid-row: 1 / 3;
}

.customer-place-flow .report-destination-card > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    color: var(--blue-900);
    font-size: 0.9rem;
    line-height: 1.25;
}

.customer-place-flow .report-destination-card > span:last-child {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.35;
}

.customer-place-flow .place-entry-card:hover,
.customer-place-flow .report-destination-card:hover {
    transform: none;
    box-shadow: none;
}

.customer-place-flow .place-entry-card__icon,
.customer-place-flow .report-destination-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    box-shadow: none;
    font-size: 0.95rem;
}

.customer-place-flow .registration-flow-banner,
.customer-place-flow .place-workspace,
.customer-place-flow .place-field-group,
.customer-place-flow .place-selected-card,
.customer-place-flow .registration-accordion,
.customer-place-flow .draft-reminder {
    border-radius: 10px;
    box-shadow: none;
}

.customer-number-chain {
    display: flex;
    gap: 0.45rem;
    align-items: center;
    margin: 0 0 0.65rem;
    padding: 0.4rem 0.1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.customer-number-chain__item {
    display: inline-grid;
    place-items: center;
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border: 2px solid var(--blue-600);
    border-radius: 50%;
    color: var(--blue-700);
    background: var(--white);
    font-size: 0.78rem;
    font-weight: 900;
    text-decoration: none;
}

.customer-number-chain__item.is-complete {
    color: var(--white);
    background: var(--blue-600);
}

.customer-number-chain__item.is-draft {
    border-style: dashed;
}

.customer-number-chain__item.is-current {
    border-color: var(--blue-800);
    color: var(--white);
    background: var(--blue-800);
    box-shadow: 0 0 0 4px var(--blue-100);
}

.customer-place-flow .registration-flow-banner {
    margin-bottom: 0.8rem;
    padding: 0.85rem;
}

.customer-place-flow .draft-reminder {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.6rem;
    padding: 0.38rem 0.55rem;
    min-height: 42px;
}

.customer-place-flow .draft-reminder > i {
    font-size: 1rem;
    text-align: center;
}

.customer-place-flow .draft-reminder > div {
    flex: 0 0 auto;
    min-width: 155px;
    gap: 0;
}

.customer-place-flow .draft-reminder strong {
    font-size: 0.84rem;
    line-height: 1.2;
}

.customer-place-flow .draft-reminder span {
    font-size: 0.7rem;
    line-height: 1.25;
}

.customer-place-flow .draft-reminder__links {
    display: flex !important;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}

.customer-place-flow .draft-reminder__links a {
    padding: 0.22rem 0.42rem;
    border-radius: 6px;
    font-size: 0.68rem;
    line-height: 1.1;
}

.draft-reminder__item {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e4c879;
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}

.customer-place-flow .draft-reminder__item > a {
    border: 0;
    border-radius: 0;
}

.draft-reminder__item form {
    display: flex;
    margin: 0;
}

.draft-reminder__item button {
    min-width: 30px;
    padding: 0 0.42rem;
    border: 0;
    border-left: 1px solid #efd99d;
    color: #a33131;
    background: #fff8f6;
    cursor: pointer;
}

.customer-place-flow .place-workspace {
    padding: 0.8rem;
}

.place-entry-card--managed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0;
    overflow: hidden;
}

.place-entry-card__main {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.8rem;
    align-items: center;
    min-width: 0;
    padding: 0.8rem;
    color: inherit;
    text-decoration: none;
}

.place-entry-card__main > span:nth-child(2) {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.place-entry-card__edit {
    display: grid;
    gap: 0.2rem;
    place-content: center;
    min-width: 64px;
    padding: 0.6rem;
    border-left: 1px solid var(--gray-200);
    color: var(--blue-700);
    background: var(--blue-50);
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
}

.place-entry-card--select {
    display: block;
    padding: 0;
}

.place-entry-card--select > button {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
    width: 100%;
    padding: 0.8rem;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.place-entry-card--select > button > span:nth-child(2) {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.place-entry-menu--scroll {
    max-height: 360px;
    padding-right: 0.3rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.place-entry-menu--scroll::-webkit-scrollbar {
    width: 7px;
}

.place-entry-menu--scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--gray-300);
}

.place-entry-menu--scroll::-webkit-scrollbar-track {
    background: transparent;
}

.customer-place-flow .place-workspace__header {
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
}

.customer-place-flow .place-field-group {
    margin-bottom: 0.65rem;
    padding: 0.75rem;
}

.customer-place-flow .place-field-group__heading {
    margin-bottom: 0.65rem;
}

.customer-place-flow .registration-accordion {
    margin-bottom: 0.6rem;
}

.active-trip-flow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.active-trip-flow-actions--single {
    grid-template-columns: minmax(0, 1fr);
}

.active-trip-flow-actions--location-menu {
    gap: 12px;
}

.active-trip-flow-actions--location-menu .active-trip-flow-action {
    min-height: 58px;
    grid-template-columns: 34px minmax(0, 1fr) 16px;
    gap: 9px;
    padding: 9px 11px;
    border-color: #cbd9ec;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(20, 58, 112, .05);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}

.active-trip-flow-actions--location-menu .active-trip-flow-action:hover,
.active-trip-flow-actions--location-menu .active-trip-flow-action:focus-visible {
    border-color: #75a4ed;
    background: #f7faff;
    box-shadow: 0 8px 20px rgba(36, 104, 216, .11);
    transform: translateY(-1px);
    outline: none;
}

.active-trip-flow-actions--location-menu .active-trip-flow-action__icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    font-size: .86rem;
    box-shadow: 0 3px 8px rgba(36, 104, 216, .16);
}

.active-trip-flow-actions--location-menu .active-trip-flow-action strong {
    font-size: .94rem;
    line-height: 1.18;
}

.active-trip-flow-actions--location-menu .active-trip-flow-action small {
    margin-top: 2px;
    font-size: .76rem;
    line-height: 1.38;
}

.active-trip-flow-actions--location-menu .active-trip-flow-action > i:last-child {
    color: #5d79a4;
    font-size: .78rem;
}

.date-range-row {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.date-range-row .form-field {
    min-width: 0;
    margin: 0;
}

.date-range-row input[type="date"] {
    width: 100%;
    min-width: 0;
}

.sale-purchase-editor {
    display: grid;
    gap: 7px;
    margin-bottom: 12px;
}

.sale-purchase-rows {
    display: grid;
    gap: 6px;
}

.sale-purchase-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr);
    align-items: end;
    gap: 7px;
    padding: 7px 30px 9px 0;
    border: 0;
    border-bottom: 1px solid #dce5f1;
    border-radius: 0;
    background: transparent;
}

.sale-purchase-row .form-field {
    min-width: 0;
    margin: 0;
}

.sale-purchase-remove {
    position: absolute;
    top: 3px;
    right: 0;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid #efcaca;
    border-radius: 50%;
    color: #b83b3b;
    background: #fff7f7;
    font-size: .68rem;
    cursor: pointer;
}

.sale-purchase-remove:hover,
.sale-purchase-remove:focus-visible {
    border-color: #d97878;
    color: #8f2020;
    background: #ffeded;
    outline: none;
}

.sale-purchase-row .form-field label {
    font-size: .68rem;
}

.sale-purchase-row .form-field input {
    min-height: 34px;
    padding-bottom: 6px;
    font-size: .82rem;
}

.sale-purchase-editor > [data-add-sale-purchase] {
    width: max-content;
    min-height: 30px;
    padding: .3rem .55rem;
    border-radius: 7px;
    font-size: .69rem;
}

@media (max-width: 480px) {
    .sale-purchase-row {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr);
        gap: 5px;
        padding: 6px 27px 8px 0;
    }
}

.active-trip-flow-action {
    min-width: 0;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #d7e0ed;
    border-radius: 10px;
    background: #fff;
    color: #12213a;
    text-decoration: none;
}

.active-trip-flow-action.is-new {
    background: #f2f7ff;
    border-color: #b9d0f4;
}

button.active-trip-flow-action {
    width: 100%;
    appearance: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

button.active-trip-flow-action.is-selected {
    background: #eef5ff;
    border-color: #2468d8;
    box-shadow: 0 0 0 2px rgba(36, 104, 216, .1);
}

.active-trip-flow-action__icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: #2468d8;
}

.active-trip-flow-action span:nth-child(2) {
    display: grid;
    gap: 3px;
}

.active-trip-flow-action strong,
.active-trip-flow-action small {
    display: block;
}

.active-trip-flow-action strong {
    font-size: .88rem;
    line-height: 1.15;
}

.active-trip-flow-action small {
    color: #66758c;
    line-height: 1.3;
}

.active-trip-location-accordion {
    margin: 14px 0;
}

.current-place-strip--compact {
    min-height: 0;
    padding: 12px 14px;
}

.current-place-strip--compact h2 {
    margin: 2px 0 0;
    font-size: 1rem;
    line-height: 1.2;
}

.current-place-strip__actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.current-place-strip__actions > strong {
    color: #3d6959;
    font-size: .75rem;
    white-space: nowrap;
}

.current-place-strip__actions .secondary-button--small {
    min-height: 32px;
    padding: .35rem .6rem;
    border-radius: 8px;
    font-size: .72rem;
}

#new-customer-form {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e0e6ef;
    scroll-margin-top: 90px;
}

.place-edit-registration-form .form-field--wide:last-child {
    margin-bottom: 18px;
}

.place-edit-registration-form .registration-accordion__body > .form-actions {
    position: static;
    width: 100%;
    clear: both;
    margin-top: 10px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f1;
}

.place-edit-registration-form .registration-accordion__body > .form-actions .login-button {
    position: static;
    width: 100%;
    justify-content: center;
}

@media (max-width: 640px) {
    .active-trip-flow-actions {
        grid-template-columns: 1fr 1fr;
        gap: 7px;
    }

    .active-trip-flow-actions--single {
        grid-template-columns: minmax(0, 1fr);
    }

    .active-trip-flow-actions--location-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .active-trip-flow-actions--location-menu .active-trip-flow-action {
        min-height: 52px;
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px;
        padding: 7px 8px;
        border-radius: 10px;
        box-shadow: 0 2px 7px rgba(20, 58, 112, .04);
    }

    .active-trip-flow-actions--location-menu .active-trip-flow-action > i:last-child {
        display: none;
    }

    .active-trip-flow-actions--location-menu .active-trip-flow-action__icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        font-size: .72rem;
        box-shadow: none;
    }

    .active-trip-flow-actions--location-menu .active-trip-flow-action strong {
        font-size: .78rem;
        line-height: 1.12;
    }

    .active-trip-flow-actions--location-menu .active-trip-flow-action small {
        margin-top: 1px;
        font-size: .68rem;
        line-height: 1.25;
    }

    .active-trip-flow-action {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 7px;
        padding: 7px 8px;
        border-radius: 9px;
    }

    .active-trip-flow-action > i:last-child {
        display: none;
    }

    .active-trip-flow-action__icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
    }

    .active-trip-flow-action strong {
        font-size: .78rem;
    }

    .active-trip-flow-action small {
        font-size: .72rem;
    }
}

.customer-place-flow .visit-arrival-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, 280px);
    gap: 14px;
    align-items: end;
    margin-bottom: 0.6rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    background: var(--white);
}

.customer-place-flow .visit-arrival-field > div:first-child {
    display: grid;
    gap: 3px;
}

.customer-place-flow .visit-arrival-field strong {
    color: var(--gray-900);
}

.customer-place-flow .visit-arrival-field small {
    color: var(--gray-500);
}

.customer-place-flow .registration-accordion__summary {
    min-height: 58px;
    padding: 0.65rem 0.8rem;
}

.customer-place-flow .registration-accordion__number {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    border-radius: 8px;
}

.customer-place-flow .registration-accordion__body {
    padding: 0.8rem;
}

.customer-place-flow .place-selected-card__header,
.customer-place-flow .place-selected-card__content {
    padding: 0.75rem;
}

.customer-place-flow .flow-decision-dialog {
    border-radius: 12px;
    box-shadow: 0 16px 45px rgba(8, 21, 47, 0.22);
}

@media (max-width: 680px) {
    .customer-place-flow .place-entry-menu--scroll {
        --place-menu-card-height: 92px;
        height: calc((var(--place-menu-card-height) * 2) + 0.55rem);
        max-height: none;
        gap: 0.55rem;
        padding-right: 0.2rem;
    }

    .customer-place-flow .place-entry-menu--scroll .place-entry-card {
        height: var(--place-menu-card-height);
        min-height: var(--place-menu-card-height);
        padding: 0.6rem 0.65rem;
    }

    .customer-place-flow .place-entry-menu--scroll .place-entry-card--select {
        padding: 0;
    }

    .customer-place-flow .place-entry-menu--scroll .place-entry-card--select > button {
        height: 100%;
        padding: 0.6rem 0.65rem;
        gap: 0.6rem;
    }

    .customer-place-flow .place-entry-menu--scroll .place-entry-card__icon {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 0.88rem;
    }

    .customer-place-flow .place-entry-menu--scroll .place-entry-card strong {
        font-size: 0.9rem;
        line-height: 1.15;
    }

    .customer-place-flow .place-entry-menu--scroll .place-entry-card small {
        display: -webkit-box;
        overflow: hidden;
        font-size: 0.76rem;
        line-height: 1.25;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .customer-place-flow .draft-reminder {
        display: flex;
        align-items: center;
        overflow-x: auto;
    }

    .customer-place-flow .draft-reminder__links {
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin-left: 0;
    }

    .customer-place-flow .draft-reminder > div {
        min-width: auto;
    }

    .customer-place-flow .draft-reminder > div > span {
        display: none;
    }

    .customer-place-flow .visit-arrival-field {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .customer-place-flow .current-place-strip {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .customer-place-flow .current-place-strip__status {
        display: grid;
        min-width: 102px;
        justify-items: end;
        gap: 0.15rem;
        padding: 0.42rem 0.5rem;
    }

    .customer-place-flow .report-destination-grid {
        grid-template-columns: 1fr;
    }

    .customer-place-flow .report-destination-card {
        min-height: 72px;
    }
}

@media (max-width: 440px) {
    .customer-place-flow .current-place-strip {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
    }

    .customer-place-flow .current-place-strip__status {
        display: grid;
        justify-items: end;
    }
}

.customer-place-flow .activity-action-form > .form-actions {
    display: grid;
    grid-template-columns: minmax(78px, 0.55fr) minmax(105px, 0.75fr) minmax(95px, 0.65fr) minmax(135px, 0.9fr);
    gap: 0.45rem;
    align-items: stretch;
    justify-content: end;
}

.customer-place-flow .activity-action-form > .form-actions > a,
.customer-place-flow .activity-action-form > .form-actions > button {
    display: inline-flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
    margin: 0;
    padding: 0.45rem 0.65rem;
    border-radius: 9px;
    font-size: 0.8rem;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .customer-place-flow .activity-action-form > .form-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
            "back leave"
            "end save";
    }

    .customer-place-flow .activity-action-form > .form-actions > :nth-child(1) {
        grid-area: back;
    }

    .customer-place-flow .activity-action-form > .form-actions > :nth-child(2) {
        grid-area: leave;
    }

    .customer-place-flow .activity-action-form > .form-actions > :nth-child(3) {
        grid-area: end;
    }

    .customer-place-flow .activity-action-form > .form-actions > :nth-child(4) {
        grid-area: save;
    }
}

@media (max-width: 420px) {
    .customer-place-flow .activity-action-form > .form-actions {
        grid-template-columns: 1fr;
        grid-template-areas:
            "save"
            "leave"
            "end"
            "back";
    }
}

.customer-phone-match {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    margin-top: 0.45rem;
    padding: 0.6rem 0.65rem;
    border: 1px solid #efc06d;
    border-radius: 9px;
    color: #72520e;
    background: #fff8e8;
    line-height: 1.35;
}

.customer-phone-match[hidden] {
    display: none;
}

.customer-phone-match > i {
    margin-top: 0.12rem;
    color: #c47a00;
}

.customer-phone-match > span {
    display: grid;
    gap: 0.18rem;
}

.customer-phone-match strong,
.customer-phone-match small {
    display: block;
}

.customer-phone-match small {
    font-size: 0.72rem;
}

.customer-phone-match button {
    justify-self: start;
    margin-top: 0.25rem;
    padding: 0;
    border: 0;
    color: var(--blue-700);
    background: transparent;
    font-size: 0.72rem;
    font-weight: 750;
    cursor: pointer;
    text-decoration: underline;
}

.customer-place-flow input.has-registered-match {
    border-color: #d99a2b;
    background: #fffdf7;
}

.reports-menu-panel .report-destination-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.reports-menu-panel .report-destination-card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto auto;
    min-height: 78px;
    column-gap: 0.75rem;
    row-gap: 0.12rem;
    align-content: center;
    padding: 0.75rem 2.4rem 0.75rem 0.8rem;
    border-radius: 10px;
    box-shadow: none;
    text-align: left;
}

.reports-menu-panel .report-destination-card:hover {
    transform: none;
    border-color: #adc7ee;
    box-shadow: none;
    background: #f9fbff;
}

.reports-menu-panel .report-destination-card__icon {
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 9px;
    box-shadow: none;
    font-size: 0.92rem;
}

.reports-menu-panel .report-destination-card > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    color: var(--blue-900);
    font-size: 0.9rem;
    line-height: 1.25;
}

.reports-menu-panel .report-destination-card > span:last-child {
    display: block;
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
}

.reports-menu-panel .report-destination-card > span:last-child i {
    position: absolute;
    top: 50%;
    right: 0.8rem;
    color: var(--blue-700);
    transform: translateY(-50%);
}

@media (max-width: 720px) {
    .reports-menu-panel .report-destination-grid {
        grid-template-columns: 1fr;
    }

    .reports-menu-panel .report-destination-card {
        min-height: 70px;
    }
}

.active-trip-card {
    align-items: stretch;
    flex-direction: column;
    background: linear-gradient(145deg, #f8fafd, #eef5ff);
}

.active-trip-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.trip-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.trip-summary-grid div {
    min-width: 0;
    min-height: 72px;
    display: grid;
    align-content: center;
    gap: 5px;
    padding: 12px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.8);
}

.trip-summary-grid span {
    min-width: 0;
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trip-summary-grid strong {
    min-width: 0;
    color: var(--gray-900);
    font-size: 1.05rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.retailer-list {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid rgba(90, 114, 151, 0.12);
}

.sales-visit-stack {
    display: grid;
    gap: 12px;
}

.sales-visit-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 14px;
    background: #f8fafd;
}

.sales-visit-card--taxi {
    background: linear-gradient(145deg, #fffdf6, #f8fafd);
}

.sales-visit-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.sales-visit-card__header h3 {
    margin: 7px 0 0;
    color: var(--blue-900);
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}

.sales-visit-card__time {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border-radius: 999px;
    color: var(--gray-700);
    background: var(--white);
    font-size: 0.84rem;
    font-weight: 850;
    white-space: nowrap;
}

.sales-visit-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.sales-visit-details div {
    min-width: 0;
    min-height: 58px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(90, 114, 151, 0.1);
    border-radius: 12px;
    background: var(--white);
}

.sales-visit-details dt {
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sales-visit-details dd {
    min-width: 0;
    margin: 0;
    color: var(--gray-900);
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.sales-visit-detail--wide {
    grid-column: span 2;
}

.assignment-form {
    gap: 18px;
}

.assignment-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    gap: 16px;
    align-items: start;
}

.assignment-staff-panel,
.assignment-permissions-panel {
    display: grid;
    gap: 9px;
    padding: 16px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 14px;
    background: #f8fafd;
}

.assignment-staff-panel label,
.assignment-permissions-panel > label {
    color: var(--gray-700);
    font-size: 0.86rem;
    font-weight: 800;
}

.assignment-staff-panel select,
.assignment-staff-panel input[type="search"] {
    width: 100%;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-900);
    background: var(--white);
    font: inherit;
}

.form-field input[type="search"] {
    width: 100%;
}

.trip-token-picker {
    overflow: hidden;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 14px;
    background: var(--white);
}

.trip-token-picker__control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
}

.trip-token-picker__control input {
    flex: 1 1 150px;
    min-width: 120px;
    border: 0;
    outline: 0;
    box-shadow: none;
}

.trip-token-picker__tokens { display: flex; flex-wrap: wrap; gap: 6px; }

.trip-token-picker__token {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 10px;
    border-radius: 999px;
    color: var(--blue-800);
    background: rgba(36, 94, 216, 0.11);
    font-size: 0.83rem;
    font-weight: 700;
}

.trip-token-picker__token button { padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }

.trip-token-picker__options {
    display: none;
    max-height: 180px;
    overflow-y: auto;
    border-top: 1px solid rgba(90, 114, 151, 0.12);
}

.trip-token-picker.is-open .trip-token-picker__options { display: grid; }

.trip-token-picker__options button {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0;
    text-align: left;
    cursor: pointer;
    color: var(--gray-800);
    background: var(--white);
}

.trip-token-picker__options button + button {
    border-top: 1px solid rgba(90, 114, 151, 0.09);
}
.trip-token-picker__options button:hover { background: rgba(36, 94, 216, 0.07); }
.trip-token-picker__options i { color: var(--blue-600); }

.permission-list {
    display: grid;
    overflow: hidden;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 12px;
    background: var(--white);
}

.permission-row {
    display: grid;
    grid-template-columns: auto 34px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 58px;
    padding: 10px 12px;
    cursor: pointer;
}

.permission-row + .permission-row {
    border-top: 1px solid rgba(90, 114, 151, 0.1);
}

.permission-row input {
    width: 17px;
    height: 17px;
    min-height: 0;
    accent-color: var(--blue-700);
}

.permission-row__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.permission-row__text {
    display: grid;
    gap: 2px;
}

.permission-row__text strong {
    color: var(--blue-900);
    font-size: 0.95rem;
}

.permission-row__text small {
    color: var(--gray-700);
    line-height: 1.35;
}

.access-pill-list {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.access-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border: 1px solid rgba(36, 94, 216, 0.14);
    border-radius: 999px;
    color: var(--blue-700);
    background: var(--blue-100);
    font-size: 0.78rem;
    font-weight: 800;
}

.vendor-town-picker {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(90, 114, 151, 0.14);
    border-radius: 16px;
    background: #f8fafd;
}

.vendor-town-picker__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.vendor-town-picker__header h2,
.vendor-town-picker__header p {
    margin: 0;
}

.vendor-town-picker__header h2 {
    color: var(--blue-900);
    font-size: 1.08rem;
}

.vendor-town-picker__header p {
    margin-top: 4px;
    color: var(--gray-700);
    font-size: 0.88rem;
}

.vendor-town-picker__search {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vendor-town-picker__search label {
    display: block;
    margin-bottom: 6px;
    color: var(--gray-700);
    font-size: 0.82rem;
    font-weight: 700;
}

.vendor-town-picker__search select {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-900);
    background: var(--white);
    font: inherit;
}

.vendor-town-picker__search select:focus {
    border-color: var(--blue-500);
    outline: 3px solid rgba(36, 94, 216, 0.12);
}

@media (max-width: 720px) {
    .vendor-town-picker__search { grid-template-columns: 1fr; }
}

.vendor-town-picker__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    max-height: 440px;
    overflow-y: auto;
    padding: 2px 5px 2px 2px;
}

.vendor-town-option {
    display: grid;
    grid-template-columns: auto 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 12px;
    background: var(--white);
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.vendor-town-option:hover {
    border-color: rgba(36, 94, 216, 0.34);
    box-shadow: 0 8px 20px rgba(18, 52, 98, 0.08);
    transform: translateY(-1px);
}

.vendor-town-option:has(input:checked) {
    border-color: rgba(36, 94, 216, 0.48);
    background: #f1f6ff;
}

.vendor-town-option input {
    width: 14px;
    height: 14px;
    accent-color: var(--blue-700);
}

.vendor-town-option__icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.vendor-town-option__text {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.vendor-town-option__text strong {
    color: var(--blue-900);
    font-size: 0.92rem;
}

.vendor-town-option__text small {
    overflow: hidden;
    color: var(--gray-600);
    font-size: 0.78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vendor-town-option__primary {
    padding: 4px 8px;
    border-radius: 999px;
    color: #17623b;
    background: #e5f7ed;
    font-size: 0.7rem;
    font-weight: 850;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .vendor-town-picker__list {
        grid-template-columns: 1fr;
    }

    .vendor-town-picker__header {
        align-items: stretch;
        flex-direction: column;
    }

    .vendor-town-picker__header .access-pill {
        width: fit-content;
    }
}

.muted-text {
    color: var(--gray-500);
    font-size: 0.88rem;
}

.is-hidden {
    display: none !important;
}

.report-stat-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.report-stat-grid--below-list {
    margin-top: 14px;
}

.report-stat {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 10px;
    background: #f8fafd;
}

.report-stat span {
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.report-stat strong {
    color: var(--blue-900);
    font-size: 1.08rem;
    line-height: 1;
    white-space: nowrap;
}

.report-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 16px;
}

.report-destination-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
}

.report-destination-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 8px 11px;
    border: 1px solid rgba(90, 114, 151, 0.16);
    border-radius: 8px;
    color: inherit;
    background: var(--white);
    box-shadow: 0 8px 18px rgba(21, 34, 58, 0.05);
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.report-destination-card:hover {
    border-color: rgba(17, 24, 39, 0.22);
    box-shadow: 0 10px 20px rgba(21, 34, 58, 0.08);
    transform: translateY(-1px);
}

.report-destination-card__icon {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 8px;
    color: var(--blue-900);
    background: rgba(14, 165, 233, 0.1);
}

.report-destination-card strong {
    color: var(--gray-900);
    font-size: 0.92rem;
    line-height: 1.2;
}

.report-destination-card > span:last-child {
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 750;
    white-space: nowrap;
}

.report-subnav {
    display: flex;
    justify-content: flex-start;
    margin-top: 12px;
}

.report-mode-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.report-mode-actions--menu {
    margin-top: 12px;
}

.report-mode-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: none;
}

.report-mode-button.is-active {
    border-color: #ff8a00;
    color: #c75a00;
    background: #fff9e9;
}

.report-mode-panel {
    display: grid;
    gap: 8px;
}

.report-filter-form {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.report-search-field {
    min-height: 46px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 13px;
    color: var(--gray-500);
    background: var(--white);
}

.report-search-field input {
    min-width: 0;
    border: 0;
    color: var(--gray-900);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    outline: none;
}

.report-search-field input::placeholder {
    color: #8a96aa;
}

.report-filter-toggle-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.report-filter-toggle {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 13px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 13px;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.report-filter-toggle.is-open {
    border-color: #ff8a00;
    color: #c75a00;
    background: #fff9e9;
}

.report-filter-clear {
    min-width: 72px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 13px;
    color: var(--white);
    background: #172033;
    cursor: pointer;
    font: inherit;
    font-weight: 850;
}

.report-filter-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.report-filter-panel .form-field {
    position: relative;
    gap: 0;
}

.report-filter-panel .form-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.report-filter-panel .report-date-field {
    gap: 5px;
}

.report-filter-panel .report-date-field label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.report-filter-panel .form-field select {
    min-height: 40px;
    border-radius: 12px;
}

.report-filter-panel .form-field input[type="date"] {
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-900);
    background: var(--white);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
}

.report-lookup-button {
    width: 100%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 12px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-900);
    background: var(--white);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    text-align: left;
}

.form-lookup-button {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 13px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-900);
    background: var(--white);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.report-lookup-button.is-empty,
.form-lookup-button.is-empty {
    color: var(--gray-500);
}

.form-lookup-button.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

input.is-duplicate { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; }
.phone-duplicate-message { display:block; margin-top:5px; color:var(--danger); font-weight:700; }

.draft-panel { margin:22px 0; padding:22px; border:1px solid rgba(217,119,6,.24); border-radius:20px; background:linear-gradient(145deg,rgba(255,251,235,.98),rgba(255,255,255,.98)); box-shadow:0 14px 34px rgba(146,64,14,.08); }
.draft-panel__heading { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.draft-panel__heading h2 { margin:2px 0 3px; color:var(--gray-900); }
.draft-panel__heading p { margin:0; color:var(--gray-600); }
.draft-panel__heading-icon { display:grid; place-items:center; width:48px; height:48px; flex:0 0 48px; border-radius:15px; color:#b45309; background:#fef3c7; font-size:1.15rem; }
.draft-panel__count { margin-left:auto; padding:7px 11px; border-radius:999px; color:#92400e; background:#fde68a; font-size:.78rem; font-weight:800; white-space:nowrap; }
.draft-list { display:grid; gap:11px; }
.draft-card { display:flex; align-items:center; gap:14px; padding:15px; border:1px solid rgba(217,119,6,.17); border-radius:16px; background:#fff; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.draft-card:hover { transform:translateY(-2px); border-color:rgba(217,119,6,.38); box-shadow:0 12px 25px rgba(146,64,14,.09); }
.draft-card__icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:13px; color:#b45309; background:#fff7ed; }
.draft-card__content { min-width:0; flex:1; }
.draft-card__title-row { display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.draft-card__title-row h3 { margin:0; overflow:hidden; color:var(--gray-900); font-size:.98rem; text-overflow:ellipsis; white-space:nowrap; }
.draft-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 8px; border-radius:999px; color:#92400e; background:#fef3c7; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.draft-badge i { font-size:.42rem; }
.draft-card__meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--gray-600); font-size:.78rem; }
.draft-card__meta span { display:inline-flex; align-items:center; gap:6px; }
.draft-card__meta i { width:12px; color:#d97706; text-align:center; }
.draft-card__continue { display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border-radius:12px; color:#fff; background:#b45309; font-size:.82rem; font-weight:800; text-decoration:none; transition:background .18s ease,transform .18s ease; }
.draft-card__continue:hover { color:#fff; background:#92400e; transform:translateX(2px); }
@media (max-width:640px) {
    .draft-panel { padding:16px; border-radius:17px; }
    .draft-panel__heading { align-items:flex-start; flex-wrap:wrap; }
    .draft-panel__count { margin-left:62px; }
    .draft-card { align-items:flex-start; flex-wrap:wrap; }
    .draft-card__content { width:calc(100% - 58px); }
    .draft-card__title-row { align-items:flex-start; flex-direction:column; }
    .draft-card__title-row h3 { max-width:100%; }
    .draft-card__continue { width:100%; justify-content:center; }
}

/* Compact collapsible draft tray */
.draft-panel { margin:12px 0; padding:0; border:1px solid var(--gray-200); border-radius:10px; background:#fff; box-shadow:none; overflow:hidden; }
.draft-panel__toggle { display:flex; align-items:center; gap:9px; min-height:38px; padding:8px 11px; color:var(--gray-700); background:var(--gray-50); font-size:.8rem; cursor:pointer; list-style:none; user-select:none; }
.draft-panel__toggle::-webkit-details-marker { display:none; }
.draft-panel__toggle > i:first-child { color:#d97706; }
.draft-panel__toggle strong { font-size:.82rem; }
.draft-panel__toggle .draft-panel__count { margin-left:2px; min-width:21px; padding:2px 6px; color:#92400e; background:#fef3c7; text-align:center; font-size:.68rem; }
.draft-panel__chevron { margin-left:auto; color:var(--gray-500); transition:transform .18s ease; }
.draft-panel[open] .draft-panel__chevron { transform:rotate(180deg); }
.draft-panel .draft-list { gap:0; padding:0; border-top:1px solid var(--gray-200); }
.draft-panel .draft-card { gap:10px; padding:9px 11px; border:0; border-bottom:1px solid var(--gray-100); border-radius:0; box-shadow:none; }
.draft-panel .draft-card:last-child { border-bottom:0; }
.draft-panel .draft-card:hover { transform:none; border-color:var(--gray-100); background:#fffbeb; box-shadow:none; }
.draft-panel .draft-card__title-row { gap:7px; margin-bottom:3px; }
.draft-panel .draft-card__title-row h3 { font-size:.82rem; }
.draft-panel .draft-badge { padding:2px 5px; font-size:.58rem; }
.draft-panel .draft-card__meta { gap:4px 10px; font-size:.68rem; }
.draft-panel .draft-card__meta span + span::before { content:'·'; margin-right:6px; color:var(--gray-400); }
.draft-panel .draft-card__continue { gap:6px; padding:6px 9px; border-radius:7px; font-size:.7rem; }
@media (max-width:640px) {
    .draft-panel { padding:0; border-radius:10px; }
    .draft-panel .draft-card { align-items:center; flex-wrap:nowrap; }
    .draft-panel .draft-card__content { width:auto; }
    .draft-panel .draft-card__title-row { align-items:center; flex-direction:row; }
    .draft-panel .draft-card__continue { width:auto; flex:0 0 auto; }
}

.report-lookup-button i,
.form-lookup-button i {
    color: var(--gray-700);
    font-size: 0.88rem;
}

.report-lookup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    align-items: end;
    padding: 14px;
    background: rgba(7, 17, 38, 0.42);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.report-lookup-dialog {
    width: min(520px, 100%);
    max-height: min(680px, calc(100vh - 28px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 30px 90px rgba(7, 17, 38, 0.3);
}

.report-lookup-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(90, 114, 151, 0.12);
}

.report-lookup-dialog__header h2 {
    margin: 0;
    color: var(--gray-900);
    font-size: 1.08rem;
}

.report-lookup-dialog__close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(90, 114, 151, 0.16);
    border-radius: 999px;
    color: var(--gray-700);
    background: var(--white);
    cursor: pointer;
}

.report-lookup-dialog__list {
    display: grid;
    gap: 2px;
    overflow: auto;
    padding: 8px;
}
.report-lookup-dialog:has(.report-lookup-dialog__search) { grid-template-rows:auto auto minmax(0,1fr); }
.report-lookup-dialog__search { display:flex;align-items:center;gap:9px;margin:8px 10px 2px;padding:0 11px;border:1px solid #d7e1ee;border-radius:10px;background:#f8fafc; }
.report-lookup-dialog__search > i { color:#718096;font-size:.82rem; }
.report-lookup-dialog__search input { width:100%;min-height:40px;padding:7px 0;border:0;outline:0;background:transparent;font:inherit;font-size:.86rem; }
.report-lookup-dialog__search:focus-within { border-color:#245ed8;box-shadow:0 0 0 3px rgba(36,94,216,.12);background:#fff; }

.report-lookup-dialog__option {
    width: 100%;
    min-height: 46px;
    padding: 11px 12px;
    border: 0;
    border-radius: 12px;
    color: var(--gray-800);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1.28;
    text-align: left;
}

.report-lookup-dialog__option.is-selected {
    color: var(--blue-800);
    background: rgba(36, 94, 216, 0.1);
}

.report-lookup-dialog__option:hover,
.report-lookup-dialog__option:focus-visible,
.report-lookup-dialog__close:hover,
.report-lookup-dialog__close:focus-visible {
    outline: none;
    background: rgba(36, 94, 216, 0.08);
}

.report-action-button {
    width: auto;
    min-width: 132px;
    margin-top: 0;
    text-decoration: none;
}

.table-wrap {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.activity-log-panel {
    max-width: 1120px;
}

.activity-stat-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.activity-filter-form {
    display: grid;
    gap: 10px;
    align-items: stretch;
}

.filter-search {
    position: relative;
    min-height: 56px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border: 1px solid rgba(90, 114, 151, 0.16);
    border-radius: 14px;
    background: var(--white);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.filter-search i {
    color: var(--gray-500);
    font-size: 1rem;
}

.filter-search label,
.filter-panel .form-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-search input {
    width: 100%;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    color: var(--gray-900);
    box-shadow: none;
}

.filter-search input::placeholder {
    color: #7a879d;
}

.filter-toggle {
    width: 100%;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(90, 114, 151, 0.16);
    border-radius: 14px;
    color: var(--gray-700);
    background: var(--white);
    font: inherit;
    font-weight: 850;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease;
}

.filter-toggle:hover {
    transform: translateY(-1px);
    border-color: rgba(36, 94, 216, 0.28);
    box-shadow: 0 12px 24px rgba(36, 94, 216, 0.09);
}

.filter-toggle.is-open {
    border-color: #ff8a00;
    color: #c75a00;
    background: #fff8e8;
    box-shadow: 0 10px 22px rgba(255, 138, 0, 0.12);
}

.filter-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.filter-panel .form-field {
    position: relative;
    min-width: 0;
    gap: 0;
}

.filter-panel .form-field input,
.filter-panel .form-field select {
    min-height: 44px;
    border-radius: 13px;
}

.activity-filter-actions {
    align-self: stretch;
    justify-content: flex-start;
    margin: 0;
}

.activity-filter-actions .secondary-button {
    width: 100%;
    min-height: 44px;
    margin: 0;
}

.activity-result-count {
    margin-top: 16px;
    color: var(--gray-500);
    font-size: 0.9rem;
    font-weight: 800;
}

.activity-log-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.activity-card {
    display: grid;
    gap: 14px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 16px;
    background: #f8fafd;
}

.activity-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.activity-card__header > div {
    min-width: 0;
}

.activity-card__header h3 {
    margin: 5px 0 0;
    color: var(--blue-900);
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.activity-card__summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.activity-card__summary div {
    min-height: 66px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 10px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 12px;
    background: var(--white);
}

.activity-card__summary span,
.activity-visit-card dt {
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.activity-card__summary strong {
    color: var(--gray-900);
    font-size: 0.94rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.activity-card__details {
    padding-top: 12px;
    border-top: 1px solid rgba(90, 114, 151, 0.12);
}

.activity-card__details summary {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--blue-700);
    cursor: pointer;
    font-weight: 850;
    list-style: none;
}

.activity-card__details summary::-webkit-details-marker {
    display: none;
}

.activity-card__details summary i {
    transition: transform 180ms ease;
}

.activity-card__details[open] summary i {
    transform: rotate(180deg);
}

.activity-visit-list {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.activity-visit-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto;
    gap: 12px;
    align-items: start;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 12px;
    background: var(--white);
}

.activity-visit-card h4 {
    margin: 8px 0 4px;
    color: var(--blue-900);
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.activity-visit-card p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.88rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.activity-visit-card dl {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.activity-visit-card dd {
    margin: 3px 0 0;
    color: var(--gray-900);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 1340px;
}

.data-table--compact {
    min-width: 520px;
}

.apprentice-count-button {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 0;
    border: 0;
    color: var(--blue-700);
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.apprentice-count-button strong { font-size: 1.05rem; }
.apprentice-count-button span { font-weight: 750; }
.apprentice-list-dialog { max-width: 560px; }
.apprentice-list-option { cursor: default; }

.data-table--sales-trip {
    min-width: 920px;
}

.data-table--retailers {
    min-width: 980px;
}

.data-table--reports {
    min-width: 980px;
}

.data-table--report-retailers {
    min-width: 640px;
}

.data-table--attendance {
    min-width: 760px;
}

.data-table .feedback-note-cell {
    width: 150px;
    max-width: 150px;
}

.data-table td.feedback-note-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-table th,
.data-table td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(90, 114, 151, 0.12);
    text-align: left;
    vertical-align: middle;
}

.data-table .compact-location-cell {
    width: 88px;
    min-width: 88px;
    max-width: 88px;
    padding-right: 20px;
    text-align: center;
}

.data-table .compact-location-cell + th,
.data-table .compact-location-cell + td {
    padding-left: 20px;
}

.vendor-customer-report-table th,
.vendor-customer-report-table td {
    text-align: left;
}

.vendor-customer-report-table th.compact-location-cell,
.vendor-customer-report-table td.compact-location-cell {
    text-align: center;
}

.compact-location-link {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    color: var(--blue-700);
    background: rgba(33, 91, 168, 0.1);
    text-decoration: none;
}

.compact-location-link:hover,
.compact-location-link:focus-visible {
    color: #fff;
    background: var(--blue-700);
    outline: none;
}

.data-table th {
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.data-table td {
    color: var(--gray-700);
    font-size: 0.92rem;
}

[data-clickable-listing] {
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.data-table tr[data-clickable-listing]:hover,
.data-table tr[data-clickable-listing]:focus-visible {
    background: rgba(33, 91, 168, 0.06);
    outline: none;
}

.activity-visit-card[data-clickable-listing]:hover,
.activity-visit-card[data-clickable-listing]:focus-visible {
    border-color: rgba(33, 91, 168, 0.3);
    box-shadow: 0 8px 20px rgba(18, 48, 88, 0.08);
    outline: none;
}

.attendance-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.attendance-service-card,
.attendance-self-card,
.attendance-location-card {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    padding: 14px;
    border: 1px solid rgba(90, 114, 151, 0.14);
    border-radius: 12px;
    background: rgba(245, 248, 253, 0.78);
}

.attendance-service-card strong {
    color: var(--blue-900);
    font-size: 1rem;
}

.attendance-service-card small,
.attendance-self-card p {
    color: var(--gray-700);
    line-height: 1.4;
}

.attendance-search-field {
    margin-bottom: 10px;
}

.attendance-live-message {
    min-height: 22px;
    margin: 8px 0;
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 750;
}

.attendance-live-message.success {
    color: #137247;
}

.attendance-live-message.error {
    color: #b42318;
}

.attendance-location-grid,
.attendance-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.attendance-location-stat,
.attendance-summary-strip span {
    display: grid;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 10px;
    background: var(--white);
}

.attendance-location-stat span,
.attendance-summary-strip span {
    color: var(--gray-500);
    font-size: 0.78rem;
    font-weight: 800;
}

.attendance-location-stat strong,
.attendance-summary-strip strong {
    color: var(--blue-900);
    font-size: 0.98rem;
    overflow-wrap: anywhere;
}

.attendance-location-controls {
    margin-top: 12px;
}

.attendance-location-actions {
    align-self: end;
}

.attendance-location-result dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.attendance-location-result dl div {
    padding: 10px;
    border-radius: 10px;
    background: var(--white);
}

.attendance-location-result dt {
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 800;
}

.attendance-location-result dd {
    margin: 3px 0 0;
    color: var(--gray-900);
    font-weight: 800;
}

.checkbox-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 750;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    min-height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: 0.76rem;
    font-weight: 850;
}

.status-pill--present {
    color: #137247;
    background: #e9f8ef;
}

.status-pill--late {
    color: #9a5b00;
    background: #fff4dc;
}

.status-pill--absent {
    color: #b42318;
    background: #fee9e7;
}

.status-pill--excused {
    color: var(--blue-800);
    background: var(--blue-100);
}

.table-avatar {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 999px;
    color: var(--blue-700);
    background: linear-gradient(145deg, #edf4ff, #dceaff);
}

.table-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.table-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.table-actions form {
    display: inline-flex;
    margin: 0;
}

.retailer-heading-actions {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.retailer-profile-title {
    min-width: 0;
}

.retailer-profile-title h1,
.retailer-profile-title p {
    overflow-wrap: anywhere;
}

.retailer-profile-grid dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.retailer-profile-grid dl > div {
    min-height: 70px;
    padding: 12px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 14px;
    background: #f8fafd;
}

.retailer-profile-grid .detail-item--wide {
    grid-column: span 2;
}

.followup-profile-compact {
    padding-block: 18px;
}

.followup-profile-compact .management-heading {
    margin-bottom: 14px;
}

.followup-profile-compact .management-heading h1 {
    font-size: clamp(1.35rem, 2vw, 1.8rem);
}

.followup-profile-compact .retailer-profile-grid dl {
    gap: 10px;
}

.followup-profile-compact .retailer-profile-grid dl > div {
    min-height: 0;
    padding: 10px 12px;
}

.capital-town-marker {
    color: #d92d20;
    font-weight: 900;
}

.capital-town-toggle {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: 1px solid rgba(90, 114, 151, 0.2);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
}

.capital-town-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--blue-700);
}

.action-button {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid rgba(36, 94, 216, 0.15);
    border-radius: 999px;
    color: var(--blue-700);
    background: var(--blue-100);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.action-button.is-danger {
    border-color: rgba(165, 45, 45, 0.16);
    color: #9b2f2f;
    background: #fff0f0;
}

.media-file-link {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border: 1px solid rgba(36, 94, 216, 0.14);
    border-radius: 10px;
    color: var(--blue-700);
    background: var(--blue-100);
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.detail-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: start;
}

.profile-photo--small {
    width: 86px;
    height: 86px;
    margin: 0;
    font-size: 2rem;
}

.detail-grid dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.detail-grid dt {
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.detail-grid dd {
    margin: 4px 0 0;
    color: var(--gray-900);
    font-weight: 750;
}

.detail-grid--plain {
    grid-template-columns: 1fr;
}

.customer-place-flow .detail-grid--plain {
    gap: 12px;
    margin-top: 14px;
}

.customer-place-flow .detail-grid--plain dl {
    padding: 14px;
    border: 1px solid var(--gray-200);
    border-radius: 14px;
    background: var(--white);
}

.draft-detail-row {
    display: grid;
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.2fr);
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--gray-100);
}

.draft-detail-row:last-child {
    border-bottom: 0;
}

.draft-detail-row span {
    color: var(--gray-500);
    font-size: 0.82rem;
    font-weight: 700;
}

.draft-detail-row strong {
    overflow-wrap: anywhere;
}

.retailer-visit-stack {
    display: grid;
    gap: 14px;
}

.retailer-visit-panel.followup-detail-only {
    max-width: 560px;
    margin-inline: auto;
    padding: 10px;
}

.followup-detail-only .retailer-visit-card {
    margin: 0;
}

.retailer-visit-card {
    position: relative;
    display: grid;
    gap: 14px;
    padding: 16px 16px 16px 18px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff, #f8fafd);
    box-shadow: 0 10px 24px rgba(25, 62, 120, 0.06);
}

.retailer-visit-card__header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: flex-start;
    gap: 12px;
}

.retailer-visit-card__marker {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: var(--blue-800);
    background: var(--blue-100);
    font-size: 0.85rem;
    font-weight: 900;
}

.retailer-visit-card__header h3 {
    margin: 7px 0 3px;
    color: var(--blue-900);
    font-size: 1.05rem;
}

.retailer-visit-card__header p {
    margin: 0;
    color: var(--gray-700);
    font-size: 0.9rem;
    line-height: 1.35;
}

.retailer-visit-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.retailer-visit-summary div,
.retailer-visit-notes div {
    min-width: 0;
    padding: 11px 12px;
    border: 1px solid rgba(90, 114, 151, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
}

.retailer-visit-summary dt,
.retailer-visit-notes span {
    display: block;
    color: var(--gray-500);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.retailer-visit-summary dd {
    margin: 4px 0 0;
    color: var(--gray-900);
    font-weight: 800;
    overflow-wrap: anywhere;
}

.retailer-visit-notes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.visit-note-preview {
    display: -webkit-box;
    width: 100%;
    margin: 5px 0 0;
    padding: 8px 10px;
    border: 1px solid rgba(36, 94, 216, 0.14);
    border-radius: 10px;
    color: var(--gray-700);
    background: #f8fbff;
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.visit-note-preview:hover,
.visit-note-preview:focus-visible {
    border-color: rgba(36, 94, 216, 0.34);
    color: var(--blue-800);
    background: #eef5ff;
    outline: 0;
}

.notice-backdrop .confirm-dialog__body p {
    white-space: pre-wrap;
}

.retailer-visit-notes p {
    min-height: 22px;
    margin: 5px 0 0;
    color: var(--gray-900);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.retailer-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.visit-media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.visit-media-item {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(90, 114, 151, 0.14);
    border-radius: 16px;
    background: var(--white);
}

.visit-media-item span {
    color: var(--gray-700);
    font-size: 0.86rem;
    font-weight: 750;
}

.visit-media-item img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    object-fit: cover;
}

.visit-media-item p {
    margin: 0;
    color: var(--gray-600);
}

.media-empty-state {
    min-height: 160px;
    display: grid;
    place-items: center;
    padding: 18px;
    border: 1px dashed rgba(90, 114, 151, 0.2);
    border-radius: 14px;
    color: var(--gray-500);
    background: #f8fafd;
    font-weight: 750;
    text-align: center;
}

@media (max-width: 760px) {
    .visit-media-grid {
        grid-template-columns: 1fr;
    }
}

.retailer-media-item {
    min-height: 190px;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 14px;
    background: var(--white);
}

.retailer-media-item span {
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.retailer-media-item img,
.retailer-media-item video {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    background: #edf4ff;
    object-fit: cover;
}

.retailer-media-item video {
    object-fit: contain;
}

.media-video-trigger {
    position: relative;
    width: 100%;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.media-video-trigger video {
    display: block;
}

.media-play-badge {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--white);
    background: rgba(7, 17, 38, 0.22);
    font-size: 1.5rem;
}

.retailer-media-item p {
    min-height: 128px;
    display: grid;
    place-items: center;
    margin: 0;
    border: 1px dashed rgba(90, 114, 151, 0.18);
    border-radius: 12px;
    color: var(--gray-500);
    background: #f8fafd;
    font-weight: 750;
}

.retailer-media-item--video {
    align-content: start;
}

.normalized-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.normalized-media-grid .retailer-media-item {
    min-width: 0;
    min-height: 0;
    gap: 8px;
    padding: 10px;
    overflow: hidden;
}

.normalized-media-grid .media-video-trigger,
.normalized-media-grid .media-empty-state {
    width: 100%;
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.normalized-media-grid .media-empty-state {
    padding: 10px;
    font-size: 0.84rem;
    line-height: 1.3;
}

.normalized-media-grid .retailer-media-item img,
.normalized-media-grid .retailer-media-item video {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media (max-width: 900px) {
    .retailer-visit-panel .normalized-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

/* VIN Search: final mobile layout and overflow containment. */
@media (max-width: 620px) {
    .app-main > .vin-search-panel,
    .vin-search-panel,
    .vin-search-panel > *,
    .vin-history-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .vin-search-hero {
        padding: 13px;
        overflow: hidden;
        border-radius: 12px;
    }

    .vin-search-hero > div {
        min-width: 0;
    }

    .vin-search-hero h1,
    .vin-search-hero p {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
    }

    .vin-search-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 0;
        width: 100%;
        padding: 9px;
        border: 1px solid #dbe5f2;
        border-radius: 11px;
        background: #f7faff;
    }

    .vin-search-label {
        grid-column: 1 / -1;
        margin: 0 0 6px;
    }

    .vin-search-form input {
        min-width: 0;
        height: 42px;
        border: 1px solid #cbd8ea;
        border-right: 0;
        border-radius: 8px 0 0 8px;
        background: #fff;
        font-size: 0.8rem;
    }

    .vin-search-form input::placeholder {
        font-size: 0.7rem;
        letter-spacing: 0;
    }

    .vin-search-form button {
        width: 112px;
        height: 42px;
        min-height: 42px;
        padding: 6px 8px;
        border-radius: 0 8px 8px 0;
        font-size: 0.74rem;
        white-space: nowrap;
    }

    .vin-history-panel {
        overflow: hidden;
    }

    .vin-history-wrap {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 0 7px;
        overflow-x: scroll !important;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        scrollbar-width: auto;
        -webkit-overflow-scrolling: touch;
    }

    .vin-history-wrap::-webkit-scrollbar {
        height: 8px;
    }

    .vin-history-wrap::-webkit-scrollbar-track {
        border-radius: 999px;
        background: #e8eef7;
    }

    .vin-history-wrap::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #7d9bc8;
    }

    .vin-history-table {
        width: 560px;
        min-width: 560px;
        max-width: none;
        table-layout: auto;
    }

    .vin-history-scroll-tools {
        display: flex;
    }
}

@media (max-width: 380px) {
    .vin-search-form {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .vin-search-form input,
    .vin-search-form button {
        width: 100%;
        border: 1px solid #cbd8ea;
        border-radius: 8px;
    }
}

/* Marketing Trip entry menu. */
.marketing-trip-menu {
    max-width: 820px;
}

.marketing-trip-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.marketing-trip-choice {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-height: 124px;
    padding: 18px;
    border: 1px solid #d8e2f0;
    border-radius: 15px;
    color: var(--gray-900);
    background: #fff;
    box-shadow: 0 10px 26px rgba(25, 62, 120, 0.07);
    text-decoration: none;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.marketing-trip-choice:hover {
    border-color: #9bbcf0;
    box-shadow: 0 15px 32px rgba(25, 62, 120, 0.12);
    transform: translateY(-2px);
}

.marketing-trip-choice--new {
    border-color: #a9c5f1;
    background: linear-gradient(135deg, #f8fbff, #edf4ff);
}

.marketing-trip-choice__icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: var(--blue-700);
    font-size: 1.05rem;
}

.marketing-trip-choice__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.marketing-trip-choice__copy strong {
    color: var(--blue-900);
    font-size: 1.12rem;
}

.marketing-trip-choice__copy small {
    color: var(--gray-600);
    font-size: 0.78rem;
    line-height: 1.4;
}

.marketing-trip-choice__arrow {
    color: var(--blue-700);
}

/* Registration editing workspace. */
.registration-records-panel {
    max-width: 1120px;
}

.registration-records-back {
    margin: -4px 0 12px;
}

.registration-records-back a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    color: var(--blue-800);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 750;
    text-decoration: none;
}

.registration-records-panel .filter-bar {
    padding: 12px;
    border: 1px solid #dde6f2;
    border-radius: 12px;
    background: #f8faff;
}

.registration-records-panel .record-tabs {
    padding-bottom: 2px;
}

.registration-records-panel .record-tabs a {
    min-height: 40px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 750;
}

.registration-records-table {
    border: 1px solid #e0e7f1;
    border-radius: 10px;
    overflow: hidden;
}

.registration-records-table thead {
    background: #edf4ff;
}

.registration-records-table th {
    color: var(--blue-800);
    font-size: 0.7rem;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.registration-records-table tbody tr:nth-child(even) {
    background: #fafcff;
}

.registration-records-table td {
    line-height: 1.35;
    vertical-align: middle;
}

.registration-records-table td > .muted-text,
.registration-records-table td strong + .muted-text {
    display: block;
    margin-top: 3px;
}

@media (max-width: 680px) {
    .marketing-trip-menu {
        padding: 14px;
    }

    .marketing-trip-menu .management-heading p {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .marketing-trip-choice-grid {
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 13px;
    }

    .marketing-trip-choice {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        gap: 10px;
        min-height: 94px;
        padding: 12px;
        border-radius: 12px;
    }

    .marketing-trip-choice__icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 0.9rem;
    }

    .marketing-trip-choice__copy strong {
        font-size: 1rem;
    }

    .marketing-trip-choice__copy small {
        font-size: 0.72rem;
    }

    .registration-records-panel {
        padding: 13px;
        overflow: hidden;
    }

    .registration-records-panel .management-heading {
        margin-bottom: 10px;
    }

    .registration-records-panel .management-heading h1 {
        font-size: 1.2rem;
    }

    .registration-records-panel .management-heading p {
        font-size: 0.73rem;
        line-height: 1.35;
    }

    .registration-records-panel .filter-bar {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 11px;
    }

    .registration-records-panel .filter-bar .form-field {
        min-width: 0;
        width: 100%;
    }

    .registration-records-panel .filter-bar .form-field span {
        font-size: 0.62rem;
    }

    .registration-records-panel .filter-bar input {
        min-height: 38px;
        font-size: 0.78rem;
    }

    .registration-records-panel .filter-bar button {
        justify-content: center;
        min-height: 40px;
        padding: 8px 12px;
        width: 100%;
    }

    .registration-records-panel .filter-bar button span {
        display: inline;
    }

    .registration-records-panel .record-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
        margin: 11px 0;
        overflow: visible;
    }

    .registration-records-panel .record-tabs a {
        min-width: 0;
        min-height: 36px;
        justify-content: center;
        gap: 5px;
        padding: 6px;
        font-size: 0.7rem;
    }

    .registration-records-panel .record-tabs a span {
        min-width: 18px;
        padding-inline: 4px;
        font-size: 0.64rem;
    }

    .registration-records-table-wrap {
        overflow: visible;
    }

    .registration-records-table,
    .registration-records-table tbody,
    .registration-records-table tr,
    .registration-records-table td {
        display: block;
        width: 100%;
    }

    .registration-records-table {
        border: 0;
        background: transparent;
    }

    .registration-records-table thead {
        display: none;
    }

    .registration-records-table tbody {
        display: grid;
        gap: 9px;
    }

    .registration-records-table tr {
        padding: 10px 11px;
        border: 1px solid #dce5f1;
        border-radius: 11px;
        background: #fff !important;
        box-shadow: 0 5px 14px rgba(25, 62, 120, 0.05);
    }

    .registration-records-table td {
        display: grid;
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 8px;
        padding: 5px 0;
        border: 0;
        font-size: 0.75rem;
        overflow-wrap: anywhere;
    }

    .registration-records-table td::before {
        content: attr(data-label);
        color: var(--gray-500);
        font-size: 0.61rem;
        font-weight: 850;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .registration-records-table td[data-label="Action"] {
        align-items: center;
        padding-top: 8px;
        border-top: 1px solid #edf1f6;
    }

    .registration-records-table td.empty-state {
        display: block;
        padding: 16px;
        text-align: center;
    }

    .registration-records-table td.empty-state::before {
        content: none;
    }
}

/* Registration Records stays tabular on phones and scrolls horizontally. */
@media (max-width: 680px) {
    .registration-records-table-wrap {
        display: block;
        width: 100%;
        max-width: 100%;
        padding-bottom: 7px;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .registration-records-table-wrap::-webkit-scrollbar {
        height: 7px;
    }

    .registration-records-table-wrap::-webkit-scrollbar-track {
        border-radius: 999px;
        background: #e8eef7;
    }

    .registration-records-table-wrap::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #8aa5cd;
    }

    .registration-records-table,
    .registration-records-table tbody,
    .registration-records-table tr,
    .registration-records-table th,
    .registration-records-table td {
        display: revert;
        width: auto;
    }

    .registration-records-table {
        display: table;
        width: 760px;
        min-width: 760px;
        border: 1px solid #dce5f1;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 10px;
        background: #fff;
    }

    .registration-records-table thead {
        display: table-header-group;
        background: #edf4ff;
    }

    .registration-records-table tbody {
        display: table-row-group;
    }

    .registration-records-table tr {
        display: table-row;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .registration-records-table th,
    .registration-records-table td {
        display: table-cell;
        padding: 9px 10px;
        border: 0;
        border-bottom: 1px solid #e8edf5;
        font-size: 0.72rem;
        line-height: 1.3;
        text-align: left;
        vertical-align: middle;
        white-space: normal;
    }

    .registration-records-table th {
        color: var(--blue-800);
        font-size: 0.63rem;
        white-space: nowrap;
    }

    .registration-records-table td::before {
        content: none;
    }

    .registration-records-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .registration-records-table td:first-child {
        min-width: 112px;
    }

    .registration-records-table td[data-label="Customer"],
    .registration-records-table td[data-label="Place"],
    .registration-records-table td[data-label="Location"] {
        min-width: 125px;
    }

    .registration-records-table td[data-label="Status"] {
        min-width: 92px;
        white-space: nowrap;
    }

    .registration-records-table td[data-label="Trip"] {
        min-width: 105px;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    .registration-records-table td[data-label="Action"] {
        min-width: 105px;
        padding-top: 9px;
        border-top: 0;
    }

    .registration-records-table td.empty-state {
        display: table-cell;
        padding: 18px;
    }
}

/* Simple internal-page shell. The dashboard retains the original header. */
.app-page--internal {
    background: #eef2f7;
}

.app-page--internal .app-shell {
    padding-top: 78px;
    background: #eef2f7;
}

.app-header--internal {
    min-height: 78px;
    justify-content: center;
    padding: 0 72px;
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--blue-900), var(--blue-800));
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.internal-page-header__back {
    position: absolute;
    left: clamp(16px, 3vw, 30px);
    top: 50%;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: transparent;
    font-size: 1.25rem;
    text-decoration: none;
    transform: translateY(-50%);
    transition: background 160ms ease;
}

.internal-page-header__back:hover,
.internal-page-header__back:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
}

.internal-page-header__title {
    width: 100%;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: clamp(1.12rem, 2vw, 1.42rem);
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page--internal .breadcrumb-wrap {
    display: none;
}

.app-page--internal .app-main {
    width: min(1220px, 100%);
    min-height: calc(100dvh - 78px);
    padding: 24px clamp(16px, 3vw, 28px) 34px;
    border-radius: 26px 26px 0 0;
    background: #f6f9fd;
    overflow: hidden;
}

.app-page--internal .app-main > :first-child {
    margin-top: 0;
}

.app-page--internal .app-footer {
    display: none;
}

.app-page--internal .sales-page-back,
.app-page--internal .flow-top-actions,
.app-page--internal .registration-records-back {
    display: none;
}

.app-page--internal .app-main a:has(.fa-arrow-left),
.app-page--internal .app-main button:has(.fa-arrow-left) {
    display: none !important;
}

/* The shared header supplies the page title; retain only headings within page sections. */
.app-page--internal .app-main > .management-panel > .management-heading,
.app-page--internal .app-main > .customer-place-flow > .management-heading,
.app-page--internal .app-main > section > .management-heading {
    display: none;
}

.app-page--internal .vin-search-hero > div:first-child {
    display: none;
}

.app-page--internal .vin-search-form {
    margin-top: 0;
}

.app-page--internal [hidden] {
    display: none !important;
}

@media (max-width: 680px) {
    .app-page--internal .app-shell {
        padding-top: 72px;
    }

    .app-header--internal {
        min-height: 72px;
        padding-inline: 60px;
    }

    .internal-page-header__back {
        left: 10px;
        width: 40px;
        height: 40px;
        font-size: 1.12rem;
    }

    .internal-page-header__title {
        font-size: 1.12rem;
    }

    .app-page--internal .app-main {
        min-height: calc(100dvh - 72px);
        padding: 16px 11px 28px;
        border-radius: 22px 22px 0 0;
    }

    .app-page--internal .management-panel,
    .app-page--internal .content-panel {
        border-radius: 13px;
        box-shadow: none;
    }
}

.media-viewer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(7, 17, 38, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.media-viewer {
    width: min(1040px, 100%);
    max-height: min(88vh, 780px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 34px 90px rgba(7, 17, 38, 0.34);
}

.media-viewer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(90, 114, 151, 0.12);
}

.media-viewer__header h2 {
    margin: 0;
    color: var(--blue-900);
    font-size: 1.05rem;
}

.media-viewer__body {
    min-height: 0;
    display: grid;
    place-items: center;
    padding: 14px;
    background: #071126;
}

.media-viewer__body img,
.media-viewer__body video {
    max-width: 100%;
    max-height: calc(88vh - 92px);
    border-radius: 14px;
    object-fit: contain;
}

[data-media-viewer] {
    cursor: zoom-in;
}

.record-tabs {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    overflow-x: auto;
}

[data-shop-type-field][hidden] {
    display: none !important;
}

.record-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    color: var(--gray-900);
    text-decoration: none;
    white-space: nowrap;
}

.record-tabs a.is-active {
    border-color: var(--blue-700);
    background: var(--blue-700);
    color: #fff;
}

.record-tabs a span {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    font-size: 0.78rem;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 7px;
}

.table-actions form {
    margin: 0;
}

.media-viewer__body video {
    width: 100%;
}

.followup-method-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 17, 38, 0.58);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.followup-method-dialog {
    width: min(560px, 100%);
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 30px 80px rgba(7, 17, 38, 0.24);
}

.followup-method-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.followup-method-dialog__header span {
    color: var(--blue-700);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.followup-method-dialog h2 {
    margin: 5px 0 0;
    color: var(--blue-900);
}

.followup-method-dialog > p {
    margin: 10px 0 18px;
    color: var(--gray-600);
}

.followup-method-options {
    display: grid;
    gap: 12px;
}

.followup-method-option {
    min-height: 82px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border: 1px solid #dce5f1;
    border-radius: 16px;
    color: var(--blue-800);
    background: #f9fbff;
    text-decoration: none;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.followup-method-option:hover {
    transform: translateY(-2px);
    border-color: #9bbaf1;
    box-shadow: 0 14px 28px rgba(36, 94, 216, 0.11);
}

.followup-method-option > i:first-child {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(145deg, var(--blue-800), var(--blue-600));
}

.followup-method-option span {
    display: grid;
    gap: 4px;
}

.followup-method-option strong {
    color: var(--blue-900);
}

.followup-method-option small {
    color: var(--gray-600);
    line-height: 1.4;
}

.feedback-view-backdrop {
    position: fixed;
    inset: 0;
    z-index: 75;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(7, 17, 38, 0.52);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.feedback-view-dialog {
    width: min(560px, 100%);
    max-height: min(82vh, 680px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 30px 80px rgba(7, 17, 38, 0.28);
}

.feedback-view-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    border-bottom: 1px solid rgba(90, 114, 151, 0.12);
}

.feedback-view-dialog__header h2 {
    margin: 0;
    color: var(--blue-900);
    font-size: 1.02rem;
    overflow-wrap: anywhere;
}

.feedback-view-dialog__header p {
    margin: 4px 0 0;
    color: var(--gray-500);
    font-size: 0.86rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.feedback-view-dialog__body {
    min-height: 0;
    display: grid;
    gap: 14px;
    margin: 0;
    padding: 16px;
    overflow-y: auto;
}

.feedback-view-dialog__body div {
    display: grid;
    gap: 6px;
}

.feedback-view-dialog__body dt {
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feedback-view-dialog__body dd {
    margin: 0;
    color: var(--gray-900);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 17, 38, 0.56);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.staff-modal {
    width: min(640px, 100%);
    max-height: min(82vh, 720px);
    overflow-y: auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 34px 90px rgba(7, 17, 38, 0.34);
}

.staff-modal__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 54px;
    overflow: hidden;
    border-bottom: 0;
    background:
        linear-gradient(135deg, rgba(8, 21, 47, 0.98), rgba(23, 63, 131, 0.94)),
        var(--blue-900);
}

.staff-modal__header::after {
    content: "";
    position: absolute;
    right: -48px;
    bottom: -88px;
    width: 210px;
    height: 210px;
    border: 34px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
}

.staff-modal__title {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.staff-modal__title .section-kicker {
    color: rgba(255, 255, 255, 0.72);
}

.staff-modal__header h2 {
    margin: 4px 0 0;
    color: #ffffff;
    font-size: clamp(1.25rem, 2.8vw, 1.62rem);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.staff-modal__title p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.9rem;
    font-weight: 800;
}

.staff-modal__header-actions {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

.staff-view-profile {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    margin: -42px 20px 0;
    padding: 16px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(7, 17, 38, 0.12);
}

.staff-view-profile__photo {
    margin: 0;
    border-width: 4px;
    border-color: #ffffff;
    box-shadow: 0 12px 28px rgba(7, 17, 38, 0.18);
}

.staff-view-profile__summary {
    display: grid;
    justify-items: start;
    gap: 6px;
    min-width: 0;
}

.staff-view-profile__summary > span:first-child {
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.staff-view-profile__summary strong {
    color: var(--gray-900);
    font-size: 1.05rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.staff-view-profile__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.staff-view-profile__chips span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 100%;
    padding: 0 10px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 999px;
    color: var(--gray-700);
    background: #f8fafd;
    font-size: 0.82rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.staff-view-profile__chips i {
    color: var(--blue-700);
}

.staff-view-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 18px 20px 20px;
}

.staff-view-details div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1px solid rgba(90, 114, 151, 0.12);
    border-radius: 10px;
    background: linear-gradient(180deg, #ffffff, #f8fafd);
}

.staff-view-details i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.staff-view-details__wide {
    grid-column: 1 / -1;
}

.staff-view-details__label {
    display: block;
    color: var(--gray-500);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.staff-view-details strong {
    display: block;
    margin-top: 5px;
    color: var(--gray-900);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.staff-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 20px;
    border-top: 1px solid rgba(90, 114, 151, 0.1);
    background: #ffffff;
}

.staff-modal__actions .secondary-button {
    min-height: 38px;
    border-radius: 10px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.modal-close {
    width: 40px;
    height: 40px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(90, 114, 151, 0.16);
    border-radius: 999px;
    color: var(--gray-700);
    background: var(--white);
    text-decoration: none;
}

.staff-modal .modal-close {
    border-color: rgba(255, 255, 255, 0.26);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(7, 17, 38, 0.46);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.confirm-backdrop.notice-backdrop {
    z-index: 1300;
}

.place-choice-backdrop { position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:20px; background:rgba(7,17,38,.46); backdrop-filter:blur(7px); }
.place-choice-dialog { width:min(100%,470px); padding:26px; border:1px solid rgba(90,114,151,.16); border-radius:22px; background:#fff; box-shadow:0 24px 70px rgba(7,17,38,.22); text-align:center; }
.place-choice-dialog__icon { display:grid; place-items:center; width:58px; height:58px; margin:0 auto 14px; border-radius:17px; color:#fff; background:var(--blue-700); font-size:1.3rem; }
.place-choice-dialog h2 { margin:5px 0 8px; color:var(--blue-900); }
.place-choice-dialog p { margin:0; color:var(--gray-700); line-height:1.5; }
.place-choice-dialog__actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
.place-choice-dialog__actions .login-button,.place-choice-dialog__actions .secondary-button { width:100%; min-height:44px; margin:0; }
.place-choice-finish { grid-column:1/-1; padding:8px; border:0; color:var(--gray-700); background:transparent; font:inherit; font-weight:800; cursor:pointer; }
.place-choice-finish:hover { color:var(--blue-700); }
@media(max-width:520px){.place-choice-dialog{padding:21px}.place-choice-dialog__actions{grid-template-columns:1fr}.place-choice-finish{grid-column:auto}}

.confirm-dialog {
    width: min(460px, 100%);
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 30px 80px rgba(7, 17, 38, 0.28);
}

.confirm-dialog__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #9b2f2f;
    background: #fff0f0;
    font-size: 1.3rem;
}

.confirm-dialog__body h2 {
    margin: 0 0 8px;
    color: var(--gray-900);
    font-size: 1.18rem;
}

.confirm-dialog__body p {
    margin: 0;
    color: var(--gray-700);
    line-height: 1.5;
}

.confirm-dialog__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.photo-source-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(7, 17, 38, 0.46);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.photo-source-dialog {
    width: min(420px, 100%);
    display: grid;
    gap: 16px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 30px 80px rgba(7, 17, 38, 0.28);
}

.photo-source-dialog__body h2 {
    margin: 0 0 6px;
    color: var(--gray-900);
    font-size: 1.18rem;
}

.photo-source-dialog__body p {
    margin: 0;
    color: var(--gray-700);
    line-height: 1.45;
}

.photo-source-dialog__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.photo-source-dialog__actions .secondary-button,
.photo-source-dialog__actions .login-button {
    width: 100%;
    min-height: 44px;
    margin-top: 0;
}

.photo-source-dialog__cancel {
    width: fit-content;
    justify-self: center;
    border: 0;
    color: var(--gray-500);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 800;
}

.photo-source-dialog__cancel:hover,
.photo-source-dialog__cancel:focus-visible {
    color: var(--gray-900);
    outline: none;
}

.photo-file-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 8px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    color: var(--gray-700);
    background: #f7f9fc;
}

.photo-file-preview[hidden] {
    display: none;
}

.photo-file-preview__image {
    width: 72px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 8px;
    object-fit: cover;
    background: var(--gray-200);
}

.photo-file-preview__details {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
    font-weight: 700;
}

.danger-button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    color: var(--white);
    background: #b93434;
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 850;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(185, 52, 52, 0.18);
}

.trip-edit-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(90, 114, 151, 0.14);
}

.trip-edit-actions__primary {
    display: flex;
    align-items: center;
    gap: 10px;
}

.trip-edit-delete-form {
    margin: 0;
}

.trip-edit-actions .secondary-button,
.trip-edit-actions .login-button,
.trip-edit-actions .danger-button {
    min-width: 132px;
    min-height: 46px;
    margin: 0;
    border-radius: 13px;
}

.trip-edit-actions .danger-button {
    background: #c73535;
    box-shadow: 0 8px 18px rgba(185, 52, 52, 0.18);
}

@media (max-width: 560px) {
    .trip-edit-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .trip-edit-actions__primary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .trip-edit-actions__back,
    .trip-edit-actions .login-button,
    .trip-edit-actions .danger-button,
    .trip-edit-delete-form {
        width: 100%;
    }
}

.status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
}

.status-badge.is-active {
    color: #0f7a55;
    background: #e9fff5;
}

.status-badge.is-inactive {
    color: #8a4a00;
    background: #fff7e8;
}

.status-badge.is-warning {
    color: #8a4a00;
    background: #fff7e8;
}

.content-panel__icon {
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin: 0 auto 20px;
    border-radius: 24px;
    color: var(--white);
    background: linear-gradient(145deg, var(--blue-800), var(--blue-600));
    font-size: 2rem;
}

.content-panel h1 {
    margin: 0 0 12px;
    color: var(--blue-900);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
}

.profile-panel {
    width: 100%;
    max-width: none;
}

.profile-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
    gap: 22px;
    width: min(100%, 980px);
    margin: 0 auto;
    align-items: start;
}

.profile-panel--identity {
    position: sticky;
    top: 92px;
}

.profile-panel--security {
    text-align: left;
}

.profile-photo {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    margin: 0 auto 18px;
    overflow: hidden;
    border: 4px solid rgba(36, 94, 216, 0.12);
    border-radius: 999px;
    color: var(--blue-700);
    background: linear-gradient(145deg, #edf4ff, #dceaff);
    font-size: 2.6rem;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-message {
    margin: 20px auto 0;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 750;
}

.profile-message.is-success {
    color: #0f7a55;
    background: #e9fff5;
}

.profile-message.is-error {
    color: #8a4a00;
    background: #fff7e8;
}

.system-notification {
    position: fixed;
    z-index: 1200;
    top: 14px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(calc(100% - 28px), 440px);
    padding: 12px 14px;
    border: 1px solid #b9ead5;
    border-radius: 12px;
    color: #105f46;
    background: #ecfff7;
    box-shadow: 0 14px 34px rgba(15, 45, 74, 0.2);
    font-weight: 750;
    transform: translateX(-50%);
    animation: system-notification-in 220ms ease-out;
}

.system-notification span {
    flex: 1;
}

.system-notification--error {
    border-color: #f2c4c4;
    color: #8b2525;
    background: #fff1f1;
}

.system-notification button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: inherit;
    background: transparent;
}

.system-notification.is-leaving {
    opacity: 0;
    transform: translate(-50%, -10px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.data-table tbody tr.is-edit-clickable {
    cursor: pointer;
}

.data-table tbody tr.is-edit-clickable:hover,
.data-table tbody tr.is-edit-clickable:focus-visible {
    background: #f1f6ff;
    outline: 2px solid rgba(36, 94, 216, 0.3);
    outline-offset: -2px;
}

@keyframes system-notification-in {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
}

.profile-form {
    display: grid;
    gap: 12px;
    max-width: 360px;
    margin: 24px auto 0;
    text-align: left;
}

.profile-form label {
    color: var(--gray-700);
    font-size: 0.9rem;
    font-weight: 800;
}

.profile-form input[type="file"] {
    width: 100%;
    padding: 12px;
    border: 1px solid rgba(90, 114, 151, 0.18);
    border-radius: 14px;
    color: var(--gray-700);
    background: var(--white);
}

.profile-panel h2 {
    margin: 0 0 12px;
    color: var(--blue-900);
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.profile-security-heading {
    display: flex;
    gap: 16px;
    align-items: center;
}

.profile-security-heading .profile-photo--small {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    margin: 0;
    border-width: 2px;
    font-size: 1.35rem;
}

.profile-security-kicker {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    margin-bottom: 5px;
    color: var(--blue-700);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.profile-password-form {
    max-width: none;
    margin-top: 28px;
    padding: 22px;
    border: 1px solid rgba(90, 114, 151, 0.13);
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fbff 0%, #f3f7fd 100%);
}

.profile-password-field {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) 38px;
    align-items: center;
    min-height: 50px;
    padding: 0 6px 0 14px;
    border: 1px solid rgba(90, 114, 151, 0.22);
    border-radius: 14px;
    background: var(--white);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-password-field:focus-within {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px rgba(36, 94, 216, 0.12);
}

.profile-password-field > i {
    color: var(--blue-600);
    font-size: 0.9rem;
}

.profile-password-field input {
    width: 100%;
    min-width: 0;
    padding: 12px 10px;
    border: 0;
    outline: 0;
    color: var(--gray-900);
    background: transparent;
    font: inherit;
}

.profile-password-field button {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    color: var(--gray-700);
    background: transparent;
    cursor: pointer;
}

.profile-password-field button:hover,
.profile-password-field button:focus-visible {
    color: var(--blue-700);
    background: #edf4ff;
    outline: 0;
}

.profile-password-hint {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 2px 0 4px;
    color: var(--gray-700);
    font-size: 0.82rem;
    line-height: 1.45;
}

.profile-password-hint i {
    margin-top: 2px;
    color: var(--blue-600);
}

@media (max-width: 820px) {
    .profile-layout {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .profile-panel--identity {
        position: static;
    }
}

@media (max-width: 520px) {
    .profile-security-heading {
        align-items: flex-start;
    }

    .profile-password-form {
        padding: 17px;
    }
}

.empty-state {
    margin: 0;
    color: var(--gray-700);
    font-size: 1.08rem;
}

.app-footer {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 26px;
    padding: 12px 0 4px;
    color: var(--gray-500);
    font-size: 0.9rem;
}

@media (min-width: 721px) {
    .record-form {
        gap: 24px;
    }

    .record-form .form-grid {
        column-gap: 18px;
        row-gap: 20px;
    }

    .record-form .form-field {
        gap: 9px;
    }

    .record-form .form-field label {
        color: #344765;
        font-size: 0.82rem;
        font-weight: 850;
        letter-spacing: 0.015em;
    }

    .record-form .form-field input,
    .record-form .form-field select,
    .record-form .form-field textarea,
    .record-form .readonly-value {
        min-height: 52px;
        padding-right: 16px;
        padding-left: 16px;
        border-color: #d6dfec;
        border-radius: 14px;
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(15, 35, 66, 0.025);
        transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    }

    .record-form .form-field input:hover,
    .record-form .form-field select:hover,
    .record-form .form-field textarea:hover {
        border-color: #b9c8dc;
    }

    .record-form .form-field input:focus,
    .record-form .form-field select:focus,
    .record-form .form-field textarea:focus {
        border-color: #477be0;
        box-shadow: 0 0 0 4px rgba(36, 94, 216, 0.1), 0 8px 20px rgba(36, 94, 216, 0.06);
    }

    .record-form .form-field textarea {
        min-height: 108px;
        padding-top: 14px;
        padding-bottom: 14px;
        line-height: 1.55;
    }

    .record-form .form-field select {
        background-position:
            calc(100% - 20px) 23px,
            calc(100% - 15px) 23px,
            100% 0;
    }

    .record-form .form-field input[type="file"] {
        min-height: 52px;
        padding: 7px 8px;
        color: #66758d;
        background: #fbfcfe;
    }

    .record-form .form-field input[type="file"]::file-selector-button {
        min-height: 36px;
        margin-right: 12px;
        padding: 0 14px;
        border: 0;
        border-radius: 9px;
        color: #17499f;
        background: #eaf2ff;
        font: inherit;
        font-size: 0.84rem;
        font-weight: 800;
        cursor: pointer;
    }

    .record-form .field-control-row {
        gap: 10px;
    }

    .record-form .field-control-row .secondary-button--small {
        min-height: 52px;
        padding: 0 16px;
        border-radius: 14px;
        white-space: nowrap;
    }

    .record-form .form-actions {
        gap: 12px;
        padding-top: 20px;
        border-top: 1px solid #e2e8f1;
    }

    .record-form .form-actions .login-button,
    .record-form .form-actions .secondary-button,
    .record-form .form-actions .danger-button {
        min-height: 46px;
        padding-right: 20px;
        padding-left: 20px;
        border-radius: 13px;
    }

    .visit-registration-form {
        gap: 22px;
    }

    .visit-registration-form > .form-grid {
        padding: 22px;
        border: 1px solid #dde6f1;
        border-radius: 18px;
        background: linear-gradient(180deg, #fbfdff 0%, #f8fbff 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .visit-registration-form .form-field--wide textarea {
        min-height: 116px;
    }

    .visit-registration-form .sales-step-actions {
        margin-top: 0;
        padding: 20px 2px 0;
    }

    .visit-registration-form .sales-step-actions .login-button,
    .visit-registration-form .sales-step-actions .danger-button {
        min-width: 126px;
        min-height: 46px;
        padding: 0 20px;
        border-radius: 13px;
    }
}

@media (max-width: 1050px) {
    .app-header {
        align-items: center;
        flex-direction: row;
    }

    .report-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-card__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-visit-card {
        grid-template-columns: 1fr;
    }

    .retailer-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    :root {
        --app-header-height: 58px;
    }

    .app-shell {
        width: 100%;
    }

    .app-header {
        min-height: 58px;
        gap: 10px;
        padding: 0 10px;
    }

    .brand__logo {
        width: 40px;
        height: 40px;
        border-width: 2px;
    }

    .brand {
        gap: 8px;
    }

    .brand__name {
        font-size: 1.08rem;
    }

    .brand__system {
        font-size: 0.56rem;
    }

    .header-actions {
        gap: 8px;
    }

    .header-icon-button {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .header-icon-button--logout {
        margin-left: 0;
    }

    .header-icon-button--logout::before {
        left: -5px;
    }

    .app-main {
        width: min(100% - 22px, 1220px);
        padding: 18px 0 20px;
        scroll-padding-top: 18px;
    }

    .dashboard {
        padding: 14px;
        border-radius: 16px;
    }

    .module-card {
        min-height: 78px;
        gap: 12px;
        padding: 12px;
        border-radius: 15px;
    }

    .module-card__icon {
        width: 46px;
        height: 46px;
        font-size: 1.15rem;
    }

    .module-card h2 {
        font-size: 1rem;
    }

    .module-card p {
        font-size: 0.84rem;
    }

    .module-card__arrow {
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }

    .content-panel {
        padding: 30px 22px;
        border-radius: 20px;
    }

    .management-panel {
        padding: 14px;
        border-radius: 14px;
    }

    .management-heading {
        align-items: flex-start;
    }

    .retailer-profile-panel {
        padding: 14px;
    }

    .retailer-profile-panel .management-heading {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-bottom: 12px;
    }

    .retailer-profile-title h1 {
        margin-bottom: 5px;
        font-size: 1.38rem;
        line-height: 1.12;
    }

    .retailer-profile-title p {
        font-size: 0.95rem;
        line-height: 1.35;
    }

    .retailer-heading-actions {
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .retailer-heading-actions .management-icon {
        display: none;
    }

    .retailer-heading-actions .table-actions {
        width: auto;
        display: inline-flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .retailer-heading-actions .table-actions form {
        width: auto;
    }

    .retailer-heading-actions .action-button {
        width: auto;
        min-width: 84px;
        min-height: 38px;
        padding: 0 9px;
        border-radius: 12px;
    }

    .retailer-visit-card__header {
        flex-direction: row;
        gap: 8px;
    }

    .retailer-visit-panel {
        padding: 14px;
    }

    .retailer-visit-panel .management-heading {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 10px;
        margin-bottom: 12px;
    }

    .retailer-visit-panel .management-heading h2 {
        font-size: 1.08rem;
    }

    .retailer-visit-panel > .management-heading .secondary-button {
        width: auto;
        min-height: 38px;
        padding: 0 12px;
        border-radius: 12px;
    }

    .retailer-visit-stack {
        gap: 10px;
    }

    .retailer-visit-card {
        gap: 10px;
        padding: 11px;
        border-radius: 14px;
    }

    .retailer-visit-card__marker {
        width: 30px;
        height: 30px;
        font-size: 0.78rem;
    }

    .retailer-visit-card__header h3 {
        margin-top: 6px;
        font-size: 0.98rem;
    }

    .retailer-visit-card__header .muted-text {
        font-size: 0.78rem;
    }

    .retailer-visit-summary,
    .retailer-visit-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .retailer-visit-summary div,
    .retailer-visit-notes div {
        min-height: 54px;
        padding: 9px;
        border-radius: 11px;
    }

    .retailer-visit-summary dt,
    .retailer-visit-notes span {
        font-size: 0.64rem;
        letter-spacing: 0.05em;
    }

    .retailer-visit-summary dd,
    .retailer-visit-notes p {
        margin-top: 3px;
        font-size: 0.86rem;
        line-height: 1.25;
    }

    .management-icon {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        font-size: 1rem;
    }

    .sales-step-card,
    .sales-step-card__header {
        grid-template-columns: 1fr;
    }

    .sales-step-card__meta {
        width: 100%;
    }

    .sales-step-card__meta strong {
        justify-content: flex-start;
    }

    .sales-step-actions .sales-step-card__meta {
        margin-right: 0;
    }

    .trip-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .trip-summary-grid div {
        min-height: 70px;
        padding: 10px;
    }

    .trip-summary-grid span {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .trip-summary-grid strong {
        font-size: 0.94rem;
    }

    .sales-visit-card {
        gap: 10px;
        padding: 11px;
        border-radius: 13px;
    }

    .sales-visit-card__header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    .sales-visit-card__header h3 {
        font-size: 0.98rem;
    }

    .sales-visit-card__time {
        width: fit-content;
        min-height: 30px;
        padding: 0 9px;
        font-size: 0.78rem;
    }

    .sales-visit-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .sales-visit-details div {
        min-height: 54px;
        padding: 9px;
        border-radius: 11px;
    }

    .sales-visit-details dt {
        font-size: 0.63rem;
        letter-spacing: 0.05em;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .attendance-location-grid,
    .attendance-summary-strip,
    .attendance-location-result dl {
        grid-template-columns: 1fr;
    }

    .form-field--wide {
        grid-column: auto;
    }

    .visit-registration-form .form-grid,
    .mobile-line-form .form-grid {
        gap: 16px;
        border-top: 0;
    }

    .visit-registration-form .form-field,
    .mobile-line-form .form-field {
        gap: 7px;
        padding: 0;
        border-bottom: 0;
    }

    .visit-registration-form .form-field label,
    .mobile-line-form .form-field label {
        color: var(--gray-800);
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0;
    }

    .visit-registration-form .form-field input,
    .visit-registration-form .form-field select,
    .visit-registration-form .form-field textarea,
    .visit-registration-form .form-lookup-button,
    .visit-registration-form .readonly-value,
    .mobile-line-form .form-field input,
    .mobile-line-form .form-field select,
    .mobile-line-form .form-field textarea,
    .mobile-line-form .form-lookup-button,
    .mobile-line-form .readonly-value {
        min-height: 40px;
        padding: 0 2px 9px;
        border: 0;
        border-bottom: 2px solid rgba(90, 114, 151, 0.34);
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .visit-registration-form .form-field textarea,
    .mobile-line-form .form-field textarea {
        min-height: 78px;
        padding-top: 6px;
        resize: vertical;
    }

    .visit-registration-form .form-field select,
    .visit-registration-form .form-lookup-button,
    .mobile-line-form .form-field select {
        padding-right: 30px;
        background-position:
            calc(100% - 17px) 14px,
            calc(100% - 12px) 14px,
            100% 0;
        background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
    }

    .mobile-line-form .form-lookup-button {
        padding-right: 30px;
    }

    .visit-registration-form .form-lookup-button i,
    .mobile-line-form .form-lookup-button i {
        margin-left: auto;
        color: var(--gray-500);
    }

    .visit-registration-form .form-field select.is-empty-select,
    .mobile-line-form .form-field select.is-empty-select {
        color: transparent;
    }

    .visit-registration-form .form-field select option,
    .mobile-line-form .form-field select option {
        color: var(--gray-900);
    }

    .visit-registration-form .time-picker-input[readonly],
    .mobile-line-form .time-picker-input[readonly] {
        padding-right: 36px;
        background-position:
            calc(100% - 24px) 14px,
            calc(100% - 15px) 14px;
    }

    .visit-registration-form .form-field input[type="file"],
    .mobile-line-form .form-field input[type="file"] {
        min-height: 40px;
        padding: 8px 2px 9px;
        color: var(--gray-700);
        font-size: 0.88rem;
    }

    .visit-registration-form .field-control-row,
    .mobile-line-form .field-control-row {
        align-items: end;
        gap: 10px;
    }

    .visit-registration-form .field-control-row .secondary-button--small,
    .mobile-line-form .field-control-row .secondary-button--small {
        min-height: 34px;
        padding: 0 10px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .visit-registration-form .form-field:focus-within,
    .mobile-line-form .form-field:focus-within {
        border-bottom-color: transparent;
    }

    .visit-registration-form .form-field input:focus,
    .visit-registration-form .form-field select:focus,
    .visit-registration-form .form-field textarea:focus,
    .visit-registration-form .form-lookup-button:focus-visible,
    .mobile-line-form .form-field input:focus,
    .mobile-line-form .form-field select:focus,
    .mobile-line-form .form-field textarea:focus,
    .mobile-line-form .form-lookup-button:focus-visible {
        border-bottom-color: rgba(36, 94, 216, 0.74);
        box-shadow: none;
        outline: none;
    }

    .assignment-layout {
        grid-template-columns: 1fr;
    }

    .report-stat-grid {
        grid-template-columns: 1fr;
    }

    .activity-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-search {
        min-height: 52px;
        padding: 0 14px;
    }

    .filter-toggle {
        min-height: 50px;
    }

    .filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-panel .activity-filter-actions {
        grid-column: span 2;
    }

    .activity-filter-actions .secondary-button {
        width: 100%;
        min-width: 0;
    }

    .report-filter-panel .activity-filter-actions .login-button,
    .report-filter-panel .activity-filter-actions .secondary-button {
        flex: 1 1 0;
        min-width: 0;
    }

    .report-filter-toggle-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .report-filter-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-log-list {
        gap: 10px;
    }

    .activity-card {
        gap: 10px;
        padding: 11px;
        border-radius: 14px;
    }

    .activity-card__header {
        align-items: flex-start;
        gap: 8px;
    }

    .activity-card__header h3 {
        font-size: 1rem;
    }

    .activity-card__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .activity-card__summary div {
        min-height: 58px;
        padding: 9px;
        border-radius: 11px;
    }

    .activity-card__summary span,
    .activity-visit-card dt {
        font-size: 0.64rem;
        letter-spacing: 0.05em;
    }

    .activity-card__summary strong {
        font-size: 0.86rem;
    }

    .activity-visit-card {
        gap: 10px;
        padding: 10px;
    }

    .activity-visit-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .activity-visit-card .action-button {
        width: auto;
        min-width: 96px;
        min-height: 36px;
        border-radius: 12px;
    }

    .report-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .report-action-button {
        width: auto;
        min-width: 122px;
    }

    .retailer-media-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        justify-content: flex-end;
        gap: 8px;
        flex-wrap: wrap;
    }

    .form-actions .login-button,
    .form-actions .secondary-button,
    .form-actions .danger-button {
        width: auto;
        min-width: 100px;
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.84rem;
    }

    .sales-step-actions {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .sales-step-actions .sales-step-card__meta {
        display: none;
    }

    .sales-step-actions .login-button,
    .sales-step-actions .danger-button {
        width: auto;
        min-width: 88px;
        min-height: 38px;
        padding: 0 10px;
        font-size: 0.84rem;
    }

    .detail-grid,
    .detail-grid dl {
        grid-template-columns: 1fr;
    }

    .retailer-visit-details {
        padding-top: 10px;
    }

    .retailer-visit-details dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .retailer-visit-details dl > div {
        min-height: 54px;
        padding: 9px;
        border: 1px solid rgba(90, 114, 151, 0.1);
        border-radius: 11px;
        background: var(--white);
    }

    .retailer-visit-details .visit-detail-main {
        grid-column: span 2;
    }

    .retailer-visit-details dt {
        font-size: 0.66rem;
        letter-spacing: 0.06em;
    }

    .retailer-visit-details dd {
        margin-top: 3px;
        font-size: 0.88rem;
        line-height: 1.24;
    }

    .retailer-visit-panel .retailer-media-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
    }

    .retailer-visit-panel .retailer-media-item {
        min-height: 92px;
        gap: 6px;
        padding: 7px;
        border-radius: 11px;
    }

    .retailer-visit-panel .retailer-media-item span {
        font-size: 0.62rem;
        letter-spacing: 0.04em;
    }

    .retailer-visit-panel .retailer-media-item img,
    .retailer-visit-panel .retailer-media-item video {
        aspect-ratio: 1 / 1;
        border-radius: 9px;
    }

    .retailer-visit-panel .media-video-trigger {
        border-radius: 9px;
    }

    .retailer-visit-panel .media-play-badge {
        font-size: 1rem;
    }

    .retailer-visit-panel .retailer-media-item p {
        min-height: 58px;
        padding: 4px;
        border-radius: 9px;
        font-size: 0.72rem;
        text-align: center;
    }

    .retailer-visit-panel .retailer-media-item .secondary-button {
        width: auto;
        min-width: 94px;
        min-height: 30px;
        padding: 0 7px;
        border-radius: 8px;
        font-size: 0.7rem;
    }

    .media-viewer-backdrop {
        padding: 12px;
        align-items: center;
    }

    .media-viewer {
        width: 100%;
        max-height: 86vh;
        border-radius: 16px;
    }

    .media-viewer__header {
        padding: 11px 12px;
    }

    .media-viewer__header h2 {
        font-size: 0.98rem;
    }

    .media-viewer__body {
        padding: 8px;
    }

    .media-viewer__body img,
    .media-viewer__body video {
        max-height: calc(86vh - 74px);
        border-radius: 12px;
    }

    .retailer-profile-grid dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .retailer-profile-grid dl > div {
        min-height: 62px;
        padding: 10px;
        border-radius: 12px;
    }

    .retailer-profile-grid .detail-item--wide {
        grid-column: span 2;
    }

    .retailer-profile-grid dt {
        font-size: 0.62rem;
        letter-spacing: 0.06em;
    }

    .retailer-profile-grid dd {
        margin-top: 3px;
        font-size: 0.94rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .modal-backdrop {
        padding: 14px;
        align-items: start;
    }

    .staff-modal {
        width: 100%;
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
    }

    .staff-modal__header {
        padding: 16px 15px 48px;
    }

    .staff-modal__header-actions {
        align-items: flex-start;
        gap: 8px;
    }

    .staff-modal__header-actions .status-badge {
        display: none;
    }

    .staff-view-profile {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
        margin: -34px 15px 0;
        text-align: center;
        padding: 14px;
    }

    .staff-view-profile__summary {
        justify-items: center;
    }

    .staff-view-profile__chips {
        justify-content: center;
    }

    .staff-view-details {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 14px 15px 15px;
    }

    .staff-view-details div {
        padding: 11px;
    }

    .staff-modal__actions {
        padding: 12px 15px 16px;
    }

    .staff-modal__actions .secondary-button {
        width: 100%;
    }

    .confirm-dialog {
        grid-template-columns: 1fr;
    }

    .confirm-dialog__actions {
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .confirm-dialog__actions .secondary-button,
    .confirm-dialog__actions .danger-button {
        width: auto;
        min-width: 100px;
    }
}

@media (max-width: 430px) {
    .filter-panel {
        grid-template-columns: 1fr;
    }

    .filter-panel .activity-filter-actions {
        grid-column: auto;
    }
}

.notice-backdrop--note .confirm-dialog {
    max-height: min(78vh, 620px);
}

.notice-backdrop--note .confirm-dialog__icon {
    color: var(--blue-700);
    background: var(--blue-100);
}

.notice-backdrop--note .confirm-dialog__body {
    min-width: 0;
    overflow: hidden;
}

.notice-backdrop--note .confirm-dialog__body p {
    max-height: 48vh;
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(90, 114, 151, 0.14);
    border-radius: 12px;
    background: #f8fafd;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .notice-backdrop--note {
        align-items: end;
        padding: 0;
    }

    .notice-backdrop--note .confirm-dialog {
        width: 100%;
        max-height: 88dvh;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 18px 16px max(16px, env(safe-area-inset-bottom));
        border-radius: 22px 22px 0 0;
    }

    .notice-backdrop--note .confirm-dialog__icon {
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    .notice-backdrop--note .confirm-dialog__body h2 {
        margin-top: 8px;
        font-size: 1.08rem;
    }

    .notice-backdrop--note .confirm-dialog__body {
        display: contents;
    }

    .notice-backdrop--note .confirm-dialog__body p {
        grid-column: 1 / -1;
        max-height: 58dvh;
        margin-top: 14px;
        padding: 13px;
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .notice-backdrop--note .confirm-dialog__actions {
        grid-column: 1 / -1;
    }

    .notice-backdrop--note .confirm-dialog__actions .login-button {
        width: 100%;
        min-height: 46px;
        margin: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

.customer-sales-row.is-unsold > td,
.customer-sales-row.is-unsold strong { color: #c62828; }
.customer-sales-row.is-sold > td { color: inherit; }
.sales-status-control { display:inline-flex;align-items:center;gap:.38rem;white-space:nowrap;font-size:.78rem;font-weight:700;color:#334155;cursor:pointer; }
.sales-status-control input { width:14px;height:14px;margin:0;accent-color:#168451;cursor:pointer; }
.sales-status-control input:disabled { cursor:not-allowed;opacity:.75; }
.location-toggle-field { align-self:end; }
.record-form .form-field .location-boolean-toggle { min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 12px;border:1px solid #d9e2ef;border-radius:9px;background:#f8fafc;color:#233a60;font-size:.84rem;font-weight:800;cursor:pointer; }
.record-form .form-field .location-boolean-toggle input { position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;overflow:hidden;opacity:0;pointer-events:none; }
.record-form .form-field .location-boolean-toggle i { position:relative;flex:0 0 38px;width:38px;height:21px;border-radius:999px;background:#cbd5e1;box-shadow:inset 0 0 0 1px rgba(15,23,42,.08);transition:background .18s ease; }
.record-form .form-field .location-boolean-toggle i::after { content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(15,23,42,.3);transition:transform .18s ease; }
.record-form .form-field .location-boolean-toggle input:checked + i { background:#168451; }
.record-form .form-field .location-boolean-toggle input:checked + i::after { transform:translateX(17px); }
.record-form .form-field .location-boolean-toggle:has(input:focus-visible) { border-color:#245ed8;box-shadow:0 0 0 3px rgba(36,94,216,.14); }
.record-form .form-field .location-boolean-toggle:hover { border-color:#b8c8df;background:#fff; }
.location-row-actions { display:inline-flex;align-items:center;gap:6px;white-space:nowrap; }
.location-row-actions form { display:inline-flex;margin:0; }
.location-row-action { min-height:30px;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:5px 9px;border:1px solid transparent;border-radius:7px;text-decoration:none;font:inherit;font-size:.75rem;font-weight:800;line-height:1;cursor:pointer;transition:background .16s ease,border-color .16s ease,color .16s ease; }
.location-row-action--edit { color:#245ed8;background:#eef4ff;border-color:#c8d8fb; }
.location-row-action--edit:hover,.location-row-action--edit:focus-visible { color:#1747ad;background:#e1ebff;border-color:#9fb9f2;outline:none; }
.location-row-action--disable { color:#b42318;background:#fff3f2;border-color:#f2c4bf; }
.location-row-action--disable:hover,.location-row-action--disable:focus-visible { color:#8f1c13;background:#ffe5e2;border-color:#e99a92;outline:none; }
.location-row-action--enable { color:#147548;background:#edf9f2;border-color:#b9dfc9; }
.location-row-action--enable:hover,.location-row-action--enable:focus-visible { color:#0f5d38;background:#dff3e8;border-color:#86c8a3;outline:none; }
.location-setup-tabs { display:grid;grid-template-columns:repeat(4,minmax(0,auto));justify-content:start;gap:5px;margin-top:10px; }
.location-setup-tabs .secondary-button { min-height:32px;padding:5px 10px;border-radius:8px;font-size:.72rem;line-height:1.05;white-space:nowrap; }
.location-setup-tabs .secondary-button.is-active { color:#fff;background:#245ed8;border-color:#245ed8;box-shadow:0 4px 10px rgba(36,94,216,.18); }
.location-directory-search { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin:0 0 10px;padding:0 11px;border:1px solid #d8e2ef;border-radius:9px;background:#fff; }
.location-directory-search > i { color:#718096;font-size:.8rem; }
.location-directory-search input { width:100%;min-height:38px;padding:7px 0;border:0;background:transparent;font:inherit;font-size:.82rem;outline:none; }
.location-directory-search span { color:#64748b;font-size:.7rem;font-weight:800;white-space:nowrap; }
.location-directory-scroll { max-height:430px;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid #e0e7f0;border-radius:9px; }
.location-directory-scroll .data-table { margin:0; }
.location-directory-scroll .data-table thead th { position:sticky;top:0;z-index:2;background:#f4f7fb;box-shadow:0 1px 0 #dfe6ef; }
.location-entry-panel,.location-import-panel { padding-top:14px;padding-bottom:14px; }
.pos-sales-derived-field .pos-sales-field__body { padding-top:.6rem;padding-bottom:.6rem; }
.pos-sales-derived-value { display:block;color:#334155;font-size:.86rem;font-weight:750; }
.pos-customer-mode { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:5px;border-bottom:1px solid #dfe6ef;background:#f7f9fc; }
.pos-customer-mode button { min-height:32px;padding:5px 10px;border:1px solid transparent;border-radius:7px;color:#52627d;background:transparent;font:inherit;font-size:.75rem;font-weight:800;cursor:pointer; }
.pos-customer-mode button.is-active { color:#fff;background:#245ed8;box-shadow:0 3px 8px rgba(36,94,216,.18); }
.vendor-home-identity { display:grid;grid-template-columns:27px minmax(0,1fr) auto;align-items:center;gap:7px;margin:0 0 8px;padding:5px 8px;border:1px solid #dbe5f2;border-radius:8px;background:#fff;box-shadow:0 3px 10px rgba(30,64,112,.04); }
.vendor-home-identity>span { width:27px;height:27px;display:grid;place-items:center;border-radius:7px;color:#fff;background:#2867d9;font-size:.7rem; }
.vendor-home-identity div { min-width:0;display:grid;gap:0;line-height:1.1; }.vendor-home-identity small { color:#72819a;font-size:.5rem;font-weight:800;text-transform:uppercase; }.vendor-home-identity strong { overflow:hidden;color:#17345f;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap; }
.vendor-home-identity>b { padding:3px 7px;border-radius:999px;font-size:.56rem;line-height:1.2;white-space:nowrap; }.vendor-home-identity>b.is-sor { color:#995800;background:#fff1d9; }.vendor-home-identity>b.is-regular { color:#11643f;background:#e4f8ee; }
@media (max-width:480px) { .vendor-home-identity { grid-template-columns:25px minmax(0,1fr) auto;gap:6px;padding:4px 7px; }.vendor-home-identity>span { width:25px;height:25px;border-radius:6px;font-size:.65rem; }.vendor-home-identity>b { padding:3px 6px;font-size:.53rem; } }
.pos-temp-location-fields { display:grid;gap:7px; }
.pos-temp-location-fields > div { display:grid;gap:0; }
.pos-temp-location-fields label { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.pos-temp-location-fields .form-lookup-button,.pos-temp-location-fields input { width:100%;min-height:38px;padding:7px 11px;border:1px solid #cbd7e6;border-radius:8px;color:#263b5d;background:#fff;box-shadow:none;font:inherit;font-size:.82rem;line-height:1.2; }
.pos-temp-location-fields .form-lookup-button { display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer; }
.pos-temp-location-fields .form-lookup-button i { color:#526b8e;font-size:.72rem; }
.pos-temp-location-fields input { outline:none; }
.pos-temp-location-fields input::placeholder { color:#8491a4; }
.pos-price-history { display:block;margin-top:7px;color:#526581;font-size:.72rem;font-weight:700;line-height:1.35; }
.pos-receipt-page { width:min(760px,100%);margin:0 auto; }
.pos-receipt-actions { display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:14px; }
.pos-receipt-actions .login-button,.pos-receipt-actions .secondary-button { width:auto;min-height:38px;padding:8px 13px;font-size:.78rem; }
.pos-receipt { overflow:hidden;border:1px solid #d9e2ed;border-radius:14px;background:#fff;box-shadow:0 12px 34px rgba(23,48,86,.08);color:#17243a; }
.pos-receipt__header { display:flex;align-items:center;gap:12px;padding:18px;border-bottom:1px dashed #cdd8e5;text-align:left; }
.pos-receipt__logo { width:44px;height:44px;display:grid;place-items:center;flex:0 0 44px;border-radius:12px;color:#fff;background:#245ed8;font-size:1.15rem; }
.pos-receipt__header h1 { margin:0;color:#15396d;font-size:1.22rem;line-height:1.1; }
.pos-receipt__header p { margin:3px 0 0;color:#63738b;font-size:.76rem; }
.pos-receipt__reference { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 18px;background:#f6f8fb; }
.pos-receipt__reference div { display:grid;gap:2px; }
.pos-receipt__reference span,.pos-receipt h2,.pos-receipt dt { color:#738198;font-size:.66rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase; }
.pos-receipt__reference strong { color:#243a5d;font-size:.78rem; }
.pos-receipt__customer,.pos-receipt__items { padding:15px 18px;border-top:1px solid #edf1f5; }
.pos-receipt h2 { margin:0 0 9px; }
.pos-receipt__customer dl { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0; }
.pos-receipt__customer dl div { min-width:0;padding:9px 10px;border:1px solid #e5ebf3;border-radius:8px;background:#f8fafc; }
.pos-receipt__customer dl div:last-child { grid-column:1/-1; }
.pos-receipt dt { margin:0 0 3px;color:#718096;font-size:.6rem;letter-spacing:.07em; }
.pos-receipt dd { margin:0;color:#20385f;font-size:.78rem;font-weight:800;line-height:1.35;overflow-wrap:anywhere; }
.pos-receipt__table { overflow-x:auto; }
.pos-receipt table { width:100%;border-collapse:collapse;font-size:.78rem; }
.pos-receipt th { padding:7px 5px;border-bottom:1px solid #dce4ee;color:#66758c;font-size:.65rem;text-align:right;text-transform:uppercase; }
.pos-receipt th:first-child,.pos-receipt td:first-child { text-align:left; }
.pos-receipt td { padding:10px 5px;border-bottom:1px solid #edf1f5;text-align:right;vertical-align:top; }
.pos-receipt td strong,.pos-receipt td span,.pos-receipt td small { display:block; }
.pos-receipt td span { margin-top:2px;color:#51627c; }
.pos-receipt td small { margin-top:4px;color:#718096;font-size:.65rem;overflow-wrap:anywhere; }
.pos-receipt td .pos-receipt__currency { display:inline;margin:0 3px 0 0;color:#7a8799;font-size:.55rem;font-weight:800; }
.pos-receipt__total { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;color:#fff;background:#153f82; }
.pos-receipt__total span { font-size:.78rem;font-weight:800;text-transform:uppercase; }
.pos-receipt__total strong { font-size:1.2rem; }
.pos-receipt__total strong small { font-size:.62rem;letter-spacing:.04em; }
.pos-receipt__footer { padding:16px 18px;text-align:center; }
.pos-receipt__footer p { margin:0;color:#223a61;font-size:.82rem;font-weight:800; }
.pos-receipt__footer small { display:block;margin-top:4px;color:#78869a;font-size:.65rem; }
@media (max-width:640px) { .pos-receipt-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }.pos-receipt-actions .login-button { grid-column:1/-1; }.pos-receipt-actions .login-button,.pos-receipt-actions .secondary-button { width:100%;min-width:0;padding:7px 8px;font-size:.7rem; }.pos-receipt { border-radius:10px;box-shadow:none; }.pos-receipt__header,.pos-receipt__customer,.pos-receipt__items { padding-right:13px;padding-left:13px; }.pos-receipt__reference { padding-right:13px;padding-left:13px; }.pos-receipt__customer dl { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px; }.pos-receipt__customer dl div { padding:8px; }.pos-receipt__customer dl div:last-child { grid-column:1/-1; } }
@media print { @page { margin:4mm;size:auto; } html,body { background:#fff!important;font-size:11px; }.app-header,.breadcrumb-wrap,.app-footer,.pos-receipt-actions { display:none!important; }.app-shell,.app-main,.pos-receipt-page { width:100%!important;max-width:none!important;margin:0!important;padding:0!important; }.pos-receipt { width:76mm;max-width:100%;margin:0 auto;border:0;border-radius:0;box-shadow:none; }.pos-receipt__header { justify-content:center;padding:5px 7px 11px;text-align:left; }.pos-receipt__logo { width:34px;height:34px;flex-basis:34px;border-radius:8px;font-size:.9rem; }.pos-receipt__header h1 { font-size:1.08rem; }.pos-receipt__header p { font-size:.66rem; }.pos-receipt__reference { gap:4px;padding:8px 7px; }.pos-receipt__reference span { font-size:.55rem; }.pos-receipt__reference strong { font-size:.69rem; }.pos-receipt__customer,.pos-receipt__items { padding:10px 7px;break-inside:avoid;page-break-inside:avoid; }.pos-receipt__customer dl { grid-template-columns:1fr 1fr;gap:5px; }.pos-receipt__customer dl div:last-child { grid-column:1/-1; }.pos-receipt__customer dl div { padding:5px 6px;border-radius:5px; }.pos-receipt dt { font-size:.52rem; }.pos-receipt dd { font-size:.68rem; }.pos-receipt table { font-size:.67rem; }.pos-receipt th { padding:5px 3px;font-size:.54rem; }.pos-receipt td { padding:7px 3px; }.pos-receipt td small { font-size:.56rem; }.pos-receipt__total { padding:10px 9px;break-inside:avoid;page-break-inside:avoid; }.pos-receipt__total strong { font-size:1rem; }.pos-receipt__footer { padding:11px 7px;break-inside:avoid;page-break-inside:avoid; }.pos-receipt__footer p { font-size:.72rem; }.pos-receipt__footer small { font-size:.56rem; }.pos-receipt__logo,.pos-receipt__reference,.pos-receipt__customer dl div,.pos-receipt__total { -webkit-print-color-adjust:exact;print-color-adjust:exact; } }

/* A4 POS sales receipt */
.pos-receipt-page { width: min(820px, 100%); }
.pos-receipt {
    min-height: 980px;
    padding: 42px 46px 30px;
    border-radius: 2px;
    color: #101010;
    font-family: Arial, Helvetica, sans-serif;
}
.pos-receipt__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    padding: 0;
    border: 0;
}
.pos-receipt__issuer { display: flex; align-items: flex-start; gap: 15px; min-width: 0; }
.pos-receipt__logo {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    overflow: hidden;
    border-radius: 50%;
    color: #164ab7;
    background: #f1f5ff;
    font-size: 1.5rem;
}
.pos-receipt__logo img { width: 100%; height: 100%; object-fit: cover; }
.pos-receipt__issuer-details h1 { margin: 0 0 6px; color: #111; font-size: 1rem; line-height: 1.2; text-transform: uppercase; }
.pos-receipt__issuer-details p { margin: 2px 0; color: #111; font-size: .76rem; line-height: 1.35; text-transform: uppercase; }
.pos-receipt__issuer-details p:last-child { text-transform: none; }
.pos-receipt__document-title { display: grid; flex: 0 0 auto; padding-top: 18px; font-size: 1.48rem; line-height: 1; text-align: right; text-transform: uppercase; }
.pos-receipt__document-title span { margin-top: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.pos-receipt__parties { display: grid; grid-template-columns: minmax(0,1fr) 210px; gap: 35px; margin-top: 72px; }
.pos-receipt__bill-to { display: grid; align-content: start; justify-items: start; }
.pos-receipt__bill-to > span { margin-bottom: 7px; font-size: .76rem; font-weight: 700; }
.pos-receipt__bill-to strong { font-size: .8rem; font-weight: 500; text-transform: uppercase; }
.pos-receipt__bill-to p { margin: 3px 0 0; font-size: .72rem; line-height: 1.35; }
.pos-receipt__reference { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 0; background: none; }
.pos-receipt__reference div { display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 9px; }
.pos-receipt__reference dt,.pos-receipt__reference dd { margin: 0; color: #111; font-size: .76rem; letter-spacing: 0; text-align: right; text-transform: none; }
.pos-receipt__reference dt { font-weight: 700; }
.pos-receipt__items { min-height: 410px; margin-top: 48px; padding: 0; border: 0; }
.pos-receipt__table { overflow: visible; }
.pos-receipt table { font-size: .78rem; }
.pos-receipt th { padding: 7px 9px; border-bottom: 1px solid #777; color: #111; font-size: .76rem; font-weight: 700; text-align: right; text-transform: none; }
.pos-receipt th:first-child { width: 66%; text-align: center; }
.pos-receipt td { padding: 5px 9px; border: 0; color: #111; line-height: 1.25; }
.pos-receipt td + td,.pos-receipt th + th { border-left: 1px solid #999; }
.pos-receipt td strong { font-weight: 500; text-transform: uppercase; }
.pos-receipt td small { margin-top: 3px; color: #444; font-size: .64rem; }
.pos-receipt__total { width: 40%; margin-left: auto; padding: 8px 10px; border-top: 1px solid #777; border-bottom: 1px solid #777; color: #111; background: #fff; }
.pos-receipt__total span { font-size: .82rem; text-transform: none; }
.pos-receipt__total strong { font-size: .82rem; font-weight: 500; }
.pos-receipt__footer { display: grid; gap: 12px; padding: 38px 8px 0; text-align: left; }
.pos-receipt__footer p { margin: 0; color: #111; font-size: .7rem; font-weight: 500; text-transform: uppercase; }
.pos-receipt__footer small { color: #555; font-size: .6rem; text-align: center; }

@media (max-width: 640px) {
    .pos-receipt { min-height: 0; padding: 22px 16px; }
    .pos-receipt__header { gap: 12px; }
    .pos-receipt__issuer { gap: 9px; }
    .pos-receipt__logo { width: 48px; height: 48px; flex-basis: 48px; font-size: 1rem; }
    .pos-receipt__issuer-details h1 { font-size: .78rem; }
    .pos-receipt__issuer-details p { font-size: .6rem; }
    .pos-receipt__document-title { padding-top: 8px; font-size: 1rem; }
    .pos-receipt__parties { grid-template-columns: minmax(0,1fr) 125px; gap: 12px; margin-top: 42px; }
    .pos-receipt__reference div { grid-template-columns: 54px minmax(0,1fr); gap: 5px; }
    .pos-receipt__reference dt,.pos-receipt__reference dd,.pos-receipt__bill-to strong { font-size: .64rem; }
    .pos-receipt__bill-to p,.pos-receipt__bill-to > span { font-size: .6rem; }
    .pos-receipt__items { min-height: 260px; margin-top: 34px; }
    .pos-receipt table { font-size: .66rem; }
    .pos-receipt th { padding: 6px 4px; font-size: .62rem; }
    .pos-receipt td { padding: 5px 4px; }
    .pos-receipt th:first-child { width: 57%; }
    .pos-receipt__total { width: 55%; }
    .pos-receipt__footer { gap: 10px; padding-top: 30px; }
}

@media print {
    @page { size: A4 portrait; margin: 10mm; }
    .pos-receipt { width: 190mm; min-height: 270mm; max-width: none; padding: 12mm 10mm 8mm; }
    .pos-receipt__items { min-height: 118mm; }
}
.pos-report-menu { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.pos-report-menu--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pos-report-card { display:grid;grid-template-columns:36px minmax(0,1fr) 16px;align-items:center;gap:10px;min-height:72px;padding:12px 14px;border:1px solid #dbe5f2;border-radius:12px;color:#17345f;background:#fff;text-decoration:none;transition:.18s ease; }
.pos-report-card:hover,.pos-report-card:focus-visible { border-color:#2f73f6;box-shadow:0 8px 20px rgba(34,83,154,.1);transform:translateY(-1px);outline:none; }
.pos-report-card>i:first-child { display:grid;width:36px;height:36px;place-items:center;border-radius:9px;color:#fff;background:#2867d9; }
.pos-report-card span { min-width:0; }.pos-report-card strong,.pos-report-card small { display:block; }.pos-report-card strong { font-size:.86rem; }.pos-report-card small { margin-top:2px;color:#70809a;font-size:.68rem;line-height:1.35; }.pos-report-card>i:last-child { color:#7790b3;font-size:.72rem; }
.pos-report-filter { display:grid;grid-template-columns:repeat(2,minmax(130px,180px)) minmax(180px,1fr) auto;align-items:end;gap:9px;margin-bottom:12px;padding:11px;border:1px solid #e0e8f2;border-radius:12px;background:#f8faff; }
.pos-report-filter label { color:#30496d;font-size:.65rem;font-weight:800;text-transform:uppercase; }.pos-report-filter input,.pos-report-filter select { width:100%;height:38px;margin-top:4px;padding:0 10px;border:1px solid #d4dfed;border-radius:8px;background:#fff; }.pos-report-filter .login-button { min-height:38px;padding:0 14px; }
.pos-report-filter--quick { grid-template-columns:minmax(220px,1fr) auto; }
.pos-report-filter[data-pos-live-filter] { grid-template-columns:repeat(auto-fit,minmax(150px,1fr));justify-content:start; }
.pos-report-filter--quick[data-pos-live-filter] { grid-template-columns:minmax(220px,1fr); }
.pos-report-filter[data-pos-live-filter] .login-button { display:none; }
.pos-report-filter__row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;grid-column:1/-1;min-width:0; }
.pos-report-filter__row--date:has(label:only-child),.pos-report-filter__row--recorder:has(label:only-child) { grid-template-columns:minmax(0,1fr); }
.pos-report-mode-menu { max-width:500px;margin:0 auto; }
.pos-report-result-count { margin:0 0 7px;text-align:left; }
.pos-report-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px; }.pos-report-summary div { padding:10px 12px;border:1px solid #e0e8f2;border-radius:10px;background:#fff; }.pos-report-summary span,.pos-report-summary strong { display:block; }.pos-report-summary span { color:#71809a;font-size:.6rem;font-weight:800;text-transform:uppercase; }.pos-report-summary strong { margin-top:3px;color:#17345f;font-size:.9rem; }.pos-report-results { max-height:58vh;overflow:auto;overscroll-behavior:contain; }
@media (max-width:640px) {
    .app-page--internal .app-main > .pos-report-page { width:100%;min-width:0;max-width:100%;margin-inline:0;padding:12px 10px;overflow:hidden; }
    .pos-report-page > * { min-width:0;max-width:100%; }
    .pos-report-page .management-heading { align-items:center;gap:8px;margin-bottom:12px; }
    .pos-report-page .management-heading h1 { font-size:1.05rem;line-height:1.15; }
    .pos-report-page .management-heading p { margin-top:3px;font-size:.66rem;line-height:1.35; }
    .pos-report-page .management-icon { width:34px;height:34px;min-width:34px;font-size:.8rem; }
    .pos-report-menu,.pos-report-menu--two { grid-template-columns:1fr;gap:7px; }
    .pos-report-card { grid-template-columns:32px minmax(0,1fr) 12px;gap:8px;min-height:54px;padding:8px 10px;border-radius:9px;box-shadow:none; }
    .pos-report-card>i:first-child { width:32px;height:32px;border-radius:8px;font-size:.78rem; }
    .pos-report-card strong { font-size:.78rem;line-height:1.2; }
    .pos-report-card small { margin-top:1px;font-size:.6rem;line-height:1.3; }
    .pos-report-filter,.pos-report-filter[data-pos-live-filter],.pos-report-filter--quick[data-pos-live-filter] { width:100%;min-width:0;grid-template-columns:minmax(0,1fr);gap:7px;margin-bottom:9px;padding:9px;border-radius:9px;overflow:hidden; }
    .pos-report-filter label,.pos-report-filter__search { grid-column:1; }
    .pos-report-filter__row { grid-column:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
    .pos-report-filter__row label { grid-column:auto; }
    .pos-report-filter label { min-width:0;text-align:left; }
    .pos-report-filter input,.pos-report-filter select { display:block;width:100%;min-width:0;max-width:100%;height:36px;margin-top:3px;font-size:.75rem; }
    .pos-report-filter .login-button { width:100%;min-height:36px; }
    .pos-report-summary { width:100%;min-width:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:9px; }
    .pos-report-summary div { min-width:0;padding:7px 6px;border-radius:8px;text-align:center; }
    .pos-report-summary span { font-size:.5rem; }
    .pos-report-summary strong { margin-top:2px;font-size:.66rem;white-space:nowrap; }
    .pos-report-results { display:block;width:100%;min-width:0;max-width:100%;max-height:54vh;border:1px solid #e1e8f2;border-radius:9px;overflow:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin; }
    .pos-report-results .data-table { min-width:650px;margin:0;font-size:.68rem; }
    .pos-report-results .data-table th { position:sticky;top:0;z-index:2;padding:8px 7px;background:#f2f6fc;white-space:nowrap; }
    .pos-report-results .data-table td { padding:8px 7px;white-space:nowrap; }
    .pos-report-results .data-table td:nth-child(3) { min-width:150px;white-space:normal; }
.pos-report-results .status-badge { min-width:auto;padding:3px 7px;white-space:nowrap; }
}

/* POS transfer receipt and vendor acceptance. */
.pos-transfer-receipt { max-width:980px;margin-inline:auto; }
.pos-transfer-receipt__top { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px; }
.pos-transfer-receipt__top h1 { margin:3px 0;color:#123566; }
.pos-transfer-receipt__top p { margin:0;color:#6d7d95; }
.pos-transfer-receipt__meta { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px; }
.pos-transfer-receipt__meta>div { display:grid;gap:3px;padding:12px;border:1px solid #dfe7f2;border-radius:10px;background:#f8faff; }
.pos-transfer-receipt__meta small,.pos-transfer-response-note small { color:#6a7c99;font-size:.67rem;font-weight:650;text-transform:uppercase; }
.pos-transfer-receipt__meta strong { color:#143762;font-weight:600; }
.pos-transfer-receipt__meta span { color:#697b94;font-size:.75rem; }
.pos-transfer-receipt__vendor { align-content:start; }
.pos-transfer-receipt__vendor>strong { display:block;max-width:100%;line-height:1.25;overflow-wrap:anywhere; }
.pos-transfer-receipt__vendor>span { display:flex;align-items:center;gap:5px;margin-top:3px;line-height:1.2; }
.pos-transfer-receipt__vendor>span i { color:#8292aa;font-size:.64rem; }
.pos-transfer-receipt__items input { width:100%;min-width:90px;height:36px;padding:0 8px;border:1px solid #d5e0ef;border-radius:7px;background:#fff; }
.pos-transfer-product-name { display:grid;gap:2px; }
.pos-transfer-product-name strong { font-weight:600; }
.pos-transfer-product-name small { color:#6d7e98;font-weight:400; }
.pos-transfer-receipt__items .data-table th { font-weight:650; }
.pos-transfer-receipt__items .data-table td { font-weight:400; }
.pos-transfer-receipt__total { display:flex;justify-content:flex-end;align-items:center;gap:24px;margin-top:12px;padding:13px 16px;border-radius:10px;color:#fff;background:#19498f; }
.pos-transfer-receipt__total span { font-size:.75rem;font-weight:650;text-transform:uppercase; }
.pos-transfer-receipt__total strong { font-size:1.2rem;font-weight:650; }
.pos-transfer-response-note { display:grid;gap:6px;margin-top:14px;padding:12px;border:1px solid #dfe7f2;border-radius:10px;background:#f8faff; }
.pos-transfer-response-note p { margin:0;color:#263c5c; }
.pos-transfer-response-note textarea { width:100%;padding:10px;border:1px solid #d5e0ef;border-radius:8px;resize:vertical;background:#fff; }
.pos-transfer-response-actions { display:flex;flex-wrap:wrap;justify-content:flex-end;gap:9px;margin-top:12px; }
.pos-transfer-response-actions .danger-button { min-height:40px;padding:0 15px;border:0;border-radius:9px;color:#fff;background:#c73b3b;font-weight:750; }
.pos-transfer-tabs { margin-bottom:12px; }
.pos-transfer-tabs .is-active { color:#fff;border-color:#2867d9;background:#2867d9; }
.pos-report-results .pos-transfer-vendor-cell { min-width:145px;white-space:normal; }
.pos-transfer-vendor-cell>strong { display:block;line-height:1.2;font-weight:600;overflow-wrap:anywhere; }
.pos-transfer-vendor-cell>span { display:flex;align-items:center;gap:4px;margin-top:4px;color:#71819a;font-size:.72rem;line-height:1.2;white-space:nowrap; }
.pos-transfer-vendor-cell>span i { color:#8796aa;font-size:.6rem; }
@media (max-width:640px) {
    .app-page--internal .app-main > .pos-transfer-receipt { width:100%;min-width:0;max-width:100%;margin-inline:0;padding:12px 9px;overflow:hidden; }
    .pos-transfer-receipt>* { min-width:0;max-width:100%; }
    .pos-transfer-receipt__top { width:100%;align-items:center;gap:8px; }
    .pos-transfer-receipt__top>div { min-width:0; }
    .pos-transfer-receipt__top h1 { font-size:1.1rem; }
    .pos-transfer-receipt__meta { grid-template-columns:1fr 1fr;gap:6px; }
    .pos-transfer-receipt__meta>div { min-width:0;padding:9px;text-align:left; }
    .pos-transfer-receipt__meta>div:nth-child(1) { grid-column:1;grid-row:1; }
    .pos-transfer-receipt__meta>div:nth-child(3) { grid-column:2;grid-row:1; }
    .pos-transfer-receipt__meta>div:nth-child(2) { grid-column:1/-1;grid-row:2; }
    .pos-transfer-receipt__items { display:block;width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid #dfe7f2;border-radius:10px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin; }
    .pos-transfer-receipt__items .data-table { display:table;width:100%;min-width:660px!important;margin:0;border:0;font-size:.7rem;background:#fff; }
    .pos-transfer-receipt__items thead { display:table-header-group; }
    .pos-transfer-receipt__items tbody { display:table-row-group; }
    .pos-transfer-receipt__items tr { display:table-row; }
    .pos-transfer-receipt__items th { position:sticky;top:0;z-index:1;padding:8px 7px;white-space:nowrap;background:#f2f6fc;font-weight:600; }
    .pos-transfer-receipt__items td { display:table-cell;width:auto;padding:8px 7px;text-align:left;white-space:nowrap;border-bottom:1px solid #edf1f6; }
    .pos-transfer-receipt__items td::before { content:none!important; }
    .pos-transfer-receipt__items td>input { width:120px;min-width:90px;text-align:left; }
    .pos-transfer-receipt__items .pos-transfer-product-name { margin:0;text-align:left; }
    .pos-transfer-receipt__total { width:100%;justify-content:space-between; }
    .pos-transfer-response-actions { display:grid;grid-template-columns:1fr 1fr; }
    .pos-transfer-response-actions .login-button { grid-column:1/-1; }
    .pos-transfer-response-actions>* { width:100%; }
    .pos-print-button span { display:none; }
}
@media print {
    .pos-transfer-receipt .pos-print-button,.pos-transfer-response-actions,.app-header,.app-sidebar,.app-footer,.internal-page-back { display:none!important; }
    .pos-transfer-receipt { max-width:none;border:0;box-shadow:none; }
}
.pos-temp-location-fields .form-lookup-button:hover,.pos-temp-location-fields .form-lookup-button:focus-visible,.pos-temp-location-fields input:focus { border-color:#2f73f6;background:#fff;box-shadow:0 0 0 3px rgba(47,115,246,.1);outline:none; }
.location-entry-panel .management-heading,.location-import-panel .management-heading { margin-bottom:9px; }
.location-entry-panel .management-heading p,.location-import-panel .management-heading p { margin-top:2px;font-size:.75rem; }
.location-entry-panel .form-grid,.location-import-panel .form-grid { gap:9px; }
.location-entry-panel .form-field,.location-import-panel .form-field { gap:4px; }
.location-entry-panel .form-field > label,.location-import-panel .form-field > label { font-size:.75rem; }
.location-entry-panel .form-field > input:not([type="checkbox"]),.location-entry-panel .form-field > select,.location-import-panel .form-field > input[type="file"] { min-height:38px;padding:7px 10px;border-radius:8px;font-size:.82rem; }
.location-import-panel .form-field > input[type="file"] { padding:5px 7px;background:#fff; }
.location-entry-panel .form-actions,.location-import-panel .form-actions { justify-content:flex-start;gap:6px;margin-top:9px; }
.location-entry-panel .form-actions .login-button,.location-entry-panel .form-actions .secondary-button,.location-import-panel .form-actions .login-button,.location-import-panel .form-actions .secondary-button { width:auto;min-width:76px;min-height:34px;padding:6px 13px;border-radius:8px;font-size:.76rem;box-shadow:none; }
@media (max-width:640px) { .location-row-actions { gap:4px; }.location-row-action { min-height:28px;padding:4px 7px;font-size:.7rem; }.location-row-action i { font-size:.68rem; } }
@media (max-width:640px) { .location-setup-tabs { width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px; }.location-setup-tabs .secondary-button { min-width:0;padding:5px 3px;font-size:.64rem;text-align:center;white-space:normal; }.location-directory-search { margin-right:0;margin-left:0; }.location-directory-scroll { max-height:360px; } }
@media (max-width:640px) { .location-entry-panel,.location-import-panel { padding:12px; }.location-entry-panel .form-actions,.location-import-panel .form-actions { flex-direction:row;justify-content:flex-end; }.location-entry-panel .form-actions .login-button,.location-entry-panel .form-actions .secondary-button,.location-import-panel .form-actions .login-button,.location-import-panel .form-actions .secondary-button { flex:0 0 auto;width:auto; } }
.customer-sales-row.is-unsold .sales-status-control { color:#c62828; }
.trip-photo-links { display:flex;gap:.45rem;flex-wrap:wrap; }
.trip-photo-links button { display:inline-flex;align-items:center;gap:.3rem;color:#176b48;background:#fff;border:1px solid #cbded5;border-radius:5px;padding:.22rem .48rem;font:inherit;font-size:.78rem;font-weight:700;cursor:pointer; }
.trip-photo-links button:hover,.trip-photo-links button:focus-visible { color:#0f5137;background:#edf8f3;border-color:#8fc4aa;outline:none; }
.data-table .sales-status-control input { display:none; }
.data-table .sales-status-control { cursor:default;pointer-events:none; }
.sales-status-editor { display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin:0 0 .7rem;padding:.5rem .7rem;border:1px solid #dbe5df;border-radius:7px;background:#f8fbf9; }
.sales-status-editor > div { display:grid;gap:.05rem; }
.sales-status-editor strong { color:#1f2937; }
.sales-status-editor small { color:#64748b;font-size:.78rem;line-height:1.2; }
.sales-status-editor .section-kicker { font-size:.68rem;line-height:1.1; }
.sales-status-editor .status-badge { white-space:nowrap;padding:.3rem .55rem; }
.sales-status-editor.is-unsold { border-color:#f1b6b6;background:#fff7f7; }
.sales-status-editor.is-unsold strong,.sales-status-editor.is-unsold .sales-status-control { color:#c62828; }
@media (max-width:640px) { .sales-status-editor { align-items:center;flex-direction:row; } }

.visit-summary-stack,.visit-summary-place-stack { display:grid;gap:.55rem; }
.visit-summary-trip,.visit-summary-place { border:1px solid #dbe4f1;border-radius:9px;background:#fff;overflow:hidden; }
.visit-summary-trip > summary,.visit-summary-place > summary { display:grid;align-items:center;gap:.7rem;list-style:none;cursor:pointer; }
.visit-summary-trip > summary { grid-template-columns:minmax(0,1fr) auto auto auto;padding:.5rem .68rem; }
.visit-summary-trip > summary::-webkit-details-marker,.visit-summary-place > summary::-webkit-details-marker { display:none; }
.visit-summary-trip > summary > span:first-child { display:grid;gap:.05rem; }
.visit-summary-trip > summary > i,.visit-summary-place > summary > i { color:#2563dc;transition:transform .2s ease; }
.visit-summary-trip[open] > summary > i,.visit-summary-place[open] > summary > i { transform:rotate(180deg); }
.visit-summary-trip__count { display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:.28rem;color:#64748b;font-size:.73rem; }
.visit-summary-count-pill { display:inline-flex;align-items:center;gap:.24rem;min-height:1.55rem;padding:.16rem .4rem;border:1px solid #dce7f5;border-radius:999px;background:#f7faff;white-space:nowrap; }
.visit-summary-count-pill i { width:.82rem;color:#3971c9;text-align:center;font-size:.68rem; }
.visit-summary-count-pill strong { color:#173a69;font-size:.82rem; }
.visit-summary-count-pill.is-customer { border-color:#d9e9df;background:#f4fbf6; }
.visit-summary-count-pill.is-customer i,.visit-summary-count-pill.is-customer strong { color:#248053; }
.visit-summary-count-pill.is-apprentice { border-color:#eadff7;background:#faf6ff; }
.visit-summary-count-pill.is-apprentice i,.visit-summary-count-pill.is-apprentice strong { color:#7a45ad; }
.visit-summary-trip__body { border-top:1px solid #e6ecf4;padding:.65rem;background:#f8fbff; }
.visit-summary-trip__overview { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;margin:0 0 .65rem; }
.visit-summary-trip__overview > div { display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.42rem .55rem;border:1px solid #e2e8f0;border-radius:6px;background:#fff; }
.visit-summary-trip__overview dt { color:#64748b;font-size:.7rem;font-weight:800;text-transform:uppercase; }
.visit-summary-trip__overview dd { margin:0;font-size:.8rem;font-weight:700;text-align:right; }
.visit-summary-place > summary { grid-template-columns:auto minmax(0,1fr) auto auto;padding:.55rem .65rem; }
.visit-summary-place__icon,.visit-summary-customer__avatar { display:grid;place-items:center;width:2rem;height:2rem;border-radius:7px;background:#eaf4ff;color:#1460d2; }
.visit-summary-place summary span:nth-child(2) { display:grid;gap:.08rem; }
.visit-summary-place summary small,.visit-summary-customer small { color:#64748b;font-size:.75rem; }
.visit-summary-place__count { color:#51627a;font-size:.78rem;white-space:nowrap; }
.visit-summary-place__body { border-top:1px solid #edf1f6;padding:.55rem;background:#fff; }
.visit-summary-place__meta { display:flex;gap:.8rem;margin-bottom:.45rem;color:#64748b;font-size:.75rem; }
.visit-summary-customer-list { display:grid;gap:.35rem; }
.visit-summary-customer { display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.55rem;padding:.45rem .5rem;border:1px solid #e5ebf3;border-radius:7px;color:#0f2747;text-decoration:none; }
.visit-summary-customer > span:nth-child(2) { display:grid;gap:.05rem; }
.visit-summary-customer:hover { background:#f3f7ff;border-color:#b9cff5; }
.visit-summary-customer > i { color:#2563dc; }
@media (max-width:640px) {
    .visit-summary-trip > summary { grid-template-columns:minmax(0,1fr) auto;gap:.45rem;padding:.48rem .62rem; }
    .visit-summary-trip > summary .status-badge { display:none; }
    .visit-summary-trip__count { grid-column:1 / -1;grid-row:2;justify-content:flex-start; }
    .visit-summary-trip > summary > i { grid-column:2;grid-row:1; }
    .visit-summary-count-pill { min-height:1.5rem;padding:.14rem .36rem;font-size:.68rem; }
    .visit-summary-trip__overview { grid-template-columns:1fr 1fr; }
    .visit-summary-place > summary { grid-template-columns:auto minmax(0,1fr) auto; }
    .visit-summary-place__count { display:none; }
}
.sales-vin-editor { display:grid;gap:.5rem;margin:-.35rem 0 1rem;padding:.85rem .95rem;border:1px solid #dbe5df;border-radius:9px;background:#fff; }
.sales-vin-editor label { font-weight:700;color:#24352d; }
.sales-vin-editor input { width:100%;min-height:42px;border:1px solid #cbd5d1;border-radius:7px;padding:.65rem .75rem;text-transform:uppercase; }
.sales-vin-editor > div { display:flex;align-items:center;justify-content:space-between;gap:.75rem; }
.sales-vin-editor small { color:#64748b; }
.record-media-preview {
    display: block;
    width: min(100%, 420px);
    max-height: 280px;
    margin-top: 0.65rem;
    border: 1px solid var(--border-color, #dfe5ee);
    border-radius: 16px;
    background: #f5f7fb;
    object-fit: contain;
    object-position: center;
}

.choice-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 680px) {
    .choice-card-grid {
        grid-template-columns: 1fr;
    }
}

.registration-flow-banner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.5rem;
    align-items: center;
    margin: 0 0 1.25rem;
    padding: 1.35rem;
    border: 1px solid #d8e5f8;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(47, 115, 246, 0.16), transparent 18rem),
        linear-gradient(135deg, #f9fbff, #edf4ff);
}

.registration-flow-banner__copy h2 {
    margin: 0.25rem 0 0.35rem;
    color: var(--blue-900);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
}

.registration-flow-banner__copy p {
    max-width: 650px;
    margin: 0;
    color: var(--gray-700);
    line-height: 1.55;
}

.registration-flow-progress {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.registration-flow-progress span {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    color: var(--blue-800);
    font-size: 0.72rem;
    font-weight: 700;
}

.registration-flow-progress b {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--blue-700);
    box-shadow: 0 7px 16px rgba(36, 94, 216, 0.22);
}

.registration-flow-progress i {
    color: #9db5da;
    font-size: 0.65rem;
}

.record-form[data-normalized-customer-form] {
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.registration-accordion {
    overflow: hidden;
    margin-bottom: 0.9rem;
    border: 1px solid #dce5f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(25, 62, 120, 0.06);
}

.registration-accordion[open] {
    border-color: #b9cff3;
    box-shadow: 0 13px 32px rgba(25, 62, 120, 0.1);
}

.registration-accordion__summary {
    display: flex;
    min-height: 78px;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.registration-accordion__summary::-webkit-details-marker {
    display: none;
}

.registration-accordion__summary:hover {
    background: #f8fbff;
}

.registration-accordion__number {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 13px;
    color: var(--blue-700);
    background: var(--blue-100);
    font-size: 0.82rem;
    font-weight: 800;
}

.registration-accordion[open] .registration-accordion__number {
    color: #fff;
    background: var(--blue-700);
}

.registration-accordion__title {
    display: grid;
    flex: 1;
    gap: 0.18rem;
}

.registration-accordion__title strong {
    color: var(--blue-900);
    font-size: 1rem;
}

.registration-accordion__title small {
    color: var(--gray-500);
    font-size: 0.76rem;
    font-weight: 500;
}

.registration-accordion__icon {
    color: var(--blue-700);
    transition: transform 180ms ease;
}

.registration-accordion[open] .registration-accordion__icon {
    transform: rotate(180deg);
}

.registration-accordion__body {
    padding: 1.1rem 1.2rem 1.3rem;
    border-top: 1px solid #e6edf7;
    background: linear-gradient(180deg, #fbfdff, #fff 90px);
}

.record-form[data-normalized-customer-form] > .form-actions {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid #dce5f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(25, 62, 120, 0.14);
    backdrop-filter: blur(10px);
}

@media (max-width: 820px) {
    .registration-flow-banner {
        grid-template-columns: 1fr;
    }

    .registration-flow-progress {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 0.2rem;
    }
}

@media (max-width: 560px) {
    .registration-flow-banner,
    .registration-accordion__body {
        padding: 1rem;
    }

    .registration-flow-progress span {
        min-width: 42px;
    }

    .registration-accordion__summary {
        min-height: 68px;
        padding: 0.85rem;
    }
}

/* Slim registration progress banner */
.customer-place-flow .registration-flow-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    margin-bottom: 0.7rem;
    padding: 0.65rem 0.8rem;
    border-radius: 10px;
    background: #f4f8ff;
    box-shadow: none;
}

.customer-place-flow .registration-flow-banner__copy {
    min-width: 0;
}

.customer-place-flow .registration-flow-banner__copy .section-kicker {
    font-size: 0.66rem;
    line-height: 1;
}

.customer-place-flow .registration-flow-banner__copy h2 {
    margin: 0.16rem 0 0.12rem;
    font-size: 0.98rem;
    line-height: 1.2;
}

.customer-place-flow .registration-flow-banner__copy p {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
}

.customer-place-flow .registration-flow-progress {
    flex: 0 0 auto;
    gap: 0.35rem;
}

.customer-place-flow .registration-flow-progress span {
    min-width: 34px;
    gap: 0.12rem;
    font-size: 0.62rem;
    line-height: 1;
}

.customer-place-flow .registration-flow-progress b {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    box-shadow: none;
    font-size: 0.68rem;
}

.customer-place-flow .registration-flow-progress i {
    font-size: 0.52rem;
}

@media (max-width: 620px) {
    .customer-place-flow .registration-flow-banner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.55rem;
        padding: 0.58rem 0.65rem;
    }

    .customer-place-flow .registration-flow-banner__copy p {
        display: none;
    }

    .customer-place-flow .registration-flow-progress {
        overflow: visible;
        padding: 0;
    }
}

@media (max-width: 390px) {
    .customer-place-flow .registration-flow-banner {
        grid-template-columns: 1fr;
    }

    .customer-place-flow .registration-flow-progress {
        justify-content: flex-start;
    }
}

/* Slim place registration heading */
.customer-place-flow .place-workspace__header {
    gap: 0.55rem;
    margin-bottom: 0.6rem;
    padding-bottom: 0.5rem;
    border-bottom-color: #e7edf6;
}

.customer-place-flow .place-workspace__icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 7px;
    font-size: 0.78rem;
}

.customer-place-flow .place-workspace__header h3 {
    margin: 0 0 0.05rem;
    font-size: 0.86rem;
    line-height: 1.15;
}

.customer-place-flow .place-workspace__header p {
    margin: 0;
    font-size: 0.7rem;
    line-height: 1.25;
}

.customer-place-flow .flow-top-actions {
    display: flex;
    margin-bottom: 0.55rem;
}

.customer-place-flow .flow-back-link {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 0.38rem;
    padding: 0.36rem 0.58rem;
    border: 1px solid #dbe4f0;
    border-radius: 8px;
    color: var(--blue-800);
    background: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
}

.customer-place-flow .flow-back-link:hover {
    border-color: #b8ccee;
    background: #f5f9ff;
}

.customer-place-flow .form-actions :is(.secondary-button, .login-button, .danger-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38rem;
}

.customer-place-flow .place-workspace--new {
    padding: 0;
    border: 0;
    background: transparent;
}

.customer-place-flow .place-registration-toggle {
    margin: 0;
}

.customer-place-flow .place-registration-toggle + .place-registration-toggle {
    margin-top: 0.55rem;
}

.customer-place-flow .place-registration-toggle .registration-accordion__summary {
    min-height: 58px;
    padding: 0.65rem 0.75rem;
}

.customer-place-flow .place-registration-toggle .registration-accordion__number {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    border-radius: 8px;
}

.customer-place-flow .accordion-inline-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid #e5ebf4;
}

.customer-place-flow .accordion-inline-actions .secondary-button {
    min-height: 34px;
    padding: 0.42rem 0.65rem;
    border-radius: 8px;
    font-size: 0.74rem;
}

/* Separated customer details: compact, consistent media gallery. */
.retailer-visit-panel .normalized-media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.retailer-visit-panel .normalized-media-grid .retailer-media-item {
    min-height: 0;
    padding: 10px;
    border-radius: 12px;
}

.retailer-visit-panel .normalized-media-grid .media-empty-state {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 10px;
}

@media (max-width: 900px) {
    .retailer-visit-panel .normalized-media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .retailer-visit-panel .normalized-media-grid .retailer-media-item {
        min-height: 0;
        gap: 7px;
        padding: 8px;
    }

    .retailer-visit-panel .normalized-media-grid .retailer-media-item span {
        font-size: 0.62rem;
    }
}

/* Final internal header override: must follow all legacy mobile rules. */
.app-page--internal .app-header--internal {
    left: 0;
    right: 0;
    width: 100%;
    min-height: 78px;
    padding: 0 72px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(110deg, #0b2d62, #1f4f95);
    box-shadow: none;
}

@media (max-width: 720px) {
    .app-page--internal .app-shell {
        padding-top: 82px;
    }

    .app-page--internal .app-header--internal {
        min-height: 76px;
        padding: 0 58px;
    }

    .app-page--internal .internal-page-header__back {
        left: 12px;
        width: 38px;
        height: 38px;
    }

    .app-page--internal .internal-page-header__title {
        font-size: 1.08rem;
        font-weight: 780;
    }

    .app-page--internal .app-main {
        width: 100%;
        min-height: calc(100dvh - 82px);
        margin: 0;
        padding: 15px 11px 28px;
        border-radius: 24px 24px 0 0;
    }
}

/* Keep the active customer-visit workspace on one visual surface. */
.customer-place-flow .current-place-strip--compact {
    padding: 8px 2px 12px;
    border: 0;
    border-bottom: 1px solid #dce5ef;
    border-radius: 0;
    background: transparent;
}

.customer-place-flow .registration-accordion {
    border-width: 1px 0 0;
    border-color: #dce5ef;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.customer-place-flow .registration-accordion[open] {
    border-color: #c9d8ec;
    box-shadow: none;
}

.customer-place-flow .registration-accordion__summary,
.customer-place-flow .registration-accordion__summary:hover,
.customer-place-flow .registration-accordion__body {
    background: transparent;
}

.customer-place-flow .registration-accordion__body {
    padding-right: 0;
    padding-left: 0;
}

.sale-purchase-row .form-field input,
.mobile-line-form .sale-purchase-row .form-field input {
    min-height: 32px;
    padding: 0 1px 5px;
    font-size: .8rem;
}

.sale-purchase-row .icon-button,
.mobile-line-form .sale-purchase-row .icon-button {
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    margin-bottom: 5px;
    border-radius: 7px;
}
.sales-customer-picker {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.sales-customer-picker__label {
    color: #64748b;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.sales-customer-picker__button {
    align-items: center;
    background: #f8fbff;
    border: 1px solid #cbdcf5;
    border-radius: 12px;
    color: #10233f;
    display: flex;
    justify-content: space-between;
    min-height: 48px;
    padding: 9px 12px;
    width: 100%;
}

.sales-customer-picker__button > span {
    align-items: center;
    display: flex;
    gap: 10px;
}

.sales-customer-picker__button > span > i {
    color: #2563eb;
}

.sales-customer-picker__clear {
    background: none;
    border: 0;
    color: #64748b;
    font-size: .78rem;
    justify-self: start;
    padding: 0;
}

.sales-customer-dialog {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    max-height: min(76vh, 620px);
    max-width: 480px;
    padding: 16px;
    width: calc(100% - 28px);
}

.sales-customer-dialog::backdrop {
    background: rgba(15, 23, 42, .56);
}

.sales-customer-dialog__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sales-customer-dialog__header span {
    color: #2563eb;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.sales-customer-dialog__header h2 {
    font-size: 1.25rem;
    margin: 2px 0 0;
}

.sales-customer-dialog__header button {
    background: #eef4ff;
    border: 0;
    border-radius: 50%;
    height: 38px;
    width: 38px;
}

.sales-customer-dialog__search {
    align-items: center;
    background: #f8fafc;
    border: 1px solid #dbe4ef;
    border-radius: 11px;
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    padding: 0 11px;
}

.sales-customer-dialog__search input {
    background: transparent;
    border: 0;
    min-height: 44px;
    outline: 0;
    width: 100%;
}

.sales-customer-dialog__list {
    display: grid;
    gap: 7px;
    max-height: 52vh;
    overflow-y: auto;
}

.sales-customer-option {
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    color: #10233f;
    display: flex;
    justify-content: space-between;
    padding: 10px 11px;
    text-align: left;
    width: 100%;
}

.sales-customer-option:hover,
.sales-customer-option:focus-visible {
    background: #f3f7ff;
    border-color: #9dbcf2;
}

.sales-customer-option span {
    display: grid;
    gap: 2px;
}

.sales-customer-option small {
    color: #64748b;
    font-size: .76rem;
}

.sales-customer-option__meta {
    justify-items: end;
    margin-left: 10px;
}

.sales-customer-option__meta b {
    color: #2563eb;
    font-size: .76rem;
}

.sales-customer-option__meta em {
    background: #fff4d6;
    border-radius: 999px;
    color: #8a5b00;
    font-size: .65rem;
    font-style: normal;
    font-weight: 800;
    padding: 2px 7px;
}
.registration-accordion.is-locked {
    background: #f8fafc;
    opacity: .72;
}

.registration-accordion.is-locked > summary {
    cursor: not-allowed;
}

.registration-accordion.is-locked .registration-accordion__icon {
    color: #94a3b8;
}
/* Create Customers New/Edit gateway */
.customer-mode-gateway {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.customer-mode-gateway--accordion {
    margin-bottom: 0;
}

.record-accordion-mode-panel {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid #e4ebf5;
}

.registration-accordion__body > .customer-edit-panel {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.registration-accordion__body > .customer-edit-panel .management-heading {
    margin-bottom: 0.75rem;
}
.customer-mode-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 66px;
    padding: 0.7rem 0.8rem;
    border: 1px solid #d7e2f2;
    border-radius: 15px;
    color: var(--blue-900);
    background: #fff;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.customer-mode-card:hover,
.customer-mode-card.is-active {
    border-color: #8eb0ec;
    background: #f5f9ff;
    box-shadow: 0 9px 24px rgba(25, 62, 120, 0.09);
}

.customer-mode-card__icon {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.customer-mode-card > span:nth-child(2) {
    display: grid;
    gap: 0.1rem;
}

.customer-mode-card small,
.customer-edit-card small {
    color: var(--gray-500);
    font-size: 0.72rem;
}

.customer-edit-results {
    display: grid;
    gap: 0.55rem;
    margin-top: 1rem;
}

.customer-edit-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #dce5f1;
    border-radius: 13px;
    background: #fff;
}

.customer-edit-card > div {
    display: grid;
    min-width: 0;
    gap: 0.12rem;
}

@media (max-width: 560px) {
    .customer-mode-card {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        gap: 0.45rem;
        min-height: 58px;
        padding: 0.55rem;
    }

    .customer-mode-card__icon {
        width: 30px;
        height: 30px;
    }

    .customer-mode-card small {
        font-size: 0.64rem;
    }

    .customer-edit-card {
        align-items: flex-start;
    }
}
/* Standalone Create Customer accordion flow */
.standalone-customer-flow {
    gap: 0;
}

.standalone-customer-flow > .registration-accordion {
    width: 100%;
}

.standalone-customer-flow > .form-actions {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    margin-top: 0.35rem;
    padding: 0.85rem;
    border: 1px solid #dce5f1;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 30px rgba(25, 62, 120, 0.14);
    backdrop-filter: blur(10px);
}

.standalone-sales-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.standalone-sales-menu__button {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 58px;
    padding: 0.5rem 0.65rem;
    border: 1px solid #dce5f1;
    border-radius: 14px;
    color: var(--blue-900);
    background: #fff;
    text-align: left;
    cursor: pointer;
}

.standalone-sales-menu__button:hover,
.standalone-sales-menu__button.is-active {
    border-color: #9fbcf0;
    background: #f5f9ff;
    box-shadow: 0 8px 20px rgba(25, 62, 120, 0.08);
}

.standalone-sales-menu__button > span:nth-child(2) {
    display: grid;
    gap: 0.05rem;
}

.standalone-sales-menu__button small {
    color: var(--gray-500);
    font-size: 0.67rem;
    line-height: 1.15;
}

.standalone-sales-menu__icon {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: 10px;
    color: var(--blue-700);
    background: var(--blue-100);
}

.standalone-sales-panel {
    margin-top: 0.9rem;
    padding-top: 0.9rem;
    border-top: 1px solid #e4ebf5;
}

.standalone-promo-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid #dce5f1;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

.standalone-promo-choice input {
    width: 40px;
    height: 22px;
    min-height: 22px !important;
    flex: 0 0 40px;
    padding: 0 !important;
    margin: 0;
    appearance: none;
    position: relative;
    border: 1px solid #b8c5d8;
    border-radius: 999px;
    background: #dbe3ee;
    box-shadow: inset 0 1px 2px rgba(15, 39, 71, .12);
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.standalone-promo-choice input::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 5px rgba(15, 39, 71, .28);
    transition: transform .18s ease;
}

.standalone-promo-choice input:checked {
    border-color: #1f5fd0;
    background: #2867d8;
}

.standalone-promo-choice input:checked::before {
    transform: translateX(18px);
}

.standalone-promo-choice input:focus-visible {
    outline: 3px solid rgba(40, 103, 216, .22);
    outline-offset: 2px;
}

.standalone-promo-choice:has(input:checked) {
    border-color: #8eb4f3;
    background: #f1f6ff;
    box-shadow: 0 0 0 2px rgba(40, 103, 216, .08);
}

.standalone-promo-choice span {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.standalone-promo-choice small {
    color: var(--blue-700);
    font-weight: 800;
}

.standalone-promo-panel > .form-field {
    margin: 0;
}

/* Marketing notes report */
.marketing-notes-result-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
    color: var(--gray-700);
}
.marketing-notes-result-bar > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #245ed8;
    background: #edf4ff;
}
.marketing-notes-result-bar p { margin: 0; }
.marketing-notes-result-bar strong { color: var(--gray-900); font-size: 1.05rem; }
.marketing-note-list { display: grid; gap: 14px; }
.marketing-note-card {
    overflow: hidden;
    border: 1px solid #dce5f1;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(31, 67, 112, .06);
}
.marketing-note-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 18px;
    border-bottom: 1px solid #e7edf6;
    background: linear-gradient(135deg, #f8fbff, #f2f6fc);
}
.marketing-note-card__reference { display: flex; align-items: center; gap: 11px; }
.marketing-note-card__reference > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #fff;
    background: #2867d8;
}
.marketing-note-card__reference div { display: grid; gap: 2px; }
.marketing-note-card__reference small,
.marketing-note-card__details small { color: var(--gray-600); font-size: .76rem; }
.marketing-note-card__reference strong { color: var(--gray-900); }
.marketing-note-card__header time { display: flex; align-items: center; gap: 7px; color: var(--gray-600); font-size: .82rem; }
.marketing-note-card__body { padding: 18px; }
.marketing-note-card__body > p { margin: 0; color: var(--gray-900); font-size: .96rem; line-height: 1.65; white-space: normal; }
.marketing-note-card__feedback { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px; border-radius: 11px; color: #174d91; background: #edf5ff; }
.marketing-note-card__feedback span { display: grid; gap: 1px; }
.marketing-note-card__feedback small { font-size: .72rem; color: #55708f; }
.marketing-note-card__details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin: 0; border-top: 1px solid #e7edf6; border-bottom: 1px solid #e7edf6; background: #e7edf6; }
.marketing-note-card__details > div { min-width: 0; padding: 13px 16px; background: #fbfcfe; }
.marketing-note-card__details dt { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; color: #55708f; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.marketing-note-card__details dd { display: grid; gap: 3px; margin: 0; min-width: 0; }
.marketing-note-card__details dd strong,
.marketing-note-card__details dd small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketing-note-card__footer { display: flex; justify-content: flex-end; padding: 12px 16px; }
.marketing-notes-empty { display: grid; justify-items: center; gap: 7px; padding: 42px 20px; text-align: center; border: 1px dashed #cfd9e7; border-radius: 16px; background: #f8fafc; }
.marketing-notes-empty > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 15px; color: #2867d8; background: #eaf2ff; font-size: 1.25rem; }
.marketing-notes-empty h2,.marketing-notes-empty p { margin: 0; }
.marketing-notes-empty p { color: var(--gray-600); }
@media (max-width: 720px) {
    .marketing-note-card__header { align-items: flex-start; flex-direction: column; }
    .marketing-note-card__details { grid-template-columns: 1fr; }
    .marketing-note-card__footer .secondary-button { width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
    .standalone-sales-menu__button {
        grid-template-columns: 28px minmax(0, 1fr) auto;
        gap: 0.4rem;
        min-height: 52px;
        padding: 0.42rem 0.5rem;
    }

    .standalone-sales-menu__icon {
        width: 28px;
        height: 28px;
    }

    .standalone-sales-menu__button small {
        font-size: 0.62rem;
    }

    .standalone-customer-flow > .form-actions {
        bottom: 0.35rem;
        padding: 0.65rem;
    }

    .standalone-customer-flow > .form-actions .login-button {
        width: 100%;
        justify-content: center;
    }
}

/* Compact, flat business-location banner on registration editing. */
.registration-edit-location-strip {
    min-height: 0;
    margin-bottom: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-width: 0 0 1px;
    border-color: #dce5ef;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.registration-edit-location-strip h2 {
    margin: 0.08rem 0;
    font-size: 1rem;
    line-height: 1.2;
}

.registration-edit-location-strip p {
    font-size: 0.8rem;
    line-height: 1.25;
}

.registration-edit-location-strip .section-kicker {
    font-size: 0.6rem;
    letter-spacing: 0.09em;
}

.registration-edit-location-strip .status-badge {
    padding: 0.3rem 0.5rem;
    font-size: 0.68rem;
}

.registration-edit-location-strip .current-place-strip__actions .secondary-button--small {
    min-height: 30px;
    padding: 0.3rem 0.55rem;
}
.legacy-existing-assignment {
    max-width: 760px;
    margin-inline: auto;
}

.legacy-existing-assignment .registration-accordion__summary {
    min-height: 72px;
    padding: 14px 18px;
}

.legacy-existing-assignment .registration-accordion__title strong {
    font-size: 1rem;
    line-height: 1.25;
}

.legacy-existing-assignment__body {
    padding: 18px;
}

.legacy-existing-assignment__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.legacy-existing-assignment__body .form-actions {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #dce5f2;
}

.legacy-existing-assignment__body .login-button {
    width: auto;
    min-width: 230px;
    margin-left: auto;
}

@media (max-width: 640px) {
    .legacy-existing-assignment .registration-accordion__summary {
        min-height: 64px;
        padding: 12px 14px;
    }

    .legacy-existing-assignment .registration-accordion__number {
        width: 40px;
        height: 40px;
    }

    .legacy-existing-assignment__body {
        padding: 14px;
    }

    .legacy-existing-assignment__fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .legacy-existing-assignment__body .form-actions {
        margin-top: 14px;
        padding-top: 12px;
    }

    .legacy-existing-assignment__body .login-button {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding-inline: 12px;
        font-size: .88rem;
    }
}
/* POS Sales field accordions. */
.pos-sales-panel {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    text-align: left;
}

.pos-sales-heading {
    margin-bottom: 12px;
}

.pos-sales-form {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8e0e9;
    border-radius: 14px;
    background: #fff;
}

.pos-sales-field {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #cfd7df;
    background: #fff;
}

.pos-sales-field > summary {
    min-height: 58px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) 16px;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    color: #101820;
    cursor: pointer;
    list-style: none;
}

.pos-sales-field > summary::-webkit-details-marker {
    display: none;
}

.pos-sales-field > summary strong {
    min-width: 0;
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
}

.pos-sales-field > summary span {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: #48576a;
    font-size: .78rem;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-sales-field > summary i {
    color: #b9c1c9;
    transition: transform .18s ease, color .18s ease;
}

.pos-sales-field[open] > summary i {
    color: #0ca66d;
    transform: rotate(180deg);
}

.pos-sales-field__body {
    padding: 4px 16px 16px;
    background: #f9fbfd;
}

.pos-sales-field__body label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.pos-sales-field__body :is(input,select,textarea) {
    width: 100%;
}

.pos-sales-field__body > :is(input,select,textarea),
.pos-sales-combobox {
    min-height: 44px;
    border: 1px solid #c9d5e4;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(25, 62, 120, .05);
}

.pos-sales-field__body > :is(input,select,textarea) {
    padding: 10px 12px;
    color: #12213a;
    font: inherit;
    outline: none;
}

.pos-sales-field__body > :is(input,select,textarea):focus,
.pos-sales-combobox:focus-within {
    border-color: #2f73f6;
    box-shadow: 0 0 0 3px rgba(47, 115, 246, .12);
}

.pos-sales-combobox {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.pos-sales-combobox > i {
    color: #7890ad;
    font-size: .75rem;
    pointer-events: none;
}

.pos-sales-combobox > i:last-child {
    color: #2f73f6;
    font-size: .68rem;
}

.pos-sales-combobox input {
    min-width: 0;
    min-height: 42px;
    padding: 8px 0;
    border: 0;
    outline: 0;
    color: #12213a;
    background: transparent;
    font: inherit;
}

.pos-sales-combobox input::placeholder {
    color: #7a8799;
}

.pos-sales-actions {
    margin: 0;
    padding: 14px 16px;
    background: #f5f8fc;
}
.pos-sales-live-receipt { margin:16px;border:1px solid #dce5f0;border-radius:13px;background:#fff;box-shadow:0 8px 22px rgba(28,55,90,.07);overflow:hidden; }
.pos-sales-live-receipt__head { display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 16px;color:#fff;background:#153f82; }
.pos-sales-live-receipt__head > div { display:grid;gap:2px; }
.pos-sales-live-receipt__head .section-kicker { color:#bfd4ff;font-size:.6rem;letter-spacing:.12em;text-transform:uppercase; }
.pos-sales-live-receipt__head strong { font-size:1.08rem; }
.pos-sales-live-receipt__customer { display:flex;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid #e7edf4;font-size:.76rem; }
.pos-sales-live-receipt__customer span { color:#738198;font-weight:800;text-transform:uppercase; }
.pos-sales-live-receipt__table { overflow-x:auto;padding:4px 16px; }
.pos-sales-live-receipt table { width:100%;border-collapse:collapse;font-size:.76rem; }
.pos-sales-live-receipt th,.pos-sales-live-receipt td { padding:9px 7px;border-bottom:1px solid #edf1f5;text-align:right; }
.pos-sales-live-receipt th:first-child,.pos-sales-live-receipt td:first-child { text-align:left; }
.pos-sales-live-receipt th { color:#718096;font-size:.63rem;text-transform:uppercase; }
.pos-sales-live-receipt__totals { display:grid;gap:5px;margin:0;padding:11px 16px 14px; }
.pos-sales-live-receipt__totals div { display:flex;justify-content:flex-end;gap:25px; }
.pos-sales-live-receipt__totals dt { min-width:115px;color:#67768c;font-size:.72rem; }
.pos-sales-live-receipt__totals dd { min-width:100px;margin:0;text-align:right;font-size:.76rem;font-weight:800; }
.pos-sales-live-receipt__totals .is-net { padding-top:7px;border-top:1px solid #dce5f0;color:#153f82; }
@media (max-width:640px) {
    .pos-sales-live-receipt { margin:11px; }
    .pos-sales-live-receipt__head,.pos-sales-live-receipt__customer { padding-right:12px;padding-left:12px; }
    .pos-sales-live-receipt__table { padding-right:7px;padding-left:7px; }
    .pos-sales-live-receipt th,.pos-sales-live-receipt td { padding:8px 4px;font-size:.67rem; }
    .pos-sales-live-receipt__totals { padding-right:12px;padding-left:12px; }
}

.pos-sale-products { padding: 13px 16px 16px; border-top: 1px solid #e6edf5; }
.pos-sale-products__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.pos-sale-products__heading > div { display: grid; gap: 2px; }
.pos-sale-products__heading strong { color: #12213a; font-size: .94rem; }
.pos-sale-product-add { width: auto; min-width: 0; min-height: 35px; padding: 6px 10px; border-radius: 9px; font-size: .74rem; }
.pos-sale-product-list { display: grid; gap: 10px; }
.pos-sale-product__fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; padding: 12px; }
.pos-sale-product__history { grid-column: 1 / -1; margin: -2px 0 0; }
.pos-sale-product.is-collapsed .pos-sale-product__fields { display: none; }
.pos-sale-product .form-lookup-button:disabled,.pos-sale-product .form-lookup-button.is-disabled { opacity: .55; cursor: not-allowed; }

.pos-sales-form--lined { display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));overflow-x:auto;border-radius:10px; }
.pos-sales-form--lined > .pos-customer-mode,.pos-sales-form--lined > .pos-sale-products,.pos-sales-form--lined > .pos-sales-actions { grid-column:1 / -1; }
.pos-sales-form--lined > .pos-sales-field { min-width:0;border-right:1px solid #d8e0e9;border-bottom:1px solid #d8e0e9; }
.pos-sales-form--lined > .pos-sales-field > summary { display:none; }
.pos-sales-form--lined > .pos-sales-field > .pos-sales-field__body { height:100%;display:flex;flex-direction:column;gap:7px;padding:10px;background:#fff; }
.pos-sales-form--lined > .pos-sales-field > .pos-sales-field__body label { position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;color:#26364d;font-size:.72rem;font-weight:800;white-space:normal; }
.pos-sales-form--lined .pos-sales-derived-value { min-height:44px;display:flex;align-items:center;padding:10px 12px;border:1px solid #c9d5e4;border-radius:8px;background:#f7f9fc; }
.pos-sales-form--lined .pos-sale-products { padding:14px 10px;background:#f7f9fc; }
.pos-sales-form--lined .pos-sale-product__fields { grid-template-columns:minmax(150px,1.2fr) minmax(150px,1.2fr) minmax(95px,.65fr) minmax(95px,.65fr) minmax(155px,1fr);align-items:end;padding:10px;border-top:1px solid #d8e0e9; }
.pos-sales-form--lined .pos-transfer-product { border-radius:8px;background:#fff; }

.pos-sales-form--sectioned > .pos-sales-field,
.pos-sales-form--sectioned > .pos-sale-products { display:none; }
.pos-sales-validation-message { margin:10px 12px 0; }
.pos-sales-form--sectioned > .is-active-section { display:block; }
.pos-sales-form--sectioned > .pos-sales-field > summary { display:none; }
.pos-sales-form--sectioned > .pos-sales-field > .pos-sales-field__body { padding:18px;background:#fff; }
.pos-sales-form--sectioned > .pos-sales-field > .pos-sales-field__body label { position:static;width:auto;height:auto;margin:0 0 7px;overflow:visible;clip:auto;display:block;color:#24354d;font-size:.78rem;font-weight:800;white-space:normal; }
.pos-sales-section-menu { display:grid;grid-template-columns:repeat(8,minmax(70px,1fr));gap:5px;padding:8px;border-bottom:1px solid #d8e0e9;background:#f7f9fc;overflow-x:auto; }
.pos-sales-section-menu button { width:68px;min-height:78px;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;padding:0;border:0;color:#53647b;background:transparent;font:inherit;font-size:.58rem;font-weight:800;cursor:pointer; }
.pos-sales-section-menu button span { display:block;width:100%;line-height:1.15;text-align:center;white-space:normal;overflow-wrap:anywhere; }
.pos-sales-section-menu button i { width:44px;height:44px;display:grid;place-items:center;border:2px solid transparent;border-radius:50%;color:#2563d9;background:#e9f0ff;font-size:.88rem;box-shadow:0 3px 8px rgba(37,99,217,.12);transition:transform .18s ease,background .18s ease,color .18s ease,border-color .18s ease; }
.pos-sales-section-menu button:hover,.pos-sales-section-menu button.is-active { color:#0758d1; }
.pos-sales-section-menu button:hover i { transform:translateY(-2px); }
.pos-sales-section-menu button.is-active i { color:#fff;background:#2563d9;border-color:#b9d1ff;box-shadow:0 6px 16px rgba(37,99,217,.28); }
.pos-sales-form--sectioned .pos-sale-products { padding:16px;background:#fff; }
.pos-sales-form--sectioned .pos-sale-product__fields { grid-template-columns:minmax(150px,1.2fr) minmax(150px,1.2fr) minmax(95px,.65fr) minmax(95px,.65fr) minmax(155px,1fr);align-items:end; }
.pos-sales-form--sectioned .pos-sale-products__heading { margin-bottom:14px;padding:0 2px 11px;border-bottom:1px solid #e4eaf2; }
.pos-sales-form--sectioned .pos-sale-products__heading .section-kicker { color:#2563d9;font-size:.61rem;letter-spacing:.12em; }
.pos-sales-form--sectioned .pos-sale-products__heading strong { font-size:1rem; }
.pos-sales-form--sectioned .pos-sale-product-add { min-height:38px;padding:7px 12px;border-radius:10px;color:#fff;background:#2563d9;border-color:#2563d9;box-shadow:0 5px 12px rgba(37,99,217,.2); }
.pos-sales-form--sectioned .pos-sale-product-list { gap:14px; }
.pos-sales-form--sectioned .pos-sale-product { overflow:visible;border:1px solid #dce5f0;border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(28,55,90,.07); }
.pos-sales-form--sectioned .pos-sale-product__fields { gap:12px;padding:15px;background:linear-gradient(180deg,#fbfdff 0,#fff 100%);border-radius:0 0 12px 12px; }
.pos-sales-form--sectioned .pos-transfer-product__head { min-height:46px;padding:9px 13px;border-radius:12px 12px 0 0;background:#eef5ff;color:#174a9c; }
.pos-sales-form--sectioned .pos-transfer-product__identity > strong { padding:4px 8px;border-radius:7px;color:#fff;background:#2563d9;font-size:.72rem; }
.pos-sales-form--sectioned .pos-transfer-product__identity > small { color:#5b6f8d;font-size:.73rem; }
.pos-sales-form--sectioned .pos-transfer-field { gap:6px; }
.pos-sales-form--sectioned .pos-transfer-field--wide { grid-column:auto; }
.pos-sales-form--sectioned .pos-transfer-field > span { color:#40536e;font-size:.67rem;letter-spacing:.045em; }
.pos-sales-form--sectioned .pos-transfer-field > input,
.pos-sales-form--sectioned .pos-transfer-field > select,
.pos-sales-form--sectioned .pos-transfer-field .form-lookup-button { min-height:44px;border-radius:9px;border-color:#ccd8e7;background:#fff;font-size:.84rem;box-shadow:0 2px 6px rgba(33,65,110,.04); }
.pos-sales-form--sectioned .pos-transfer-field > input { padding:9px 11px; }
.pos-sales-form--sectioned .pos-transfer-field > input::placeholder { color:#98a5b6; }
.pos-sales-form--sectioned .pos-sale-product__history { margin:0;padding:8px 10px;border-radius:8px;color:#63738a;background:#f2f6fb;font-size:.68rem;line-height:1.35; }
.pos-sales-form--sectioned .pos-transfer-edit { color:#245ed8;background:#fff;border:1px solid #cbdaf0; }
.pos-sales-form--sectioned .pos-transfer-remove { background:#fff;border:1px solid #f0caca; }
.pos-sales-form--sectioned .pos-sale-product.is-collapsed { box-shadow:none; }
.pos-sales-form--sectioned .pos-sale-product.is-collapsed .pos-transfer-product__head { border-radius:11px;background:#f8faff; }

@media (max-width:900px) {
    .pos-sales-form--lined { grid-template-columns:repeat(2,minmax(0,1fr));overflow-x:hidden; }
    .pos-sales-form--lined .pos-sale-product__fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pos-sales-section-menu { grid-template-columns:repeat(4,minmax(120px,1fr)); }
    .pos-sales-form--sectioned .pos-sale-product__fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pos-sales-form--sectioned .pos-sale-product__history { grid-column:1 / -1; }
}

@media (max-width: 560px) {
    .pos-sales-panel {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .pos-sales-form {
        border-radius: 10px;
    }

    .pos-sales-field > summary {
        min-height: 54px;
        padding: 10px 13px;
    }

    .pos-sales-field > summary strong {
        font-size: .92rem;
    }

    .pos-sales-field__body {
        padding: 3px 13px 13px;
    }

    .pos-sale-products { padding: 11px 12px 13px; }
    .pos-sale-products__heading { margin-bottom: 9px; }
    .pos-sale-products__heading strong { font-size: .82rem; }
    .pos-sale-product-add { min-height: 33px; padding: 5px 8px; font-size: .68rem; }
    .pos-sale-product__fields { gap: 9px 7px; padding: 10px; }
    .pos-sales-form--lined { display:block; }
    .pos-sales-form--lined > .pos-sales-field > summary { display:grid; }
    .pos-sales-form--lined > .pos-sales-field > .pos-sales-field__body label { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
    .pos-sales-section-menu { display:flex;overflow-x:auto;scroll-snap-type:x proximity; }
    .pos-sales-section-menu button { min-width:68px;min-height:78px;scroll-snap-align:start; }
    .pos-sales-form--sectioned > .pos-sales-field > summary { display:none; }
    .pos-sales-form--sectioned > .pos-sales-field > .pos-sales-field__body label { position:static;width:auto;height:auto;margin:0 0 7px;overflow:visible;clip:auto;white-space:normal; }
    .pos-sales-form--sectioned .pos-sale-product__fields { grid-template-columns:1fr; }
    .pos-sales-form--sectioned .pos-sale-products { padding:11px; }
    .pos-sales-form--sectioned .pos-sale-product__fields { gap:10px;padding:11px; }
    .pos-sales-form--sectioned .pos-sale-products__heading { align-items:flex-end; }
}
/* The dedicated Customers page uses each complete row as its View action. */
.customer-clickable-list th:last-child,
.customer-clickable-list td:last-child {
    display: none;
}

.customer-clickable-list tbody tr:not(:has(.empty-state)) {
    cursor: pointer;
}

.customer-clickable-list tbody tr:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .35);
    outline-offset: -3px;
}

.customer-clickable-list td a,
.customer-clickable-list td a:hover,
.customer-clickable-list td a:focus-visible {
    color: inherit;
    text-decoration: none;
}

.customer-detail-action-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.customer-detail-action-bar > a,
.customer-detail-action-bar > form,
.customer-detail-action-bar > form > button {
    width: auto;
    margin: 0;
}

.customer-detail-action-bar > form {
    display: flex;
}

.customer-detail-action-bar > a,
.customer-detail-action-bar > form > button {
    min-height: 34px;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 9px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
}

.customer-detail-action-bar .action-button {
    box-shadow: 0 6px 16px rgba(37, 99, 235, .14);
}

.customer-detail-action-bar .danger-button {
    box-shadow: 0 6px 16px rgba(195, 48, 48, .14);
}

/* Keep these overrides last so the independent sales theme wins the cascade. */
body {
    background:
        linear-gradient(180deg, rgba(239, 239, 211, .96), rgba(229, 229, 194, .82)),
        radial-gradient(circle at 15% 15%, rgba(156, 158, 109, .18), transparent 31rem),
        radial-gradient(circle at 85% 85%, rgba(92, 94, 62, .12), transparent 34rem),
        #e8e8c9;
}

.app-header,
.login-panel,
.content-panel,
.module-card,
.sales-step-card,
.pos-transfer-form,
.pos-transfer-product,
.data-table-wrap {
    border-color: rgba(92, 94, 62, .22);
    background-color: rgba(255, 255, 239, .94);
    box-shadow: var(--shadow-soft);
}

.brand__logo,
.module-card__icon,
.management-icon,
.login-button,
.primary-button,
.form-lookup-button,
.pos-transfer-total {
    border-color: #85875f;
    background: #85875f;
    color: #ffffef;
}

.brand__name span,
.section-kicker,
.module-card__arrow,
.login-field i,
.login-form a,
.internal-page-header__back,
.pos-transfer-search i:last-child {
    color: #707247;
}

/* Final page surfaces. This block must remain at the end of the file. */
html,
body,
.app-shell,
.app-main,
.dashboard {
    background: #e5e5c6 !important;
}

.app-header,
.app-header--home,
.app-header--internal {
    border-color: #85845b !important;
    background: #aaa977 !important;
    box-shadow: 0 4px 12px rgba(48, 48, 31, .32) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.internal-page-header__title,
.internal-page-header__back,
.app-header .brand__wordmark,
.app-header .brand__system,
.app-header .header-icon-button {
    color: #11120f !important;
}

.breadcrumb-wrap,
.breadcrumb,
.app-footer {
    background: #d4d3a6 !important;
}

.dashboard,
.content-panel,
.login-panel,
.sales-step-card,
.pos-transfer-form,
.pos-transfer-product,
.data-table-wrap,
.form-panel,
.management-panel,
.pos-sales-form,
.pos-sales-field__body,
.pos-sale-products,
.pos-sale-product,
.pos-sale-product__fields,
.pos-sales-live-receipt,
.pos-report-card,
.pos-report-summary > div {
    border-color: #b5b482 !important;
    background: #d9d8ad !important;
    background-image: none !important;
}

.module-card {
    border-color: #b5b482 !important;
    background: #eeeed0 !important;
    background-image: none !important;
}

input,
select,
textarea,
.login-field,
.pos-transfer-search,
.pos-transfer-money,
.pos-transfer-field .form-lookup-button {
    border-color: #b5b482 !important;
    background: #e5e5c6 !important;
    color: #11120f !important;
}

/* Keep the Menu Access selector compact while its options remain accessible. */
.assignment-permissions-panel .permission-groups {
    max-height: 380px;
    padding-right: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: #8f8e60 #d4d3a6;
    scrollbar-width: thin;
}

.assignment-permissions-panel .permission-groups::-webkit-scrollbar {
    width: 8px;
}

.assignment-permissions-panel .permission-groups::-webkit-scrollbar-track {
    border-radius: 999px;
    background: #d4d3a6;
}

.assignment-permissions-panel .permission-groups::-webkit-scrollbar-thumb {
    border: 2px solid #d4d3a6;
    border-radius: 999px;
    background: #8f8e60;
}

@media (max-width: 640px) {
    .assignment-permissions-panel .permission-groups {
        max-height: 320px;
    }
}

.internal-page-header__logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #85845b;
    border-radius: 10px;
    color: #11120f;
    background: #c5c498;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.internal-page-header__logout:hover,
.internal-page-header__logout:focus-visible {
    background: #b5b482;
    outline: 2px solid rgba(98, 97, 63, .28);
    outline-offset: 2px;
}

@media (max-width: 520px) {
    .internal-page-header__logout {
        width: 38px;
        padding: 0;
    }

    .internal-page-header__logout span {
        display: none;
    }
}

/* Compact Role and Status controls on the personnel assignment form. */
.mobile-line-form #personnel_role,
.mobile-line-form #is_active {
    align-self: start;
    height: 46px !important;
    min-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.mobile-line-form .form-field:has(#personnel_role),
.mobile-line-form .form-field:has(#is_active) {
    align-content: start;
    align-self: start;
}

@media (max-width: 640px) {
    .mobile-line-form #personnel_role,
    .mobile-line-form #is_active {
        height: 42px !important;
        min-height: 42px !important;
    }
}

.spwsales-welcome {
    position: relative;
    overflow: hidden;
    width: min(900px, 100%);
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 auto 14px;
    padding: 17px 20px;
    border: 1px solid #aaa977;
    border-radius: 16px;
    background: #d4d3a6;
    box-shadow: 0 10px 26px rgba(48, 48, 31, .13);
    animation: spwsales-welcome-in 760ms cubic-bezier(.16, 1, .3, 1) both;
}

.spwsales-welcome::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 -45%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 230, .48), transparent);
    transform: skewX(-16deg);
    animation: spwsales-welcome-shine 1050ms ease-out 520ms both;
}

.spwsales-welcome__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    border-radius: 14px;
    color: #11120f;
    background: #aaa977;
    font-size: 1.1rem;
    animation: spwsales-welcome-icon 900ms cubic-bezier(.2, .9, .25, 1.25) 240ms both;
}

.spwsales-welcome > div {
    position: relative;
    z-index: 1;
}

.spwsales-welcome small,
.spwsales-welcome h2,
.spwsales-welcome p {
    animation: spwsales-welcome-copy 560ms cubic-bezier(.22, 1, .36, 1) both;
}

.spwsales-welcome small { animation-delay: 180ms; }
.spwsales-welcome h2 { animation-delay: 270ms; }
.spwsales-welcome p { animation-delay: 360ms; }

@keyframes spwsales-welcome-in {
    from {
        opacity: 0;
        transform: translateY(-22px) scale(.975);
        box-shadow: 0 2px 8px rgba(48, 48, 31, 0);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 10px 26px rgba(48, 48, 31, .13);
    }
}

@keyframes spwsales-welcome-icon {
    0% { opacity: 0; transform: scale(.45) rotate(-14deg); }
    55% { opacity: 1; transform: scale(1.12) rotate(7deg); }
    78% { transform: scale(.96) rotate(-3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes spwsales-welcome-copy {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes spwsales-welcome-shine {
    from { left: -45%; opacity: 0; }
    20% { opacity: 1; }
    to { left: 120%; opacity: 0; }
}

.spwsales-welcome small {
    color: #62613f;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.spwsales-welcome h2 {
    margin: 2px 0 3px;
    color: #11120f;
    font-size: 1.2rem;
}

.spwsales-welcome p {
    margin: 0;
    color: #515243;
    font-size: .86rem;
}

@media (max-width: 520px) {
    .spwsales-welcome {
        align-items: flex-start;
        gap: 12px;
        padding: 14px;
    }

    .spwsales-welcome__icon {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .spwsales-welcome,
    .spwsales-welcome__icon,
    .spwsales-welcome small,
    .spwsales-welcome h2,
    .spwsales-welcome p,
    .spwsales-welcome::after {
        animation: none;
    }
}