/* App layer on top of Én UI v1.0.0 (public/en-ui/v1.0.0/en-ui.css): reuse its tokens, add only app layout. */
:root {
    --en-navy: var(--en-ui-primary);
    --en-navy-deep: var(--en-ui-primary-deep);
    --en-accent: var(--en-ui-accent);
    --en-bg: var(--en-ui-canvas);
    --en-text: var(--en-ui-text);
    --en-muted: var(--en-ui-muted);
    --en-border: var(--en-ui-border);
    --en-radius: var(--en-ui-radius);
    --en-header-h: 64px;
    --en-touch: var(--en-ui-tap);
}

html { scroll-padding-top: calc(var(--en-header-h) + 12px); }

body.en-body {
    font-family: var(--en-ui-font);
    background: var(--en-bg);
    color: var(--en-text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

:focus-visible { outline: 2px solid var(--en-ui-focus); outline-offset: 2px; }

.en-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 1100;
    background: #fff;
    padding: .5rem 1rem;
}
.en-skip-link:focus { left: .5rem; top: .5rem; }

.en-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: var(--en-header-h);
    display: flex;
    align-items: center;
    background: var(--en-navy-deep);
    border-bottom: 3px solid var(--en-accent);
    color: #fff;
}
.en-topbar-inner {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: .5rem .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.en-topbar a, .en-topbar button { color: #fff; }
.en-topbar .en-brand { display: flex; align-items: center; gap: .6rem; min-width: 0; text-decoration: none; }
.en-brand-mark { width: 36px; height: 36px; flex: 0 0 auto; object-fit: contain; background: #fff; border-radius: var(--en-ui-radius-control); }
.en-brand-text { font-weight: 700; font-size: 1rem; line-height: 1.2; white-space: nowrap; min-width: 0; }
.en-brand-text small { display: block; font-weight: 400; font-size: .75rem; opacity: .85; }
.en-brand-short { display: none; }
.en-topbar-tools { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.en-topbar .en-user { font-size: .8rem; text-align: right; line-height: 1.25; }
.en-topbar .en-user span { opacity: .8; }
.en-topbar .btn-outline-light { min-height: var(--en-touch); display: inline-flex; align-items: center; border-color: rgba(255, 255, 255, .5); }
.en-topbar .btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.en-main { padding: 1rem .75rem 3rem; max-width: 760px; margin: 0 auto; }

.en-card {
    background: var(--en-ui-surface);
    border: 1px solid var(--en-border);
    border-radius: var(--en-radius);
    padding: 1rem;
    margin-bottom: .75rem;
}

.btn, .form-control, .form-select { min-height: var(--en-touch); font-size: 1rem; }
.btn { border-radius: var(--en-ui-radius-control); font-weight: 500; }
.btn-sm { min-height: 40px; }
.form-control, .form-select { border-color: var(--en-ui-control-border); border-radius: var(--en-ui-radius-control); }
.form-control:focus, .form-select:focus { border-color: var(--en-ui-focus); box-shadow: var(--en-ui-ring); }
.form-check-input { width: 1.4em; height: 1.4em; }
.form-check-label { padding-left: .35rem; padding-top: .1rem; }

.btn-en { background: var(--en-navy); color: #fff; border-color: var(--en-navy); }
.btn-en:hover, .btn-en:focus { background: var(--en-navy-deep); color: #fff; border-color: var(--en-navy-deep); }

/* Directory page: header -> search -> result count -> list -> pagination. */
.en-page-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.en-page-head h1 { margin: 0; font-size: 1.375rem; font-weight: 700; color: var(--en-navy-deep); }
.en-page-head .en-meta { margin: .1rem 0 0; }
.en-page-head .btn { flex: 0 0 auto; }

.en-search { position: sticky; top: calc(var(--en-header-h) + 3px); z-index: 900; background: var(--en-bg); padding: .5rem 0 .75rem; }
.en-search label { font-weight: 600; font-size: .875rem; margin-bottom: .25rem; }
.en-result-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .75rem; margin-top: .5rem; }

.en-customer-item {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem;
    color: inherit; min-height: 64px;
}
.en-customer-item:focus-within { border-color: var(--en-navy); }
.en-customer-item > div:first-child { min-width: 0; }
.en-customer-item .en-name { font-weight: 600; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.4; margin: 0; }
.en-customer-item .en-name a { color: var(--en-navy-deep); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--en-touch); }
.en-customer-item .en-name a:hover { text-decoration: underline; }
.en-phones { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; }
.en-phone { color: var(--en-text); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Inline actions: native <details> choosers, no script; every control keeps the Én UI tap size. */
.en-customer-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.en-action { min-height: var(--en-touch); display: inline-flex; align-items: center; justify-content: center; }
.btn-outline-primary.en-action { color: var(--en-navy); border-color: var(--en-navy); }
.btn-outline-primary.en-action:hover, .btn-outline-primary.en-action:focus { background: var(--en-navy); color: #fff; }
.en-chooser > summary { list-style: none; cursor: pointer; }
.en-chooser > summary::-webkit-details-marker { display: none; }
.en-chooser > summary::after { content: "\25BE"; margin-left: .4rem; font-size: .8em; }
.en-chooser[open] > summary::after { content: "\25B4"; }
.en-chooser[open] { flex: 1 1 100%; }
.en-chooser-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.en-chooser-list .en-action { width: 100%; }
.en-maps-option { flex-wrap: wrap; gap: .1rem .5rem; text-align: left; justify-content: flex-start; }
.en-maps-option .en-coord-preview { font-size: .85rem; }
.en-inline-form { margin-top: .5rem; padding: .75rem; border: 1px solid var(--en-border); border-radius: var(--en-radius); background: var(--en-bg); }
.en-inline-form .form-label { font-weight: 600; font-size: .875rem; }
/* Icon-only call trigger: exactly one Én UI tap square; numbers stay visible in the card and chooser options. */
.en-icon-action { width: var(--en-touch); min-width: var(--en-touch); height: var(--en-touch); padding: 0; flex: 0 0 auto; }
.en-icon { display: block; flex: 0 0 auto; }
.en-call-chooser > summary.en-action.en-icon-action::after, .en-maps-chooser > summary.en-action.en-icon-action::after { content: none; }
/* Collapsed pairs: phone control + small "+" (add phone), Maps control + small "+" (add GPS); open forms take the card width. */
.en-plus-action { width: var(--en-touch); min-width: var(--en-touch); height: var(--en-touch); padding: 0; font-size: 1.25rem; font-weight: 700; line-height: 1; }
.en-plus-chooser > summary.en-action.en-plus-action::after { content: none; }
.en-plus-chooser:not([open]) { flex: 0 0 auto; }
.en-icon-placeholder { display: inline-flex; align-items: center; justify-content: center; width: var(--en-touch); height: var(--en-touch); color: var(--en-muted); flex: 0 0 auto; }
.en-location-inline-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.en-location-inline-actions .en-action { flex: 1 1 10rem; }
.en-fallback-link { min-height: var(--en-touch); margin-top: .25rem; }
.en-meta { color: var(--en-muted); font-size: .875rem; }
.en-address { white-space: normal; overflow-wrap: anywhere; }
.en-address-label { font-weight: 600; color: var(--en-text); }
.en-customer-item > div:first-child { flex: 1 1 auto; }
.en-gps { flex: 0 1 auto; max-width: 45%; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; text-align: right; }
.en-gps .en-meta { font-size: .75rem; overflow-wrap: anywhere; }

.en-badge { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; font-weight: 600; background: var(--en-ui-info-soft); color: var(--en-navy); white-space: nowrap; }
.en-badge-warn { background: var(--en-ui-warning-soft); color: var(--en-ui-warning); }
.en-badge-ok { background: var(--en-ui-success-soft); color: var(--en-ui-success); }
.en-badge-muted { background: var(--en-ui-neutral-soft); color: var(--en-muted); }

.en-location-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.en-location-actions .btn { width: 100%; }

.en-fab {
    position: fixed; right: 1rem; bottom: 1rem; z-index: 950;
    border-radius: 999px; box-shadow: 0 6px 18px rgba(12, 45, 66, .3);
    padding-left: 1.25rem; padding-right: 1.25rem;
}

.en-coord-preview { font-family: ui-monospace, Consolas, monospace; font-size: .95rem; }

.en-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.en-table-wrap table { min-width: 560px; }

pre.en-json { white-space: pre-wrap; word-break: break-word; font-size: .8rem; background: #F8FAFC; padding: .5rem; border-radius: 6px; margin: 0; }

@media (max-width: 575.98px) {
    .en-topbar-inner { padding: .5rem; gap: .375rem; }
    .en-topbar .en-brand { gap: .5rem; }
    .en-brand-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .en-brand-short { display: inline; }
    .en-topbar-tools { gap: .375rem; }
    .en-topbar .btn-outline-light { padding: 0 .625rem; font-size: .875rem; }

    .en-customer-item { flex-direction: column; align-items: stretch; gap: .5rem; }
    .en-gps { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; text-align: left; }
    .en-customer-actions > .en-action, .en-customer-actions > .en-chooser { flex: 1 1 100%; }
    .en-customer-actions > .en-chooser > summary { width: 100%; }
    .en-customer-actions > .en-icon-action, .en-customer-actions > .en-call-chooser:not([open]), .en-customer-actions > .en-maps-chooser:not([open]) { flex: 0 0 auto; }
    .en-customer-actions > .en-call-chooser > summary.en-icon-action, .en-customer-actions > .en-maps-chooser > summary.en-icon-action { width: var(--en-touch); }
    .en-customer-actions > .en-plus-chooser:not([open]), .en-customer-actions > .en-icon-placeholder { flex: 0 0 auto; }
    .en-customer-actions > .en-plus-chooser > summary.en-plus-action { width: var(--en-touch); }
}

@media (min-width: 768px) {
    :root { --en-header-h: 72px; }
    html { scroll-padding-top: calc(var(--en-header-h) + 16px); }
    .en-main { padding-top: 1.5rem; }
    .en-topbar-inner { padding: .5rem 1rem; }
    .en-page-head h1 { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
}