/* Company pages -- the company rail and the footer's buttons (item 3458, M5-M7).
   Source of truth: docs/design/ui/company-overview/2026-10-22-company-overview-mockup.html, its `.cr*` and
   `.dx-btn` rules ported with the colour tokens tokens.css already declares (--bg, --rail, --line, --line2, --ink,
   --ink2, --ink3, --accent, --accent-bg, --pane, --stop, --stop-bg). Linked after shell.css in App.razor.

   TOKEN OWNERSHIP: tokens.css has no --ix-* tokens, and the mockup draws the current rail entry with three.
   They are declared here, at bare :root, again under the dark media query guarded as
   :root:not([data-theme="light"]), and again under :root[data-theme="dark"] -- the same three-block shape
   shell.css gives --nav-* -- so an explicit light or dark choice always wins over the OS setting and nothing is
   defined only in the dark block. The company rail's two widths are layout sizes, not colours, so they are
   declared once. */
:root {
  --ix-sel: var(--pane); --ix-sel-ink: var(--accent); --ix-mark: var(--accent);
  --cr-w: 52px; --cr-w-open: 212px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ix-sel: var(--accent-bg); --ix-sel-ink: var(--ink); --ix-mark: var(--accent);
  }
}
:root[data-theme="dark"] {
  --ix-sel: var(--accent-bg); --ix-sel-ink: var(--ink); --ix-mark: var(--accent);
}

/* ---- The company rail: icon and name by default, foldable to icons with the name as a tooltip. ---- */
.cr { flex: none; width: var(--cr-w); background: var(--rail); border-right: 1px solid var(--line); border-left: 6px solid var(--bg); box-shadow: inset 1px 0 0 var(--line); display: flex; flex-direction: column; transition: width .12s; }
.cr.is-open { width: var(--cr-w-open); }
.cr svg.ico { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }
/* the rail's scope: these are this company's pages, not global navigation */
.cr-scope { flex: none; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 0 0 16px; border-bottom: 1px solid var(--line); color: var(--ink2); font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.cr-scope .ico { color: var(--accent); }
.cr:not(.is-open) .cr-scope { flex-direction: column; justify-content: center; gap: 1px; padding: 0; height: 44px; font-size: 9.5px; letter-spacing: .01em; }
.cr-list { flex: 1; margin: 0; padding: 6px 0; list-style: none; display: flex; flex-direction: column; gap: 1px; overflow: auto; }
.cr-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 0 0 17px; color: var(--ink2); position: relative; text-align: left; font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-decoration: none; }
.cr-item:hover { background: var(--accent-bg); color: var(--ink); }
.cr-item.is-current { background: var(--ix-sel); color: var(--ix-sel-ink); font-weight: 600; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.cr-item.is-current::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; border-radius: 0 2px 2px 0; background: var(--ix-mark); }
/* a page not built yet is named but does nothing: no pointer, no hover, a quieter ink */
.cr-item--unbuilt { color: var(--ink3); cursor: default; }
.cr-item--unbuilt:hover { background: none; color: var(--ink3); }
.cr-item .lbl { opacity: 0; transition: opacity .1s; }
.cr.is-open .cr-item .lbl { opacity: 1; }
.cr-foot { border-top: 1px solid var(--line); padding: 6px 0; }
.cr-toggle { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 0 0 17px; border: none; background: none; color: var(--ink3); cursor: pointer; font: inherit; font-size: 12px; white-space: nowrap; overflow: hidden; }
.cr-toggle:hover { background: var(--accent-bg); color: var(--ink); }
.cr-toggle .lbl { opacity: 0; }
.cr.is-open .cr-toggle .lbl { opacity: 1; }
.cr.is-open .cr-toggle svg { transform: rotate(180deg); }

/* At 1,000 px and below the rail is always icons only, whatever the viewer chose (item 3599 R21, rewriting SD-3112 R33's width): the
   open rail took 212 of the 308 px between viewport and card at 768 px (MEAS section 5). Above 1,000 px the remembered fold state
   applies; it is never written here. */
@media (max-width: 1000px) {
  .cr.is-open { width: var(--cr-w); }
  .cr.is-open .lbl { opacity: 0 !important; }
}

/* ---- The footer bar's buttons (the mockup's .dx-btn), scoped to the bar: the DevExpress theme styles real
        DxButtons; these are plain buttons that must look like them. ---- */
.actionbar .dx-btn { font: inherit; font-size: 13.5px; font-weight: 500; padding: 6px 16px; border-radius: 4px; border: 1px solid var(--dx-primary, var(--accent)); background: var(--dx-primary, var(--accent)); color: var(--dx-on-primary, var(--pane)); cursor: pointer; }
.actionbar .dx-btn.quiet { background: var(--pane); color: var(--ink); border-color: var(--dx-input-border, var(--line)); }
.actionbar .dx-btn.quiet:hover { background: var(--accent-bg); }
.actionbar .dx-btn.sm { font-size: 12px; padding: 3px 10px; }
.actionbar .dx-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---- The Contact details page (item 3460; SD-3575 M2-M14, P2-P12; AC1-AC6).
        Colours are the tokens tokens.css declares (--pane, --line, --line2, --ink, --ink2, --ink3, --accent, --accent-bg, --stop);
        none is new, so nothing is defined only in a dark block.
        Scope: the audit line and the cd-* cards sit under .company-page, as company-overview.css's band rules do. The cb-* classes
        belong to the shared contact-block components (src/Web/Components/Contact/), which item 3101's person pages mount too and
        whose dialogs (contact log, opt log) DevExpress may draw outside .company-page, so they carry the unique cb- prefix and no
        page scope. ---- */

