/* BC Email Bridge — Task Pane Styles
   Fluent UI–aligned design using CSS variables from Office theme.
   Light mode defaults baked in; JS overrides for dark/coloured themes.
*/

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Anchor to the host's viewport height (e.g. the Outlook Web task pane iframe) so the
   last section can grow to fill it instead of leaving blank host background below short
   content. Outlook classic desktop sizes its host to content already, so this is a no-op
   there. */
html, body {
  height: 100%;
}

/* ── Theme token defaults (light mode) ── */
:root {
  --bg:              #ffffff;
  --bg-subtle:       #f3f2f1;
  --bg-card:         #faf9f8;
  --border:          #e1dfdd;
  --border-subtle:   #edebe9;
  --text:            #201f1e;
  --text-muted:      #484644;
  --text-faint:      #797775;
  --accent:          #0078d4;
  --accent-subtle:   #deecf9;

  /* Status colours — kept intentionally opaque for accessibility */
  --status-pending-bg:   #fff8e1;
  --status-pending-fg:   #6b4c00;
  --status-mapped-bg:    #dff6dd;
  --status-mapped-fg:    #0e6b0e;
  --status-unmapped-bg:  #fde7e9;
  --status-unmapped-fg:  #8b1a22;
}

/* ── Base ── */
body {
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
}

#settings-panel,
#main-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

#main-content {
  display: flex;
  flex-direction: column;
  /* Offset parent for .auth-banner/#company-load-banner, which overlay the top of this
     content instead of taking their own row -- see those rules. */
  position: relative;
}

/* ── Top bar (status + gear) ── */
.top-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
  min-height: 20px;
}

.status-bar {
  flex: 1;
  font-size: 11px;
  padding: 2px 14px;
  color: var(--text-faint);
  letter-spacing: 0.1px;
}

.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 3px 10px;
  color: var(--text-faint);
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}

.icon-btn:hover { color: var(--text); }
.icon-btn--active { color: var(--accent); }

/* ── Sections ── */
.section {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.section-title-row .section-title {
  margin-bottom: 0;
}

.section-refresh-btn {
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  color: var(--text-faint);
  border-radius: 3px;
  width: 22px;
  height: 22px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
}

.section-refresh-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

/* ── Subject ── */
.email-subject {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.45;
  word-break: break-word;
}

/* ── Meta rows (from / to / date) ── */
.email-meta-row {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  margin-bottom: 11px;
}

.meta-icon {
  width: 20px;
  text-align: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.7;
}

.meta-icon--mail {
  color: var(--accent);
  opacity: 1;
  font-weight: 700;
}

.meta-content { flex: 1; min-width: 0; }

.meta-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-faint);
  margin-bottom: 1px;
}

.meta-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.meta-email {
  font-size: 12px;
  color: var(--accent);
  word-break: break-all;
}

.meta-value {
  font-size: 12px;
  color: var(--text-muted);
  word-break: break-word;
}

/* ── Body content (full, sanitized HTML) ── */
.body-preview-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-faint);
  margin-bottom: 8px;
  margin-top: 2px;
}

.body-preview {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 4px;
  padding: 9px 11px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 130px;
  overflow-y: auto;
  line-height: 1.6;
  margin-bottom: 10px;
}

.body-preview::-webkit-scrollbar { width: 4px; }
.body-preview::-webkit-scrollbar-track { background: transparent; }
.body-preview::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* ── Empty state ── */
.empty-state {
  text-align: center;
  padding: 28px 16px 20px;
}

.empty-icon {
  font-size: 30px;
  margin-bottom: 10px;
  opacity: 0.6;
}

.empty-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}

.empty-hint {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.5;
}

/* ── Attachments / file list ── */

.attachment-empty {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  padding: 2px 0;
}

.attachment-error {
  font-size: 12px;
  color: var(--status-unmapped-fg);
  background: var(--status-unmapped-bg);
  padding: 8px 10px;
  border-radius: 4px;
  margin: 4px 0;
}

.file-dropzone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-faint);
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 7px 9px;
  margin-bottom: 8px;
  background: var(--bg-subtle);
}

.file-dropzone--active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}

.file-dropzone-link {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.file-badge--local {
  background: #5c2d91;
}

.file-remove-btn {
    top: 8px;
    right: 8px;
    position: absolute;

    width: 18px;
    height: 18px;

    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-faint);

    border-radius: 3px;

    cursor: pointer;
    font-size: 11px;
    padding: 0;
    flex-shrink: 0;
}

.file-remove-btn:hover {
  color: var(--status-unmapped-fg);
  border-color: var(--status-unmapped-fg);
}

.file-group {
  margin-bottom: 8px;
}

.file-group-title {
  font-size: 11px;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Caps each group (one per email, plus one for local files) at a fixed number of visible
   file rows, scrolling internally beyond that -- keeps a long attachment list from pushing
   the rest of the pane (Operational Orders below it, via #customers-section/.bc-records-list
   flex:1) down. The two variants below give email attachments more room than local files
   (uploaded far less often, and less likely to pile up), with whatever's left over going to
   Orders search. ~97px per row (file-name-row, then file-body with Document Type, Comment,
   and the Portal/Multiple Docs. Req. actions row all stacked in file-properties), plus 2px
   margin between rows (see .file-row). */
.file-group-rows {
  overflow-y: auto;
  padding-right: 2px;
}

/* ~2.5 rows -- the trailing partial row is a deliberate scroll affordance hint. */
.file-group-rows--email {
  max-height: 247px;
}

/* ~1.25 rows. */
.file-group-rows--local {
  max-height: 123px;
}

.file-group-rows::-webkit-scrollbar { width: 4px; }
.file-group-rows::-webkit-scrollbar-track { background: transparent; }
.file-group-rows::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Two stacked sections: file-name-row (name+size) and file-body (checkbox/icon/badge beside
   Document Type/Comment/actions) -- see the markup in renderFileRow. No gap here:
   file-properties' own margin-top already supplies the spacing below file-name-row (see its
   comment). */
.file-row {
    display: flex;
    flex-direction: column;
    padding: 4px 10px 8px;
    margin-bottom: 2px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .1s, border-color .1s;
    user-select: none;
    position: relative;
}

/* file-select-col beside file-properties -- center, not flex-start: file-properties is
   taller now that it also holds file-actions-row (Portal/Multiple Docs. Req.), so
   top-aligning would leave the checkbox/icon looking stranded near the top instead of
   centered against the full Document Type + Comment + actions block beside it. */
.file-body {
    display: flex;
    align-items: center;
    gap: 9px;
}

.file-row:hover {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
}

.file-row--checked {
  background: var(--accent-subtle);
  border-color: var(--border);
}

/* Dimmed via targeted opacity on the icon/name only, not the whole row: opacity < 1 on an
   ancestor forces its entire subtree (including descendants like the file-category-menu
   dropdown, which is position: fixed but still a DOM child of this row) to composite as one
   translucent layer -- that made the dropdown see-through specifically on uploaded rows. */
.file-row--uploaded .file-icon,
.file-row--uploaded .file-name {
  opacity: 0.7;
}

/* file-select-top (checkbox+icon), then the "Uploaded" badge when present -- stacked as a
   unit that file-body then centers vertically against the taller file-properties beside it.
   Width is a hard 39px (checkbox 15 + gap 4 + icon 20, file-select-top's natural size) --
   fixed, not content-driven, specifically so nothing added under it can ever widen this
   column, and therefore the row, no matter what. min-width: 0 plus align-items: stretch (so
   the badge spans the full 39px) are the belt-and-suspenders backing that guarantee. */
.file-select-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 39px;
    min-width: 0;
    flex-shrink: 0;
    gap: 4px;
}

.file-select-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.file-checkbox {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* Sits in file-actions-row (under Comment, inside file-properties -- see that comment),
   beside the (currently inert) Multiple Docs. Req. chip -- a small bordered chip, not a
   checkbox or switch, since the row already has its own selection checkbox elsewhere and a
   second checkbox/switch-shaped control would read as "select this file" at a glance.
   Text-only content (no track/knob graphic) is what lets it fit into half of
   file-actions-row's share of file-properties' 210px, unlike the switch this replaced. */
.file-portal-toggle {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 2px 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--input-bg, var(--bg));
    font: inherit;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-faint);
    cursor: pointer;
    user-select: none;
}

.file-portal-toggle:hover {
    border-color: var(--accent);
    color: var(--text);
}

/* Same status-mapped green as the "Uploaded" badge (see .file-select-uploaded), not the
   accent blue -- a blue chip is hard to spot once the row itself is also highlighted
   accent-blue by .file-row--checked. */
.file-portal-toggle--active {
    background: var(--status-mapped-bg);
    border-color: var(--status-mapped-fg);
    color: var(--status-mapped-fg);
}

/* Placeholder chip, same look as .file-portal-toggle beside it -- not wired to any click
   handler yet (see renderFileRow), so cursor: default rather than pointer/hover states that
   would suggest it's already interactive. */
.file-multidocs-chip {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 2px 0;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--input-bg, var(--bg));
    font: inherit;
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.1px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    color: var(--text-faint);
    cursor: default;
}

/* visibility, not display: none -- this chip still occupies its half of file-actions-row
   (flex: 1, same as Portal), so Portal's width and position stay exactly as they'd be with
   both chips visible instead of expanding to fill the row alone. */
.file-multidocs-chip--hidden {
    visibility: hidden;
}

/* Portal + Multiple Docs. Req. chips, split evenly. Lives inside file-properties as its
   third stacked child (see that comment) -- file-properties' own gap: 3px already spaces
   it below Comment, so no margin of its own is needed here. */
.file-actions-row {
    display: flex;
    gap: 6px;
}

.file-actions-row > * {
    flex: 1;
    min-width: 0;
}

/* Status, not a control -- plain colored text (no border/pill), so it can't be mistaken for
   a button. Same overflow-safety pattern as file-portal-toggle: clamped to file-select-col's
   39px, never allowed to widen the row. */
.file-select-uploaded {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    color: var(--status-mapped-fg);
}

.file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  text-align: center;
}

.file-icon--mail {
  filter: saturate(1.05);
}

.file-icon-svg {
  width: 18px;
  height: 20px;
  display: block;
}
/* Name and size share one line (rather than size on its own line below) -- see the row-cap
   comment on .file-group-rows for why the vertical space matters. min-width: 0 lets
   .file-name actually ellipsize instead of forcing this row (and the whole file-row) wider.
   padding-right leaves room for the absolutely-positioned file-remove-btn (top: 8px; right:
   8px on .file-row) so a long name/size never runs under it. */
.file-name-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    padding-right: 24px;
}

.file-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    /* Matches .file-icon's height so the icon (and, centered against it, the checkbox)
       sit level with this text -- both start at the row's top edge already, but without
       this the name's own (shorter) line box left them looking too high above it. */
    line-height: 20px;
}

.file-size {
    flex-shrink: 0;
    font-size: 10px;
    color: var(--text-faint);
}

/* margin-top: 3px is what actually separates file-name-row above from this row (.file-row
   has no gap of its own between them -- see its comment). Holds Document Type, Comment, and
   (as its third stacked child) file-actions-row -- putting the Portal/Multiple Docs. Req.
   chips there, rather than as a file-body-level sibling, is what makes them the same width
   as Comment and sit directly under it. flex: 1 (not a hard width) so this column -- and
   therefore Document Type/Comment/the actions row, all width: 100% of it -- grows to fill a
   wider taskpane, matching file-select-col's fixed 39px which stays strict; min-width: 210px
   is a floor, not the old ceiling. Without this, file-name-row (which does span the row's
   full width) would grow while this stayed fixed, leaving .file-size drifting away from
   Document Type's actual right edge on a wider window instead of sitting above it. */
.file-properties {
    display: flex;
    flex-direction: column;
    gap: 3px;

    margin-top: 3px;
    padding-left: 6px;

    flex: 1;
    min-width: 210px;
}

.file-category {
    position: relative;
    width: 100%;
}

/* A real text input now, not a button -- it's the search box itself (see
   wireFileRowEvents), not just a display of the current selection. */
.file-category-button {
    width: 100%;
    height: 20px;
    box-sizing: border-box;

    padding: 0 5px;

    background: var(--input-bg, var(--bg));
    border: 1px solid var(--border);
    border-radius: 3px;

    color: var(--text);
    font: inherit;
    font-size: 10px;

    outline: none;
}

.file-category-button::placeholder {
    color: var(--text-faint);
}

.file-category-button--empty {
    color: var(--text-faint);
}

.file-category-button--required {
    font-weight: 700;
    color: var(--accent);
}

.file-category-button:hover,
.file-category-button:focus {
    border-color: var(--accent);
}

.file-category-menu {
    position: fixed;

    display: none;

    background: var(--bg);

    border: 1px solid var(--border);

    border-radius: 4px;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);

    z-index: 1000;

    /* positionCategoryMenu sets an inline max-height dynamically; this is what actually
       clips content to it -- the scrolling itself happens on file-category-options below. */
    overflow: hidden;
}

.file-category--open .file-category-menu {
    /* flex column, not block: file-category-options' scrolling below relies on flex's
       flex/min-height:0 shrink-to-fit, since max-height: 100% on a plain block child never
       resolves against a parent whose only height comes from positionCategoryMenu's inline
       max-height (not height) -- that left .file-category-menu's own overflow: hidden doing
       the (scrollbar-less) clipping instead of file-category-options ever actually scrolling. */
    display: flex;
    flex-direction: column;
}

.file-category-options {
    /* ~8 options + the default "Document Type" entry before scrolling internally --
       bounded by the parent's own (dynamic) clipped height, whichever is smaller. flex: 1
       (not max-height: 100%, see .file-category--open .file-category-menu) is what actually
       makes that bound apply -- min-height: 0 overrides flex's default min-height: auto,
       which would otherwise let this grow past the parent instead of scrolling. */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.file-category-options::-webkit-scrollbar { width: 4px; }
.file-category-options::-webkit-scrollbar-track { background: transparent; }
.file-category-options::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.file-category-option {
    padding: 4px 8px;
    font-size: 10px;
    cursor: pointer;
    color: var(--text);
}

.file-category-option:hover {
    background: var(--accent-subtle);
    color: var(--text);
}

.file-category-option--no-match {
    display: none;
    padding: 6px 8px;
    font-size: 10px;
    font-style: italic;
    color: var(--text-faint);
}

/* emailBridgeRequired document types are bolded and accent-colored, both as a dropdown
   option and once selected as the field's own text (.file-category-button--required in
   the rule above) -- see renderFileRow/commitCategorySelection in attachments.ts. */
.file-category-option--required {
    font-weight: 700;
    color: var(--accent);
}

.file-category-button--error {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px rgba(209, 52, 56, .18);
}

.file-category-button--error:hover {
    border-color: #d13438 !important;
}

.file-category-button--error:focus {
    border-color: #d13438 !important;
}

.file-note {
    width: 100%;
    height: 20px;
    box-sizing: border-box;

    padding: 0 5px;

    background: var(--input-bg, var(--bg));
    border: 1px solid var(--border);
    border-radius: 3px;

    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;

    outline: none;
}

.file-note::placeholder {
    color: var(--text-faint);
    font-size: 10px;
    opacity: .8;
}

.file-note:hover {
    border-color: var(--accent);
}

.file-note:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(15,108,189,.25);
}

.field-input:hover {
    border-color: #8a8886;
}

.field-input:focus {
    outline: none;
    border-color: #0f6cbd;
    box-shadow: 0 0 0 1px rgba(15,108,189,.25);
}

.field-input--error {
    border-color: #d13438 !important;
    box-shadow: 0 0 0 1px rgba(209,52,56,.18);
}

.field-input--error:focus {
    border-color: #d13438 !important;
}

.field-input--error::placeholder {
    color: var(--text-faint);
}


/* ── BC Status badges ── */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.status-none {
  background: var(--bg-subtle);
  color: var(--text-faint);
  border: 1px solid var(--border);
}

