/* Kform current digital system: https://www.kformsystems.com/brand */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=IBM+Plex+Mono:wght@500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  --bg-color: #101416;
  --card-bg: #242e33;
  --surface-2: #192024;
  --text-color: #edf0ee;
  --muted-color: #b8c2c5;
  --border-color: #586a72;
  --table-header: #192024;
  --table-row: #242e33;
  --accent-color: #c9ad73;
  --accent-soft: #b8c2c5;
  --accent-contrast: #101416;
  --link-color: var(--accent-color);
  --status-success: #99c5ad;
  --status-danger: #f1a6a6;
  --status-warning: #c9ad73;
  --title-font: 'IBM Plex Sans Condensed', Arial, sans-serif;
  --body-font: 'IBM Plex Sans', Arial, sans-serif;
  --display-font: 'Bebas Neue', Arial, sans-serif;
  --mono-font: 'IBM Plex Mono', monospace;
  --modal-backdrop: rgba(16, 20, 22, .85);
  --accent-hover: color-mix(in srgb, var(--accent-color) 85%, #000000);
  --focus-ring: color-mix(in srgb, var(--accent-color) 25%, transparent);
  --control-border: #829297;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
}
body[data-theme="light"] {
  color-scheme: light;
  --bg-color: #edf0ee;
  --card-bg: #ffffff;
  --surface-2: #e3e8e6;
  --text-color: #101416;
  --muted-color: #3d4a51;
  --border-color: #586a72;
  --table-header: #e3e8e6;
  --table-row: #ffffff;
  --link-color: #655127;
  --status-success: #285c42;
  --status-danger: #9c3030;
  --status-warning: #655127;
  --control-border: #586a72;
}
body { background: var(--bg-color); color: var(--text-color); font-family: var(--body-font); line-height: 1.6; }
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--title-font); letter-spacing: .01em; }
.brand-display { font-family: var(--display-font); font-weight: 400; text-transform: uppercase; letter-spacing: .025em; }
.mono, .item-id-chip, .brand-tagline { font-family: var(--mono-font); }
.card, .modal-content, .login-card, .share-card, .admin-section, .carbon-metric-card, #adminDependencies { border-radius: 0; box-shadow: none; background: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); }
.navbar { border-top: 3px solid var(--accent-color); }
.brand-logo { width: 110px; height: auto; margin: 14px 0; display: block; }
.brand-logo-light { display: none; }
body[data-theme="light"] .brand-logo-light { display: block; }
body[data-theme="light"] .brand-logo-dark { display: none; }
.brand-stack { padding: 0 8px; }
.navbar .brand-stack { display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; min-width: 0; }
.navbar .brand-logo { grid-column: 1; grid-row: 1 / span 2; }
.navbar .navbar-brand { grid-column: 2; grid-row: 1; align-self: end; margin: 0; padding: 0; line-height: 1.1; white-space: normal; }
.navbar .brand-tagline { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; }
.navbar .topbar { gap: .25rem; }
.brand-tagline { color: var(--link-color); opacity: 1; }
.text-muted, [data-theme="dark"] .text-muted, .small-help { color: var(--muted-color) !important; }
a, .text-primary, .btn-link, .btn-outline-primary { color: var(--link-color) !important; }
.btn-primary, .btn-outline-primary:hover, .btn-outline-primary:focus, .list-group-item.active { color: var(--accent-contrast) !important; }
.btn { border-radius: 0; min-height: 44px; font-weight: 500; }
.btn-secondary, .btn-outline-secondary { background: var(--surface-2); color: var(--text-color); border-color: var(--border-color); }
.btn-success { background: var(--accent-color); border-color: var(--link-color); color: var(--accent-contrast); }
.btn-success:hover, .btn-success:focus { background: var(--accent-hover); border-color: var(--link-color); color: var(--accent-contrast); }
.btn-outline-warning { color: var(--link-color); border-color: var(--link-color); }
.btn-outline-warning:hover, .btn-outline-warning:focus { background: var(--accent-color); color: var(--accent-contrast); }
.text-success { color: var(--status-success) !important; }
.text-danger { color: var(--status-danger) !important; }
.text-warning { color: var(--status-warning) !important; }
.text-info { color: var(--link-color) !important; }
.text-secondary { color: var(--muted-color) !important; }
.btn-outline-danger { color: var(--status-danger); border-color: var(--status-danger); }
.btn-outline-danger:hover, .btn-outline-danger:focus { background: var(--status-danger); color: var(--bg-color); }
.btn-danger, .bg-danger, .text-bg-danger { background: var(--status-danger) !important; border-color: var(--status-danger); color: var(--bg-color) !important; }
.bg-success, .text-bg-success { background: var(--status-success) !important; color: var(--bg-color) !important; }
.bg-warning, .text-bg-warning { background: var(--accent-color) !important; color: var(--accent-contrast) !important; }
.bg-primary, .text-bg-primary { background: var(--accent-color) !important; color: var(--accent-contrast) !important; }
.bg-secondary, .text-bg-secondary { background: var(--surface-2) !important; color: var(--text-color) !important; }
.alert, [data-theme="dark"] .alert-info, [data-theme="dark"] #quoteNotification, [data-theme="dark"] #depNotification { background: var(--surface-2); color: var(--text-color); border-color: var(--border-color); box-shadow: none; }
.alert-danger, #quoteNotification.alert-danger, #depNotification.alert-danger { border-color: var(--status-danger); }
.alert-warning, #quoteNotification.alert-warning, #depNotification.alert-warning { border-color: var(--status-warning); }
.alert-success, #quoteNotification.alert-success, #depNotification.alert-success { border-color: var(--status-success); }
.form-control, .form-select, .input-group-text, [data-theme="dark"] .form-control.qty { background-color: var(--surface-2); border-color: var(--border-color); color: var(--text-color); border-radius: 0; min-height: 44px; }
.form-control, .form-select, .form-check-input, .btn-outline-secondary, .theme-toggle { border-color: var(--control-border); }
.form-control:focus, .form-select:focus { background: var(--surface-2); color: var(--text-color); border-color: var(--link-color); box-shadow: 0 0 0 2px var(--focus-ring); }
.btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: var(--accent-contrast); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--link-color); outline-offset: 3px; }
.accordion-button::after { filter: grayscale(1) brightness(3); }
body[data-theme="light"] .accordion-button::after { filter: grayscale(1); }
.form-control::placeholder { color: var(--muted-color); opacity: 1; }
.form-control:disabled, .form-select:disabled, [data-theme="dark"] .form-select:disabled, [data-theme="dark"] #productSelect:disabled { color: var(--muted-color); background: var(--surface-2); }
.form-check-input { background-color: var(--surface-2); border-color: var(--muted-color); }
.form-check-input:checked { background-color: var(--accent-color); border-color: var(--link-color); }
.form-check-input:checked[type="radio"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23101416'/%3e%3c/svg%3e"); }
.form-check-input:checked[type="checkbox"] { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23101416' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e"); }
body[data-theme="light"] .btn-primary { border-color: var(--link-color); }
.nav-tabs .nav-link.active { border-top: 3px solid var(--accent-color); }
.accordion { --bs-accordion-bg: var(--card-bg); --bs-accordion-color: var(--text-color); --bs-accordion-border-color: var(--border-color); --bs-accordion-btn-color: var(--text-color); --bs-accordion-btn-bg: var(--surface-2); --bs-accordion-active-color: var(--text-color); --bs-accordion-active-bg: var(--surface-2); }
.table { --bs-table-color: var(--text-color); --bs-table-bg: var(--table-row); --bs-table-border-color: var(--border-color); --bs-table-striped-color: var(--text-color); --bs-table-striped-bg: var(--surface-2); --bs-table-hover-color: var(--text-color); --bs-table-hover-bg: var(--surface-2); }
.dropdown-menu { background: var(--card-bg); border-color: var(--border-color); }
.dropdown-item { color: var(--text-color); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text-color); }
.carbon-status-pill.is-success { color: var(--status-success); }
.carbon-status-pill.is-warning { color: var(--status-warning); }
.carbon-status-pill.is-local { color: var(--muted-color); }
.chart-legend .legend-line { background: var(--accent-color); }
:focus-visible { outline: 2px solid var(--link-color); outline-offset: 3px; }
:is(.btn, .form-control, .form-select, .form-check-input, .dropdown-item, .nav-link, .accordion-button):focus-visible { outline: 2px solid var(--link-color); outline-offset: 3px; box-shadow: none; }
[data-theme="dark"] .btn-close { filter: invert(1); }
@media (max-width: 767.98px) {
  .navbar-search { flex: 1 1 100%; width: 100%; min-width: 0; max-width: none; }
  .brand-stack { min-width: 0; }
  .header-actions { flex: 1 1 100%; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .user-actions { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start; }
  .login-card, .share-card { margin: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print {
  body {
    --bg-color: #fff; --card-bg: #fff; --surface-2: #edf0ee;
    --text-color: #101416; --muted-color: #3d4a51; --link-color: #655127;
    --table-row: #fff; --table-header: #edf0ee; --border-color: #586a72;
    --status-success: #285c42; --status-danger: #9c3030; --status-warning: #655127;
    --control-border: #586a72; color-scheme: light;
  }
  .brand-logo-light { display: block !important; }
  .brand-logo-dark { display: none !important; }
  .card { box-shadow: none; }
}
#configurationNumber { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; line-height: 1.4; }

/* Layout polish: header, section toolbar, summary actions, sales and customer views */
.navbar .title-row { justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.navbar .user-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; flex-wrap: nowrap; }
.user-badge { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; margin-right: .5rem; min-width: 0; }
.user-badge:empty { display: none; }
.user-badge-name { color: var(--text-color); font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.user-badge-role { font-family: var(--mono-font); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--link-color); }
.navbar .control-row { justify-content: space-between; }
.navbar .navbar-search { flex: 1 1 auto; width: auto; max-width: 560px; min-width: 0; }
.navbar .header-actions { margin-left: auto; }
.section-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding-bottom: .75rem; border-bottom: 1px solid var(--border-color); }
.section-toolbar-title, .customer-intro-title { font-family: var(--display-font); font-weight: 400; text-transform: uppercase; letter-spacing: .025em; margin: 0; }
.section-toolbar-title { font-size: 1.75rem; line-height: 1; }
.action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.action-grid #import { grid-column: 1 / -1; }
#reset { color: var(--muted-color) !important; border-color: transparent; min-height: 0; }
#reset:hover, #reset:focus { color: var(--status-danger) !important; }
.sales-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sales-panel-title, .customer-submit-title { font-size: 1.25rem; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
.sales-panel .input-group .form-control { min-width: 0; }
.submission-list { display: grid; gap: .5rem; }
.submission-item { border: 1px solid var(--border-color); background: var(--surface-2); }
.submission-item[open] { border-color: var(--accent-color); }
.submission-item > summary { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .625rem .875rem; cursor: pointer; list-style: none; }
.submission-item > summary::-webkit-details-marker { display: none; }
.submission-company { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission-customer { color: var(--muted-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.submission-date { font-family: var(--mono-font); font-size: .8rem; color: var(--muted-color); white-space: nowrap; }
.submission-status { font-family: var(--mono-font); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border: 1px solid currentColor; white-space: nowrap; }
.submission-status.is-sent { color: var(--status-success); }
.submission-status.is-pending { color: var(--status-warning); }
.submission-body { padding: 0 .875rem .875rem; }
.summary-list { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: .375rem 1.25rem; margin: 0; padding-top: .75rem; border-top: 1px solid var(--border-color); font-size: .9rem; }
.summary-list dt { font-weight: 600; color: var(--muted-color); }
.summary-list dd { margin: 0; overflow-wrap: anywhere; }
.sales-settings .h6 { font-family: var(--title-font); font-size: 1.05rem; }
.customer-configurator .sticky-summary, .customer-configurator main .col-lg-4, .customer-configurator #shareBanner,
.customer-configurator .user-badge, .customer-configurator #openAdmin, .customer-configurator #logoutBtn,
.customer-configurator .navbar-search, .customer-configurator .header-actions { display: none !important; }
.customer-configurator .navbar .control-row, .customer-configurator #sectionControls { display: none; }
.customer-configurator .navbar .user-actions { flex: 0 0 auto; margin-left: auto; }
#configurationNumber.text-bg-light { background: var(--surface-2) !important; color: var(--muted-color) !important; border-color: var(--border-color) !important; font-family: var(--mono-font); font-weight: 500; }
.customer-configurator main .col-lg-8 { width: 100%; }
.customer-configurator main.container { max-width: 1040px; }
.customer-intro { padding: 2rem 0 1.5rem; }
.customer-intro-eyebrow { font-family: var(--mono-font); font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--link-color); margin-bottom: .5rem; }
.customer-intro-title { font-size: clamp(2rem, 5vw, 3rem); line-height: 1; }
.customer-intro-lead { color: var(--muted-color); max-width: 62ch; margin: .75rem 0 0; font-size: 1.05rem; }
.customer-submit { border-top: 3px solid var(--accent-color); }
.customer-submit-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .75rem; }
.review-panel-title { font-size: 1rem; margin-bottom: 0; }
@media (max-width: 767.98px) {
  .navbar .user-actions { flex: 1 1 100%; margin-left: 0; }
  .navbar .user-actions .btn { flex: 1 1 0; }
  .user-badge { display: none; }
  .navbar .navbar-search { max-width: none; }
  .navbar .header-actions { margin-left: 0; }
  .section-toolbar-title { font-size: 1.5rem; }
  .sales-panel .input-group { flex-wrap: wrap; }
  .sales-panel .input-group .form-control { flex: 1 1 100%; width: 100%; }
  .sales-panel .input-group .btn { flex: 1 1 0; }
  .submission-item > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .submission-customer, .submission-date { grid-column: 1; }
  .summary-list { grid-template-columns: minmax(0, 1fr); gap: .125rem; }
  .summary-list dd { margin-bottom: .5rem; }
  .customer-submit-actions .btn { flex: 1 1 100%; }
  .customer-submit-actions [role="status"] { flex: 1 1 100%; }
}