/* Left-hand dashboard, laid out like the Jamesleine member dashboard: profile photo and logo at
   the top, areas grouped underneath, site link and collapse button at the bottom. */
:root { --side-w: 244px; --side-bg: color-mix(in srgb, var(--bg) 88%, var(--ink) 4%); }
@media (prefers-color-scheme: dark) { :root { --side-bg: #101214; } }
body.app { display: flex; min-height: 100vh; }
.content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.content > main { width: 100%; flex: 1 0 auto; }
.content > footer { width: 100%; }

.side { position: sticky; top: 0; align-self: flex-start; flex: none; width: var(--side-w); height: 100vh; display: flex; flex-direction: column; background: var(--side-bg); border-right: 1px solid var(--line); overflow: hidden; transition: width var(--ease), transform var(--ease); z-index: 40; }
.side-head { display: flex; align-items: center; gap: 10px; padding: 16px 14px 12px; }
.me { position: relative; flex: none; display: block; border-radius: 50%; }
.me .avatar, .side .avatar.initials { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); display: block; }
.avatar.initials, .head-avatar.initials { display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-ink); font-family: var(--font-head); font-weight: 600; font-size: .9rem; letter-spacing: .03em; }
.me .dot, .side-nav .dot { position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: #d7382a; border: 2px solid var(--side-bg); }
.side-brand { display: flex; flex-direction: column; gap: 3px; min-width: 0; color: var(--ink); text-decoration: none; }
.side-logo img { display: block; height: 34px; width: auto; max-width: 160px; }
.tagline { font-family: var(--font-head); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tagline i { font-style: normal; opacity: .6; }
.side-nav { flex: 1 1 auto; overflow-y: auto; padding: 4px 10px 10px; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.side-nav hr { border: 0; border-top: 1px solid var(--line); margin: 8px 4px; }
.side-nav a, .side-nav summary, .side-nav button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--ease), color var(--ease); }
.side-nav summary { list-style: none; } .side-nav summary::-webkit-details-marker { display: none; }
.side-nav svg { width: 18px; height: 18px; flex: none; color: var(--muted); transition: color var(--ease), transform var(--ease); }
.side-nav a > span, .side-nav summary > span, .side-nav button > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav a:hover, .side-nav summary:hover, .side-nav button:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.side-nav a.on { background: color-mix(in srgb, var(--brand) 16%, transparent); font-weight: 700; }
.side-nav a.on svg { color: var(--brand); }
.side-nav summary svg:last-child { width: 14px; height: 14px; }
.side-nav details[open]:not(.closing) > summary svg:last-child { transform: rotate(180deg); }
.side-group .sec-body { padding: 2px 0 4px 18px; display: flex; flex-direction: column; gap: 1px; }
.side-group .sec-body a, .side-group .sec-body button { padding: 6px 10px; font-size: .88rem; }
.side-group .sec-body small { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.side-group .logo { width: 16px; height: 16px; }
.side-nav form { margin: 0; }
.count-pill { background: #d7382a; color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 700; padding: 1px 7px; }
.side-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--line); font-size: .8rem; }
.side-foot a { color: var(--ink); }
.side-collapse { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; line-height: 1; cursor: pointer; transition: background-color var(--ease); }
.side-collapse:hover { background: color-mix(in srgb, var(--brand) 12%, var(--panel)); }

/* Collapsed: icons only, photo stays. */
body.side-mini { --side-w: 68px; }
body.side-mini .side-brand, body.side-mini .side-nav a > span, body.side-mini .side-nav summary > span, body.side-mini .side-nav button > span,
body.side-mini .side-nav summary svg:last-child, body.side-mini .side-group .sec-body, body.side-mini .side-foot a, body.side-mini .count-pill { display: none; }
body.side-mini .side-head, body.side-mini .side-foot { justify-content: center; padding-left: 0; padding-right: 0; }
body.side-mini .side-nav a, body.side-mini .side-nav summary, body.side-mini .side-nav button { justify-content: center; padding: 10px 0; }

/* Top bar inside the content column */
.content > .top { position: sticky; top: 0; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; flex: none; }
.menu-btn svg { width: 20px; height: 20px; }
.content > .top .search { order: 0; max-width: 620px; }
.side-scrim { display: none; }
.top-me { display: none; }

/* Phone: the dashboard slides in over the page. */
@media (max-width: 899px) {
  body.app { display: block; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; width: min(84vw, 300px); height: auto; transform: translateX(-104%); box-shadow: none; transition: transform var(--ease), box-shadow var(--ease); }
  body.side-open .side { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .top-me { display: block; flex: none; }
  .top-me .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); display: block; }
  .side-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .38); opacity: 0; pointer-events: none; transition: opacity var(--ease); z-index: 39; }
  body.side-open .side-scrim { opacity: 1; pointer-events: auto; }
  .menu-btn { display: inline-flex; }
  .side-collapse { display: none; }
  body.side-mini { --side-w: 244px; }
  .content > .top { flex-wrap: nowrap; }
  .content > .top .search { flex: 1 1 auto; }
}

/* Signed-out pages */
body.gate { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.gate-card { width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 26px 24px 22px; }
.gate-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.gate-logo img { display: block; height: 40px; width: auto; }
.gate-card h1 { font-size: 1.35rem; margin-bottom: 10px; }
.gate-note { color: var(--muted); font-size: .92rem; margin: 0 0 14px; }
.gate-form { display: grid; gap: 12px; }
.gate-form label, .grid-form.plain label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 700; }
.gate-form input, .grid-form.plain input, .grid-form.plain select, .grid-form.plain textarea, .list-tools input { font: inherit; font-weight: 400; padding: 10px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); transition: border-color var(--ease), box-shadow var(--ease); }
.gate-form input:focus, .grid-form.plain input:focus, .grid-form.plain select:focus, .grid-form.plain textarea:focus, .list-tools input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.gate-form small, .grid-form.plain small { font-weight: 400; color: var(--muted); }
.gate-form .btn { justify-content: center; margin-top: 4px; }
.gate-alt { margin: 14px 0 0; font-size: .9rem; color: var(--muted); }
.alert { border-radius: 8px; padding: 10px 12px; font-size: .9rem; margin: 0 0 12px; border: 1px solid; }
.alert.error { background: var(--worst); color: var(--worst-ink); border-color: color-mix(in srgb, var(--worst-ink) 35%, transparent); }
.alert.ok { background: var(--best); color: var(--best-ink); border-color: color-mix(in srgb, var(--best-ink) 35%, transparent); }

/* Account, users, customers */
.head-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); flex: none; font-size: 1.4rem; }
.grid-form.plain textarea { resize: vertical; }
.btn.small { padding: 6px 11px; font-size: .78rem; }
.inline { display: inline; margin: 0; }
.pill { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 999px; border: 1px solid currentColor; color: var(--brand); vertical-align: 1px; }
.user-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.user-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 2px; border-top: 1px solid var(--line); }
.user-row:first-child { border-top: 0; }
.person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.person .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--line); }
.user-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.list-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.list-tools input { flex: 1 1 220px; max-width: 420px; border-radius: 999px; padding-left: 15px; }
.customers th a { font-weight: 700; }
.customers td, .customers th { font-size: .9rem; }
tr[hidden] { display: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.page-head h1 .wordmark { height: 30px; max-width: 220px; } .page-head h1 .wordmark.on-dark { height: 22px; padding: 6px 10px; }
.page-head h1 .brand-label { gap: 10px; } .page-head h1 .logo { width: 30px; height: 30px; }

/* Password boxes with a Show / Hide button; first and last name side by side */
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--brand); font-family: var(--font-head); font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border-radius: 6px; cursor: pointer; transition: background-color var(--ease); }
.pw-toggle:hover, .pw-toggle:focus-visible { background: color-mix(in srgb, var(--brand) 12%, transparent); outline: none; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .two { grid-template-columns: 1fr; } }

/* Account: the read-only work profile */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 28px; margin: 0 0 12px; }
.facts div { min-width: 0; }
.facts dt { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 2px; }
.facts dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }

