/* V9 presentation layer. No field visibility or permission decisions belong here. */
.compact-ui { --compact-line: var(--line); --compact-muted: var(--muted); letter-spacing: 0; }
.compact-ui .page { margin-top: 12px; }
.compact-ui .panel { padding: 12px; border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.compact-ui .section-head { padding: 8px 0; border: 0; border-bottom: 1px solid var(--compact-line); border-radius: 0; background: transparent; box-shadow: none; margin-bottom: 12px; }
.compact-ui .section-head h2 { font-size: 1.125rem; margin: 0; }
.compact-ui .section-head p { margin: 4px 0; font-size: .875rem; }
.compact-ui .summary-grid { gap: 8px; margin-bottom: 12px; }
.compact-ui .summary-grid > :is(div,a) { min-width: 0; padding: 8px 10px; box-shadow: none; }
.compact-ui .summary-grid strong { font-size: 1.25rem; line-height: 1.35; margin-top: 3px; overflow-wrap: anywhere; }
.compact-ui .summary-grid span { font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.compact-ui :is(input,select,textarea,button,.link-button) { max-width: 100%; min-width: 0; }
.compact-ui :is(button,.link-button) { min-height: 44px; white-space: normal; overflow-wrap: anywhere; }
.compact-ui :is(.filter-bar,.records-filter) { gap: 8px; }
.compact-ui :is(.filter-bar,.records-filter) > * { min-width: 0; }
.compact-ui .active-filter-summary { padding: 8px; gap: 6px; }
.compact-ui .pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.compact-ui .compact-filters { min-width: 0; }
.compact-ui .compact-filters > summary { display: list-item; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: .875rem; color: var(--brand-strong); }
.compact-ui .compact-filters[open] > summary { margin-bottom: 4px; }
.compact-ui :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.compact-ui pre { white-space: pre-wrap; overflow-wrap: anywhere; }
@media(max-width:820px) {
 .compact-ui .page { width: 100%; padding: 4px 16px 24px; margin: 0 auto; }
 .compact-ui .topbar { padding: 4px 16px 0; gap: 0; }
 .compact-ui .brand-mark { display: flex; flex-wrap: nowrap; gap: 8px; width: 100%; min-width: 0; }
 .compact-ui .brand-mark img { width: 96px; height: 32px; object-fit: contain; }
 .compact-ui .mobile-scope-pill { min-width: 0; margin-left: auto; font-size: .8rem; }
 .compact-ui .brand-mark:has(.topbar-store-switcher) .mobile-scope-pill { display: none; }
 .compact-ui .topbar-store-switcher { flex: 1; min-width: 0; margin: 0; width: auto; }
 .compact-ui .topbar-store-switcher select { width: 100%; min-width: 0; min-height: 44px; font-size: 1rem; padding: 8px 28px 8px 12px; }
 .compact-ui .topbar nav { gap: 12px; padding: 0; margin-top: 0; }
 .compact-ui .topbar nav :is(a,button) { min-height: 44px; padding: 10px 0; font-size: .875rem; white-space: nowrap; }
 .compact-ui .topbar nav a[data-module-nav="repairs"] { min-width: 44px; text-align: center; }
 .compact-ui .summary-grid { grid-template-columns: repeat(auto-fit,minmax(min(8rem,100%),1fr)); }
 .compact-ui .summary-grid > :is(div,a) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
 .compact-ui .summary-grid strong { font-size: 1.125rem; }
 .compact-ui .dashboard-summary-grid { display: none; }
 .compact-ui .mobile-dashboard-summary { box-shadow: none; padding: 8px 10px; }
 .compact-ui :is(.filter-bar,.records-filter) { display: flex; flex-wrap: wrap; align-items: end; }
 .compact-ui :is(.filter-bar,.records-filter) > label { flex: 1 1 9rem; }
 .compact-ui :is(.filter-bar,.records-filter) > :is(button,a) { flex: 0 1 auto; padding: 8px 10px; font-size: .875rem; }
 .compact-ui .table-wrap tr { padding: 12px; margin-bottom: 12px; border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
 .compact-ui .table-wrap td { padding: 5px 2px; gap: 6px; font-size: .875rem; grid-template-columns: minmax(0,5.5rem) minmax(0,1fr); }
 .compact-ui .table-wrap td::before { font-size: .75rem; line-height: 1.4; margin: 0; }
 .compact-ui .table-wrap td:not([data-label]),.compact-ui .table-wrap td[colspan] { display: block; }
 .compact-ui .table-wrap td .pill { font-size: .75rem; }
 .compact-ui .workbench-compact-list tr.workbench-item-row { grid-template-columns: minmax(0,1fr); gap: 4px; padding: 10px; }
 .compact-ui .workbench-compact-list tr.workbench-item-row > td { grid-column: 1; padding: 0; }
 .compact-ui .workbench-compact-list .workbench-item-state { justify-self: start; }
 .compact-ui .workbench-next-step { font-size: .75rem; }
 .compact-ui .workbench-item-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding-top: 6px; }
 .compact-ui .workbench-item-photos .photo-gallery { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; }
 .compact-ui .workbench-item-photos:has(img)::before { content: attr(data-label); display: block; font-size: .75rem; }
 .compact-ui :is(.workbench-item-problem,.workbench-item-correction-note,.workbench-item-review-note) { -webkit-line-clamp: unset; overflow: visible; }

 .compact-ui .table-wrap .photo-thumb-button { width: 44px; height: 44px; padding: 4px; }
 .compact-ui .table-wrap .thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
 .compact-ui :is(.admin-layout,.manual-grid,.manual-context) { min-width: 0; }
 .compact-ui :is(.admin-layout,.manual-grid) > * { min-width: 0; }
 .compact-ui .login-panel { width: 100%; min-width: 0; padding: 16px; }
}
@media(max-width:380px) {
 .compact-ui .page { padding-inline: 12px; }
 .compact-ui .table-wrap td { grid-template-columns: minmax(0,4.5rem) minmax(0,1fr); }
}
@media(max-height:480px) {
 .compact-ui .topbar { position: static; }
}

/* Figma 7:615: existing authorized navigation, enhanced on tall mobile viewports.
   With no JS (or short landscape), the original top navigation remains intact. */
@media(max-width:820px) and (min-height:481px), (max-width:820px) and (orientation:portrait) {
 .compact-ui.has-mobile-nav { --mobile-nav-height: 96px; }
 .compact-ui.has-mobile-nav .page { padding-bottom: calc(var(--mobile-nav-height) + 24px); }
 .compact-ui.has-mobile-nav .topbar nav { position:fixed; inset:auto 0 0; z-index:20; display:flex; align-items:stretch; gap:4px; width:100%; max-width:none; margin:0; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); overflow:visible; background:var(--panel); border-top:1px solid var(--ui-border-accent); box-shadow:none; touch-action:auto; }
 .compact-ui.has-mobile-nav .topbar nav > a,
 .compact-ui.has-mobile-nav .mobile-nav-more > summary { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:60px; padding:6px 4px; border-radius:var(--ui-radius-control); font-size:.75rem; line-height:1.4; color:var(--muted); white-space:normal; overflow-wrap:anywhere; text-align:center; cursor:pointer; }
 .compact-ui.has-mobile-nav .topbar nav > a,
 .compact-ui.has-mobile-nav .mobile-nav-more { flex:1 1 0; min-width:0; }
 .compact-ui.has-mobile-nav .topbar nav > a.active,
 .compact-ui.has-mobile-nav .mobile-nav-more > summary.active,
 .compact-ui.has-mobile-nav .mobile-nav-more[open] > summary { background:var(--neo-overview); color:var(--ink); font-weight:700; }
 .compact-ui.has-mobile-nav .mobile-nav-more > summary { height:100%; list-style:none; }
 .compact-ui.has-mobile-nav .mobile-nav-more > summary::-webkit-details-marker { display:none; }
 .compact-ui.has-mobile-nav .mobile-nav-icon { display:block; width:22px; height:22px; flex:none; }
 .compact-ui.has-mobile-nav .mobile-nav-panel { position:absolute; bottom:100%; inset-inline:12px; max-height:calc(70dvh - var(--mobile-nav-height)); overflow-y:auto; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; margin-bottom:8px; background:var(--panel); border:1px solid var(--line); border-radius:var(--card-radius); box-shadow:var(--shadow); }
 .compact-ui.has-mobile-nav .mobile-nav-more:not([open]) .mobile-nav-panel { display:none; }
 .compact-ui.has-mobile-nav .mobile-nav-panel :is(a,button) { display:flex; align-items:center; justify-content:center; width:100%; padding:10px 8px; min-height:44px; white-space:normal; overflow-wrap:anywhere; font-size:.875rem; border-radius:var(--ui-radius-control); }
 .compact-ui.has-mobile-nav .mobile-nav-panel form { min-width:0; }
 .compact-ui.has-mobile-nav :is(input,textarea,select,button,a,summary) { scroll-margin-block:90px calc(var(--mobile-nav-height) + 16px); }
}

.figma-brand, .figma-account { display:none; }
@media(max-width:820px) {
 .compact-ui.has-figma-header .topbar { padding:12px; border-bottom:1px solid var(--line); background:var(--ui-header); }
 .compact-ui.has-figma-header .brand-mark { gap:12px; align-items:center; }
 .compact-ui.has-figma-header .brand-mark > img { display:none; }
 .compact-ui.has-figma-header .figma-brand { display:block; flex:0 0 32px; width:32px; height:32px; border-radius:9px; background:var(--neo-outline) url('figma-nav/brand.svg') center/23px 23px no-repeat; }
 .compact-ui.has-figma-header .figma-account { display:block; flex:0 0 44px; width:44px; height:44px; border-radius:8px; background:url('figma-nav/account.svg') center/20px 20px no-repeat; }
 .compact-ui.has-figma-header .topbar-store-switcher select { appearance:none; min-height:max(44px, calc(1.5em + 18px)); height:auto; line-height:1.5; padding:8px 30px 8px 38px; font-size:1rem; border:1px solid var(--control-line); border-radius:8px; background: url('figma-nav/store.svg') 12px center/20px 20px no-repeat, url('figma-nav/chevron.svg') right 10px center/18px 18px no-repeat, var(--panel); }
 .compact-ui.has-figma-header .mobile-scope-pill { flex:1; margin:0; }
}
@media(max-width:820px) {
 .compact-ui.has-figma-header .brand-mark:not(:has(.topbar-store-switcher)) > .mobile-scope-pill { flex:1; max-width:none; min-height:44px; padding:8px 12px 8px 38px; border:1px solid var(--ui-border-accent); border-radius:8px; font-size:1rem; line-height:1.5; background:var(--panel) url('figma-nav/store.svg') 12px center/20px 20px no-repeat; }
}

@media(max-width:820px) { .compact-ui.has-figma-header .brand-mark { gap:8px; } }

/* Records timing only: one contained block, never shared card/feedback controls. */
.history-record-timing { min-width:0; }
.history-record-timing .history-timing-summary { display:flex; flex-wrap:wrap; gap:4px 12px; margin-bottom:8px; font-size:.875rem; line-height:1.4; }
.history-record-timing .history-timing-points { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 12px; }
.history-record-timing .history-timing-point { display:grid; align-content:start; gap:2px; min-width:0; font-size:.75rem; line-height:1.4; }
.history-record-timing time { display:flex; flex-wrap:wrap; gap:0 4px; font:inherit; font-variant-numeric:tabular-nums; }
.history-record-timing time span { white-space:nowrap; overflow-wrap:normal; }
@media(max-width:820px) {
 .compact-ui .table-wrap td.history-timing-cell { display:block; }
 .compact-ui .table-wrap td.history-timing-cell::before { display:none; content:none; }
 .history-record-timing .history-timing-summary { justify-content:space-between; }
}