/*
 * Dialogs (every page). Loaded globally because the create dialogs live in the layout.
 * One structure for all of them:
 *   .lp-modal > .lp-modal-dialog > .lp-modal-head | form(.lp-modal-form) > .lp-modal-body + .lp-modal-foot
 * Prefix `body.route-clients .lp-modal` keeps these above legacy app.css modal rules.
 */
body.route-clients .lp-modal {
    --m-ink: #17171a;
    --m-ink-2: #4b4b53;
    --m-ink-3: #8b8b93;
    --m-line: #ebebee;
    --m-line-2: #e2e2e6;
    --m-hover: #fafafb;
    --m-card: #fff;
    --m-dark: #151518;
    --m-red: #d92d20;
    --m-green: #15803d;
    --m-blue: #2a78d6;
    --m-blue-soft: #e8f1fc;
    --m-orange: #eb6834;
    --m-orange-soft: #fdefe8;
    --m-aqua: #12906a;
    --m-aqua-soft: #e3f6ee;
    --m-yellow: #9a6a00;
    --m-yellow-soft: #fdf5dd;
    z-index: 2200; /* above the sticky mobile top bar (2020) */
    padding: 24px;
    background: rgba(17, 17, 20, .45);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
body.route-clients .lp-modal,
body.route-clients .lp-modal * { box-sizing: border-box; }
body.route-clients .lp-modal svg { display: block; }

html body.route-clients .lp-modal .lp-modal-dialog {
    display: flex;
    flex-direction: column;
    width: min(540px, 100%);
    max-height: calc(100dvh - 48px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--m-line);
    border-radius: 16px;
    background: var(--m-card);
    box-shadow: 0 28px 70px -12px rgba(0, 0, 0, .28);
    color: var(--m-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}
html body.route-clients .lp-modal .lp-modal-dialog.is-medium { width: min(680px, 100%); }
html body.route-clients .lp-modal .lp-modal-dialog.is-wide { width: min(1040px, 100%); }
body.route-clients .lp-modal.is-open .lp-modal-dialog { animation: lp-modal-in .18s ease-out; }
@keyframes lp-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.route-clients .lp-modal.is-open .lp-modal-dialog { animation: none; }
}

body.route-clients .lp-modal .lp-modal-form,
body.route-clients .lp-modal .lp-modal-shell { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0; min-height: 0; margin: 0; padding: 0; }

/* Head */
body.route-clients .lp-modal .lp-modal-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--m-line); }
body.route-clients .lp-modal .lp-modal-head > .lp-btn.is-icon { margin-left: auto; }
body.route-clients .lp-modal .lp-modal-title { min-width: 0; }
body.route-clients .lp-modal .lp-modal-title h2 { margin: 0; color: var(--m-ink); font-size: 16px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
body.route-clients .lp-modal .lp-modal-title p { margin: 2px 0 0; overflow: hidden; color: var(--m-ink-3); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
body.route-clients .lp-modal .lp-modal-title p b { color: var(--m-ink-2); font-weight: 500; }

body.route-clients .lp-modal .lp-modal-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; background: var(--m-blue-soft); color: var(--m-blue); }
body.route-clients .lp-modal .lp-modal-icon svg { width: 19px; height: 19px; }
body.route-clients .lp-modal .lp-modal-icon.is-orange { background: var(--m-orange-soft); color: var(--m-orange); }
body.route-clients .lp-modal .lp-modal-icon.is-aqua { background: var(--m-aqua-soft); color: var(--m-aqua); }
body.route-clients .lp-modal .lp-modal-icon.is-yellow { background: var(--m-yellow-soft); color: var(--m-yellow); }

/* Body, sections and fields */
body.route-clients .lp-modal .lp-modal-body { display: grid; gap: 16px; min-height: 0; padding: 18px; overflow-y: auto; }
body.route-clients .lp-modal .lp-modal-section { display: grid; gap: 10px; }
body.route-clients .lp-modal .lp-modal-section + .lp-modal-section { padding-top: 16px; border-top: 1px dashed var(--m-line-2); }
body.route-clients .lp-modal .lp-modal-section-title { margin: 0; color: var(--m-ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
body.route-clients .lp-modal .lp-modal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
body.route-clients .lp-modal .lp-modal-grid.is-single { grid-template-columns: minmax(0, 1fr); }
body.route-clients .lp-modal .is-wide { grid-column: 1 / -1; }

body.route-clients .lp-modal .lp-modal-field { display: grid; gap: 6px; min-width: 0; margin: 0; color: var(--m-ink); font-size: 13px; font-weight: 400; }
body.route-clients .lp-modal .lp-modal-field.hidden { display: none !important; }
body.route-clients .lp-modal .lp-modal-field > span { color: var(--m-ink-2); font-size: 12.5px; font-weight: 500; }
body.route-clients .lp-modal .lp-modal-field > span b,
body.route-clients .lp-modal .lp-modal-field > span .required-mark { color: var(--m-red); font-weight: 500; }
body.route-clients .lp-modal .lp-modal-field > span em { color: var(--m-ink-3); font-style: normal; font-weight: 400; }
body.route-clients .lp-modal .lp-modal-field.field-has-error > span { color: var(--m-red); }

html body.route-clients .lp-modal :is(.lp-modal-field, .lp-modal-status) :is(input, select, textarea) {
    width: 100%;
    min-width: 0;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--m-line-2);
    border-radius: 10px;
    background: var(--m-card);
    box-shadow: none;
    color: var(--m-ink);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 400;
    transition: border-color .12s, box-shadow .12s;
}
html body.route-clients .lp-modal :is(.lp-modal-field, .lp-modal-status) select {
    appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8b93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 11px center;
    background-repeat: no-repeat;
    background-size: 15px;
    cursor: pointer;
}
html body.route-clients .lp-modal .lp-modal-field textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 1.45; resize: vertical; }
html body.route-clients .lp-modal :is(input, select, textarea):focus { border-color: #a8a8b0; outline: 0; box-shadow: 0 0 0 3px rgba(21, 21, 24, .07); }
html body.route-clients .lp-modal :is(input, textarea)[readonly],
html body.route-clients .lp-modal select:disabled { background-color: var(--m-hover); color: var(--m-ink-2); }
html body.route-clients .lp-modal :is(input, select, textarea)::placeholder { color: var(--m-ink-3); }
html body.route-clients .lp-modal :is(input, select, textarea).is-invalid { border-color: var(--m-red); box-shadow: 0 0 0 3px rgba(217, 45, 32, .08); }

/* Info blocks */
body.route-clients .lp-modal .lp-modal-summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-hover); }
body.route-clients .lp-modal .lp-modal-summary-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 10px; background: var(--m-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .06); color: var(--m-ink-2); }
body.route-clients .lp-modal .lp-modal-summary-icon svg { width: 16px; height: 16px; }
body.route-clients .lp-modal .lp-modal-summary > div { display: grid; min-width: 0; }
body.route-clients .lp-modal .lp-modal-summary strong { overflow: hidden; color: var(--m-ink); font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body.route-clients .lp-modal .lp-modal-summary span { color: var(--m-ink-3); font-size: 12.5px; }

body.route-clients .lp-modal .lp-modal-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.route-clients .lp-modal .lp-modal-info > div { display: grid; gap: 4px; min-width: 0; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: 10px; }
body.route-clients .lp-modal .lp-modal-info dt { color: var(--m-ink-3); font-size: 12px; }
body.route-clients .lp-modal .lp-modal-info dd { margin: 0; overflow: hidden; color: var(--m-ink); font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
body.route-clients .lp-modal .lp-modal-text-block { display: grid; gap: 6px; }
body.route-clients .lp-modal .lp-modal-text-block h3 { margin: 0; color: var(--m-ink-2); font-size: 12.5px; font-weight: 500; }
body.route-clients .lp-modal .lp-modal-text-block p { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--m-hover); color: var(--m-ink); font-size: 13.5px; line-height: 1.55; white-space: pre-line; }

/* Status chips inside dialogs (task view, client history) */
body.route-clients .lp-modal .status-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: #f1f1f3; box-shadow: none; color: var(--m-ink-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
body.route-clients .lp-modal .status-chip::before,
body.route-clients .lp-modal .status-chip::after { content: none; display: none; }
body.route-clients .lp-modal .status-open,
body.route-clients .lp-modal .status-work { background: #eeefff; color: #4b4fc7; }
body.route-clients .lp-modal .status-done,
body.route-clients .lp-modal .status-success { background: #e7f7ec; color: var(--m-green); }

/* Foot */
body.route-clients .lp-modal .lp-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--m-line); background: var(--m-hover); }
body.route-clients .lp-modal .lp-modal-foot .lp-modal-foot-hint { margin: 0 auto 0 0; color: var(--m-ink-3); font-size: 12px; }

/* Buttons inside dialogs (pages without list-page.css need them too) */
body.route-clients .lp-modal .lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    min-height: 0;
    padding: 0 16px;
    border: 1px solid var(--m-line-2);
    border-radius: 10px;
    background: var(--m-card);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
    color: var(--m-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s, border-color .12s;
}
body.route-clients .lp-modal .lp-btn:hover { border-color: #d2d2d8; background: var(--m-hover); }
body.route-clients .lp-modal .lp-btn.is-primary { border-color: var(--m-dark); background: var(--m-dark); color: #fff; }
body.route-clients .lp-modal .lp-btn.is-primary:hover { background: #2a2a2f; }
body.route-clients .lp-modal .lp-btn.is-icon { width: 36px; height: 36px; padding: 0; border-radius: 10px; color: var(--m-ink-2); }
body.route-clients .lp-modal .lp-btn.is-icon svg { width: 17px; height: 17px; }
body.route-clients .lp-modal .lp-btn:disabled { opacity: .6; cursor: progress; }
body.route-clients .lp-modal .lp-btn.is-disabled { opacity: .5; pointer-events: none; }

/* Client card (wide) */
body.route-clients .lp-modal .lp-avatar.is-large { width: 38px; height: 38px; flex-basis: 38px; border-radius: 11px; font-size: 15px; }
body.route-clients .lp-modal .lp-modal-status { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; color: var(--m-ink-3); font-size: 13px; }
body.route-clients .lp-modal .lp-modal-status + .lp-btn.is-icon { margin-left: 0; }
html body.route-clients .lp-modal .lp-modal-status select { width: auto; min-width: 160px; height: 36px; font-weight: 500; }

body.route-clients .lp-modal .lp-modal-layout { display: grid; flex: 1 1 auto; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; overflow: hidden; }
body.route-clients .lp-modal .lp-modal-history { min-height: 0; padding: 16px; overflow-y: auto; border-right: 1px solid var(--m-line); background: var(--m-hover); }
body.route-clients .lp-modal .lp-modal-history h3 { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; color: var(--m-ink); font-size: 13px; font-weight: 600; }
body.route-clients .lp-modal .lp-modal-history h3 svg { width: 15px; height: 15px; color: var(--m-ink-3); }
body.route-clients .lp-modal .client-history-list { display: grid; gap: 8px; margin: 0; padding: 0; }
body.route-clients .lp-modal .client-history-item { display: block; margin: 0; padding: 10px 12px; border: 1px solid var(--m-line); border-radius: 10px; background: var(--m-card); box-shadow: none; }
body.route-clients .lp-modal .client-history-item::before { content: none; display: none; }
body.route-clients .lp-modal .client-history-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; }
body.route-clients .lp-modal .client-history-head-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
body.route-clients .lp-modal .client-history-current { padding: 1px 6px; border: 0; border-radius: 5px; background: #f1f1f3; color: var(--m-ink-2); font-size: 11.5px; font-weight: 500; }
body.route-clients .lp-modal .client-history-head time { flex: 0 0 auto; color: var(--m-ink-3); font-size: 12px; font-weight: 400; }
body.route-clients .lp-modal .client-history-item p { margin: 0 0 4px; color: var(--m-ink); font-size: 13px; font-weight: 400; line-height: 1.45; }
body.route-clients .lp-modal .client-history-item small { display: block; color: var(--m-ink-3); font-size: 12px; font-weight: 400; }
body.route-clients .lp-modal .client-history-item.is-empty p { margin: 0; color: var(--m-ink-3); }

body.route-clients .lp-modal .lp-modal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px 14px; min-height: 0; padding: 16px 18px; overflow-y: auto; }
body.route-clients .lp-modal .lp-modal-fields .is-wide { grid-column: 1 / -1; }
body.route-clients .lp-modal .client-edit-map-row .lp-btn { height: 32px; }

@media (max-width: 860px) {
    body.route-clients .lp-modal { padding: 12px; }
    html body.route-clients .lp-modal .lp-modal-dialog { max-height: calc(100dvh - 24px); }
    body.route-clients .lp-modal:has(.is-wide) { align-items: stretch; padding: 0; }
    html body.route-clients .lp-modal .lp-modal-dialog.is-wide { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }

    body.route-clients .lp-modal .lp-modal-head { flex-wrap: wrap; padding: 14px; }
    body.route-clients .lp-modal .lp-modal-title { flex: 1 1 0; }
    body.route-clients .lp-modal .lp-modal-head > .lp-btn.is-icon { order: 2; margin-left: 0; }
    body.route-clients .lp-modal .lp-modal-status { order: 3; flex: 1 1 100%; margin: 0; }
    html body.route-clients .lp-modal .lp-modal-status select { flex: 1 1 auto; width: 100%; }

    body.route-clients .lp-modal .lp-modal-body { padding: 14px; }
    body.route-clients .lp-modal .lp-modal-grid,
    body.route-clients .lp-modal .lp-modal-info { grid-template-columns: minmax(0, 1fr); }
    body.route-clients .lp-modal .lp-modal-layout { display: block; overflow-y: auto; }
    body.route-clients .lp-modal .lp-modal-history { overflow: visible; border-right: 0; border-bottom: 1px solid var(--m-line); }
    body.route-clients .lp-modal .lp-modal-fields { grid-template-columns: minmax(0, 1fr); padding: 14px; overflow: visible; }
    body.route-clients .lp-modal .lp-modal-foot { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
    body.route-clients .lp-modal .lp-modal-foot .lp-btn { flex: 1 1 0; }
    body.route-clients .lp-modal .lp-modal-foot .lp-modal-foot-hint { display: none; }
}