.status-pending {
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.status-mapped {
  background: var(--status-mapped-bg);
  color: var(--status-mapped-fg);
}

.status-unmapped {
  background: var(--status-unmapped-bg);
  color: var(--status-unmapped-fg);
}

/* ── Buttons ── */
.action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bc-actions {
  margin-top: 10px;
  /* Stretch children to the row's height (the button's natural height) so the
     status slot below always matches it, regardless of the banner's content. */
  align-items: stretch;
}

/* Generic small dismissible status banner -- pending/success/error colored, a message, and
   a dismiss (x) button. Shared "mechanism" (same classes, same setStatusBanner/clearStatusBanner
   helpers in orders.ts) for every small inline status here: the Upload status
   (map-upload-status-overlay, absolutely overlaying the Upload button so its own size never
   moves) and the Order search status (order-search-status, a normal-flow banner above the
   action row -- there's no button beside it whose position needs to stay fixed). */
.status-banner {
  display: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.4;
}

.status-banner--visible {
  display: flex;
}

.status-banner--pending {
  background: var(--status-pending-bg);
  color: var(--status-pending-fg);
}

.status-banner--success {
  background: var(--status-mapped-bg);
  color: var(--status-mapped-fg);
}

.status-banner--error {
  background: var(--status-unmapped-bg);
  color: var(--status-unmapped-fg);
}

.status-banner-text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.status-banner-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}

.status-banner-link:hover {
  opacity: 0.8;
}

.status-banner-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 2px;
  opacity: 0.7;
}

.status-banner-close:hover {
  opacity: 1;
}

/* Fixed-footprint slot the same height as the Upload button. The actual banner
   is absolutely positioned inside it, so growing/shrinking its content never
   changes this slot's size -- the button next to it never moves. */
.map-upload-status-slot {
  position: relative;
  flex: 1;
  min-width: 120px;
}

.map-upload-status-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* pinned to the button's bottom edge; extra lines grow upward */
}

/* Sits above the action row (Select Order/Upload) as a normal block -- unlike the Upload
   status, nothing beside it needs to hold still, so no overlay/absolute positioning here. */
.order-search-status {
  margin-bottom: 8px;
}

.ms-Button {
  cursor: pointer;
  border: 1px solid transparent;
  padding: 6px 16px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  border-radius: 3px;
  transition: filter 0.1s;
}

.ms-Button--compact {
  padding: 4px 10px;
  font-size: 12px;
  min-height: 28px;
}

.ms-Button--primary {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.ms-Button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: none !important;
}

.ms-Button--primary:hover { filter: brightness(0.88); }
.ms-Button--primary:active { filter: brightness(0.78); }

.ms-Button--default {
  background: var(--bg-subtle);
  color: var(--text);
  border-color: var(--border);
}
.ms-Button--default:hover { filter: brightness(0.94); }

/* ── Settings panel ── */
.settings-panel {
  padding: 14px;
  border-bottom: 2px solid var(--border);
  background: var(--bg);
}

.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}

.field-group {
  margin-bottom: 12px;
}

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.field-input {
  width: 100%;
  padding: 6px 9px;
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  background: var(--input-bg, var(--bg));
  border: 1px solid var(--input-border, var(--border));
  border-radius: 3px;
  outline: none;
  box-sizing: border-box;
}

.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.field-hint {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 4px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.company-load-status--error {
  display: block;
  margin-top: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--status-unmapped-bg);
  color: var(--status-unmapped-fg);
}

.settings-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.save-status {
  font-size: 12px;
  color: var(--status-mapped-fg, #107c10);
  font-weight: 600;
}

/* ── Auth status box ── */
.auth-status-box {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-subtle);
  min-height: 24px;
}

.auth-status-box--ok {
  background: var(--status-mapped-bg);
  border-color: var(--status-mapped-fg);
}

.auth-status-box--error {
  background: var(--status-unmapped-bg);
  border-color: var(--status-unmapped-fg);
}

.auth-icon {
  font-size: 12px;
  flex-shrink: 0;
  line-height: 1;
}

