/* Shared chrome refresh (Employee requirement 64): seven-item phone dock with Home centred, icon-only gear,
   account-menu preview/theme items, one-line wordmark and shared search fields. Loaded last. */

/* Wordmark: one line with a real gap; hide only where the header genuinely has no room. */
.workspace-header .wordmark { display: inline-flex !important; align-items: center; gap: .3em; flex: none !important; white-space: nowrap; }
.workspace-header .wordmark span { display: inline !important; }
@media (max-width: 760px) {
  .workspace-header .wordmark { font-size: 17px !important; line-height: 1.2; letter-spacing: -.2px !important; }
}
@media (max-width: 340px) {
  .workspace-header .wordmark { display: none !important; }
}

/* Account menu items rendered as buttons (main app dialog and native-tool dialog). */
.account-links button.menu-link,
.employee-preview-dialog button.menu-link { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--line, #edf0f4); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.employee-preview-dialog button.menu-link { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 10px 4px; }
.employee-preview-dialog .menu-link small { display: block; margin-top: 2px; color: var(--muted, #667085); font-size: 12px; }
.employee-preview-dialog .menu-link > span:not(.appearance-symbol) { flex: 1; }
:is(.account-links, .employee-preview-dialog) .appearance-menu-item .appearance-symbol { flex: none; width: 20px; justify-content: center; }
:is(.account-links, .employee-preview-dialog) button.menu-link:focus-visible { outline: 3px solid var(--accent-bright, #ff6900); outline-offset: -3px; }

/* More hub: workspace modules first, then personal and store sections. */
.more-group-title { margin: 20px 4px 8px; color: var(--muted, #667085); font-size: 13px; font-weight: 500; }

/* Shared search/select fields in Tasks & reminders follow the UI system (40px, 10px radius, orange focus). */
.wc-search input,
.wc-search select { min-height:var(--rp-control-size); padding: 0 12px; border: 1px solid var(--line, #e5e7eb); border-radius: 10px; background: var(--paper, #fff); color: var(--ink, #191d27); box-shadow: none; }
.wc-search input:focus-visible,
.wc-search select:focus-visible { outline: 0; border-color: var(--accent-bright, #ff6900); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright, #ff6900) 22%, transparent); }
@media (min-width: 761px) { .wc-search input { font-size: 14px; } }

/* Data comparison badges keep the approved red-up/green-down colours and add a direction glyph (colour is never the only cue). */
.data-cmp-arrow { display: inline-block; margin-right: 3px; font-size: .78em; line-height: 1; vertical-align: .05em; }

/* External-link arrow sits at the row end instead of sharing the flexible label width. */
.menu-link > span[aria-hidden="true"] { flex: none; color: var(--muted, #667085); }

/* Seven-item phone dock: keep every label on one line inside its slot. */
.employee-bottom-nav a > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }