/*
 * Approved Issue-46 Firmenhub presentation.
 *
 * This is the single source loaded after the shared component styles by the local
 * comparison demo and the authenticated CRM. Layout C is active whenever the
 * document carries data-hub-variant="c"; portals rely on that document scope.
 */

html[data-crm-skin] {
  --hub-skin-canvas:color-mix(in srgb,var(--crm-canvas) 55%,#f3f4f5);
  --hub-skin-surface:color-mix(in srgb,var(--crm-surface) 60%,white);
  --hub-skin-soft:color-mix(in srgb,var(--crm-surface-soft) 55%,#f3f4f5);
  --hub-skin-ink:var(--crm-ink);
  --hub-skin-ink-soft:color-mix(in srgb,var(--crm-ink-soft) 86%,var(--crm-ink));
  --hub-skin-line:var(--crm-line);
  --hub-skin-line-strong:var(--crm-line-strong);
  --hub-skin-accent:var(--crm-accent);
  --hub-skin-accent-hover:var(--crm-accent-hover);
  --hub-skin-accent-soft:color-mix(in srgb,var(--crm-accent-soft) 70%,var(--hub-skin-surface));
  --hub-skin-accent-ink:var(--crm-accent-ink);
  --hub-detail-wash:color-mix(in srgb,var(--crm-accent-soft) 65%,var(--crm-surface));
  --hub-section-icon:color-mix(in srgb,var(--hub-detail-ink) 60%,var(--hub-skin-ink-soft));
  --hub-note-surface:color-mix(in srgb,var(--crm-accent-soft) 26%,var(--crm-surface));
  --hub-context-surface:color-mix(in srgb,var(--crm-accent-soft) 10%,var(--crm-surface));
  background:var(--hub-skin-canvas);
}

/* Keep the visible hub canvas and full-width layout while its completed surface
 * is retained during navigation, even after its action context is invalidated. */
html[data-crm-ui]:has([data-view-id="company-hub"]:not([hidden])) body { background:var(--hub-skin-canvas); }

html[data-crm-skin="signal"] { --hub-detail-ink:#635600; }
html[data-crm-skin="cobalt"] { --hub-detail-ink:#1d4ed8; }
html[data-crm-skin="forest"] { --hub-detail-ink:#3f632c; }
html[data-crm-skin="petrol"] { --hub-detail-ink:#12665b; }
html[data-crm-skin="midnight"] { --hub-detail-ink:#284c82; }

html[data-crm-skin] .crm-hub-surface {
  --crm-canvas:var(--hub-skin-canvas);
  --crm-surface:var(--hub-skin-surface);
  --crm-surface-soft:var(--hub-skin-soft);
  --crm-ink:var(--hub-skin-ink);
  --crm-ink-soft:var(--hub-skin-ink-soft);
  --crm-line:color-mix(in srgb,var(--hub-skin-line) 62%,var(--hub-skin-surface));
  --crm-line-strong:var(--hub-skin-line-strong);
  --crm-accent:var(--hub-skin-accent);
  --crm-focus:var(--hub-detail-ink);
}

html[data-crm-skin] .crm-hub-surface[data-crm-shadcn],
html[data-crm-skin] .crm-hub-surface [data-crm-shadcn] { --primary-foreground:var(--hub-skin-accent-ink); }

html[data-crm-skin="signal"] {
  --hub-call:color-mix(in srgb,#166b66 95%,var(--hub-skin-ink-soft));
  --hub-mail:color-mix(in srgb,#365eaa 95%,var(--hub-skin-ink-soft));
  --hub-appointment:color-mix(in srgb,#74519a 95%,var(--hub-skin-ink-soft));
  --hub-note:color-mix(in srgb,#52677e 95%,var(--hub-skin-ink-soft));
  --hub-notification:color-mix(in srgb,#9d5146 95%,var(--hub-skin-ink-soft));
  --hub-support:var(--hub-detail-ink);
}
html[data-crm-skin="cobalt"] {
  --hub-call:color-mix(in srgb,#21685e 95%,var(--hub-skin-ink-soft));
  --hub-mail:color-mix(in srgb,#2857a4 95%,var(--hub-skin-ink-soft));
  --hub-appointment:color-mix(in srgb,#73518e 95%,var(--hub-skin-ink-soft));
  --hub-note:color-mix(in srgb,#52677e 95%,var(--hub-skin-ink-soft));
  --hub-notification:color-mix(in srgb,#9a4c45 95%,var(--hub-skin-ink-soft));
  --hub-support:var(--hub-detail-ink);
}
html[data-crm-skin="forest"] {
  --hub-call:color-mix(in srgb,#326747 95%,var(--hub-skin-ink-soft));
  --hub-mail:color-mix(in srgb,#3c608d 95%,var(--hub-skin-ink-soft));
  --hub-appointment:color-mix(in srgb,#795077 95%,var(--hub-skin-ink-soft));
  --hub-note:color-mix(in srgb,#52677e 95%,var(--hub-skin-ink-soft));
  --hub-notification:color-mix(in srgb,#974d4e 95%,var(--hub-skin-ink-soft));
  --hub-support:var(--hub-detail-ink);
}
html[data-crm-skin="petrol"] {
  --hub-call:color-mix(in srgb,#14675f 95%,var(--hub-skin-ink-soft));
  --hub-mail:color-mix(in srgb,#345f95 95%,var(--hub-skin-ink-soft));
  --hub-appointment:color-mix(in srgb,#71558d 95%,var(--hub-skin-ink-soft));
  --hub-note:color-mix(in srgb,#52677e 95%,var(--hub-skin-ink-soft));
  --hub-notification:color-mix(in srgb,#9b5140 95%,var(--hub-skin-ink-soft));
  --hub-support:var(--hub-detail-ink);
}
html[data-crm-skin="midnight"] {
  --hub-call:color-mix(in srgb,#236b67 95%,var(--hub-skin-ink-soft));
  --hub-mail:color-mix(in srgb,#345fa0 95%,var(--hub-skin-ink-soft));
  --hub-appointment:color-mix(in srgb,#70548f 95%,var(--hub-skin-ink-soft));
  --hub-note:color-mix(in srgb,#52677e 95%,var(--hub-skin-ink-soft));
  --hub-notification:color-mix(in srgb,#96504c 95%,var(--hub-skin-ink-soft));
  --hub-support:var(--hub-detail-ink);
}

html[data-crm-skin] {
  --hub-neutral-icon-wash:#eceef0;
  --hub-call-wash:color-mix(in srgb,var(--hub-call) 10%,var(--hub-skin-surface));
  --hub-mail-wash:color-mix(in srgb,var(--hub-mail) 10%,var(--hub-skin-surface));
  --hub-appointment-wash:color-mix(in srgb,var(--hub-appointment) 10%,var(--hub-skin-surface));
  --hub-note-wash:color-mix(in srgb,var(--hub-note) 10%,var(--hub-skin-surface));
  --hub-notification-wash:color-mix(in srgb,var(--hub-notification) 10%,var(--hub-skin-surface));
  --hub-support-wash:color-mix(in srgb,var(--hub-support) 4%,var(--hub-skin-surface));
  --hub-support-hover:color-mix(in srgb,var(--hub-support) 8%,var(--hub-skin-surface));
}


.crm-company-hub .company-work-header { align-items:center; margin:0; min-height:50px; }
.crm-company-hub .company-identity > svg { width:24px; height:24px; color:var(--hub-detail-ink); }
.crm-company-hub .company-identity h1 { font-size:30px; line-height:1.2; font-weight:650; }
.crm-company-hub .context-panel, .crm-company-hub .contacts-panel { padding:20px; background:var(--crm-surface); }
.crm-company-hub :is(.context-heading h2,.contacts-heading h2) { margin:0; font-size:16px; font-weight:650; line-height:24px; }
.crm-company-hub :is(#contact-list, .crm-dashboard-contact-list) .contact-name { font-size:13px; font-weight:600; line-height:19.5px; }
.crm-company-hub :is(#contact-list, .crm-dashboard-contact-list) .contact-role { font-size:12px; line-height:18px; }
.crm-company-hub :is(#contact-list, .crm-dashboard-contact-list) .contact-badge { box-sizing:border-box; max-width:100%; padding-block:2px; border-radius:8px; font-size:12px; font-weight:550; line-height:20px; }
.crm-company-hub .contact-badge { color:var(--hub-detail-ink); background:var(--hub-detail-wash); }
.crm-company-hub :is(.header-actions,.contacts-heading) [data-slot=button] { min-height:32px; font-size:13px; }
html[data-crm-ui]:has([data-view-id="company-hub"]:not([hidden])) body > .app-shell > main { padding:0; background:transparent; }
.crm-company-hub #crm-chronicle-root { container:chronicle-area / inline-size; min-width:0; }
@media(max-width:620px) { .crm-company-hub .company-identity h1 {font-size:24px} }
body[data-hub-variant="c"] .crm-hub-surface .timeline-row { --event-accent:var(--crm-ink-soft); --event-wash:var(--hub-neutral-icon-wash); --event-line:var(--crm-line); gap:8px; padding-top:16px; padding-bottom:14px; }
body[data-hub-variant="c"] .crm-hub-surface .timeline-row[data-source-type="call"] { --event-accent:var(--hub-call); --event-wash:var(--hub-call-wash); }
body[data-hub-variant="c"] .crm-hub-surface .timeline-row:is([data-source-type="email"],[data-source-type="inbound_reply"]) { --event-accent:var(--hub-mail); --event-wash:var(--hub-mail-wash); }
body[data-hub-variant="c"] .crm-hub-surface .timeline-row[data-source-type="appointment"] { --event-accent:var(--hub-appointment); --event-wash:var(--hub-appointment-wash); }
body[data-hub-variant="c"] .crm-hub-surface .timeline-row[data-source-type="note"] { --event-accent:var(--hub-note); --event-wash:var(--hub-note-wash); }
body[data-hub-variant="c"] .crm-hub-surface .timeline-row[data-source-type="notification"] { --event-accent:var(--hub-notification); --event-wash:var(--hub-notification-wash); }
body[data-hub-variant="c"] .crm-hub-surface .timeline-icon { width:32px; height:32px; margin-top:0; border-color:transparent; border-radius:8px; background:var(--event-wash); color:var(--event-accent); }
body[data-hub-variant="c"] .crm-hub-surface .event-row-header { grid-template-columns:32px minmax(0,1fr) auto; gap:12px; }
body[data-hub-variant="c"] .crm-hub-surface .event-row-content { margin-left:44px; }
body[data-hub-variant="c"] .crm-hub-surface .event-kind { color:var(--crm-ink); font-size:14px; font-weight:650; }
body[data-hub-variant="c"] .crm-hub-surface .timeline-excerpt { font-size:15px; line-height:1.6; }
body[data-hub-variant="c"] .crm-hub-surface .event-row-content h3 { margin-bottom:6px; font-size:15px; font-weight:600; line-height:1.5; }
body[data-hub-variant="c"] .crm-hub-surface .event-row-people dd { font-size:13px; font-weight:550; }
body[data-hub-variant="c"] .crm-hub-surface .event-row-people dt,
body[data-hub-variant="c"] .crm-hub-surface .event-connection,
body[data-hub-variant="c"] .crm-hub-surface .event-state-label { font-size:12px; }
body[data-hub-variant="c"] .crm-hub-surface .event-row-metadata { gap:6px 12px; }
body[data-hub-variant="c"] .crm-hub-surface .event-time { font-size:13px; }
body[data-hub-variant="c"] .crm-hub-surface .timeline-own-note { background:var(--hub-note-surface); }
body[data-hub-variant="c"] .crm-hub-surface .timeline-own-note :is(.event-time, dt) { color:var(--crm-ink-soft); }
body[data-hub-variant="c"] .crm-hub-surface .event-row-actions [data-slot="button"]:not(.event-time-pin):is(:hover,:focus-visible) { color:var(--event-accent); background:var(--event-wash); }
body[data-hub-variant="c"] .crm-hub-surface .context-notify,
body[data-hub-variant="c"] .crm-hub-surface .note-trigger { border-color:color-mix(in srgb,var(--hub-support) 14%,var(--hub-skin-surface)); background:var(--hub-support-wash); color:var(--hub-support); }
body[data-hub-variant="c"] .crm-hub-surface .context-notify:hover,
body[data-hub-variant="c"] .crm-hub-surface .note-trigger:hover { background:var(--hub-support-hover); }
body[data-hub-variant="c"] .crm-hub-surface :is(.context-notify, .note-trigger) svg { color:inherit; }
body[data-hub-variant="c"] .crm-hub-surface [data-slot="button"].bg-primary:hover { background:var(--hub-skin-accent-hover); color:var(--hub-skin-accent-ink); }
body[data-hub-variant="c"] .crm-hub-surface ::selection { color:var(--hub-skin-accent-ink); }

/* Overlay, notification, note, editor, calendar and confirmation spacing. */
body[data-hub-variant="c"] .issue46-channel-icon:has(.lucide-phone) { color:var(--hub-call); background:var(--hub-call-wash); }
body[data-hub-variant="c"] .issue46-channel-icon:has(.lucide-mail) { color:var(--hub-mail); background:var(--hub-mail-wash); }
body[data-hub-variant="c"] .recipient-preview { color:var(--hub-support); background:var(--hub-support-wash); }
body[data-hub-variant="c"] .recipient-preview svg { color:var(--hub-notification); }
body[data-hub-variant="c"] :is(.issue46-form textarea, .notify-overlay textarea, .note-card-popover textarea) { background:var(--muted); color:var(--hub-skin-ink); caret-color:var(--hub-support); }
body[data-hub-variant="c"] .channel-type-select-item > :last-child { grid-column:2; grid-row:1; white-space:nowrap; }
body[data-hub-variant="c"] .channel-type-select-item > .channel-type-select-check { grid-column:1; grid-row:1; }
body[data-hub-variant="c"] :is(.crm-chronicle-original-dialog, .notify-overlay.crm-chronicle-hint-dialog, .note-card-popover, .company-info-popover, .company-action-popover, .demo-overlay.company-overlay.action-dialog, .issue46-company-popover) { color:var(--hub-skin-ink); }
body[data-hub-variant="c"] :is(.crm-chronicle-original-dialog, .notify-overlay.crm-chronicle-hint-dialog, .demo-overlay.company-overlay.action-dialog) { gap:12px; padding:16px; }
body[data-hub-variant="c"] :is(.crm-chronicle-original-dialog, .notify-overlay.crm-chronicle-hint-dialog, .demo-overlay.company-overlay.action-dialog) .demo-overlay-heading { align-items:center; gap:8px; padding-bottom:12px; }
body[data-hub-variant="c"] :is(.crm-chronicle-original-dialog, .notify-overlay.crm-chronicle-hint-dialog, .demo-overlay.company-overlay.action-dialog) .demo-overlay-heading h2,
body[data-hub-variant="c"] .note-card-title { font-size:16px; font-weight:650; line-height:24px; }
body[data-hub-variant="c"] :is(.demo-overlay:not(.issue46-company-popover), .note-card-popover, .company-action-popover) :is([data-slot="label"], label, .address-fields legend) { font-size:12px; line-height:1.35; }
body[data-hub-variant="c"] :is(.demo-overlay:not(.issue46-company-popover), .note-card-popover, .company-action-popover) :is(input, select, textarea) { font-size:13px; }
body[data-hub-variant="c"] .company-info-popover { padding:12px; }
body[data-hub-variant="c"] .company-info-popover dl { gap:8px; }
body[data-hub-variant="c"] .company-info-popover dl > div { gap:8px; font-size:12px; line-height:1.4; }
body[data-hub-variant="c"] .company-info-popover dd { font-size:13px; font-weight:600; line-height:1.4; }
body[data-hub-variant="c"] .company-action-popover { gap:12px; padding:12px; }
body[data-hub-variant="c"] .company-action-popover > strong { font-size:16px; font-weight:650; line-height:24px; }
body[data-hub-variant="c"] .company-action-popover > p, body[data-hub-variant="c"] .company-action-popover > .crm-popup-scroll-body > p { font-size:13px; font-weight:400; line-height:19.5px; }
body[data-hub-variant="c"] .company-action-popover [data-slot=button] { font-size:13px; font-weight:500; line-height:19.5px; }
body[data-hub-variant="c"] .company-action-buttons { gap:8px; }
body[data-hub-variant="c"] .notify-overlay .recipient-preview { gap:8px; }
body[data-hub-variant="c"] .notify-overlay .recipient-preview strong { font-size:14px; line-height:1.4; }
body[data-hub-variant="c"] .notify-overlay .recipient-preview small { font-size:12px; line-height:1.4; }
body[data-hub-variant="c"] .note-card-popover { max-height:min(var(--available-height),calc(100dvh - 24px)); overflow:auto; padding:16px; }
body[data-hub-variant="c"] .note-card-title { margin-bottom:12px; }
body[data-hub-variant="c"] .note-card-form { gap:12px; }
body[data-hub-variant="c"] .note-card-form textarea { font-size:14px; line-height:1.5; }
body[data-hub-variant="c"] .note-card-actions { gap:8px; }
body[data-hub-variant="c"] .demo-overlay.company-overlay.action-dialog { gap:12px; }






body[data-hub-variant="c"] .crm-hub-surface .crm-chronicle-original-dialog .event-detail-header-time { font-size:13px; line-height:1.5; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 20px; padding-bottom:12px; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-facts > div { gap:4px; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog :is(.event-detail-facts, .event-detail-schedule) dt { color:var(--crm-ink-soft); font-size:12px; line-height:1.5; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog :is(.event-detail-facts, .event-detail-schedule) dd { font-size:14px; font-weight:600; line-height:1.5; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-schedule { gap:8px; padding:12px; border:0; border-radius:8px; background:var(--hub-support-wash); }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-schedule dd { color:var(--hub-detail-ink); }
body[data-hub-variant="c"] .crm-hub-surface .crm-chronicle-original-dialog :is(.event-detail-copy, .event-detail-copy p, .message-reader) { font-size:15px; line-height:1.6; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .mail-envelope { padding-bottom:12px; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog :is(.mail-envelope p, .mail-sender, .mail-sender strong) { font-size:14px; font-weight:600; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog :is(.mail-envelope p > span, .mail-sender > span, .mail-sender > div > span) { font-size:12px; line-height:1.5; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-previous { gap:4px; padding-bottom:12px; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-previous h3 { font-size:12px; line-height:1.5; }
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-previous p { font-size:14px; line-height:1.6; }
body[data-hub-variant="c"] .issue46-number-confirm { gap:12px; padding:16px; }
body[data-hub-variant="c"] .issue46-number-confirm [data-slot="dialog-title"] { font-size:16px; font-weight:650; line-height:24px; }
body[data-hub-variant="c"] .issue46-confirm-phone { font-size:13px; line-height:1.5; }
body[data-hub-variant="c"] .issue46-time-picker-control .issue46-time-input:focus,
body[data-hub-variant="c"] .issue46-time-picker-control:has([aria-expanded="true"]) .issue46-time-input { border-color:var(--hub-detail-ink); background:var(--muted); color:var(--hub-skin-ink); }
body[data-hub-variant="c"] .issue46-form .issue46-time-input:hover,
body[data-hub-variant="c"] .issue46-form button[data-empty]:is(:hover,:focus-visible,[aria-expanded="true"]),
body[data-hub-variant="c"] .issue46-form .channel-type-select-trigger:not(:disabled):not([data-disabled]):not([aria-disabled="true"]):is(:hover,:focus-visible,[data-popup-open]) { background:var(--muted); }

@media (max-width:420px) {
  body[data-hub-variant="c"] :is(.crm-chronicle-original-dialog, .notify-overlay.crm-chronicle-hint-dialog, .note-card-popover, .demo-overlay.company-overlay.action-dialog, .issue46-number-confirm) { padding:14px; }
  body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}

/* Intrinsic address measurements use the same typography without inline styles. */
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-facts > .event-detail-fact-measure {
  position:fixed; visibility:hidden; pointer-events:none;
  width:max-content; min-width:0; max-width:none;
}
body[data-hub-variant="c"] .crm-chronicle-original-dialog .event-detail-facts > div[data-fact-row-wide="true"] { grid-column:1 / -1; }