.auth-text {
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.auth-compact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.auth-detail {
  font-size: 10px;
  color: var(--text-faint);
  line-height: 1.3;
  min-height: 12px;
  flex: 1;
  min-width: 160px;
}

.auth-session-note {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--status-pending-fg, #986f0b);
  background: var(--status-pending-bg, #fff4ce);
  border: 1px solid var(--status-pending-fg, #986f0b);
  border-radius: 3px;
  padding: 4px 6px;
}

.diagnostics-box {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
  background: var(--bg-subtle);
}

.diagnostics-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.diagnostics-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.diagnostics-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-faint);
}

.diagnostics-grid {
  display: grid;
  grid-template-columns: minmax(120px, 42%) 1fr;
  gap: 3px 8px;
}

.diag-k {
  font-size: 11px;
  color: var(--text-faint);
}

.diag-v {
  font-size: 11px;
  color: var(--text);
  word-break: break-word;
}

.diag-warning {
  margin-top: 6px;
  font-size: 11px;
  color: var(--status-unmapped-fg);
  background: var(--status-unmapped-bg);
  border: 1px solid var(--status-unmapped-fg);
  border-radius: 3px;
  padding: 4px 6px;
  line-height: 1.35;
}

.diag-copy-status {
  margin-top: 6px;
  min-height: 14px;
  font-size: 10px;
  color: var(--text-faint);
}

/* ── Auth banner (overlays the top of main content when not authenticated / companies
   failed to load) -- absolute + an opaque background, same overlay pattern as
   .map-upload-status at the bottom, so it doesn't reserve its own row in the layout and
   shrink the space left for Operational Orders below when there's nothing to report. #
   main-content is the offset parent (position: relative -- see that rule). At most one of
   #auth-banner/#company-load-banner is ever shown at once (see updateAuthBanner), so they
   never need to stack. */
.auth-banner {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  background: var(--status-unmapped-bg);
  color: var(--status-unmapped-fg);
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.banner-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--status-unmapped-fg);
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
}

#customers-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Overrides .section's shared 14px top padding -- tightens the gap to the attachments
     section above it specifically, without touching that spacing on any other .section. */
  padding-top: 4px;
}

/* Same idea as #customers-section's override above, at the top of main-content this time --
   frees up a bit more height for #customers-section (flex: 1) below, without touching any
   other .section's own top padding (Configuration/Authentication/Company, in the settings
   panel). */
#attachments-section {
  padding-top: 6px;
}

.bc-search-row {
  margin-bottom: 8px;
}

.bc-records-list {
  flex: 1;
  min-height: 100px;
  overflow-y: auto;
}

.bc-records-list::-webkit-scrollbar { width: 4px; }
.bc-records-list::-webkit-scrollbar-track { background: transparent; }
.bc-records-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.bc-hint, .bc-loading {
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
  padding: 6px 0;
}

.bc-error {
  font-size: 12px;
  color: var(--status-unmapped-fg);
  background: var(--status-unmapped-bg);
  border-radius: 4px;
  padding: 7px 10px;
  line-height: 1.5;
}

.bc-record {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 9px;
  margin-bottom: 2px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
  cursor: pointer;
}

.bc-record:hover {
  background: var(--bg-subtle);
  border-color: var(--border-subtle);
}

.bc-record--selected {
  background: var(--accent-subtle);
  border-color: var(--accent) !important;
}

.bc-record-main {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.bc-record-checkbox {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--accent);
}

.bc-record-number {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  font-family: "Cascadia Code", "Consolas", monospace;
  flex-shrink: 0;
}

.bc-record-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bc-record-sub {
  font-size: 11px;
  color: var(--text-faint);
  padding-left: 1px;
}

.bc-record-field {
  display: flex;
  gap: 6px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.5;
}

.bc-record-field--header {
  align-items: center;
  margin-bottom: 2px;
}

.bc-record-field--header .bc-record-checkbox {
  margin-right: calc(80px - 10px);
}

.bc-record-field-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
  min-width: 80px;
}

.bc-record-field-value {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.customer-map-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: var(--status-mapped-bg);
  color: var(--status-mapped-fg);
  border: 1px solid var(--status-mapped-fg);
  padding: 1px 5px;
  border-radius: 8px;
}

/* -- Company select -- */
.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23605e5c'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  padding-right: 26px;
  cursor: pointer;
}