/* DigiUI alignment — digiHORECA/djhoreca-fe, dev-deso-start-ottobre.
 * Verified reference: 80a9e276989131cefdfe683f70b4aceadee2302d (2026-10-28).
 * DESIGN.md; docs/digiui/token-contract.md; src/styles/_variables.scss;
 * sidebar/sidebar.component.scss; ui/data-display/summary-card component.
 * Loaded after the demo styles; presentation only, no edition/feature gating.
 */
:root {
  --brand: #1e27a0;
  --brand-dark: #0d0d56;
  --brand-soft: #eeeffa;
  --orange: #e87b35;
  --orange-soft: #fdf0e7;
  --acquisition: #a94712;
  --green: #2e7d32;
  --green-soft: #edf7ed;
  --red: #c62828;
  --red-soft: #fdecec;
  --purple: #684a9a;
  --purple-soft: #f1eaff;
  --ink: #1a1d27;
  --ink-2: #545a68;
  --muted: #545a68;
  --muted-2: #697181;
  --line: #d3d7df;
  --surface: #fff;
  --canvas: #f4f6f8;
  --shadow: none;
  --radius: 16px;
  --fe-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body, button, input, select, textarea, table, .dh-paper, .info-dot, .product-info-icon,
.compare-table th, .taxonomy-table th, .chart-host svg text {
  font-family: var(--fe-font);
}
body { font-size: 16px; line-height: 1.5; }
button, input, select, textarea { font-size: 14px; }
button { font-weight: 600; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { accent-color: var(--brand); }
strong, b { font-weight: 700; }

/* The solid indigo sidebar and Material navigation match the FE buyer shell. */
.sidebar { background: var(--brand); box-shadow: none; padding: 16px; }
.sidebar .brand { margin-bottom: 24px; padding-inline: 8px; }
.sidebar .nav { gap: 8px; }
.sidebar .nav-link, .sidebar .profile-button {
  min-height: 48px; height: auto; padding: 8px;
  gap: 12px; border-radius: 8px; font-size: 16px; font-weight: 400;
  line-height: 24px; color: #fff;
}
.sidebar .nav-label { font-size: 16px; white-space: normal; }
.sidebar .nav-link.active, .sidebar .profile-button.active {
  background: rgba(255,255,255,.14); font-weight: 600;
}
.sidebar .nav-link.active::before, .sidebar .profile-button.active::before { display: none; }
.sidebar .nav-link svg, .sidebar .profile-button svg { width: 24px; height: 24px; }
.sidebar-divider { background: rgba(255,255,255,.24); margin: 24px 0 16px; }
.sidebar .du-nav-new { font-size: 12px; color: #fff; padding: 0 4px; }
.sidebar .nav-count { font-size: 12px; min-width: 22px; }
.sidebar button:focus-visible { outline-color: #fff; }
.dh-version-control { border-radius: 8px; padding: 12px 8px; }
.dh-version-control label, .dh-version-control small { font-size: 12px; line-height: 1.5; }
.dh-version-control select { min-height: 44px; border-radius: 8px; font-size: 12px; }
.dh-mobile-nav-button { font-family: var(--fe-font); }
.dh-mobile-nav-button span:not(.dh-mobile-nav-badge) { font-size: 12px; line-height: 1.2; }
.dh-mobile-nav-button.active { color: var(--brand); }
.dh-mobile-nav-button .fe-symbol { width: 24px; height: 24px; }
.fe-symbol { display: inline-block; flex-shrink: 0; width: 24px; height: 24px; fill: currentColor; stroke: none; vertical-align: middle; }

/* Page hierarchy: 24 / 20 / 18 / 16 / 14 / 12, following DigiUI tokens. */
.du-heading h1, .page-title { font-size: 24px; line-height: 1.25; letter-spacing: 0; font-weight: 700; }
.du-heading p { font-size: 14px; line-height: 1.5; margin-top: 8px; }
.du-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.du-heading > .du-chips { margin-top: 12px !important; }
.app-page > .page-topbar, #page-statistics > .page-controls-actions { margin-bottom: 24px !important; }
.section-title, .card-title { font-size: 20px; line-height: 1.3; letter-spacing: 0; font-weight: 700; }
.du-panel h2, .dh-table-card-head h2, .du-dialog-head h2,
.dh-dialog-header h2 { font-size: 18px; line-height: 1.35; letter-spacing: 0; font-weight: 700; }
.du-panel h3 { font-size: 16px; line-height: 1.5; }
.du-panel p, .du-panel-head p, .dh-table-card-head p,
.dh-dialog-header p, .card-subtitle, .section-description { font-size: 14px; line-height: 1.5; }
.card-kicker, .section-meta, .legend-chip, .utilities-consumption-grid .legend-chip,
.insight-copy span, .insight-tag, .click-hint, .product-price-source-label,
.product-document-link-copy small, .taxonomy-group-head span:last-child,
.du-list-row small, .du-note, .du-bubble, .dh-muted { font-size: 12px; line-height: 1.5; }
.du-panel p, .du-panel-head p { color: var(--muted); }
.du-note, .du-bubble { font-size: 14px; }
.du-panel, .card, .filter-panel, .dh-filter-panel, .dh-table-card,
.kpi-card, .dh-kpi, .du-metric { box-shadow: none; border-color: var(--line); }
.du-panel, .card, .dh-table-card { border-radius: 16px; }
.du-panel { padding: 24px; margin-bottom: 24px; }
.du-grid { gap: 24px; }
.du-panel-head { margin-bottom: 24px; }
.du-toolbar { gap: 8px; margin-bottom: 24px; }

/* FE profile control: one email line + manage_accounts, without a subtitle. */
.dh-page-actions-organized .dh-account-pill, .dh-page-utility-row .dh-account-pill {
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; min-height: 44px; gap: 12px;
}
.dh-page-actions-organized .dh-account-copy strong,
.dh-account-copy strong { font-size: 14px; font-weight: 600; line-height: 24px; }
.dh-account-copy span { display: none; }
.dh-account-pill .avatar {
  width: 40px; height: 40px; border-radius: 8px; box-shadow: none;
  background: #e9ebef; color: var(--ink-2);
}
.dh-account-pill .avatar .fe-symbol { width: 24px; height: 24px; }

/* Primary actions use indigo. Orange is the single document acquisition CTA. */
.dh-btn, .du-toolbar .dh-btn {
  min-height: 44px; padding: 0 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600; box-shadow: none; line-height: 1.4;
}
.dh-btn:hover { transform: none; box-shadow: none; border-color: var(--brand); background: #f4f5fc; }
.dh-btn-primary, .dh-btn-brand { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: none; }
.dh-btn-primary:hover, .dh-btn-brand:hover { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
#openDocumentUpload, #openInvoiceUpload { background: var(--acquisition); color: #fff; border-color: var(--acquisition); }
#openDocumentUpload:hover, #openInvoiceUpload:hover { background: #87380e; border-color: #87380e; }
.dh-btn-danger, .dh-btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }
.dh-btn-link { font-size: 14px; min-height: 32px; padding: 0; border-radius: 4px; }
.dh-btn-sm { min-height: 36px; padding-inline: 12px; font-size: 12px; }
.du-close { width: 40px; height: 40px; border-radius: 8px; font-size: 24px; }

/* Search/filter fields and form fields share one geometry. */
.app-page > .filter-panel, .app-page > .dh-filter-panel { padding: 24px; margin-bottom: 24px !important; box-shadow: none; }
.filter-panel-header.compact-filter-actions, .dh-filter-head.compact-filter-actions {
  border-bottom-color: var(--line) !important; padding-bottom: 16px !important;
  margin-bottom: 16px !important;
}
.du-filter-title, .dh-filter-title, .filter-panel-title { color: var(--ink); font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.field label, .dh-field label, .du-form label { font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--ink-2); letter-spacing: 0; text-transform: none; }
.dh-document-type-label { font-size: 12px; font-weight: 600; }
.filter-panel select, .filter-panel input, .dh-select, .dh-input,
.du-form input:not([type="checkbox"]), .du-form select, .du-form textarea,
.du-table input, .du-table select {
  min-height: 44px; height: auto; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 8px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 400;
  font-family: var(--fe-font); line-height: 1.4; box-shadow: none;
}
.dh-search-wrap .dh-input { padding-left: 38px; }
.filter-panel select:focus, .filter-panel input:focus, .dh-select:focus, .dh-input:focus,
.du-form input:focus, .du-form select:focus, .du-form textarea:focus,
.du-table input:focus, .du-table select:focus { outline: 2px solid var(--brand); outline-offset: 2px; border-color: var(--brand); box-shadow: none; }
.inline-filter-reset, .dh-reset { font-size: 12px; min-height: 40px; font-weight: 600; }
.statistics-view-filter, .dh-document-type-filter { border-bottom-color: var(--line); padding-bottom: 16px; }
.dh-tabs { gap: 4px; padding: 4px; border-radius: 8px; background: var(--canvas); }
.dh-tab { min-height: 40px; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 4px; line-height: 1.4; }
.dh-tab.active { color: var(--brand); background: #fff; box-shadow: none; }

/* Text and color both carry chip meaning. Category shades follow token-contract. */
.du-chip, .dh-badge, .price-chip, .delta { font-size: 12px; line-height: 1.4; font-weight: 600; min-height: 24px; padding: 4px 8px; }
.du-chip.green, .dh-badge.success { background: var(--green-soft); color: var(--green); }
.du-chip.red, .dh-badge.danger, .price-chip.up { background: var(--red-soft); color: var(--red); }
.du-chip.amber, .dh-badge.warning { background: #fff8e1; color: #a16207; }
.du-chip.gray, .dh-badge.neutral { background: #f0f2f5; color: #4a5666; }
.du-chip.purple, .dh-badge.purple { background: #f1eaff; color: #684a9a; }
.dh-category, .dh-responsive-card-table .dh-category { font-size: 12px; font-weight: 600; border-radius: 999px; min-height: 24px; padding: 4px 8px; }
.dh-category.food { background: #fff3db; color: #875712; }
.dh-category.beverage { background: #e9f4ff; color: #245c8b; }
.dh-category.no-food { background: #eaeffd; color: #4053a0; }
.dh-category.utilities { background: #f1eaff; color: #684a9a; }
.dh-category.services { background: #f5eaf8; color: #7b4b8a; }
.price-chip.down { background: var(--green-soft); color: var(--green); }

/* All summary cards share the FE orange edge; values keep a neutral ink color. */
.kpi-card, .dh-kpi, .du-metric { position: relative; overflow: hidden; min-height: 82px; padding: 16px; border-radius: 12px; background: #fff; }
.kpi-card::before, .dh-kpi::before, .du-metric::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 0; background: var(--orange);
}
.kpi-label, .dh-kpi-label, .du-metric > span { font-size: 14px; line-height: 24px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.kpi-value, .dh-kpi-value, .du-metric strong {
  font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: 0;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.kpi-foot, .dh-kpi-foot, .du-metric small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.kpi-icon { background: var(--orange-soft); color: var(--acquisition); border-radius: 12px; width: 40px; height: 40px; }
.kpi-icon svg { width: 24px; height: 24px; }
.dh-kpi-icon { width: 40px; height: 40px; background: var(--orange-soft); color: var(--acquisition); border-radius: 12px; }
.dh-kpi-icon svg { width: 24px; height: 24px; }

/* Tables use the same sans-serif family and readable left-aligned headings. */
table, .du-table, .dh-table { font-size: 14px; font-variant-numeric: tabular-nums; }
th, .dh-table th, .du-table th, .dh-mini-table th {
  font-family: var(--fe-font); font-size: 12px; font-weight: 600;
  line-height: 1.4; letter-spacing: 0; text-align: left; color: var(--muted);
  background: var(--canvas); padding: 12px; border-bottom-color: var(--line);
}
td, .dh-table td, .du-table td { font-size: 14px; line-height: 1.4; padding: 16px 12px; }
.dh-catalog-table .dh-product-copy strong, .product-cell strong { font-size: 14px; font-weight: 600; }
.dh-catalog-table .dh-product-copy > span, .product-cell span,
.du-table small, .dh-table small, .dh-mini-table td { font-size: 12px; line-height: 1.5; }
.dh-catalog-updated, .dh-catalog-normalized { font-size: 12px !important; }
.dh-catalog-current { font-size: 14px !important; }
.dh-catalog-table .dh-open-product { font-size: 12px; }
.dh-name-cell span, .dh-pagination, .dh-selection-bar,
.dh-notification-summary, .dh-notification-meta, .dh-notification-product small,
.dh-price-shift span, .dh-profile-company, .dh-profile-card-head p,
.dh-dialog-eyebrow, .dh-dropzone small, .dh-file-row span, .dh-file-status,
.dh-detail-stat span, .dh-acquisition { font-size: 12px; line-height: 1.5; }
.dh-notification-title-row h3, .dh-notification-product strong, .dh-price-shift strong,
.dh-profile-hero p, .dh-dropzone p, .dh-file-row strong, .dh-detail-stat strong,
.dh-empty p, .dh-alert { font-size: 14px; line-height: 1.5; }
.dh-profile-card-head h3, .dh-dropzone strong { font-size: 16px; }
.dh-profile-hero h2 { font-size: 20px; letter-spacing: 0; }
.dh-profile-logo { background: var(--brand); }
.dh-profile-hero, .dh-profile-card, .dh-notification { box-shadow: none; }
.dh-row-action { width: 40px; height: 40px; border-radius: 8px; }
.du-table input, .du-table select { font-variant-numeric: tabular-nums; }
.dh-table-card-head { padding: 20px 24px; }
.dh-paper, .dh-paper table, .dh-paper th, .dh-paper td { font-family: var(--fe-font); }
.du-dialog { border-radius: 16px; }
.du-dialog-head, .du-dialog-body { padding: 24px; }
.du-note { border-radius: 8px; }

@media (min-width: 901px) {
  :root { --sidebar: 240px; }
  .sidebar .nav-label, .sidebar .profile-button span { display: inline !important; }
  .sidebar .nav-link, .sidebar .profile-button { justify-content: flex-start; }
  .sidebar .brand img { width: 192px; }
  .sidebar .brand { height: 54px; justify-content: flex-start; }
  .dh-version-control label, .dh-version-control small { display: block; }
  .dh-account-copy { display: block; }
  .dh-account-pill { width: auto; }
}
@media (max-width: 1100px) and (min-width: 901px) {
  .app { padding-inline: 24px; }
  .sidebar .du-nav-new { display: none; }
  .du-heading p { max-width: 480px; }
  .dh-page-actions-organized { max-width: 220px !important; }
}
@media (max-width: 900px) {
  .du-heading h1 { font-size: 24px; }
  .du-heading p, .du-panel p { font-size: 14px; }
  .du-panel, .app-page > .filter-panel, .app-page > .dh-filter-panel { padding: 16px !important; }
  .du-panel-head, .du-toolbar { margin-bottom: 16px; }
  .du-grid { gap: 16px; }
  .du-filter-title { font-size: 14px; }
  .field label, .dh-field label, .du-form label { font-size: 12px; }
  .filter-panel select, .filter-panel input, .dh-input, .dh-select,
  .du-form input:not([type="checkbox"]), .du-form select, .du-form textarea,
  .du-table input, .du-table select { font-size: 16px; }
  .dh-tab { font-size: 12px; }
  .dh-table-card-head, .du-dialog-head, .du-dialog-body { padding: 16px; }
  .du-metric { padding: 12px 16px; }
  .sidebar .nav-link, .sidebar .profile-button { padding: 8px; }
  .dh-mobile-nav-button span:not(.dh-mobile-nav-badge) { white-space: normal; }
  .section-title, .card-title { font-size: 18px; }
  .du-panel h2 { font-size: 18px; }
}

/* Keep the longest navigation label stable in both active states. */
.sidebar [data-page-target="notifications"] { gap:8px; }
.sidebar [data-page-target="notifications"] .nav-label { white-space:nowrap; }