/* Dashboard categories: pin to the top or hide under "More" (right-click, or a long press on a phone) */
.nav-list, .nav-fixed { display: flex; flex-direction: column; gap: 2px; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > details > summary, .nav-more > summary { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.side-nav svg.pin { display: none; width: 12px; height: 12px; }
.side-nav .nav-item.pinned > a > svg.pin, .side-nav .nav-item.pinned > details > summary > svg.pin { display: block; color: var(--brand); }
.nav-item.menu-on > a, .nav-item.menu-on > details > summary, .nav-more.menu-on > summary { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.nav-more[hidden] { display: none; }
.nav-more > .sec-body { padding-left: 8px; }
.nav-item.fading { opacity: 0; transition: opacity .16s ease; }
body.side-mini .side-nav svg.pin { display: none !important; }
.nav-menu .nav-menu-title { padding: 6px 12px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* Foot of the dashboard: back to the members site, then the dealer's site and the collapse button */
.side-foot { flex-direction: column; align-items: stretch; gap: 6px; }
.side-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-back { display: flex; align-items: center; gap: 9px; margin: -4px -4px 2px; padding: 8px 10px; border-radius: 8px; font-size: .88rem; font-weight: 700; text-decoration: none; transition: background-color var(--ease); }
.side-back:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.side-back svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
body.side-mini .side-foot-row { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .nav-item.fading { transition: none; } }

/* A brand that opens into its kinds of machine (inside Your machines / Competitors) */
.side-brand > summary { padding: 6px 10px; font-size: .88rem; }
.side-brand > .sec-body { padding-left: 26px; }
.side-brand > .sec-body a { font-size: .84rem; padding: 5px 10px; }
.side-brand.here > summary { font-weight: 700; }
.side-brand.here > summary svg:last-child { color: var(--brand); }
body.side-mini .side-brand { display: none; }
.side-brand > .sec-body a > span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

/* Subcategories: entries inside a category that can be pinned, hidden or renamed */
.sub-list { display: flex; flex-direction: column; gap: 1px; }
.sub-item { position: relative; }
.sub-item > a, .sub-item > details > summary, .sub-more > summary { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.side-nav .sub-item.pinned > a > svg.pin, .side-nav .sub-item.pinned > details > summary > svg.pin { display: block; color: var(--brand); }
.sub-item.menu-on > a, .sub-item.menu-on > details > summary, .sub-more.menu-on > summary { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.sub-item.fading { opacity: 0; transition: opacity .16s ease; }
.sub-more[hidden] { display: none; }
.side-group .sub-more > summary { padding: 5px 10px; font-size: .78rem; color: var(--muted); }
.side-group .sub-more > .sec-body { padding-left: 8px; }
.sub-rename { width: 100%; min-width: 0; font: inherit; padding: 2px 6px; margin: -3px 0; border: 1px solid var(--brand); border-radius: 6px; background: var(--panel); color: var(--ink); -webkit-user-select: text; user-select: text; }
.sub-rename:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
body.side-mini .sub-more { display: none; }

/* Scott Equipment's own mark as its category's icon */
.side-nav img.nav-mark { width: 18px; height: 18px; flex: none; object-fit: contain; border-radius: 4px; }

/* Press, hold and drag a category to a new place */
.nav-item.dragging { z-index: 5; }
.nav-item.dragging > a, .nav-item.dragging > details > summary { background: var(--panel); box-shadow: 0 8px 22px rgba(0, 0, 0, .18); cursor: grabbing; }
.nav-item > a, .nav-item > details > summary { transition: background-color var(--ease), box-shadow .18s ease; }
body.nav-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
body.nav-dragging .side-nav a, body.nav-dragging .side-nav summary { pointer-events: none; }
body.nav-dragging .nav-item.dragging > a, body.nav-dragging .nav-item.dragging > details > summary { pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .sub-item.fading, .nav-item > a, .nav-item > details > summary { transition: none; } }
.side-foot-row { justify-content: flex-end; }

/* Brand thumbnails in the dashboard share one slot, so the names line up whether the thumbnail is
   a square icon or a wide lettering tile. */
.side-group .logo.mark { width: 30px; height: 16px; padding: 2px 3px; }
.side-group .sub-item .logo:not(.mark) { margin-right: 14px; }

/* The page being viewed: its dashboard entry, and the category that holds it, keep the same light
   highlight a row gets under the pointer. */
.side-nav a.on, .side-nav summary.on { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.side-nav summary.on { font-weight: 700; }
.side-nav summary.on > svg:first-child { color: var(--brand); }

/* The highlighted entry keeps its ordinary weight: only the background changes. */
.side-nav a.on, .side-nav summary.on, .side-brand.here > summary { font-weight: inherit; }

/* Customers: the import button, and the import pages */
.page-tools { margin: 0 0 14px; }
.panel-form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius, 10px); padding: 16px; margin-bottom: 14px; }
.import-acts { margin: 0 0 14px; }
.plain-list { margin: 6px 0 10px; padding-left: 18px; }
.plain-list li { margin: 3px 0; }

/* Back and forward, beside the search box */
.page-nav { display: flex; align-items: center; gap: 4px; flex: none; }
.page-nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; transition: background-color var(--ease), border-color var(--ease), opacity var(--ease), color var(--ease); }
.page-nav-btn svg { width: 17px; height: 17px; }
.page-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--brand) 9%, var(--panel)); border-color: var(--brand); }
.page-nav-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.page-nav-btn:disabled { opacity: .38; cursor: default; }
@media (max-width: 520px) { .page-nav-btn { width: 30px; height: 30px; } .page-nav { gap: 2px; } }

/* A brand's row: its name is a link to the brand's page; the arrow at the end opens its list. */
.side-nav summary > a.sum-link { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; width: auto; padding: 0; border-radius: 4px; background: none; color: inherit; text-decoration: none; }
.side-nav summary > a.sum-link:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }
.side-nav summary > a.sum-link > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav summary > .sum-toggle { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; margin: -4px -6px -4px 0; border-radius: 6px; transition: background-color var(--ease); }
.side-nav summary:hover > .sum-toggle { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.side-nav summary > .sum-toggle svg { width: 14px; height: 14px; transition: transform var(--ease), color var(--ease); }
.side-nav details[open]:not(.closing) > summary > .sum-toggle svg { transform: rotate(180deg); }
body.side-mini .side-nav summary > a.sum-link > span, body.side-mini .side-nav summary > .sum-toggle { display: none; }

/* Phone: a slim rail of icons down the left, always there, like the Jamesleine members dashboard. The
   arrow at its foot widens it over the page to show the names; tapping outside, or the arrow again,
   narrows it. (The rules below repeat the desktop's collapsed look for the rail.) */
@media (max-width: 899px) {
  .side { width: 60px; transform: none; overflow: hidden; z-index: 40; box-shadow: none; transition: width .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease; }
  body.side-open .side { width: min(84vw, 300px); overflow-y: auto; box-shadow: 0 0 40px rgba(0, 0, 0, .25); }
  .content { margin-left: 60px; }
  .menu-btn, .top-me { display: none; }
  .side-collapse { display: inline-flex; align-items: center; justify-content: center; }
  .side-head { padding: 12px 0 8px; }
  body.side-open .side-head { padding: 14px 14px 10px; }
  .side-nav { padding-left: 6px; padding-right: 6px; }
  body.side-open .side-nav { padding-left: 10px; padding-right: 10px; }
  body:not(.side-open) .side-brand, body:not(.side-open) .side-nav a > span, body:not(.side-open) .side-nav summary > span, body:not(.side-open) .side-nav button > span,
body:not(.side-open) .side-nav summary svg:last-child, body:not(.side-open) .side-group .sec-body, body:not(.side-open) .side-foot a, body:not(.side-open) .count-pill { display: none; }
  body:not(.side-open) .side-head, body:not(.side-open) .side-foot { justify-content: center; padding-left: 0; padding-right: 0; }
  body:not(.side-open) .side-nav a, body:not(.side-open) .side-nav summary, body:not(.side-open) .side-nav button { justify-content: center; padding: 10px 0; }
  body:not(.side-open) .side-nav svg.pin { display: none !important; }
  body:not(.side-open) .side-foot-row { justify-content: center; }
  body:not(.side-open) .side-brand { display: none; }
  body:not(.side-open) .sub-more { display: none; }
  body:not(.side-open) .side-nav summary > a.sum-link > span, body:not(.side-open) .side-nav summary > .sum-toggle { display: none; }
  body:not(.side-open) .side-foot { padding-left: 0; padding-right: 0; align-items: center; }
  body:not(.side-open) .side-foot a.side-back { display: flex; justify-content: center; margin: 0; padding: 8px 0; }
  body:not(.side-open) .side-foot a.side-back span { display: none; }
  body:not(.side-open) .side-nav hr { margin-left: 8px; margin-right: 8px; }
  body:not(.side-open) .nav-more > summary > span { display: none; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) { .side { transition: none; } }
@media (max-width: 899px) { .side { bottom: auto; height: 100vh; height: 100dvh; } }
/* The dashboard's tint is slightly see-through; over the page (phone) it sits on the page colour so nothing shows through. */
@media (max-width: 899px) { .side { background: linear-gradient(var(--side-bg), var(--side-bg)), var(--bg); } }