/* The band's audit line (mockup `.band-facts .audit`, lines 551-552 at 0befbd89f). Scoped under .company-page because the band's
   own rules live in company-overview.css (`.company-page .band-facts div { display: flex; gap: 6px; ... }`), linked after this
   file, and the unscoped mockup selector would lose to them on any shared property. */
.company-page .band-facts .audit { margin-left: auto; color: var(--ink3); font-size: 11.5px; }
.company-page .band-facts .audit span + span { margin-left: 14px; }
/* P12: the audit line could not load -- the failure ink, with its Retry beside it */
.company-page .band-facts .audit--failed { color: var(--stop); }
.company-page .band-facts .audit .dx-btn.quiet { font: inherit; font-size: 11.5px; padding: 0 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--pane); color: var(--ink); cursor: pointer; }
.company-page .band-facts .audit .dx-btn.quiet:hover { background: var(--accent-bg); }

/* The cards: one column of full-width cards, two columns on a wide page (the first card of the pair is the identity card) */
.company-page .cd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; align-content: start; }
.company-page .cd-card { background: var(--pane); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px 12px; min-width: 0; }
.company-page .cd-card[data-card="communication"], .company-page .cd-card[data-card="logbook"] { grid-column: 1 / -1; }
.company-page .cd-card-title { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line2); font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.company-page .cd-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 12.5px; }
/* each field is a div holding its dt and dd; display: contents lets the pair sit on the card's two-column grid */
.company-page .cd-field { display: contents; }
.company-page .cd-card dt { font-size: 11px; font-weight: 600; color: var(--ink3); padding-top: 2px; }
.company-page .cd-card dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.company-page .cd-field dd a { display: block; color: var(--accent); }
.company-page .cd-check dt { padding-top: 0; }
.company-page .cd-check input { margin: 0; vertical-align: middle; }

/* ---- The shared contact blocks (cb-*): failure lines, communication blocks, consent, log book, resources, the two dialogs. ---- */
/* P12: a block that could not load, or a log book that could not be read -- never an empty look */
.cb-failure { margin: 0 0 8px; padding: 5px 9px; border-radius: 4px; background: var(--stop-bg); color: var(--stop); font-size: 12.5px; font-weight: 500; }
.cb-failure .dx-btn.quiet { font: inherit; font-size: 12px; padding: 1px 10px; margin-left: 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--pane); color: var(--ink); cursor: pointer; }
.cb-failure .dx-btn.quiet:hover { background: var(--accent-bg); }
/* the consent line (M11): the email is the click target that opens the opt log */
.cb-consent { margin: 0 0 10px; font-size: 12.5px; color: var(--ink2); }
.cb-email { border: none; background: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; }
.cb-email:hover { color: var(--ink); }
/* the communication blocks (M9, P3-P5), stacked each with its label */
.cb-blocks { display: flex; flex-direction: column; gap: 12px; }
.cb-block-label { margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.cb-block dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: 12.5px; }
.cb-part { display: contents; }
.cb-part dt { font-size: 11px; font-weight: 600; color: var(--ink3); padding-top: 2px; }
.cb-part dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--ink); }
.cb-line { display: block; }
.cb-invalid { margin-left: 6px; padding: 0 6px; border-radius: 8px; background: var(--stop-bg); color: var(--stop); font-size: 11px; font-weight: 600; }
/* the profile resources (P9): collapsed until asked for, a plain table */
.cb-resources { font-size: 12.5px; }
.cb-resources .dx-btn.quiet { font: inherit; font-size: 12px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--pane); color: var(--ink); cursor: pointer; }
.cb-resources .dx-btn.quiet:hover { background: var(--accent-bg); }
.cb-resources table { margin-top: 8px; border-collapse: collapse; width: 100%; }
.cb-resources th { text-align: left; font-size: 11px; font-weight: 600; color: var(--ink3); border-bottom: 1px solid var(--line2); padding: 3px 8px 3px 0; }
.cb-resources td { padding: 3px 8px 3px 0; overflow-wrap: anywhere; vertical-align: top; }
.cb-resources a { color: var(--accent); }
/* the log book's entry text keeps legacy's line breaks (P8) */
.company-page .cd-card[data-card="logbook"] pre { margin: 0; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the dialogs (P7, M12): the count line, "No data", and the opt log's status line and heading */
.cb-count { margin: 0 0 6px; font-size: 12px; color: var(--ink3); }
.cb-empty { margin: 8px 0; font-size: 13px; color: var(--ink2); }
.cb-optlog-status { margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.cb-optlog-heading { margin: 0 0 6px; font-size: 13px; font-weight: 700; }

/* The shared phone display (item 3603; PhoneDisplayView): the 3595 mockup's .ph and .flag rules
   (docs/design/ui/company-contact-details/2026-10-29-company-contact-details-mockup.html), with the bundled flag-icons
   4x3 SVG drawn by an img at the mockup's 19 x 13 px, outlined with --line (spec §2.0). object-fit keeps the 4:3 flag
   filling the box rather than letterboxed. */
.ph { display: inline-flex; align-items: center; gap: 6px; }
.ph .flag { display: inline-flex; flex: none; line-height: 0; outline: 1px solid var(--line); }
.ph .flag img { width: 19px; height: 13px; display: block; object-fit: cover; }