:root{font-family:Arial,Helvetica,sans-serif;color:#253448;background:var(--surface-2);font-size:16px;line-height:1.5}*{box-sizing:border-box}body{margin:0}.topbar{background:var(--surface);border-bottom:1px solid #dae2ed}.topbar-inner{max-width:1280px;margin:auto;padding:12px 22px;display:flex;align-items:center;gap:18px}.home-link{font-weight:700;color:var(--accent-strong);text-decoration:none}.home-link:hover{text-decoration:underline}.topbar-label{color:var(--muted);font-size:14px}.page{max-width:1280px;margin:auto;padding:22px 22px 48px}.hero{background:linear-gradient(115deg,var(--accent-strong),#5576a7);color:var(--surface);border-radius:14px;padding:30px 34px;border-top:4px solid #77b84b}.eyebrow{text-transform:uppercase;letter-spacing:.1em;font-size:12px;font-weight:700;margin:0 0 8px;color:#b9d59f}.hero h1{font-size:30px;line-height:1.2;margin:0 0 9px}.hero p{margin:0;max-width:760px;color:#eef4ff}.hero-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:18px;font-size:13px;color:#dce8f8}.notice{margin:18px 0;padding:14px 16px;border-radius:8px}.error{background:#fff0f0;color:#8c2424;border:1px solid #e8b2b2}.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:20px 0}.kpi{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;box-shadow:0 2px 10px #2440610a}.kpi span{display:block;color:var(--muted);font-size:13px}.kpi strong{font-size:27px;color:var(--accent-strong)}.tabs{display:flex;gap:8px;border-bottom:1px solid #d4deea;margin-top:20px}.tab{border:0;background:transparent;color:#58708d;padding:11px 16px;font:700 15px Arial;cursor:pointer;border-bottom:3px solid transparent}.tab.active{color:#274e7e;border-bottom-color:#77b84b}.tab:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #e5a535;outline-offset:2px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:0 0 12px 12px;padding:22px;box-shadow:0 3px 14px #2440610a}.section-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.section-heading h2{font-size:22px;color:var(--accent-strong);margin:0}.section-heading p{color:var(--muted);margin:4px 0 0}.source-chip{display:inline-block;border-radius:999px;background:#f0f5e9;color:#436d2d;padding:5px 10px;font-size:12px;font-weight:700;white-space:nowrap}.table-wrap{overflow-x:auto}table{width:100%!important}table td{vertical-align:top}table th{white-space:nowrap}td .mono{font-family:Consolas,monospace;font-size:13px}td .small{display:block;font-size:12px;color:var(--muted)}.badge{display:inline-block;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:700;white-space:nowrap}.badge.warn{background:var(--warning-bg);color:#7c5000}.badge.good{background:var(--ready-bg);color:#34692d}.badge.info{background:#e7f0fa;color:#335f8c}.badge.neutral{background:#edf0f4;color:#526176}button{font:inherit}button.primary,button:not(.tab):not(:where(.filter-shell *, .filter-dropdown-floating *)):not(.quiet-button){background:var(--accent-strong);color:var(--surface);border:0;border-radius:7px;padding:8px 12px;cursor:pointer}button:not(.tab):not(:where(.filter-shell *, .filter-dropdown-floating *)):not(.quiet-button):hover{background:#25466f}button:disabled{opacity:.45;cursor:not-allowed!important}.quiet-button{background:var(--surface);border:1px solid var(--n-control-border);color:var(--accent-strong);border-radius:7px;padding:8px 12px;cursor:pointer}.quiet-button:hover{background:#f0f4f8}.review-actions{margin-top:20px;padding:16px;border-radius:9px;background:#f3f6fa;display:flex;justify-content:space-between;gap:18px;align-items:center}.review-actions p{font-size:13px;color:var(--muted);margin:4px 0 0}.review-actions-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.review-actions-right label{font-size:13px;font-weight:700}.review-actions-right input{padding:9px 10px;border:1px solid var(--n-control-border);border-radius:6px;min-width:210px}.method-note{font-size:13px;color:var(--muted);margin:22px 4px}.order-detail{margin-top:25px;border-top:1px solid var(--line);padding-top:21px}.detail-header,.timeline-heading{display:flex;justify-content:space-between;align-items:center;gap:15px}.detail-header h3{margin:0;color:var(--accent-strong);font-size:23px}.detail-header .eyebrow{color:#669043}.detail-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:14px;margin-top:17px}.detail-card{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:#fbfcfe}.detail-card h4,.questions h4,.timeline-heading h4{margin:0 0 8px;color:var(--accent-strong)}.detail-card p{margin:0 0 8px}.summary-card{background:#f4f8ef;border-color:#d7e6c8}.muted{color:var(--muted)}.fine-print{font-size:12px;color:var(--muted)}.questions{margin-top:15px;padding:13px 17px;background:var(--warning-bg);border-radius:9px}.questions ul{margin:0;padding-left:21px}.timeline-heading{margin-top:22px}.timeline-heading span{font-size:13px;color:var(--muted)}.timeline{list-style:none;counter-reset:item;padding:0;margin:10px 0}.timeline li{position:relative;border-left:3px solid #cbd9e9;padding:0 0 21px 18px;margin-left:7px}.timeline li:before{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#6d98bf;left:-7px;top:5px}.timeline li:last-child{border-left-color:transparent}.timeline time{color:var(--muted);font-size:13px}.timeline strong{display:block;color:#2c4562}.timeline p{margin:4px 0 0}.timeline .meta{font-size:12px;color:var(--muted)}dialog{border:0;border-radius:13px;padding:0;max-width:720px;width:calc(100% - 30px);max-height:90vh;overflow-y:auto;box-shadow:0 18px 55px #172f4b55}dialog::backdrop{background:#132943aa}dialog form{padding:24px}dialog h2{margin:0 0 5px;color:var(--accent-strong)}dialog label{display:block;margin:14px 0 5px;font-weight:700}dialog select,dialog textarea{width:100%;border:1px solid var(--n-control-border);border-radius:7px;padding:9px 10px;font:inherit}.dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.digest{display:block;min-width:220px;max-width:370px}.sample-label{color:#8b5400!important;font-weight:700}.sample-warning{background:var(--warning-bg);color:#6f4900;padding:8px 10px;border-radius:7px}.review-evidence{border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:12px 14px;margin:14px 0}.review-evidence h3{margin:0 0 7px;color:var(--accent-strong);font-size:16px}.review-evidence p{margin:6px 0}.review-evidence ul,.timeline-attachments{margin:7px 0;padding-left:20px}.timeline-attachments li{border:0;padding:0;margin:3px 0}.timeline-attachments li:before{display:none}@media(max-width:900px){.kpis{grid-template-columns:repeat(3,1fr)}.detail-grid{grid-template-columns:1fr}.review-actions{display:block}.review-actions-right{margin-top:13px}}@media(max-width:600px){.page{padding:12px 12px 35px}.topbar-inner{padding:10px 12px}.topbar-label{display:none}.hero{padding:22px 20px}.hero h1{font-size:24px}.kpis{grid-template-columns:repeat(2,1fr);gap:8px}.kpi{padding:11px 13px}.panel{padding:14px}.section-heading{display:block}.source-chip{margin-top:10px}.review-actions-right input{min-width:0;width:100%}.review-actions-right button{width:100%}} #order-dialog{max-width:1100px;width:calc(100% - 32px);overscroll-behavior:contain}#order-dialog .order-detail{margin:0;border:0;padding:24px}@media(max-width:600px){#order-dialog .order-detail{padding:16px}} /* Modal shell: keep the title and actions visible while long evidence scrolls. */ #review-dialog,#order-dialog{width:calc(100% - 32px);max-height:calc(100dvh - 40px);overflow:hidden;box-shadow:0 24px 70px #172f4b66} #review-dialog{max-width:1120px;height:min(780px,calc(100dvh - 40px))} #review-form{display:flex;flex-direction:column;height:100%;min-height:0;padding:0} .dialog-header,.detail-header{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:20px 24px;background:var(--surface);border-bottom:1px solid var(--line)} .dialog-header h2{font-size:24px;line-height:1.25;margin:0} .dialog-kicker{margin:0 0 3px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} #dialog-message{margin:5px 0 0;font-size:14px} .dialog-header .quiet-button,.detail-header .quiet-button{flex:none} .dialog-close-icon{display:none} .review-dialog-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);flex:1;min-height:0;overflow:hidden} #review-evidence{min-height:0;margin:0;padding:20px 24px 28px;border:0;border-right:1px solid var(--line);border-radius:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} #review-evidence h3{font-size:18px;line-height:1.3;margin:0 0 14px} #review-evidence p{margin:0 0 12px} #review-evidence .fine-print,.review-decision-fields .fine-print{font-size:13px;line-height:1.45} #review-evidence .sample-warning{padding:11px 13px} .review-decision-fields{min-height:0;padding:22px 24px;overflow-y:auto;background:var(--surface)} .review-decision-fields h3{margin:0 0 12px;color:var(--accent-strong);font-size:18px} .review-decision-fields label{margin-top:16px} .review-decision-fields textarea{min-height:130px;resize:vertical} .dialog-actions{flex:none;margin:0;padding:14px 24px;background:var(--surface);border-top:1px solid var(--line)} .dialog-actions button{min-height:42px} #order-dialog{max-width:1120px;height:min(860px,calc(100dvh - 40px))} #order-dialog .order-detail{display:flex;flex-direction:column;height:100%;min-height:0;margin:0;border:0;padding:0} #order-dialog .detail-header h3{line-height:1.25} #order-dialog .detail-header .eyebrow{margin-bottom:3px} .order-dialog-body{flex:1;min-height:0;padding:24px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable} .order-dialog-body .detail-grid{margin-top:0} .order-characteristics,.order-discrepancies{margin-top:22px} .order-characteristics>.timeline-heading,.order-discrepancies>.timeline-heading{margin-top:0} .order-positions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px} .order-position{min-width:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:15px 16px} .order-position h5,.order-shared-wrap h5,.discrepancy-card h5{margin:0;color:var(--accent-strong);font-size:16px} .attribute-list{margin:10px 0 0} .attribute-list>div{display:grid;grid-template-columns:minmax(120px,.75fr) minmax(0,1.25fr);gap:12px;padding:7px 0;border-top:1px solid var(--line)} .attribute-list dt{color:var(--muted);font-size:13px} .attribute-list dd{margin:0;color:#253448;font-weight:700;overflow-wrap:anywhere} .order-shared-wrap{margin-top:12px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)} .shared-attributes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px} .structured-empty{margin:10px 0 0;color:var(--muted)} .discrepancy-list{display:grid;gap:9px;margin-top:10px} .discrepancy-card{padding:13px 15px;border:1px solid #e6c978;border-left-width:4px;border-radius:9px;background:var(--warning-bg)} .discrepancy-card.uncertainty{border-color:#b9d0e7;background:#f5f9fd} .discrepancy-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .discrepancy-card p{margin:7px 0 0} .no-discrepancies{margin:0;padding:11px 14px;border:1px solid #cfe2c5;border-radius:8px;background:#f2f8ee;color:#3f672f} .timeline-event-heading{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .timeline-event-heading strong{display:inline} .timeline-summary{max-width:900px} .change-list{margin:10px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)} .change-list>div{display:grid;grid-template-columns:minmax(130px,.55fr) minmax(0,1.45fr);gap:12px;padding:9px 11px;border-top:1px solid var(--line)} .change-list>div:first-child{border-top:0} .change-list dt{font-size:13px;color:#5f7085;font-weight:700} .change-list dd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0} .change-before{text-decoration:line-through;color:#7d5960} .change-arrow{color:#71954c;font-weight:700} .change-after{color:var(--accent-strong);font-weight:700} .timeline-evidence{margin-top:9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)} .timeline-evidence summary{padding:8px 11px;color:var(--accent-strong);font-size:13px;font-weight:700;cursor:pointer} .timeline-evidence>p,.timeline-evidence>ul{margin:0;padding:0 12px 10px} .timeline-evidence>ul{padding-left:30px} @media(max-width:760px){ #review-dialog,#order-dialog{width:calc(100% - 16px);height:calc(100dvh - 16px);max-height:calc(100dvh - 16px);border-radius:10px} .dialog-header,.detail-header{padding:14px 16px;gap:12px} .dialog-header h2{font-size:21px} #order-dialog .detail-header h3{font-size:21px} .review-dialog-grid{display:block;overflow-y:auto;overscroll-behavior:contain} #review-evidence{min-height:auto;padding:16px;border-right:0;border-bottom:1px solid var(--line);overflow:visible;scrollbar-gutter:auto} .review-decision-fields{padding:16px;overflow:visible} .dialog-actions{padding:12px 16px} .order-dialog-body{padding:16px;scrollbar-gutter:auto} .order-positions,.shared-attributes{grid-template-columns:1fr} } @media(max-width:420px){ .dialog-header .quiet-button,.detail-header .quiet-button{display:grid;place-items:center;width:40px;height:40px;padding:0} .dialog-close-label{display:none} .dialog-close-icon{display:block;font-size:24px;line-height:1} .dialog-actions button{flex:1} .attribute-list>div,.change-list>div{grid-template-columns:1fr;gap:3px} } .order-filter{min-width:0;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)} .order-filter legend{padding:0 5px;color:var(--accent-strong);font-weight:700} .filter-presets,.date-range{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .order-filter button.filter-preset{padding:6px 12px;border:1px solid var(--n-control-border);border-radius:999px;background:var(--surface);color:var(--accent-strong);font-weight:700} .order-filter button.filter-preset:hover{background:#eaf1f9;color:#23476f} .order-filter button.filter-preset[aria-pressed="true"]{border-color:var(--accent-strong);background:var(--accent-strong);color:var(--surface)} .order-state-filter{margin-bottom:18px;background:#fbfcfe} .date-range{margin-top:12px} .date-range[hidden]{display:none} .date-range label{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700} .date-range input{min-width:150px;padding:7px 9px;border:1px solid var(--n-control-border);border-radius:6px;font:inherit} .filter-hint{margin:9px 0 0;color:var(--muted);font-size:13px} .filter-error{margin:7px 0 0;color:#9b2d2d;font-size:13px;font-weight:700} .order-xml-summary{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-left:4px solid #d99b28;border-radius:8px;background:var(--warning-bg);color:#4b5970;font-size:14px} .reconciliation-kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:0 0 16px} .reconciliation-kpi{min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)} .reconciliation-kpi span,.reconciliation-kpi small{display:block;color:var(--muted);font-size:12px} .reconciliation-kpi strong{display:block;margin:2px 0;color:var(--accent-strong);font-size:22px;line-height:1.2} .quantity-stack span,.timing-stack span{display:block;white-space:nowrap} .quantity-stack span+span,.timing-stack span+span{margin-top:2px;color:var(--muted);font-size:12px} .customer-order-nos span{display:block;white-space:nowrap}.customer-order-nos span+span{margin-top:3px} .row-detail-button{display:block;margin-top:8px;padding:5px 10px!important;font-size:13px!important} .order-reconciliation{margin:0 0 20px;padding:19px;border:1px solid #cddbea;border-radius:12px;background:linear-gradient(145deg,#f8fbff,#f4f8ef)} .reconciliation-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:15px} .reconciliation-heading h4{margin:0;color:var(--accent-strong);font-size:21px} .reconciliation-heading>div:last-child{text-align:right} .reconciliation-heading .fine-print{margin:5px 0 0} .quantity-flow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center} .quantity-flow>div{min-width:0;padding:14px;text-align:center;border:1px solid var(--line);border-radius:9px;background:var(--surface)} .quantity-flow span,.quantity-flow small{display:block;color:var(--muted);font-size:12px} .quantity-flow strong{display:block;margin:3px 0;color:#294f7d;font-size:28px;line-height:1.1} .flow-arrow{color:#71954c!important;font-size:23px!important;font-weight:700} .reconciliation-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px} .reconciliation-facts>div{padding:12px 13px;border:1px solid var(--line);border-radius:8px;background:var(--surface)} .reconciliation-facts span,.reconciliation-facts small{display:block;color:var(--muted);font-size:12px} .reconciliation-facts strong{display:block;margin:3px 0;color:var(--accent-strong);font-size:17px} .customer-orders-wrap{margin-top:16px} .customer-orders-wrap h5{margin:0 0 8px;color:var(--accent-strong);font-size:15px} .customer-orders-table{border-collapse:collapse;background:var(--surface);font-size:13px} .customer-orders-table th,.customer-orders-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap} .customer-orders-table th{color:#52667f;background:#f1f5f9} .application-details-wrap{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)} .application-details-wrap h5{margin:0;color:var(--accent-strong);font-size:17px} .application-details-wrap>p{margin:3px 0 10px} .application-details-grid{display:grid;gap:11px} .application-detail{min-width:0;padding:14px;border:1px solid #cfddeb;border-left:4px solid #d99b28;border-radius:10px;background:var(--surface)} .application-detail.with-posted-orders{border-left-color:var(--ready)} .application-detail-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .application-detail-heading h6{margin:0;color:#294f7d;font-size:16px} .application-detail-heading p{margin:2px 0 0} .application-detail-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:11px 0} .application-detail-facts>div{min-width:0;padding:8px 10px;border-radius:7px;background:var(--surface-2)} .application-detail-facts dt{color:var(--muted);font-size:12px} .application-detail-facts dd{margin:2px 0 0;color:#2f4f75;font-weight:700;overflow-wrap:anywhere} .application-orders-table{margin-top:3px} .application-empty{margin:9px 0 0;padding:9px 11px;border-radius:7px;background:var(--warning-bg);color:var(--warning);font-size:13px} @media(max-width:1050px){.reconciliation-kpis{grid-template-columns:repeat(3,1fr)}.reconciliation-facts{grid-template-columns:repeat(2,1fr)}} @media(max-width:700px){.reconciliation-kpis{grid-template-columns:repeat(2,1fr)}.quantity-flow{grid-template-columns:1fr}.flow-arrow{transform:rotate(90deg);text-align:center}.reconciliation-facts,.application-detail-facts{grid-template-columns:1fr}.reconciliation-heading{display:block}.reconciliation-heading>div:last-child{text-align:left;margin-top:9px}.application-detail-heading{display:block}.application-detail-heading>.badge{margin-top:7px}} @media(max-width:420px){.reconciliation-kpis{grid-template-columns:1fr}.order-reconciliation{padding:13px}} /* Shared visual language with chief-portal: light glass, native type and soft surfaces. */ :root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #edf1f8; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body { min-height:100vh; background:radial-gradient(ellipse at 0% 30%,#8bb4e721,transparent 58%),radial-gradient(ellipse at 94% 0%,#dbe58224,transparent 48%),#edf1f8 } button,input,select,textarea { font-family:inherit } a,button,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation } summary:focus-visible { outline:3px solid var(--accent-strong); outline-offset:4px } summary { cursor:pointer } .topbar { width:calc(100% - 48px); max-width:1432px; margin:auto; border:1px solid #ffffff55; border-top:0; border-radius:0 0 20px 20px; background:linear-gradient(110deg,#3b5374f2,#2a3e5cf0); box-shadow:0 10px 26px -19px #1d32568c } .topbar-inner { max-width:1432px; min-height:60px; justify-content:space-between } .home-link { color:var(--surface); font-weight:650 }.topbar-label { color:#e2eaf6 } .page { max-width:1480px; padding:28px 24px 40px } .hero { padding:0 4px 4px; background:none; border:0; color:var(--ink); border-radius:0 } .hero .eyebrow { color:var(--accent-strong) }.hero h1 { font-size:clamp(28px,3vw,40px); font-weight:700; letter-spacing:-.04em; margin:6px 0 10px } .hero p { color:var(--muted) }.hero-meta { margin-top:12px; color:var(--muted) } .kpis { gap:12px; margin:20px 0 24px }.kpi { border:1px solid #ffffffeb; border-radius:20px; box-shadow:var(--shadow); background:#ffffffd9; padding:15px 18px }.kpi strong { color:var(--ink); font-size:28px; font-weight:650 } .tabs { width:fit-content; max-width:100%; border:1px solid #dae2ed; border-radius:14px; background:var(--line); padding:4px; gap:3px; margin:0 0 16px } .tab { font-family:inherit; border:0; border-radius:11px; min-height:44px; color:var(--muted); padding:9px 18px; font-size:14px }.tab.active { background:white; color:var(--ink); border:0; box-shadow:0 2px 7px #25365b15 } .panel { border-radius:24px; border-color:#ffffffef; padding:24px; box-shadow:var(--shadow); background:#ffffffd9 } .section-heading h2 { color:var(--ink); font-size:24px; letter-spacing:-.025em }.section-heading p { font-size:14px }.source-chip { color:var(--accent-strong); background:var(--accent-soft) } button:not(.tab):not(:where(.filter-shell *, .filter-dropdown-floating *)):not(.quiet-button) { background:var(--accent-strong); border-radius:12px; min-height:38px }.quiet-button { border:1px solid var(--line); border-radius:12px; min-height:40px } .badge { padding:4px 9px; font-size:12px; white-space:normal; line-height:1.35 } .badge.good { background:var(--ready-bg); color:var(--ready) }.badge.warn { background:var(--warning-bg); color:var(--warning) }.badge.danger { background:var(--danger-bg); color:var(--danger) }.badge.info { background:var(--accent-soft); color:var(--accent-strong) } #orders-table { font-size:14px; min-width:1160px }table.dataTable th { font-weight:600; color:var(--muted) }table.dataTable tbody td { padding:14px 12px!important; border-bottom:1px solid var(--line)!important } :is(#orders-table, #review-table) .row-detail-button { margin-top:8px; background:var(--accent-soft); color:var(--accent-strong); border:1px solid #d6e2f5; min-height:32px; font-weight:600 } :is(#orders-table, #review-table) .row-detail-button:hover { background:#dce8fa }.dt-container .dt-input { border:1px solid var(--line)!important; border-radius:10px!important; background:var(--surface)!important; padding:8px 10px!important; color:var(--ink) } .reconciliation-kpi { border:1px solid var(--line); border-radius:16px; background:var(--surface-2); padding:13px 15px }.reconciliation-kpi strong { color:var(--ink); font-weight:650 }.reconciliation-kpi span { color:var(--muted) } .xml-status-details { margin:0 0 16px; font-size:13px; color:var(--muted) }.xml-status-details summary { padding:4px 0 }.xml-status-details .order-xml-summary { margin:8px 0 0 } .order-filter { border:0; border-radius:16px; background:#f3f6fb; padding:12px 14px; margin-bottom:14px }.order-filter legend { padding:0; float:left; margin:5px 20px 8px 0; font-size:13px; color:var(--muted) }.order-filter .filter-hint { clear:both; font-size:12px; margin-top:8px } .order-filter button.filter-preset,.quick-state-filters button.filter-preset { background:var(--surface); color:var(--accent-strong); border:1px solid #dce4f0; border-radius:10px; padding:6px 11px; font-size:13px; font-weight:600; min-height:36px } .order-filter button.filter-preset[aria-pressed="true"],.quick-state-filters button.filter-preset[aria-pressed="true"] { background:var(--accent-strong); color:white; border-color:var(--accent-strong) } .state-filter-row { display:grid; grid-template-columns:1fr 1fr auto; gap:12px; align-items:end }.state-filter-row label { display:block; margin:0; color:var(--muted); font-size:12px; font-weight:600 }.state-filter-row select { display:block; width:100%; min-height:44px; margin-top:5px; padding:8px 36px 8px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:14px }.state-filter-row button { min-height:44px; font-size:13px } .quick-state-filters { display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:13px 0 }.quick-state-filters>span { color:var(--muted); font-size:12px; margin-right:2px }.filter-summary { font-size:13px; color:var(--muted); margin:0 0 16px } #order-dialog { width:calc(100% - 48px); max-width:1280px; height:min(960px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); border-radius:26px; background:#f3f6fb; box-shadow:0 28px 100px #14243f50 } #review-dialog { border-radius:26px }.detail-header,.dialog-header { padding:20px 24px; background:#fffffff2; border-bottom:1px solid #dce3ee }.detail-header h3 { color:var(--ink); font-size:26px; letter-spacing:-.03em }.detail-header .eyebrow { color:var(--accent-strong); font-size:var(--n-font-caption,12px) }.dialog-kicker { font-size:var(--n-font-caption,12px); font-weight:600; letter-spacing:.07em; color:var(--muted); margin:0 0 6px; text-transform:uppercase } #order-dialog::backdrop,#review-dialog::backdrop { background:#20304d66; backdrop-filter:blur(6px) }.order-dialog-body { padding:22px 24px; scrollbar-gutter:auto } .order-status-overview { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 20px }.order-status-overview .fine-print { margin:7px 0 0 }.order-status-overview .badge { font-size:14px; padding:6px 12px }.detail-nav { display:flex; gap:6px; flex-wrap:wrap }.detail-nav button { font-size:12px; min-height:36px; padding:7px 10px; background:#ffffffb3 } .order-reconciliation { margin:0 0 22px; padding:0; border:0; background:none; border-radius:0 }.reconciliation-heading { margin:0 0 12px }.reconciliation-heading h4 { color:var(--ink); font-size:19px; letter-spacing:-.02em }.reconciliation-heading .dialog-kicker { font-size:var(--n-font-caption,12px); margin-bottom:3px } .customer-orders-wrap { margin:12px 0 }.customer-orders-wrap h5 { display:none }.customer-order-list { display:grid; gap:14px }.customer-order-card { min-width:0; padding:20px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:0 4px 18px -15px #223d6955 }.customer-order-card.inactive { background:#f8f9fc } .customer-order-heading { display:flex; justify-content:space-between; gap:16px; align-items:start }.customer-order-heading h6 { margin:2px 0 4px; color:var(--ink); font-size:22px; letter-spacing:-.02em; font-weight:650 }.customer-order-heading .dialog-kicker { display:block }.customer-order-state { text-align:right; display:flex; flex-direction:column; gap:7px; align-items:end }.customer-order-amount { color:var(--ink); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums } .customer-order-meta { display:flex; flex-wrap:wrap; gap:7px 18px; margin:12px 0 0; color:var(--muted); font-size:12px }.customer-order-meta span+span { border-left:1px solid #dce3ec; padding-left:16px }.customer-order-source-state { font-size:12px; margin:9px 0 0; color:var(--muted) } .customer-lifecycle { list-style:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); margin:24px -5px 18px; padding:0 }.lifecycle-stage { position:relative; min-width:0; padding:0 7px; text-align:center }.lifecycle-stage:not(:first-child)::before { content:""; position:absolute; top:21px; left:-50%; width:100%; height:2px; background:#e1e6ef; z-index:0 }.lifecycle-icon { position:relative; display:grid; place-items:center; width:44px; height:44px; margin:0 auto 10px; border:1px solid #dce3ec; border-radius:15px; background:var(--surface-2); color:#6b778b; box-shadow:0 0 0 7px var(--surface) }.lifecycle-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linejoin:round; stroke-linecap:round } .lifecycle-label { display:block; font-size:13px; font-weight:600; color:var(--ink); margin:0 0 5px }.lifecycle-status { display:inline-block; padding:2px 7px; border-radius:6px; font-size:var(--n-font-caption,12px); font-weight:600; color:#59667b; background:var(--ink) }.lifecycle-value { display:block; margin-top:6px; font-size:12px; line-height:1.4; color:var(--ink); overflow-wrap:anywhere; min-height:34px }.lifecycle-date { display:block; color:var(--muted); font-size:var(--n-font-caption,12px); margin-top:4px } .lifecycle-stage.complete .lifecycle-icon,.lifecycle-stage.complete .lifecycle-status { color:var(--ready); background:var(--ready-bg); border-color:#d3e9dc }.lifecycle-stage.partial .lifecycle-icon,.lifecycle-stage.partial .lifecycle-status { color:var(--accent-strong); background:var(--accent-soft); border-color:#d3e0f4 }.lifecycle-stage.waiting .lifecycle-icon,.lifecycle-stage.waiting .lifecycle-status { color:var(--warning); background:var(--warning-bg); border-color:#f0e0ba }.lifecycle-stage.blocked .lifecycle-icon,.lifecycle-stage.blocked .lifecycle-status { color:var(--danger); background:var(--danger-bg); border-color:#ecd2db }.lifecycle-stage.unknown .lifecycle-icon { border-style:dashed }.lifecycle-stage.inactive { opacity:.8 } .customer-order-evidence { border-top:1px solid var(--line); font-size:13px }.customer-order-evidence>summary { padding:12px 0 0; color:var(--accent-strong); font-weight:600 }.lifecycle-sources { margin:14px 0 }.lifecycle-sources>div { display:grid; grid-template-columns:120px 1fr; gap:12px; padding:8px 0; border-bottom:1px solid var(--line) }.lifecycle-sources dt { color:var(--ink); font-weight:600 }.lifecycle-sources dd { margin:0; color:var(--muted) }.lifecycle-sources .small { display:block; margin-top:3px; font-size:12px }.construction-evidence td { white-space:normal; min-width:90px }.construction-evidence th:first-child { min-width:170px } .reconciliation-evidence { border:1px solid var(--line); border-radius:16px; background:#ffffffc2; margin-top:14px }.reconciliation-evidence>summary { padding:13px 16px; color:var(--accent-strong); font-size:13px; font-weight:600 }.reconciliation-evidence .quantity-flow { margin:0 16px; gap:7px }.quantity-flow>div { border:0; border-radius:12px; background:#f2f5fa; padding:12px 8px }.quantity-flow strong { font-size:23px; color:var(--ink) }.quantity-flow span,.quantity-flow small { font-size:var(--n-font-caption,12px) }.reconciliation-evidence .reconciliation-facts { margin:12px 16px 16px; gap:8px }.reconciliation-facts>div { border:0; background:var(--surface-2); border-radius:12px; padding:10px }.reconciliation-facts strong { color:var(--ink); font-size:16px } .application-details-wrap { padding:0; border:0; margin-top:12px }.application-detail { border-radius:20px; background:#f0f4fb; padding:16px; border-left-width:3px }.application-detail-facts { grid-template-columns:repeat(4,minmax(0,1fr)) }.application-detail-facts>div { background:#ffffff9e; border-radius:10px }.application-detail .customer-order-card { box-shadow:none } .detail-grid { display:flex; flex-direction:column; gap:12px }.summary-card { order:-1; background:var(--surface); border-color:var(--line); border-radius:20px }.detail-card h4 { color:var(--ink); font-size:17px }.technical-card { padding:0 18px; border-radius:16px; background:#ffffffa8 }.technical-card summary { color:var(--accent-strong); font-size:13px; font-weight:600; padding:13px 0 }.technical-card p { font-size:14px }.order-position,.order-shared-wrap { border-radius:18px; border-color:var(--line) }.order-position h5,.order-shared-wrap h5,.timeline-heading h4 { color:var(--ink) }.questions { border:1px solid #ede3c9; border-radius:16px }.questions h4 { color:var(--ink) }.timeline-evidence { border-radius:12px } @media(max-width:1000px) { .customer-lifecycle { grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px 0 } .lifecycle-stage:nth-child(5)::before { display:none } } @media(max-width:760px) { .topbar { width:calc(100% - 24px) }.topbar-inner { padding:9px 14px; min-height:52px }.topbar-label { font-size:var(--n-font-caption,12px) }.home-link { font-size:13px }.page { padding:20px 12px 28px }.hero { padding:0 4px }.hero p { font-size:14px }.hero-meta { gap:8px; font-size:12px }.kpis { gap:8px; margin:16px 0 }.kpi { padding:12px; border-radius:16px }.kpi strong { font-size:24px }.tabs { width:100% }.tab { flex:1; padding:9px; font-size:13px }.panel { padding:16px; border-radius:20px }.section-heading { display:block }.section-heading h2 { font-size:21px }.section-heading .source-chip { margin-top:10px; white-space:normal }.reconciliation-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) }.reconciliation-kpi { padding:10px 12px }.reconciliation-kpi:last-child { grid-column:1/-1 } .state-filter-row { grid-template-columns:1fr 1fr }.state-filter-row button { grid-column:1/-1; justify-self:start }.state-filter-row label { min-width:0 }.state-filter-row select { font-size:13px }.order-filter legend { float:none; margin:0 0 8px }.quick-state-filters { gap:6px }.quick-state-filters button.filter-preset { font-size:12px; min-height:36px } #order-dialog,#review-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:24px }.detail-header,.dialog-header { padding:16px; gap:10px }.detail-header h3 { font-size:22px }.order-dialog-body { padding:16px 12px; padding-bottom:calc(20px + env(safe-area-inset-bottom)) }.order-status-overview { flex-direction:column; align-items:start; gap:12px; margin-bottom:20px }.detail-nav { width:100% }.detail-nav button { flex:1 }.reconciliation-heading { display:block }.reconciliation-heading>div:last-child { text-align:left; margin-top:8px }.customer-order-card { padding:16px 13px; border-radius:18px }.customer-order-heading { gap:10px }.customer-order-heading h6 { font-size:20px }.customer-order-state { max-width:48% }.customer-order-amount { font-size:15px }.customer-order-meta { gap:5px 10px }.customer-order-meta span+span { padding-left:10px } .customer-lifecycle { display:block; margin:20px 0 10px }.lifecycle-stage { display:grid; grid-template-columns:42px 1fr auto; grid-template-rows:auto auto; align-items:start; text-align:left; padding:0 0 18px; column-gap:12px }.lifecycle-stage:not(:first-child)::before { display:block; top:-20px; bottom:0; left:20px; width:2px; height:auto }.lifecycle-icon { grid-column:1; grid-row:1/4; width:40px; height:40px; margin:0; border-radius:13px; box-shadow:0 0 0 4px var(--surface) }.lifecycle-label { grid-column:2; grid-row:1; margin:0; font-size:13px }.lifecycle-status { grid-column:3; grid-row:1; font-size:var(--n-font-caption,12px); white-space:nowrap }.lifecycle-value { grid-column:2/4; grid-row:2; font-size:13px; min-height:0; margin:3px 0 0 }.lifecycle-date { grid-column:2/4; grid-row:3; margin-top:2px }.lifecycle-sources>div { grid-template-columns:1fr; gap:3px } .reconciliation-evidence .quantity-flow { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); margin:0 10px; gap:3px }.quantity-flow .flow-arrow { transform:none; font-size:17px!important }.quantity-flow>div { padding:9px 4px }.quantity-flow strong { font-size:20px }.quantity-flow small { overflow-wrap:anywhere }.reconciliation-evidence .reconciliation-facts { grid-template-columns:repeat(2,minmax(0,1fr)); margin:10px }.reconciliation-facts>div { min-width:0 }.reconciliation-facts strong { font-size:15px }.application-detail { padding:12px }.application-detail-facts { grid-template-columns:repeat(2,minmax(0,1fr)) } .dt-container .dt-search input { width:100%; margin:7px 0 0!important }.dt-container .dt-search { text-align:left!important }.dt-container .dt-layout-row { gap:10px } } @media(max-width:420px) { .kpis { grid-template-columns:repeat(2,minmax(0,1fr)) }.kpi:last-child { grid-column:1/-1 }.reconciliation-kpis { grid-template-columns:repeat(2,minmax(0,1fr)) }.state-filter-row { grid-template-columns:1fr }.customer-order-heading .fine-print { font-size:var(--n-font-caption,12px) }.detail-nav button { padding:6px 8px }.source-chip { white-space:normal } } @media(prefers-reduced-transparency:reduce) { #order-dialog::backdrop,#review-dialog::backdrop { backdrop-filter:none }.panel,.kpi { background:var(--surface) } } @media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important } }.lifecycle-label{font-size:14px}.lifecycle-value{font-size:13px}.lifecycle-date{font-size:12px}.lifecycle-status{font-size:var(--n-font-caption,12px)} @media(max-width:760px){.lifecycle-label{font-size:13px}.lifecycle-status{font-size:var(--n-font-caption,12px)}.lifecycle-date{font-size:var(--n-font-caption,12px)}}.fine-print,.meta,.timeline .meta,.timeline time{color:var(--muted)} button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent-strong);outline-offset:3px} .topbar a:focus-visible{outline-color:var(--surface)} #panel-review>.kpis{margin-top:0} /* Compact workspace: title and reconciliation totals leave room for the order rows. */ .page { padding-top:16px; } .hero { display:flex; align-items:center; justify-content:space-between; gap:12px 24px; padding:0 4px; } .hero h1 { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:0; font-size:26px; line-height:1.3; } .hero h1 span { color:var(--muted); font-size:15px; font-weight:400; letter-spacing:normal; } .hero-meta { flex:none; margin:0; font-size:12px; } .tabs { margin-top:12px; margin-bottom:12px; } .tab { min-height:38px; padding:7px 14px; font-size:13px; } #panel-orders { padding:16px 20px; } .orders-heading { align-items:center; margin-bottom:10px; } .orders-heading h2 { margin:0; font-size:18px; } .orders-source { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px 14px; } .metrics-period { font-size:12px; color:var(--muted); } .orders-source .source-chip { margin:0; font-size:var(--n-font-caption,12px); padding:4px 9px; } #panel-orders .reconciliation-kpis { grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0 0 8px; padding:4px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } #panel-orders .reconciliation-kpi { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:4px 14px; border:0; border-radius:0; background:none; } #panel-orders .reconciliation-kpi + .reconciliation-kpi { border-left:1px solid var(--line); } #panel-orders .reconciliation-kpi span { display:block; font-size:12px; line-height:1.35; } #panel-orders .reconciliation-kpi small { font-size:var(--n-font-caption,12px); } #panel-orders .reconciliation-kpi strong { flex:none; margin:0; font-size:20px; white-space:nowrap; } #panel-orders .reconciliation-kpi:last-child { grid-column:auto; } #panel-orders .report-notes { margin:0; } .report-notes summary { width:fit-content; padding:2px 0; font-size:12px; } .report-notes-content { margin:8px 0 12px; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); font-size:13px; } .report-notes-content p { margin:0 0 8px; } .metric-notes { display:flex; flex-wrap:wrap; gap:6px 24px; } .metric-notes small { font-size:inherit; } @media(max-width:1100px) { #panel-orders .reconciliation-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } #panel-orders .reconciliation-kpi:nth-child(4) { border-left:0; } #panel-orders .reconciliation-kpi:nth-child(n+4) { border-top:1px solid var(--line); } } @media(max-width:760px) { .page { padding-top:12px; } .hero { display:block; } .hero h1 { font-size:24px; gap:3px 10px; } .hero h1 span { font-size:14px; } .hero-meta { margin-top:5px; font-size:var(--n-font-caption,12px); } .tabs { margin-top:10px; margin-bottom:10px; } .tab { min-height:38px; padding:7px 9px; } #panel-orders { padding:14px 12px; } .orders-heading { display:flex; align-items:flex-start; gap:8px; } .orders-heading h2 { font-size:17px; } .orders-source { gap:4px; } .metrics-period { font-size:var(--n-font-caption,12px); } .orders-heading .source-chip { margin:0; font-size:var(--n-font-caption,12px); } #panel-orders .reconciliation-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } #panel-orders .reconciliation-kpi { min-height:40px; padding:5px 9px; gap:6px; } #panel-orders .reconciliation-kpi span { font-size:var(--n-font-caption,12px); } #panel-orders .reconciliation-kpi strong { font-size:18px; } #panel-orders .reconciliation-kpi:nth-child(odd) { border-left:0; } #panel-orders .reconciliation-kpi:nth-child(even) { border-left:1px solid var(--line); } #panel-orders .reconciliation-kpi:nth-child(n+3) { border-top:1px solid var(--line); } #panel-orders .reconciliation-kpi:last-child { grid-column:1/-1; } } /* Workspace navigation and the shared filter occupy the existing top bar. */ html { scroll-padding-top:80px; } .topbar { position:sticky; top:0; z-index:80; } .topbar-inner { display:grid; grid-template-columns:auto auto minmax(260px,1fr); align-items:center; gap:10px 18px; padding:10px 20px; min-height:64px; } .topbar .home-link { white-space:nowrap; font-size:14px; } .topbar .tabs { width:fit-content; margin:0; padding:3px; border-color:#ffffff30; background:#ffffff17; border-radius:12px; } .topbar .tab { min-height:34px; padding:6px 12px; white-space:nowrap; color:#e2eaf6; font-size:13px; } .topbar .tab.active { background:var(--surface); color:var(--ink); } .topbar .tab:focus-visible { outline-color:var(--surface); } .header-order-filter { min-width:0; } .header-order-filter[hidden] { display:none; } .topbar .neuffer-filter-shell .filter-compact { height:40px; border-radius:10px; } .topbar .neuffer-filter-shell .filter-open-button { min-height:30px; font-size:13px; } .hero { margin-bottom:12px; } .orders-heading-title { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; min-width:0; } .orders-heading-title .filter-summary { margin:0; font-size:12px; } .report-notes + .table-wrap { margin-top:8px; } @media(max-width:900px) { html { scroll-padding-top:128px; } .topbar-inner { grid-template-columns:auto minmax(0,1fr); gap:8px 14px; } .topbar .tabs { justify-self:end; } .header-order-filter { grid-column:1/-1; } } @media(max-width:600px) { html { scroll-padding-top:152px; } .topbar-inner { grid-template-columns:minmax(0,1fr); padding:8px 12px; gap:7px; min-height:0; } .topbar .home-link { font-size:13px; } .topbar .tabs { justify-self:stretch; width:100%; } .topbar .tab { flex:1; padding:5px 7px; min-height:32px; font-size:12px; } .hero { margin-bottom:10px; } .orders-heading-title .filter-summary { font-size:var(--n-font-caption,12px); } } /* Order table: separate status, key figures and actions with a clear reading hierarchy. */ .badge, .source-chip, .lifecycle-status { border-radius:4px; } #orders-table { table-layout:fixed; width:100%!important; min-width:1380px; color:var(--ink); font-variant-numeric:tabular-nums; } #orders-table col:nth-child(2) { width:7%!important; } #orders-table col:nth-child(3) { width:7%!important; } #orders-table col:nth-child(4) { width:11%!important; } #orders-table col:nth-child(5) { width:8%!important; } #orders-table col:nth-child(6) { width:11%!important; } #orders-table col:nth-child(7) { width:10%!important; } #orders-table col:nth-child(8) { width:7%!important; } #orders-table col:nth-child(9) { width:8%!important; } #orders-table col:nth-child(10) { width:8%!important; } #orders-table col:nth-child(11) { width:7%!important; } :is(#orders-table, #review-table) thead th { padding:12px 12px; background:var(--accent-soft); color:var(--ink); font-size:12px; font-weight:700; line-height:1.4; border-top:1px solid #d3deed; border-bottom:2px solid #bfcee2; } #orders-table thead th:nth-child(9) { text-align:right; } #orders-table thead th { white-space:normal!important; padding-right:26px; } :is(#orders-table, #review-table) tbody tr { background:var(--surface); } :is(#orders-table, #review-table) tbody tr:nth-child(even) { background:var(--surface-2); } :is(#orders-table, #review-table) tbody tr:hover { background:var(--surface-hover); } :is(#orders-table, #review-table) tbody td { padding:10px 12px!important; vertical-align:top; border-bottom:1px solid var(--line)!important; background:transparent!important; box-shadow:none!important; color:var(--ink); font-size:13px; line-height:1.5; } #orders-table tbody td:first-child { border-left:3px solid transparent; } #orders-table tbody td:nth-child(2) { font-size:16px; font-weight:650; color:var(--ink); } #orders-table tbody tr[data-reconciliation-tone="warn"] td:first-child { border-left-color:var(--warning); } #orders-table tbody tr[data-customer-tone="danger"] td:first-child { border-left-color:var(--danger); } #orders-table tbody td:nth-child(3) { color:var(--muted); } :is(#orders-table, #review-table) .badge { display:inline-block; max-width:100%; padding:4px 7px; border:0; border-radius:4px; font-size:12px; font-weight:600; line-height:1.4; color:#53627a; background:#edf1f6; } :is(#orders-table, #review-table) .badge.good { color:var(--ready); background:var(--ready-bg); } :is(#orders-table, #review-table) .badge.info { color:var(--accent-strong); background:var(--accent-soft); } :is(#orders-table, #review-table) .badge.warn { color:var(--warning); background:var(--warning-bg); } :is(#orders-table, #review-table) .badge.danger { color:var(--danger); background:var(--danger-bg); } :is(#orders-table, #review-table) .small { display:block; margin-top:5px; color:var(--muted); font-size:var(--n-font-caption,12px); font-weight:400; line-height:1.4; } :is(#orders-table, #review-table) .row-detail-button { display:inline-flex; align-items:center; gap:10px; min-height:30px; margin-top:7px; padding:4px 10px!important; border:1px solid var(--n-control-border); border-radius:5px; background:var(--surface); color:#274364; font-size:12px!important; font-weight:600; line-height:1.4; box-shadow:0 1px 2px #22395608; } :is(#orders-table, #review-table) .row-detail-button:hover { background:#274d78; border-color:#274d78; color:var(--surface); } :is(#orders-table, #review-table) .row-detail-button .detail-arrow { font-size:16px; line-height:1; } :is(#orders-table, #review-table) .row-detail-button:focus-visible { outline:3px solid var(--accent-strong); outline-offset:3px; } #orders-table .customer-order-nos { font-size:13px; font-weight:600; color:#283c59; } #orders-table .quantity-stack .order-metric, #orders-table .timing-stack .order-metric { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:3px; } #orders-table .order-metric .order-metric-label { display:inline; color:var(--muted); font-size:var(--n-font-caption,12px); font-weight:400; white-space:normal; } #orders-table .order-metric strong { color:var(--ink); font-size:13px; font-weight:600; white-space:nowrap; } #orders-table .quantity-stack .order-metric:first-child strong { font-size:15px; color:var(--ink); } #orders-table .order-amount-cell { text-align:right; color:var(--ink); font-size:14px; font-weight:650; } #orders-table .last-message-cell span { display:block; font-size:12px; color:var(--muted); } #orders-table .last-message-cell small { display:block; margin-top:3px; font-size:var(--n-font-caption,12px); color:var(--muted); } :is(#orders-table, #review-table) tbody td[colspan] { font-size:14px; font-weight:400; border-left:0; text-align:center; } /* Order card: a visible decision summary, then separate reading paths for history and specification. */ #order-dialog { max-width:1160px; width:calc(100% - 64px); height:min(900px,calc(100dvh - 64px)); max-height:calc(100dvh - 64px); border-radius:20px; background:var(--surface); color:var(--ink); } #order-dialog [hidden] { display:none!important; } #order-dialog .detail-header { padding:20px 28px 16px; align-items:center; background:var(--surface); border-bottom:0; } #order-dialog .detail-header h3 { font-size:27px; font-weight:650; letter-spacing:-.025em; color:var(--ink); } #order-dialog .detail-header .eyebrow { color:var(--muted); font-size:var(--n-font-caption,12px); letter-spacing:.09em; } #detail-order-meta { margin:6px 0 0; font-size:12px; color:var(--muted); } #order-dialog .detail-header .quiet-button, #review-dialog .dialog-header .quiet-button { display:grid; place-items:center; flex:none; width:40px; height:40px; min-height:40px; padding:0; border:0; border-radius:8px; background:var(--surface-2); color:var(--muted); } #order-dialog .detail-header .quiet-button:hover, #review-dialog .dialog-header .quiet-button:hover { background:var(--surface-hover); color:#1c3657; } #order-dialog .dialog-close-icon, #review-dialog .dialog-close-icon { display:block; font-size:26px; line-height:1; } #review-dialog .dialog-close-label { display:none; } .detail-tabs { flex:none; display:flex; gap:24px; padding:0 28px; border-bottom:1px solid var(--line); background:var(--surface); } .detail-tabs .quiet-button { position:relative; min-height:45px; padding:10px 2px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--muted); font-size:14px; font-weight:500; white-space:nowrap; } .detail-tabs .quiet-button:hover { background:transparent; color:var(--accent-strong); } .detail-tabs .quiet-button[aria-selected="true"] { border-bottom-color:var(--accent-strong); color:var(--accent-strong); font-weight:650; } .detail-tab-count { margin-left:5px; font-size:var(--n-font-caption,12px); color:#748198; font-variant-numeric:tabular-nums; } #order-dialog .order-dialog-body { padding:22px 28px 28px; background:var(--surface); } .detail-tab-panel { outline-offset:-3px; } #order-dialog .order-status-overview { align-items:center; margin:0 0 18px; padding-left:14px; border-left:4px solid #a9b6c8; gap:24px; } #order-dialog .order-status-overview[data-tone="good"] { border-left-color:var(--ready); } #order-dialog .order-status-overview[data-tone="info"] { border-left-color:#34679d; } #order-dialog .order-status-overview[data-tone="warn"] { border-left-color:var(--warning); } #order-dialog .order-status-overview[data-tone="danger"] { border-left-color:var(--danger); } #order-dialog .dialog-kicker { margin:0 0 5px; font-size:var(--n-font-caption,12px); color:var(--muted); letter-spacing:.06em; } .business-state-title { margin:0; color:var(--ink); font-size:25px; line-height:1.25; font-weight:650; letter-spacing:-.025em; } #detail-business-note { margin:7px 0 0; font-size:12px; line-height:1.45; color:var(--muted); } .detail-linked-orders { flex:0 1 38%; text-align:right; } .detail-linked-orders span { display:block; margin-bottom:4px; font-size:var(--n-font-caption,12px); color:var(--muted); } .detail-linked-orders strong { display:block; font-size:15px; font-weight:600; color:#273f60; overflow-wrap:anywhere; } .detail-metrics-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:8px; } #order-dialog .badge { max-width:100%; padding:4px 7px; border-radius:4px; font-size:var(--n-font-caption,12px); font-weight:600; line-height:1.4; white-space:normal; } #order-dialog .badge.danger { color:var(--danger); background:var(--danger-bg); } .detail-metrics-heading .badge { padding:0!important; background:transparent!important; } #reconciliation-checked { margin:0; font-size:var(--n-font-caption,12px); color:#69788d; } .detail-key-facts { display:grid; grid-template-columns:1fr 1fr 1.2fr 1.5fr 1fr; gap:0; margin:0 0 18px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; } .detail-key-facts>div { min-width:0; padding:0 16px; border-left:1px solid #e3e9f2; } .detail-key-facts>div:first-child { border-left:0; padding-left:0; } .detail-key-facts>div:last-child { padding-right:0; } .detail-key-facts dt { font-size:var(--n-font-caption,12px); color:#62728a; } .detail-key-facts dd { margin:4px 0; font-size:22px; line-height:1.25; font-weight:650; color:#203550; overflow-wrap:anywhere; } .detail-key-facts small { display:block; font-size:var(--n-font-caption,12px); line-height:1.4; color:#6b788d; } .detail-key-facts .warn dd { color:#9b590b; } .detail-attention { margin-bottom:16px; padding:12px 16px; border-left:3px solid var(--warning); border-radius:0 8px 8px 0; background:var(--warning-bg); } .detail-attention>strong { color:#81520c; font-size:13px; } .detail-attention p { margin:5px 0 0; color:#6c521f; font-size:13px; line-height:1.6; } #order-dialog .text-action { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:4px 0; border:0; border-radius:0; background:transparent; color:var(--accent-strong); font-size:12px; font-weight:600; } #order-dialog .text-action:hover { color:#173d6d; text-decoration:underline; } #order-dialog .summary-card { padding:14px 16px; margin:0 0 20px; border:0; border-radius:10px; background:var(--surface-2); box-shadow:none; } .summary-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; } #order-dialog .summary-heading h4 { margin:0; font-size:13px; font-weight:650; color:#344b6a; } #order-dialog .summary-card>p { margin:7px 0 0; font-size:14px; line-height:1.65; color:#33445e; } #order-dialog .summary-card>#summary-updated { font-size:var(--n-font-caption,12px); color:#6b788d; } #order-dialog .summary-card.summary-pending>p { color:#65748a; font-size:13px; } #order-dialog .summary-card.summary-pending { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; } #order-dialog .summary-pending .summary-heading { order:1; } #order-dialog .summary-pending .summary-heading h4 { display:none; } #order-dialog .summary-card.summary-pending>p { margin:0; } #summary-updated:empty { display:none; } #order-dialog .order-reconciliation { margin:0 0 12px; } #order-dialog .reconciliation-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; } #order-dialog .reconciliation-heading h4 { margin:0; font-size:16px; color:var(--ink); } #order-dialog .reconciliation-heading .fine-print { font-size:var(--n-font-caption,12px); margin:0; } #order-dialog .customer-order-list { gap:12px; } #order-dialog .customer-orders-wrap { margin:0; } #order-dialog .customer-order-card { padding:16px 18px; border:1px solid var(--line); border-radius:12px; box-shadow:none; } #order-dialog .customer-order-card[data-tone="danger"] { border-left:3px solid var(--danger); } #order-dialog .customer-order-card[data-tone="warn"] { border-left:3px solid var(--warning); } #order-dialog .customer-order-heading h6 { font-size:20px; margin:0 0 3px; } #order-dialog .customer-order-heading .fine-print { font-size:var(--n-font-caption,12px); } #order-dialog .customer-order-amount { font-size:18px; } #order-dialog .customer-order-state { gap:5px; } #order-dialog .customer-order-meta { margin-top:10px; font-size:var(--n-font-caption,12px); } #order-dialog .customer-order-meta span:first-child { color:#334966; font-weight:600; } #order-dialog .customer-lifecycle { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:0; margin:20px -5px 14px; } #order-dialog .lifecycle-stage { padding:0 5px; } #order-dialog .lifecycle-stage:not(:first-child)::before { display:block; top:16px; height:1px; } #order-dialog .lifecycle-icon { width:32px; height:32px; margin-bottom:9px; border-radius:9px; box-shadow:0 0 0 5px var(--surface); } #order-dialog .lifecycle-icon svg { width:17px; height:17px; } #order-dialog .lifecycle-label { font-size:12px; margin:0; } #order-dialog .lifecycle-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; } #order-dialog .lifecycle-value { margin-top:5px; min-height:33px; font-size:12px; line-height:1.45; } #order-dialog .lifecycle-date { margin-top:3px; font-size:var(--n-font-caption,12px); } #order-dialog .customer-order-evidence>summary { padding-top:10px; font-size:12px; } #order-dialog .customer-order-source-state { font-size:12px; line-height:1.6; } #order-dialog .reconciliation-evidence { margin-top:12px; border-radius:8px; background:var(--surface); } #order-dialog .reconciliation-evidence>summary { padding:11px 14px; font-size:12px; } #order-dialog .technical-card { margin-top:12px; padding:0; border:0; border-top:1px solid var(--line); border-radius:0; background:var(--surface); } #order-dialog .technical-card>summary { padding:12px 0; font-size:12px; } #order-dialog .technical-card p { font-size:13px; line-height:1.6; } .detail-empty { padding:16px; margin:0; border:1px dashed #d5dfec; border-radius:8px; color:#65748a; font-size:13px; } .correspondence-context { padding:0 0 18px; border-bottom:1px solid var(--line); } .correspondence-context>p:last-child { margin:6px 0 0; font-size:14px; line-height:1.65; color:#354964; } #order-dialog .order-discrepancies { margin-top:20px; } #order-dialog .timeline-heading h4 { margin:0; color:var(--ink); font-size:16px; } #order-dialog .timeline-heading>span { font-size:var(--n-font-caption,12px); } #order-dialog .discrepancy-card { border-radius:8px; font-size:14px; line-height:1.6; } #order-dialog .discrepancy-card h5 { color:#3b4e68; font-size:14px; } #order-dialog .discrepancy-card .meta { font-size:var(--n-font-caption,12px); } #order-dialog .questions { margin-top:18px; padding:14px 16px; border-radius:8px; background:var(--warning-bg); font-size:14px; } #order-dialog .questions h4 { font-size:14px; color:#5d4926; } #order-dialog .questions>summary { color:#6c5126; font-size:13px; font-weight:600; cursor:pointer; } #open-question-count { margin-left:6px; color:#92713c; font-size:var(--n-font-caption,12px); } #order-dialog .questions[open]>ul { margin-top:12px; } #order-dialog .questions li { margin-top:6px; line-height:1.55; } #order-dialog .timeline { margin-top:18px; } #order-dialog .timeline>li { border-left-width:1px; padding-left:20px; padding-bottom:24px; } #order-dialog .timeline>li::before { width:8px; height:8px; left:-4.5px; top:6px; background:#52779d; box-shadow:0 0 0 4px var(--surface); } #order-dialog .timeline time { font-size:var(--n-font-caption,12px); color:#6b7b92; } #order-dialog .timeline-event-heading { margin:5px 0 7px; } #order-dialog .timeline-event-heading strong { font-size:15px; color:#2a405e; } #order-dialog .timeline-summary { font-size:14px; line-height:1.65; color:#364963; max-width:none; } #order-dialog .timeline .meta { margin-top:8px; font-size:var(--n-font-caption,12px); } #order-dialog .timeline-evidence { border-radius:8px; font-size:13px; line-height:1.6; } #order-dialog .timeline-evidence>summary { font-size:12px; } #order-dialog .order-characteristics { margin-top:0; } #order-dialog .order-positions { gap:14px; margin-top:18px; } #order-dialog .order-position { padding:16px 18px; border-radius:10px; border-color:var(--line); } .position-heading { display:flex; align-items:baseline; gap:12px; } .position-number { color:#7990ae; font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; } #order-dialog .order-position h5 { color:var(--ink); font-size:16px; line-height:1.5; } #order-dialog .attribute-list dt { color:var(--muted); font-size:12px; } #order-dialog .attribute-list dd { color:#2b3d56; font-size:14px; font-weight:500; } #order-dialog .order-shared-wrap { margin-top:16px; border-radius:10px; background:var(--surface-2); } #review-dialog { border-radius:20px; } #review-dialog .dialog-header { padding:20px 24px; align-items:center; } #review-dialog .dialog-header h2 { font-size:24px; color:var(--ink); } #review-evidence { background:var(--surface); } #review-evidence>p { font-size:14px; line-height:1.65; color:#394c67; } #review-evidence .sample-warning { border-left:3px solid var(--warning); border-radius:0 8px 8px 0; color:var(--warning); background:var(--warning-bg); } #review-evidence details { padding:10px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.6; } #review-evidence summary { color:var(--accent-strong); font-weight:600; cursor:pointer; } .review-check-note { margin:16px 0; padding:12px 14px; border-left:3px solid #7392ba; background:#f3f7fc; border-radius:0 8px 8px 0; } .review-check-note h4 { margin:0 0 6px; color:#334e73; font-size:13px; } #review-evidence .review-check-note p { margin:0; color:#455b78; } #review-body-details p { margin:10px 0 0; font-size:13px; line-height:1.65; } .review-decision-fields { background:var(--surface-2); } .review-decision-fields h3 { color:#2d4362; } #review-dialog label { color:#40516b; font-size:13px; font-weight:600; } #review-dialog select, #review-dialog textarea { border-radius:8px; border-color:var(--n-control-border); background:var(--surface); font-size:14px; } @media(max-width:760px) { #order-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:16px; } #order-dialog .detail-header { padding:16px 16px 12px; gap:10px; } #order-dialog .detail-header h3 { font-size:21px; } #detail-order-meta { font-size:var(--n-font-caption,12px); } .detail-tabs { gap:16px; padding:0 16px; } .detail-tabs .quiet-button { min-height:44px; font-size:12px; } .detail-tab-count { margin-left:2px; font-size:var(--n-font-caption,12px); } #order-dialog .order-dialog-body { padding:18px 16px 24px; } #order-dialog .order-status-overview { flex-direction:column; align-items:start; gap:12px; padding-left:10px; } .business-state-title { font-size:23px; } .detail-linked-orders { flex:auto; text-align:left; } .detail-linked-orders span, .detail-linked-orders strong { display:inline; } .detail-linked-orders span { margin-right:6px; } .detail-linked-orders strong { font-size:13px; } .detail-metrics-heading { align-items:start; gap:6px; } #reconciliation-checked { text-align:right; font-size:var(--n-font-caption,12px); } .detail-key-facts { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:14px; padding:12px 0; } .detail-key-facts>div { padding:0 9px; } .detail-key-facts>div:nth-child(4) { grid-column:1/3; border-left:0; padding-left:0; } .detail-key-facts dt { font-size:var(--n-font-caption,12px); } .detail-key-facts dd { font-size:20px; } .detail-key-facts small { font-size:var(--n-font-caption,12px); } #order-dialog .summary-card { padding:12px; } #order-dialog .reconciliation-heading { align-items:start; } #order-dialog .reconciliation-heading h4 { font-size:15px; } #order-dialog .reconciliation-heading .fine-print { max-width:100px; text-align:right; font-size:var(--n-font-caption,12px); } #order-dialog .customer-order-card { padding:14px 12px; border-radius:10px; } #order-dialog .customer-order-heading h6 { font-size:18px; } #order-dialog .customer-order-amount { font-size:16px; } #order-dialog .customer-lifecycle { display:block; margin:18px 0 4px; } #order-dialog .lifecycle-stage { display:grid; grid-template-columns:30px 1fr auto; grid-template-rows:auto auto; column-gap:10px; text-align:left; padding:0 0 14px; } #order-dialog .lifecycle-stage:not(:first-child)::before { top:-15px; bottom:0; left:15px; width:1px; height:auto; } #order-dialog .lifecycle-icon { width:30px; height:30px; grid-column:1; grid-row:1/3; margin:0; border-radius:8px; box-shadow:0 0 0 3px var(--surface); } #order-dialog .lifecycle-label { grid-column:2; grid-row:1; font-size:12px; } #order-dialog .lifecycle-value { grid-column:2; grid-row:2; min-height:0; margin-top:2px; font-size:12px; } #order-dialog .lifecycle-date { grid-column:3; grid-row:1/3; align-self:center; font-size:var(--n-font-caption,12px); } #order-dialog .application-detail-facts { grid-template-columns:repeat(2,minmax(0,1fr)); } #order-dialog .order-position { padding:14px; } #review-dialog { border-radius:16px; } #review-dialog .dialog-header h2 { font-size:21px; } } /* Review queue uses the same hierarchy, table treatment and shared filter as orders. */ #panel-review .kpis { grid-template-columns:repeat(5,minmax(0,1fr)); gap:0; margin:0 0 8px; padding:4px 0; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); } #panel-review .kpi { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:42px; padding:4px 14px; border:0; border-radius:0; background:none; box-shadow:none; } #panel-review .kpi + .kpi { border-left:1px solid var(--line); } #panel-review .kpi span { font-size:12px; line-height:1.35; } #panel-review .kpi strong { flex:none; margin:0; color:var(--ink); font-size:20px; font-variant-numeric:tabular-nums; } #panel-review .report-notes { margin:0; } #review-table { table-layout:fixed; min-width:1240px; color:var(--ink); font-variant-numeric:tabular-nums; } #review-table col:nth-child(1) { width:9%!important; } #review-table col:nth-child(2) { width:21%!important; } #review-table col:nth-child(3) { width:15%!important; } #review-table col:nth-child(4) { width:8%!important; } #review-table col:nth-child(5) { width:23%!important; } #review-table col:nth-child(6) { width:9%!important; } #review-table col:nth-child(7) { width:8%!important; } #review-table col:nth-child(8) { width:7%!important; } #review-table tbody td:first-child { border-left:3px solid transparent; } #review-table tbody tr[data-attention="unread"] td:first-child, #review-table tbody tr[data-attention="test"] td:first-child { border-left-color:var(--warning); } #review-table .review-date-cell span { display:block; color:#314765; font-size:12px; white-space:nowrap; } #review-table .review-date-cell small { display:block; margin-top:3px; color:var(--muted); font-size:var(--n-font-caption,12px); } #review-table .mono { color:var(--ink); font-size:13px; font-weight:650; } #review-table .review-mail-link { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; overflow-wrap:anywhere; color:var(--accent-strong); font-size:13px; font-weight:600; line-height:1.45; text-decoration:none; } #review-table .review-mail-link:hover { text-decoration:underline; } #review-table .review-mail-link:focus-visible { outline:2px solid var(--accent-strong); outline-offset:3px; border-radius:2px; } #review-table .review-mail-id { display:block; margin-top:4px; color:var(--muted); font-size:11px; font-weight:400; } #review-table .review-reason-label { color:#344c6e; font-size:12px; font-weight:600; } #review-table .review-file-counts .order-metric { display:flex; align-items:baseline; justify-content:space-between; gap:6px; margin-bottom:3px; } #review-table .order-metric-label { color:var(--muted); font-size:var(--n-font-caption,12px); } #review-table .order-metric strong { color:#1b304c; font-size:14px; font-weight:600; } #review-table .digest { min-width:0; max-width:none; color:#334762; font-size:13px; line-height:1.55; } #review-table .badge { white-space:normal; } #review-table .row-detail-button { margin:0; white-space:nowrap; } #review-table tbody td:nth-child(6) { color:#273f60; font-weight:600; } #panel-review .review-actions { margin-top:16px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); } #panel-review .review-actions[hidden] { display:none!important; } #panel-review .review-actions strong { font-size:14px; color:#2b405d; } #panel-review .review-actions p { font-size:12px; } .neuffer-filter-shell #review-search { min-height:42px; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:14px; } /* A single scrolling area keeps the review title, tabs and next action in view. */ #review-dialog { max-width:1160px; width:calc(100% - 64px); height:min(900px,calc(100dvh - 64px)); max-height:calc(100dvh - 64px); background:var(--surface); color:var(--ink); } #review-dialog [hidden] { display:none!important; } #review-dialog .dialog-header { padding:20px 28px 16px; border-bottom:0; } #review-dialog .dialog-header h2 { font-size:27px; font-weight:650; letter-spacing:-.025em; color:var(--ink); } #review-dialog .dialog-kicker { margin:0 0 5px; font-size:var(--n-font-caption,12px); color:var(--muted); letter-spacing:.06em; } #review-dialog #dialog-message { margin:6px 0 0; font-size:12px; color:var(--muted); } #review-dialog .review-dialog-grid { display:block; padding:22px 28px 28px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-gutter:stable; } .review-tab-panel { outline-offset:-3px; } .review-status-overview { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 18px; padding-left:14px; border-left:4px solid var(--warning); } #review-reason { margin:0; color:var(--ink); font-size:24px; line-height:1.3; font-weight:650; letter-spacing:-.025em; } .review-current-decision { flex:none; max-width:28%; text-align:right; } .review-current-decision>span { display:block; margin-bottom:5px; color:var(--muted); font-size:var(--n-font-caption,12px); } #review-dialog .badge { padding:4px 7px; border-radius:4px; border:0; font-size:12px; font-weight:600; line-height:1.4; white-space:normal; } #review-key-facts { grid-template-columns:.7fr .7fr 1.4fr 1.2fr; } #review-key-facts dd { font-size:24px; } #review-alerts .sample-warning { margin:0 0 12px; padding:11px 14px; border-left:3px solid var(--warning); border-radius:0 8px 8px 0; color:var(--warning); background:var(--warning-bg); font-size:13px; line-height:1.6; } #review-dialog .review-check-note { margin:0 0 16px; } #review-dialog .review-check-note p { margin:0; color:#455b78; font-size:14px; line-height:1.65; } #review-evidence { margin:0 0 12px; padding:14px 16px; border:0; border-radius:10px; background:var(--surface-2); overflow:visible; scrollbar-gutter:auto; } #review-evidence h3 { margin:0 0 7px; font-size:13px; color:#344b6a; } #review-evidence p { margin:7px 0 0; color:#33445e; font-size:14px; line-height:1.65; } #review-dialog #review-coverage { margin:0 0 14px; font-size:var(--n-font-caption,12px); color:#62728a; } #review-body-details, .review-source-details { padding:11px 0; border-top:1px solid var(--line); font-size:13px; } #review-body-details summary, .review-source-details summary { width:fit-content; color:var(--accent-strong); font-weight:600; cursor:pointer; } #review-source-meta { overflow-wrap:anywhere; } .review-files-note, .review-decision-context { margin:0 0 18px; color:var(--muted); font-size:13px; line-height:1.55; } #review-panel-attachments h3 { margin:0 0 12px; color:var(--ink); font-size:16px; } #review-unread-details { margin-bottom:24px; } .review-unread-table { border-collapse:collapse; background:var(--surface); font-size:13px; } .review-unread-table th, .review-unread-table td { padding:9px 12px; border-bottom:1px solid var(--line); text-align:left; } .review-unread-table th { background:#eef3fa; color:#425979; font-size:12px; } .review-unread-table td:nth-child(-n+2) { white-space:nowrap; } .review-file-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } .review-file-card { min-width:0; padding:16px 18px; border:1px solid var(--line); border-radius:10px; } .review-file-card h4 { margin:0 0 8px; color:var(--ink); font-size:15px; } .review-file-card p { margin:0; color:#364963; font-size:14px; line-height:1.65; overflow-wrap:anywhere; } #review-dialog .review-decision-fields { max-width:800px; padding:20px; border:1px solid var(--line); border-radius:10px; background:var(--surface-2); overflow:visible; } #review-dialog .review-decision-fields h3 { font-size:17px; color:var(--ink); } #review-dialog textarea { min-height:150px; } #review-dialog .dialog-actions { align-items:center; justify-content:space-between; padding:14px 28px; gap:16px; } #review-dialog .dialog-actions>div { display:flex; gap:9px; } #review-dialog .dialog-actions>.fine-print { color:#66768e; font-size:var(--n-font-caption,12px); } #review-dialog .dialog-actions button { min-height:44px; padding:9px 14px; border-radius:7px; font-size:13px; font-weight:600; white-space:nowrap; flex:none; } @media(max-width:1100px) { #panel-review .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); } #panel-review .kpi:nth-child(4) { border-left:0; } #panel-review .kpi:nth-child(n+4) { border-top:1px solid var(--line); } } @media(max-width:760px) { #panel-review { padding:14px 12px; } #panel-review .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } #panel-review .kpi { min-height:40px; padding:5px 9px; gap:6px; } #panel-review .kpi span { font-size:var(--n-font-caption,12px); } #panel-review .kpi strong { font-size:18px; } #panel-review .kpi:nth-child(odd) { border-left:0; } #panel-review .kpi:nth-child(even) { border-left:1px solid var(--line); } #panel-review .kpi:nth-child(n+3) { border-top:1px solid var(--line); } #panel-review .kpi:last-child { grid-column:1/-1; } #review-dialog { width:calc(100% - 16px); height:calc(100dvh - 16px); max-height:calc(100dvh - 16px); border-radius:16px; } #review-dialog .dialog-header { padding:16px 16px 12px; gap:10px; } #review-dialog .dialog-header h2 { font-size:21px; } #review-dialog .review-dialog-grid { padding:18px 16px 24px; scrollbar-gutter:auto; } .review-status-overview { flex-direction:column; align-items:start; gap:12px; padding-left:10px; } #review-reason { font-size:21px; } .review-current-decision { max-width:100%; text-align:left; } .review-current-decision>span { display:inline; margin-right:6px; } #review-decision-status { display:inline; } #review-key-facts { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:14px; } #review-key-facts>div:nth-child(3) { border-left:0; padding-left:0; } #review-key-facts>div:nth-child(4) { grid-column:auto; border-left:1px solid #e3e9f2; padding-left:9px; } #review-key-facts dd { font-size:21px; } .review-file-cards { grid-template-columns:minmax(0,1fr); } .review-file-card { padding:14px; } .review-unread-table th, .review-unread-table td { padding:8px 9px; } #review-dialog .review-decision-fields { padding:14px; } #review-dialog .dialog-actions { padding:12px 16px; justify-content:flex-end; } #review-dialog .dialog-actions>.fine-print { display:none; } } /* The board shares the table population and keeps each customer state explicit. */ .orders-view-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; margin:8px 0 12px; } .orders-view-switch { display:flex; flex:none; gap:2px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--ink); } .orders-view-switch .quiet-button { min-height:30px; padding:5px 12px; border:0; border-radius:6px; color:#576982; background:transparent; font-size:12px; font-weight:600; line-height:1.4; } .orders-view-switch .quiet-button[aria-pressed="true"] { color:#213b5e; background:var(--surface); box-shadow:0 1px 4px #253b5d1a; } .orders-view-switch .quiet-button:hover { color:#244a7d; background:#ffffffa1; } #orders-table-view[hidden], #orders-kanban-view[hidden] { display:none!important; } .kanban-context { flex:1 1 280px; min-width:0; margin:0; color:#596c86; font-size:12px; } .kanban-scroll-shell { position:relative; } .kanban-scroll-button.quiet-button { position:absolute; z-index:2; top:50%; transform:translateY(-50%); display:grid; place-items:center; width:40px; min-height:52px; padding:0; border:1px solid #a8bcd0; border-radius:8px; background:#fffffff5; color:#285d83; box-shadow:0 3px 14px #29405b26; font-size:32px; line-height:1; } .kanban-scroll-button.quiet-button:hover { border-color:#6e9abb; background:var(--surface); color:#145d89; } .kanban-scroll-button[hidden] { display:none!important; } .kanban-scroll-button:disabled { opacity:.35; box-shadow:none; } #kanban-scroll-left { left:-12px; } #kanban-scroll-right { right:-12px; } .orders-kanban { display:flex; gap:10px; min-width:0; align-items:stretch; overflow-x:auto; padding:12px 12px 14px; border:1px solid #e2e8ed; border-radius:6px; background:#edf2f5; scrollbar-color:#aebdd0 var(--ink); } .orders-kanban:focus-visible, .kanban-column-list:focus-visible { outline:2px solid var(--accent-strong); outline-offset:-2px; } .kanban-column { --stage-bg:#d9e3ec; --stage-ink:#304452; flex:0 0 280px; min-width:0; background:transparent; } .kanban-column[data-tone="danger"] { --stage-bg:#f9a6b5; --stage-ink:#641c31; } .kanban-column[data-tone="warn"] { --stage-bg:#ffe393; --stage-ink:#634610; } .kanban-column[data-tone="info"] { --stage-bg:#abe3f4; --stage-ink:#194d64; } .kanban-column[data-tone="good"] { --stage-bg:#8ddbd0; --stage-ink:#174e49; } .kanban-column[data-state="000000021"] { --stage-bg:#ffe3a3; --stage-ink:#62460e; } .kanban-column[data-state="000000002"] { --stage-bg:#91c9f0; --stage-ink:#194363; } .kanban-column[data-state="production"] { --stage-bg:#c7c2f7; --stage-ink:#433c7b; } .kanban-column[data-state="ready"] { --stage-bg:#b6e99d; --stage-ink:#30552a; } .kanban-column[data-state="realized"] { --stage-bg:#74d4a1; --stage-ink:#1b4d37; } .kanban-column-heading { display:flex; align-items:center; gap:6px; min-height:48px; padding:8px 22px; background:var(--stage-bg); color:var(--stage-ink); } .kanban-column-heading h3 { margin:0; color:inherit; font-size:13px; line-height:1.35; font-weight:650; overflow-wrap:anywhere; } .kanban-column-count { flex:none; color:inherit; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; } .kanban-column-count::before { content:"("; } .kanban-column-count::after { content:")"; } .kanban-column-summary { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px; min-height:51px; padding:7px 12px 0; font-variant-numeric:tabular-nums; } .kanban-column-amount { max-width:100%; padding:2px 8px; border-radius:4px; background:#ffffffb3; color:#304a66; font-size:16px; font-weight:650; line-height:1.4; overflow-wrap:anywhere; text-align:center; } .kanban-column-missing { color:#617188; font-size:var(--n-font-caption,12px); line-height:1.4; } .kanban-column-list { list-style:none; margin:0; padding:12px 3px 3px; min-height:220px; max-height:min(64dvh,640px); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; scrollbar-width:thin; } .kanban-card { margin:0 0 10px; padding:11px 12px; border:1px solid #e0e7ed; border-radius:4px; background:var(--surface); box-shadow:0 2px 5px #263d5210; font-variant-numeric:tabular-nums; } .kanban-card:hover { border-color:#aacbdd; box-shadow:0 2px 6px #263d5220; } .kanban-card:last-child { margin-bottom:0; } .kanban-card .kanban-card-open { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:26px; padding:0; border:0; border-radius:2px; background:transparent; color:#146b94; text-align:left; } .kanban-card-open strong { font-size:18px; font-weight:600; letter-spacing:-.015em; } .kanban-card-open .kanban-card-arrow { color:#6d89ab; font-size:19px; line-height:1; } .kanban-card .kanban-card-open:hover { color:#145dac; background:#f2f6fc; } .kanban-card-date { margin:0 0 9px; color:#65758d; font-size:var(--n-font-caption,12px); } .kanban-customer-refs>span { display:block; margin:0 0 4px; color:#64748b; font-size:var(--n-font-caption,12px); } .kanban-customer-refs>div { display:flex; flex-wrap:wrap; gap:2px 10px; } .kanban-customer-refs strong { color:#263e5c; font:600 13px/1.5 Consolas,monospace; overflow-wrap:anywhere; } .kanban-quantities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:10px 0; padding:8px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .kanban-quantities.by-application { grid-template-columns:repeat(2,minmax(0,1fr)); } .kanban-quantities>div { min-width:0; padding:0 7px; border-left:1px solid #e4eaf2; } .kanban-quantities>div:first-child { padding-left:0; border-left:0; } .kanban-quantities dt { color:#63758f; font-size:var(--n-font-caption,12px); white-space:nowrap; } .kanban-quantities dd { margin:2px 0 0; color:#263d5b; font-size:16px; font-weight:650; line-height:1.25; } .kanban-card-amount { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 10px; } .kanban-card-amount>span { color:#63758f; font-size:var(--n-font-caption,12px); flex:none; } .kanban-card-amount>strong { color:#263d5b; font-size:17px; font-weight:650; text-align:right; overflow-wrap:anywhere; } .kanban-card .badge { display:block; width:fit-content; max-width:100%; padding:4px 7px; border:0; border-radius:4px; white-space:normal; line-height:1.4; font-size:var(--n-font-caption,12px); font-weight:600; } #orders-kanban .kanban-card-date { display:flex; align-items:center; gap:5px; } #orders-kanban .kanban-card-attention { display:inline-flex; align-items:center; justify-content:center; flex:none; width:22px; height:22px; min-height:0; padding:0; border:1px solid var(--n-warning-bg); border-radius:7px; color:var(--n-warning); background:var(--n-warning-bg); } #orders-kanban .kanban-card-attention[data-kind=notification] { color:var(--n-info); background:var(--n-info-bg); border-color:var(--n-info-bg); } #orders-kanban .kanban-card-attention:hover { filter:brightness(.97); } #orders-kanban .kanban-card-attention svg { width:15px; height:15px; } .kanban-state-note { margin:6px 0 0; color:#7a5c2c; font-size:var(--n-font-caption,12px); } .kanban-card-latest { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:2px 7px; margin:9px 0 0; padding-top:8px; border-top:1px solid var(--line); font-size:var(--n-font-caption,12px); line-height:1.4; } .kanban-card-latest>span { color:#6a7a91; } .kanban-card-latest time { color:#415a7a; } .kanban-empty { width:100%; margin:0; padding:32px 16px; border:1px dashed #cfdae9; border-radius:10px; background:var(--surface-2); color:#536987; font-size:14px; text-align:center; } .order-routes { display:grid; gap:7px; } .route-entry { padding:7px 9px; border-left:2px solid #7c96b7; border-radius:3px; background:#edf2f8; } .route-entry-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; } .route-entry-heading>strong { color:#243f61; font-size:12px; font-weight:650; } .route-state { color:#526580; font-size:var(--n-font-caption,12px); line-height:1.4; } .route-entry[data-state-code="000000003"] { border-left-color:#3976b5; background:#eaf2fc; } .route-entry[data-state-code="000000003"] .route-state { color:#215d98; font-weight:600; } .route-entry[data-state-code="000000004"] { border-left-color:#438362; background:#edf5ef; } .route-entry[data-state-code="000000004"] .route-state { color:#326c4d; } .route-departure { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 8px; margin-top:3px; } .route-departure>span,.route-empty { color:var(--muted); font-size:var(--n-font-caption,12px); font-weight:400; } .route-departure time { color:#253d5b; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; } .route-order-nos { display:block; margin-top:3px; color:#5c6d84; font-size:var(--n-font-caption,12px); line-height:1.5; overflow-wrap:anywhere; } .route-section-label { display:block; margin-bottom:5px; color:#62748c; font-size:var(--n-font-caption,12px); font-weight:500; } .kanban-route-section { margin-top:10px; } .kanban-route-section .route-entry { padding:6px 8px; } .customer-order-routes { margin:10px 0 14px; } .customer-order-routes .order-routes { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); } .kanban-column[data-state="route:000000007"], .kanban-column[data-state="route:000000005"] { --stage-bg:#e1e6ed; --stage-ink:#34465d; } .kanban-column[data-state="route:000000006"] { --stage-bg:#b9d3f4; --stage-ink:#234568; } .kanban-column[data-state="route:000000001"] { --stage-bg:#ffe2a3; --stage-ink:#674810; } .kanban-column[data-state="route:000000002"] { --stage-bg:#c6c1f3; --stage-ink:#413b76; } .kanban-column[data-state="route:000000003"] { --stage-bg:#9adbe6; --stage-ink:#1c4f5c; } .kanban-column[data-state="route:000000004"] { --stage-bg:#a7ddbd; --stage-ink:#245a3c; } .route-kanban-card { padding:12px; border-radius:10px; } .route-card-icon { display:block; width:18px; height:18px; flex:none; } .route-card-identity { display:flex; align-items:center; gap:9px; min-width:0; } .route-card-header { display:flex; align-items:center; gap:8px; padding-bottom:9px; border-bottom:1px solid var(--line); } .route-card-header .route-card-open { flex:1; min-width:0; border-radius:4px; } .route-card-open strong { font-size:18px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; } .route-card-open>.route-card-icon { width:16px; height:16px; } .route-card-departure { display:flex; justify-content:space-between; align-items:center; gap:8px; margin:10px 0 10px; } .route-card-departure>span { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:var(--n-font-caption,12px); } .route-card-departure .route-card-icon { width:14px; height:14px; } .route-card-departure>strong { color:var(--ink); font-size:14px; font-weight:650; white-space:nowrap; font-variant-numeric:tabular-nums; } .route-card-section-label { margin:0 0 6px; color:var(--muted); font-size:var(--n-font-caption,12px); } .route-card-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 11px; } .route-card-metrics>div { padding:9px 10px; background:#f0f4fa; border-radius:7px; } .route-card-metrics dt { color:#536780; font-size:var(--n-font-caption,12px); line-height:1.4; } .route-card-metrics dd { margin:3px 0 0; color:var(--ink); font-size:23px; font-weight:650; line-height:1.2; font-variant-numeric:tabular-nums; } .route-card-amount { margin:0; padding-top:12px; border-top:1px solid var(--line); gap:10px; } .route-card-amount>strong { font-size:16px; line-height:1.3; text-align:right; font-variant-numeric:tabular-nums; } .route-card-scope { margin:3px 0 12px; color:var(--muted); font-size:var(--n-font-caption,12px); line-height:1.4; } .route-card-meter { margin:0 0 10px; --meter-fill:#4179b5; } .route-card-meter[data-kind="readiness"] { --meter-fill:#398061; } .route-card-meter[data-overloaded="true"] { --meter-fill:#a16817; } .route-meter-heading { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:6px; line-height:1.3; } .route-meter-heading>span { color:var(--ink); font-size:12px; font-weight:500; } .route-meter-heading>strong { color:var(--ink); font-size:14px; font-weight:650; font-variant-numeric:tabular-nums; } .route-card-meter[data-overloaded="true"] .route-meter-heading>strong { color:#8e5c10; } .route-meter-track { display:block; appearance:none; width:100%; height:7px; border:0; border-radius:4px; overflow:hidden; background:var(--line); } .route-meter-track::-webkit-progress-bar { background:var(--line); border-radius:4px; } .route-meter-track::-webkit-progress-value { background:var(--meter-fill); border-radius:4px; } .route-meter-track::-moz-progress-bar { background:var(--meter-fill); border-radius:4px; } .route-card-meter[data-known="false"] .route-meter-track { background:repeating-linear-gradient(135deg,var(--line) 0 5px,var(--surface-2) 5px 10px); } .route-card-meter>small { display:block; margin-top:5px; color:var(--muted); font-size:var(--n-font-caption,12px); line-height:1.45; } .route-card-meter:last-child { margin-bottom:0; } .route-card-menu { position:relative; flex:none; } .route-card-menu>summary { display:grid; place-items:center; width:32px; height:32px; border-radius:6px; color:var(--muted); font-size:24px; line-height:1; list-style:none; cursor:pointer; } .route-card-menu>summary::-webkit-details-marker { display:none; } .route-card-menu>summary:hover,.route-card-menu[open]>summary { color:var(--ink); background:#edf3fc; } .route-card-menu-content { position:absolute; z-index:2; right:0; top:calc(100% + 5px); width:190px; padding:4px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 6px 20px #263d5226; } .route-card-menu-content .route-card-filter { display:flex; align-items:center; gap:8px; width:100%; min-height:36px; padding:8px 9px; border:0; border-radius:5px; background:transparent; color:var(--ink); text-align:left; font-size:12px; } .route-card-menu-content .route-card-filter:hover { background:#edf3fc; } .route-card-menu>summary:focus-visible,.route-card-filter:focus-visible,.route-card-open:focus-visible { outline:2px solid #4779b8; outline-offset:3px; } @media (max-width:760px) { .route-card-menu>summary { width:44px; height:44px; } .route-card-menu-content .route-card-filter { min-height:44px; } } #route-dialog { padding:0; width:calc(100% - 64px); max-width:1040px; height:min(850px,calc(100dvh - 64px)); max-height:calc(100dvh - 64px); overflow:hidden; border:0; border-radius:20px; background:var(--surface); color:var(--ink); box-shadow:0 24px 70px #172f4b66; } #route-dialog [hidden] { display:none!important; } #route-dialog::backdrop { background:#20304d66; backdrop-filter:blur(6px); } @media(prefers-reduced-transparency:reduce) { #route-dialog::backdrop { backdrop-filter:none; } } #route-facts { grid-template-columns:1fr 1fr 1.6fr; margin-top:18px; } .route-detail { display:flex; flex-direction:column; height:100%; min-height:0; } #route-dialog .dialog-header { align-items:center; padding:22px 28px 18px; border-bottom:1px solid #e4eaf3; } #route-dialog .dialog-header h2 { color:var(--ink); font-size:25px; font-weight:650; letter-spacing:-.025em; } #route-dialog .dialog-header .dialog-kicker { font-size:var(--n-font-caption,12px); } #route-dialog .dialog-header .fine-print { margin:5px 0 0; } .route-dialog-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:22px 28px 28px; } .route-overview { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:14px 18px; border-left:3px solid #587faf; border-radius:0 10px 10px 0; background:#f2f6fc; } .route-overview span { display:block; color:#64758b; font-size:var(--n-font-caption,12px); } .route-overview h3 { margin:3px 0 0; color:#244369; font-size:21px; font-weight:650; } .route-overview strong { display:block; margin-top:3px; color:#213650; font-size:21px; font-weight:650; } #route-dialog[data-state="000000004"] .route-overview { border-left-color:#398661; background:#edf7f1; } .route-buyers-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 0 12px; } .route-buyers-heading h3 { margin:0; color:#273f60; font-size:16px; font-weight:650; } .route-buyers-heading p { margin:0; color:var(--muted); font-size:var(--n-font-caption,12px); } .route-buyer-filter { display:grid; grid-template-columns:1fr 1fr; gap:14px; } .route-buyer-filter label { display:grid; gap:5px; font-size:var(--n-font-caption,12px); font-weight:500; color:#62748b; } .route-buyer-filter input,.route-buyer-filter select { width:100%; min-width:0; height:36px; padding:7px 10px; border:1px solid #cfdaea; border-radius:6px; font:inherit; font-size:13px; color:#2b4263; background:var(--surface-2); } .route-buyer-count { margin:10px 0; font-size:var(--n-font-caption,12px); color:#65768d; } .route-buyers-table-wrap { overflow-x:auto; overscroll-behavior-x:contain; border:1px solid #dce5f1; border-radius:8px; } .route-buyers-table { width:100%; min-width:820px; border-collapse:collapse; text-align:left; font-size:13px; font-variant-numeric:tabular-nums; } .route-buyers-table th,.route-buyers-table td { padding:12px 14px; border-bottom:1px solid #e4eaf3; vertical-align:middle; } .route-buyers-table thead th { background:#f0f4fa; color:#52647c; font-size:var(--n-font-caption,12px); font-weight:600; white-space:nowrap; } .route-buyers-table tbody th { color:#203b5e; font-size:14px; font-weight:650; white-space:nowrap; } .route-buyers-table tbody td { color:#30445f; } .route-buyers-table tbody tr:nth-child(even) { background:var(--surface-2); } .route-buyers-table tbody tr:hover { background:#edf4fc; } .route-buyers-table tbody tr:last-child>* { border-bottom:0; } .route-buyers-table .badge { white-space:normal; } .route-buyers-table .route-buyer-date { white-space:nowrap; color:#62748b; font-size:12px; } .route-buyers-table .route-buyer-quantity,.route-buyers-table .route-buyer-amount { text-align:right; white-space:nowrap; } .route-buyers-table td.route-buyer-amount { font-weight:600; color:#203b5e; } .route-neuffer-links { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; } .route-neuffer-links .quiet-button { padding:3px 0; min-height:30px; border:0; border-radius:0; background:transparent; color:#285d93; font-size:12px; font-weight:600; } .route-neuffer-links .quiet-button:hover { text-decoration:underline; } .route-scope-note { margin:18px 0 0; color:var(--muted); font-size:var(--n-font-caption,12px); line-height:1.6; } .topbar-inner { grid-template-columns:auto auto minmax(180px,1fr) auto; } .report-language { display:flex; align-items:center; justify-self:end; gap:5px; margin:0; } .report-language select { width:62px; min-height:34px; padding:5px 6px; border:1px solid var(--n-control-border); border-radius:6px; background:#425b7b; color:var(--surface); font:inherit; font-size:12px; cursor:pointer; } .report-language option { color:var(--ink); background:var(--surface); } .dialog-language { width:64px; min-height:34px; margin-left:auto; padding:5px 7px; border:1px solid #d5deec; border-radius:6px; background:var(--surface-2); color:#375277; font:inherit; font-size:12px; cursor:pointer; } .translation-notice { padding:10px 14px; margin:8px 0 14px; border-left:3px solid #d39c3d; background:#fff6e4; color:#745015; font-size:13px; } html[lang="de"] .topbar-inner { gap:12px; } html[lang="de"] .tabs .tab { padding-left:12px; padding-right:12px; } html[lang="de"] .kanban-column { flex-basis:300px; } @media(max-width:1000px) { .topbar-inner { grid-template-columns:minmax(0,1fr) auto auto; } .topbar .home-link { grid-column:1; grid-row:1; } .topbar .tabs { grid-column:2; grid-row:1; } .report-language { grid-column:3; grid-row:1; } .header-order-filter { grid-column:1/-1; grid-row:2; } } @media(max-width:600px) { .topbar-inner { grid-template-columns:minmax(0,1fr) auto; } .report-language { grid-column:2; grid-row:1; } .topbar .tabs { grid-column:1/-1; grid-row:2; } .topbar .tab { min-width:0; white-space:normal; line-height:1.3; } .header-order-filter { grid-row:3; } } @media(max-width:760px) { #route-dialog { width:calc(100% - 20px); height:calc(100dvh - 28px); max-height:calc(100dvh - 28px); border-radius:14px; } #route-dialog .dialog-header { padding:16px; gap:12px; } #route-dialog .dialog-header h2 { font-size:21px; } .route-dialog-body { padding:16px; } .route-overview { gap:14px; padding:12px; } .route-overview h3,.route-overview strong { font-size:17px; } .route-buyers-heading { align-items:flex-start; flex-direction:column; gap:4px; } .route-buyer-filter { grid-template-columns:1fr; } #route-facts { grid-template-columns:1fr 1fr; gap:12px; } #route-facts>div:last-child { grid-column:1/-1; border-left:0; padding-left:0; } } @media(max-width:760px) { #panel-orders .orders-heading { flex-wrap:wrap; } .orders-view-switch .quiet-button { min-height:38px; padding:7px 13px; font-size:13px; } .kanban-context { font-size:var(--n-font-caption,12px); line-height:1.5; } .orders-kanban { gap:10px; scroll-snap-type:x proximity; } .kanban-column { flex-basis:min(290px,calc(100vw - 68px)); scroll-snap-align:start; } .kanban-column-list { max-height:62dvh; padding:10px 3px 3px; } .kanban-card .kanban-card-open { min-height:38px; } .kanban-scroll-button.quiet-button { display:none; } } /* Funnel filters and confirmed production progress. */ #orders-table col:nth-child(1) { width:16%!important; } #orders-table { min-width:1500px; } #orders-table .order-country { font-size:12px; font-weight:500; } #orders-header-filter>[hidden] { display:none!important; } .readiness-progress { margin:12px 0; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .readiness-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:12px; color:var(--muted); } .readiness-heading strong { color:var(--ink); font-size:17px; } .readiness-progress progress { display:block; appearance:none; width:100%; height:6px; margin:9px 0; border:0; border-radius:3px; overflow:hidden; background:#e1e8f1; color:#33836c; } .readiness-progress progress::-webkit-progress-bar { background:#e1e8f1; } .readiness-progress progress::-webkit-progress-value { background:#33836c; } .readiness-progress progress::-moz-progress-bar { background:#33836c; } .readiness-progress p { margin:5px 0 0; font-size:12px; } .readiness-progress small,.kanban-country { color:var(--muted); font-size:var(--n-font-caption,12px); } .readiness-checked { display:block; margin-top:6px; } .application-branches { display:grid; gap:8px; min-width:0; font-size:12px; font-weight:400; line-height:1.5; color:var(--ink); } .kanban-application { min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:7px; background:var(--surface-2); } .application-branch-heading { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:3px 10px; } .application-branch-heading>span { color:var(--muted); font-size:11px; } .application-branch-heading>strong { font-size:14px; font-weight:600; white-space:nowrap; } .kanban-application p { margin:4px 0 0; font-size:12px; overflow-wrap:anywhere; } .application-branch-quantity { color:var(--muted); } .application-branch-buyers { font-weight:600; } .application-branch-stage { color:var(--ink); } .application-amounts { display:grid; gap:8px; min-width:0; } .application-amounts>div { display:grid; gap:2px; } .application-amounts span { font-size:11px; font-weight:400; color:var(--muted); } .application-amounts strong { font-size:13px; font-weight:600; } #order-dialog :is(#recon-application-quantity,#recon-customer-quantity) { white-space:pre-line; overflow-wrap:anywhere; font-size:15px; } .route-transfer { padding:8px 10px; border-left:3px solid #be862d; background:#fff5df; color:#775321; font-size:12px; line-height:1.5; } .route-transfer p { margin:0; } .route-load { border-top:1px solid var(--line); padding-top:9px; margin-top:10px; } .route-load strong { display:block; font-size:16px; } .route-load span,.route-load small { display:block; color:var(--muted); font-size:var(--n-font-caption,12px); } #route-facts { grid-template-columns:1fr 1fr 1.4fr 1.6fr; } #route-facts .route-load { border-top:0; padding:0; margin:0; } #route-facts .route-load strong { font-size:20px; } #route-facts .route-load small { font-weight:400; line-height:1.5; } .route-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:8px; margin:0 0 12px; } .route-kpis>div { padding:10px 14px; border-left:1px solid var(--line); } .route-kpis>div:first-child { border-left:0; } .route-kpis dt { font-size:var(--n-font-caption,12px); color:var(--muted); } .route-kpis dd { margin:3px 0 0; font-size:19px; font-weight:650; color:var(--ink); } .route-kpis small { display:block; font-size:var(--n-font-caption,12px); color:var(--muted); } @media(max-width:760px) { .route-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .route-kpis>div:nth-child(3) { border-left:0; } } @media(max-width:760px) { #route-facts { grid-template-columns:1fr 1fr; } .orders-view-switch { display:grid; grid-template-columns:1fr 1fr; flex:1 1 100%; min-width:0; } .orders-view-switch .quiet-button { min-height:44px; } } #route-kpis[hidden] { display:none!important; } /* Delivery country stays visible as text; the flag is an additional visual cue. */ .order-countries { display:inline-flex; flex-wrap:wrap; align-items:center; gap:5px 10px; vertical-align:middle; } .country-marker { display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-size:12px; font-weight:500; line-height:1.45; } .country-flag { display:block; flex:none; width:20px; height:14px; overflow:hidden; border-radius:2px; box-shadow:0 0 0 1px #7b8ca044; } .country-marker[data-country="unknown"] { color:var(--muted); font-weight:400; } .country-marker[data-country="unknown"] .country-flag { box-shadow:none; } .kanban-country { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:9px 0 12px; } .kanban-country .country-caption { flex:none; color:var(--muted); font-size:var(--n-font-caption,12px); line-height:1.45; } .kanban-country .order-countries { justify-content:flex-end; text-align:right; } #orders-table .order-country .order-countries { display:flex; flex-direction:column; align-items:flex-start; } .delivery-address-list { display:grid; gap:8px; margin-top:7px; min-width:0; } .delivery-address-text { display:block; color:var(--ink); font-size:12px; line-height:1.5; font-weight:400; overflow-wrap:anywhere; } .delivery-address-source,.delivery-address-empty { display:block; color:var(--muted); font-size:var(--n-font-caption,12px); line-height:1.5; font-weight:400; } .delivery-address-source { margin-top:3px; } #orders-table .order-country { min-width:195px; max-width:260px; } .kanban-country { flex-wrap:wrap; } .kanban-country .delivery-address-list { flex-basis:100%; margin-top:0; } .detail-delivery { margin:0 0 18px; padding:14px 16px; border:1px solid var(--line); border-radius:9px; background:var(--surface); } .detail-delivery h4 { margin:0; color:var(--ink); font-size:13px; } .detail-delivery .delivery-address-list { grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px 24px; } .detail-delivery .delivery-address-text,.customer-order-delivery .delivery-address-text { font-size:14px; } .customer-order-delivery { margin:12px 0; } .buyer-counterparty { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; margin-top:10px; font-size:var(--n-font-caption,12px); color:var(--muted); } .buyer-counterparty strong { color:var(--ink); font-size:12px; font-weight:500; } .buyer-counterparty[data-check="mismatch"] strong { color:var(--warning,#9b590b); } .route-buyers-table .route-buyer-delivery { min-width:245px; max-width:300px; vertical-align:top; } .route-buyers-table .route-buyer-delivery .delivery-address-list { margin-top:0; } .route-buyer-delivery .buyer-counterparty { gap:3px 6px; } .route-buyer-delivery .buyer-counterparty .country-caption { display:none; } /* VisitBot Manager Desktop filter rules, derived from the verified live stylesheet. * Source SHA-256: ab38b0030b990884687032beeb6eab9754645ea6aae99bf35f9b9ab13241e5be * Keep component-specific rules in source order; Neuffer integration follows below. */ .filter-fields label { display: grid; gap: 5px; color: rgb(82, 97, 115); font-weight: 650; } .filter-fields input, .filter-fields select { min-height: 42px; border: 1px solid rgb(203, 213, 223); border-radius: 8px; padding: 8px 10px; background: rgb(255, 255, 255); color: var(--text); } .filter-bar { margin-top: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px; } .filter-fields { display: grid; grid-template-columns: 120px 120px repeat(4, minmax(135px, 1fr)) auto auto; align-items: end; gap: 9px; } .filter-fields input, .filter-fields select { min-height: 36px; padding: 6px 8px; } .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; } .filter-chips:not(:empty) { margin-top: 10px; } @media (max-width: 1100px) { .filter-fields { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 760px) { .filter-fields { display: none; grid-template-columns: 1fr 1fr; margin-top: 10px; } .filter-fields.open { display: grid; } .filter-fields label:nth-child(n+3) { grid-column: 1 / -1; } } .filter-fields { grid-template-columns: minmax(280px, 1.05fr) minmax(0px, 4fr) auto; gap: 12px; } .filter-period { min-width: 0px; margin: 0px; padding: 0px; border: 0px; } .filter-period legend { margin-bottom: 5px; padding: 0px; color: rgb(82, 97, 115); font-weight: 650; } .filter-period-fields { display: grid; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr); align-items: end; gap: 8px; } .filter-period-fields input, .filter-selects select { width: 100%; min-width: 0px; } .filter-range-separator { padding-bottom: 8px; color: var(--muted); } .filter-selects { display: grid; grid-template-columns: repeat(4, minmax(135px, 1fr)); gap: 9px; min-width: 0px; } .filter-actions { display: flex; align-items: center; gap: 10px; padding-bottom: 1px; white-space: nowrap; } .filter-actions .button.primary { min-width: 112px; } @media (max-width: 1280px) { .filter-fields { grid-template-columns: minmax(260px, 0.9fr) minmax(0px, 2fr); } .filter-actions { grid-column: 1 / -1; justify-content: flex-end; padding-bottom: 0px; } } @media (max-width: 1100px) { .filter-fields { grid-template-columns: 1fr; } .filter-selects { grid-template-columns: repeat(2, minmax(0px, 1fr)); } } @media (max-width: 760px) { .filter-fields.open { grid-template-columns: 1fr; gap: 14px; } .filter-fields .filter-period-fields label:nth-child(n) { grid-column: auto !important; } .filter-selects { grid-template-columns: 1fr; } .filter-actions { display: grid; grid-template-columns: minmax(0px, 1fr) auto; width: 100%; } .filter-actions .button.primary { min-height: 44px; } } @media (max-width: 430px) { .filter-period-fields { grid-template-columns: 1fr; } .filter-range-separator { display: none; } } .filter-shell { position: relative; width: 100%; min-width: 0px; } .filter-compact { min-width: 280px; height: 42px; display: flex; align-items: center; gap: 5px; padding: 4px 6px; overflow: hidden; border: 1px solid rgb(199, 208, 218); border-radius: 8px; background: rgb(242, 245, 248); box-shadow: rgba(45, 40, 38, 0.04) 0px 1px 2px inset; } .filter-shell.open .filter-compact, .filter-compact:focus-within { border-color: var(--blue); box-shadow: rgba(107, 152, 191, 0.17) 0px 0px 0px 3px; } .filter-compact .filter-chips { flex: 0 1 auto; flex-wrap: nowrap; min-width: 0px; overflow: hidden; gap: 4px; } .filter-compact .filter-chips:not(:empty) { margin-top: 0px; } .filter-compact .chip { flex: 0 0 auto; max-width: 165px; min-height: 30px; padding: 5px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 5px; background: rgb(223, 234, 245); color: rgb(49, 95, 133); } .filter-compact .chip.filter-chip-exclude { border: 1px solid rgb(237, 193, 197); background: rgb(255, 240, 241); color: rgb(159, 51, 60); } .filter-compact .chip.filter-chip-exclude:hover, .filter-compact .chip.filter-chip-exclude:focus-visible { background: rgb(253, 228, 231); color: rgb(143, 41, 50); } .filter-open-button { min-width: 110px; min-height: 32px; flex: 1 1 150px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 7px; border: 0px; background: transparent; color: var(--muted); text-align: left; } .filter-search-icon { font-size: 22px; line-height: 1; color: rgb(114, 133, 154); } .filter-clear-button { flex: 0 0 32px; width: 32px; height: 32px; padding: 0px; border-width: 0px 0px 0px 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(199, 208, 218); border-image: none; background: transparent; color: rgb(114, 133, 154); font-size: 23px; line-height: 1; } .filter-clear-button:hover, .filter-clear-button:focus-visible { color: var(--brand-charcoal); background: rgba(107, 152, 191, 0.12); } .filter-clear-button:disabled { opacity: 0.32; cursor: default; } .filter-popover { position: absolute; top: calc(100% + 10px); right: auto; left: 0px; z-index: 40; width: min(920px, -280px + 100vw); max-height: calc(-100px + 100vh); display: grid; grid-template-columns: 200px minmax(0px, 1fr); overflow: visible; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: rgba(30, 43, 55, 0.22) 0px 18px 50px; } .filter-presets { display: grid; align-content: start; gap: 4px; padding: 20px 14px; border-right: 1px solid var(--line); background: rgb(247, 249, 251); } .filter-presets b { margin: 0px 9px 9px; color: var(--blue-dark); } .filter-presets button { min-height: 38px; padding: 8px 10px; border: 0px; border-radius: 7px; background: transparent; color: var(--text); text-align: left; } .filter-presets button:hover, .filter-presets button.active { background: rgb(230, 238, 246); color: var(--blue-dark); } .filter-panel { min-width: 0px; overflow: visible; padding: 20px; } .search-select-native { display: none; } .search-select { position: relative; min-width: 0px; } .search-select-input { width: 100%; min-width: 0px; min-height: 42px; border: 1px solid rgb(199, 208, 218); border-radius: var(--box-radius, 3px); padding-top: 8px; padding-bottom: 8px; padding-left: 10px; background: rgb(248, 250, 251); color: var(--text); box-shadow: none; appearance: none; padding-right: 34px !important; } .search-select-input:hover { border-color: rgb(174, 187, 200); } .search-select-input:focus { border-color: var(--blue); background: rgb(255, 255, 255); box-shadow: rgba(111, 159, 199, 0.18) 0px 0px 0px 3px; } .search-select-arrow { position: absolute; top: 50%; right: 11px; display: grid; width: 24px; height: 24px; padding: 0px; border: 1px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; line-height: 1; place-items: center; transform: translateY(-50%); color: var(--muted); transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; } .search-select-arrow:hover, .search-select-arrow:focus-visible, .filter-option-picker.open .search-select-arrow { border-color: rgb(169, 201, 226); background: rgb(234, 244, 252); color: var(--blue-dark); outline: 0px; } .filter-option-picker.open .search-select-arrow { transform: translateY(-50%) rotate(180deg); } .search-select-list { position: absolute; top: calc(100% + 4px); right: 0px; left: 0px; z-index: 70; max-height: 240px; overflow-y: auto; padding: 5px; border: 1px solid rgb(199, 208, 218); border-radius: 8px; background: var(--surface); box-shadow: rgba(30, 43, 55, 0.2) 0px 12px 30px; } .search-select-option, .search-select-empty { min-height: 34px; padding: 7px 9px; border-radius: 5px; } .search-select-option { cursor: pointer; } .search-select-option:hover, .search-select-option.active { background: rgb(230, 238, 246); color: var(--blue-dark); } .search-select-option[aria-selected="true"] { color: var(--blue-dark); font-weight: 700; } .search-select-empty { color: var(--muted); } .filter-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .filter-dialog-heading h2 { margin: 0px; font-size: 20px; } .filter-close { width: 36px; height: 36px; border: 0px; border-radius: 50%; background: rgb(238, 242, 245); color: var(--muted); font-size: 24px; line-height: 1; } .filter-popover .filter-fields { display: grid; grid-template-columns: 1fr; gap: 18px; } .filter-popover .filter-selects { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 13px; } .filter-popover .filter-actions { justify-content: flex-end; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } @media (max-width: 1280px) { .filter-popover { width: min(760px, -250px + 100vw); } } @media (max-width: 1100px) { .filter-shell { grid-area: auto; } .filter-popover { right: auto; left: 0px; width: min(860px, -270px + 100vw); } } @media (max-width: 760px) { .filter-shell { grid-area: 1 / 2; } .filter-compact { min-width: 0px; width: 100%; } .filter-popover { position: fixed; inset: 10px; width: auto; max-height: none; grid-template-columns: 1fr; grid-template-rows: auto minmax(0px, 1fr); overflow: hidden; } .filter-presets { display: flex; gap: 5px; overflow-x: auto; padding: 12px; border-right: 0px; border-bottom: 1px solid var(--line); } .filter-presets b { display: none; } .filter-presets button { flex: 0 0 auto; } .filter-panel { overflow: auto; padding: 16px; } .search-select.open .search-select-list { position: static; max-height: 190px; margin-top: 4px; } .filter-popover .filter-selects { grid-template-columns: 1fr; } .filter-popover .filter-actions { display: grid; grid-template-columns: minmax(0px, 1fr) auto; } } @media (max-width: 760px) { .filter-shell { justify-self: end; width: auto; } .filter-chips { display: none; } .filter-open-button { width: 40px; min-width: 40px; min-height: 40px; padding: 0px; justify-content: center; } .filter-open-button #filter-trigger-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); } .filter-clear-button { display: none; } .filter-search-icon { font-size: 21px; } .filter-popover { position: fixed; inset: 62px 8px 72px; grid-template-columns: 1fr; width: auto; max-height: calc(100dvh - 142px); overflow: auto; border-radius: 14px; } .filter-presets { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px; border-right: 0px; border-bottom: 1px solid var(--line); } .filter-presets b { flex-basis: 100%; } .filter-presets button { min-height: 38px; } } @media (min-width: 640px) and (max-width: 980px) and (orientation: landscape) { .filter-chips, .filter-clear-button { display: none; } .filter-open-button { min-width: 98px; } } .filter-dialog-heading h2 { font-size: 22px; font-weight: 600; } .filter-fields label, .filter-fields legend { font-weight: 500; } .filter-popover { grid-template-columns: 278px minmax(0px, 1fr); } .filter-presets { gap: 0px; padding: 18px 12px; } .filter-preset-group { display: grid; gap: 3px; } .filter-preset-group + .filter-preset-group { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); } .filter-presets .filter-preset-title { margin: 0px 10px 7px; color: rgb(135, 145, 139); font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .filter-presets button { display: grid; grid-template-columns: 28px minmax(0px, 1fr); align-items: center; gap: 9px; min-height: 40px; padding: 5px 9px; color: rgb(71, 82, 77); font-size: 14px; font-weight: 400; } .filter-preset-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgb(237, 241, 238); color: rgb(113, 128, 122); } .filter-preset-icon svg { width: 16px; height: 16px; fill: none; stroke: currentcolor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; } .filter-preset-icon.blue { background: rgb(234, 242, 248); color: var(--blue-dark); } .filter-preset-icon.amber { background: rgb(251, 240, 223); color: var(--amber); } .filter-preset-icon.green { background: rgb(229, 243, 235); color: var(--green); } .filter-presets button:hover { background: rgb(238, 243, 245); color: var(--text); } .filter-presets button.active { background: rgb(255, 255, 255); color: var(--blue-dark); box-shadow: 0 2px 9px rgba(42, 48, 43, .07), inset 2px 0 0 var(--brand-lime); } .filter-presets button.active .filter-preset-icon { background: rgb(229, 240, 247); color: var(--blue-dark); } @media (max-width: 760px) { .filter-presets { flex-wrap: nowrap; gap: 10px; overflow-x: auto; } .filter-preset-group { display: flex; flex: 0 0 auto; gap: 5px; } .filter-preset-group + .filter-preset-group { margin: 0px; padding: 0px 0px 0px 10px; border-top: 0px; border-left: 1px solid var(--line); } .filter-presets .filter-preset-title { display: none; } .filter-presets button { grid-template-columns: 24px auto; min-height: 36px; padding: 4px 9px 4px 5px; white-space: nowrap; } .filter-preset-icon { width: 24px; height: 24px; border-radius: 8px; } .filter-preset-icon svg { width: 14px; height: 14px; } } .regional-dialog .search-select { z-index: 1; } .regional-dialog .search-select.open { z-index: 2; } .regional-dialog .search-select.open .search-select-list { position: absolute; max-height: min(240px, 100dvh - 360px); } .filter-popover.card-visitbot { border-top-width: 2px; } .adminlte-shell .filter-shell { min-width: 0px; } .filter-preset-icon.red { background: rgb(249, 232, 234); color: var(--red); } .filter-panel .form-control, .filter-panel .custom-select, .filter-panel .search-select-input { width: 100%; height: 42px; border: 1px solid rgb(199, 208, 218); background-color: rgb(248, 250, 251); color: var(--text); box-shadow: none; } .filter-panel .form-control:focus, .filter-panel .custom-select:focus, .filter-panel .search-select-input:focus { border-color: var(--blue); background-color: rgb(255, 255, 255); box-shadow: rgba(111, 159, 199, 0.18) 0px 0px 0px 3px; } .filter-component-fields.filter-fields { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 13px; } .filter-component-fields .filter-period { grid-column: 1 / -1; } .filter-component-fields .filter-field, .filter-component-fields .filter-period { min-width: 0px; margin: 0px; } .filter-component-fields .filter-field { display: grid; align-content: start; gap: 5px; } .filter-component-fields .filter-field-label, .filter-component-fields .filter-period > legend { padding: 0px; color: rgb(82, 97, 115); font-size: 12px; font-weight: 650; } .filter-component-fields .filter-period-fields { display: grid; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr); align-items: end; gap: 9px; } .filter-component-fields .filter-range-separator { padding-bottom: 11px; color: var(--muted); } .filter-panel .form-control, .filter-panel .custom-select, .filter-panel .search-select-input, .filter-option-picker { width: 100%; min-height: 42px; background: rgb(248, 250, 251); color: var(--text); border: 1px solid rgb(199, 208, 218) !important; border-radius: 3px !important; box-shadow: none !important; } .filter-panel .form-control:focus, .filter-panel .custom-select:focus, .filter-panel .search-select-input:focus, .filter-option-picker:focus-within { background: rgb(255, 255, 255); outline: 0px; border-color: var(--blue) !important; box-shadow: rgba(111, 159, 199, 0.18) 0px 0px 0px 3px !important; } .filter-option-picker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 31px 4px 5px; } .filter-option-selection { display: contents; } .filter-option-search.form-control { flex: 1 1 120px; width: auto; min-width: 90px; min-height: 30px; height: 30px; padding: 3px 5px; outline: 0px; border: 0px !important; background: transparent !important; box-shadow: none !important; } .filter-option-token { display: inline-flex; flex: 0 1 auto; align-items: center; min-width: 0px; min-height: 30px; overflow: hidden; border: 1px solid rgb(189, 212, 232); border-radius: 3px; background: rgb(231, 241, 249); color: rgb(49, 95, 133); } .filter-option-token.exclude { border-color: rgb(237, 193, 197); background: rgb(255, 240, 241); color: rgb(159, 51, 60); } .filter-option-sign, .filter-option-remove { display: grid; flex: 0 0 auto; place-items: center; height: 24px; padding: 0px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: inherit; line-height: 1; } .filter-option-sign { position: relative; width: 24px; margin-left: 3px; border-color: currentcolor; background: rgb(255, 255, 255); box-shadow: rgba(32, 57, 79, 0.1) 0px 1px 2px; cursor: pointer; font-size: 0px; transition: background-color 0.15s, box-shadow 0.15s, transform 0.15s; border-radius: 50% !important; } .filter-option-sign::before, .filter-option-sign.include::after { position: absolute; top: 50%; left: 50%; width: 10px; height: 2px; border-radius: 2px; background: currentcolor; content: ""; transform: translate(-50%, -50%); } .filter-option-sign.include::after { transform: translate(-50%, -50%) rotate(90deg); } .filter-option-remove { width: 24px; margin-right: 2px; font-size: 16px; opacity: 0.7; } .filter-option-sign:hover, .filter-option-sign:focus-visible, .filter-option-remove:hover, .filter-option-remove:focus-visible { background: rgb(255, 255, 255); box-shadow: rgba(111, 159, 199, 0.18) 0px 0px 0px 3px; opacity: 1; outline: 0px; } .filter-option-sign:hover, .filter-option-sign:focus-visible { transform: scale(1.06); } .filter-option-token-label { max-width: 175px; padding: 4px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-option-list { top: calc(100% + 4px); right: 0px; left: 0px; border-radius: 3px; } .filter-option-item { display: grid; grid-template-columns: 26px minmax(0px, 1fr); align-items: center; gap: 7px; min-height: 38px; padding: 5px 9px; } .filter-option-check { appearance: none; position: relative; display: grid; place-items: center; width: 22px; height: 22px; padding: 0px; border: 1px solid rgb(184, 199, 213); border-radius: 50%; background: rgb(255, 255, 255); color: var(--blue-dark); cursor: pointer; box-shadow: rgba(32, 57, 79, 0.08) 0px 1px 2px; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .filter-option-item:hover .filter-option-check:not(.selected), .filter-option-check:focus-visible { border-color: var(--blue); background: rgb(238, 246, 252); box-shadow: rgba(111, 159, 199, 0.2) 0px 0px 0px 3px; outline: 0px; } .filter-option-check:active { transform: scale(0.9); } .filter-option-check.selected { border-color: rgb(75, 134, 184); background: rgb(94, 148, 193); color: rgb(255, 255, 255); box-shadow: rgba(49, 95, 133, 0.25) 0px 1px 3px; } .filter-option-check.selected::before { position: absolute; top: 50%; left: 50%; width: 9px; height: 5px; border-right: 2px solid; border-bottom: 2px solid; border-radius: 1px; background: transparent; content: ""; transform: translate(-50%, -62%) rotate(45deg); } .filter-option-check.selected.include::after { content: none; } .filter-option-check.selected.exclude { border-color: rgb(228, 174, 179); background: rgb(255, 240, 241); color: rgb(189, 75, 84); box-shadow: none; } .filter-option-check.selected.exclude::before { width: 9px; height: 2px; border: 0px; border-radius: 2px; background: currentcolor; transform: translate(-50%, -50%); } .filter-user-presets { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); } .filter-user-preset-list { display: grid; gap: 2px; } .filter-user-preset-row { display: grid; grid-template-columns: minmax(0px, 1fr) 30px; align-items: center; } .filter-presets .filter-user-preset-row .filter-user-preset-use, .filter-presets .filter-user-preset-row .filter-user-preset-remove { min-width: 0px; min-height: 34px; padding: 6px 8px; border-radius: 3px; } .filter-presets .filter-user-preset-row .filter-user-preset-use { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .filter-presets .filter-user-preset-row .filter-user-preset-remove { padding: 0px; text-align: center; color: var(--muted); } .filter-user-preset-editor { display: grid; grid-template-columns: minmax(0px, 1fr) auto auto; gap: 6px; margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 3px; background: rgb(255, 255, 255); } .filter-user-preset-editor[hidden] { display: none; } .filter-user-preset-editor .form-control { grid-column: 1 / -1; min-height: 36px; height: 36px; } .filter-user-preset-editor .filter-user-preset-action { display: inline-grid; grid-template-columns: 1fr; place-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; padding: 0px; border: 1px solid rgb(184, 200, 214); border-radius: 4px; } .filter-user-preset-editor .filter-user-preset-action .filter-preset-icon { width: 18px; height: 18px; border-radius: 0px; background: transparent; color: currentcolor; } .filter-user-preset-editor .filter-user-preset-action .filter-preset-icon svg { width: 15px; height: 15px; } .filter-user-preset-editor .filter-user-preset-action.confirm { border-color: var(--blue-dark); color: rgb(255, 255, 255); } .filter-user-preset-editor .filter-user-preset-action.cancel { background: rgb(255, 255, 255); color: rgb(99, 120, 138); } .filter-user-preset-editor .filter-user-preset-action.cancel:hover, .filter-user-preset-editor .filter-user-preset-action.cancel:focus-visible { border-color: rgb(143, 164, 183); background: rgb(238, 243, 246); color: var(--text); } .filter-compact, .filter-popover, .filter-presets button, .filter-close, .search-select-list, .search-select-option, .search-select-empty { border-radius: 3px; } .filter-popover { max-height: calc(100dvh - 92px); overflow: hidden; } @media (min-width: 761px) { .filter-popover { height: min(780px, 100dvh - 92px); } } .filter-presets { min-height: 0px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .filter-panel { display: grid; grid-template-rows: auto minmax(0px, 1fr) auto; min-height: 0px; max-height: inherit; padding: 0px; overflow: hidden; } .filter-dialog-heading { margin: 0px; padding: 16px 20px 13px; border-bottom: 1px solid rgb(237, 240, 235); background: rgb(255, 255, 255); } .filter-component-fields.filter-fields { min-height: 0px; padding: 14px 20px 18px; overflow: hidden auto; align-content: start; overscroll-behavior: contain; scrollbar-gutter: stable; } .filter-popover .filter-actions { position: relative; z-index: 2; justify-content: flex-end; margin: 0px; padding: 13px 20px 15px; border-top: 1px solid var(--line); background: rgb(255, 255, 255); box-shadow: rgba(42, 48, 43, 0.035) 0px -5px 14px; } .filter-presets, .filter-component-fields.filter-fields { scrollbar-width: thin; scrollbar-color: rgb(169, 182, 194) transparent; } .filter-presets::-webkit-scrollbar, .filter-component-fields.filter-fields::-webkit-scrollbar { width: 9px; } .filter-presets::-webkit-scrollbar-thumb, .filter-component-fields.filter-fields::-webkit-scrollbar-thumb { border: 2px solid transparent; background: padding-box rgb(169, 182, 194); border-radius: 5px !important; } @media (max-width: 760px) { .filter-popover { height: auto; max-height: calc(100dvh - 20px); } .filter-dialog-heading { padding: 14px 16px 11px; } .filter-component-fields.filter-fields { grid-template-columns: 1fr; padding: 12px 16px 15px; } .filter-component-fields .filter-period { grid-column: 1; } .filter-option-picker.open .filter-option-list { position: static; flex: 1 0 100%; max-height: 190px; margin-top: 4px; } .filter-option-token-label { max-width: min(52vw, 220px); } .filter-popover .filter-actions { padding: 11px 16px 13px; } } body .search-select-list.filter-dropdown-floating[role="listbox"] { position: fixed; z-index: 1300; max-height: 240px; margin: 0px; overscroll-behavior: contain; } /* Neuffer host integration: keep the shared control independent of page buttons. */ :root { --text: var(--ink); --blue: var(--accent); --blue-dark: var(--accent-strong); --green: var(--ready); --amber: var(--warning); --red: var(--danger); --brand-charcoal: var(--ink); --brand-lime: #b7ce79; } .orders-filter-toolbar { display:flex; align-items:center; gap:20px; margin:18px 0 10px; } .orders-filter-toolbar .filter-summary { flex:none; margin:0; font-size:13px; color:var(--muted); } .neuffer-filter-shell { min-width:0; width:100%; justify-self:stretch; grid-area:auto; } .neuffer-filter-shell [hidden], .filter-dropdown-floating[hidden] { display:none!important; } .neuffer-filter-shell button, .filter-dropdown-floating button { font:inherit; cursor:pointer; } .neuffer-filter-shell button:disabled { cursor:default; opacity:.45; } .neuffer-filter-shell .filter-compact { height:46px; border-radius:12px; background:#f4f6fa; border-color:var(--line); } .neuffer-filter-shell .filter-chips { min-width:0; flex:0 1 auto; max-width:calc(100% - 160px); overflow-x:auto; scrollbar-width:thin; } .neuffer-filter-shell .filter-chips .chip { flex:none; border:0; border-radius:7px; } .neuffer-filter-shell .filter-open-button { min-height:34px; font-size:14px; } .neuffer-filter-shell .filter-clear-button { border:0; background:transparent; } .neuffer-filter-shell .filter-popover { width:min(920px, calc(100vw - 100px)); height:min(620px, calc(100dvh - 32px)); max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:18px; grid-template-columns:278px minmax(0,1fr); box-shadow:0 20px 60px #202b4030; } .neuffer-filter-shell .filter-presets { padding:16px 12px; background:#f6f8fa; } .neuffer-filter-shell .filter-presets button { font-size:14px; } .neuffer-filter-shell .filter-presets .filter-preset-title { color:var(--muted); } .neuffer-filter-shell .filter-presets button.active { border-radius:8px; } .neuffer-filter-shell .filter-close { border-radius:9px; } .neuffer-filter-shell .filter-dialog-heading h2 { margin:0; color:var(--ink); font-size:21px; letter-spacing:-.025em; } .neuffer-filter-shell .filter-dialog-heading .eyebrow { margin:0 0 5px; font-size:var(--n-font-caption,12px); color:var(--muted); } .neuffer-filter-shell .neuffer-filter-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 16px; margin:0; align-items:start; } .neuffer-filter-fields .filter-period, .neuffer-filter-fields>label, .neuffer-filter-hint, .neuffer-filter-fields .filter-error { grid-column:1/-1; } .neuffer-filter-shell .filter-field { min-width:0; font-size:13px; } .neuffer-filter-shell .filter-field-label, .neuffer-filter-shell .filter-period legend { font-weight:600; color:var(--ink); } .neuffer-filter-shell .form-control { font:inherit; min-width:0; width:100%; color:var(--ink); background:#fff; } .neuffer-filter-shell .filter-period-fields input, .neuffer-filter-shell #order-search { min-height:42px; border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:14px; } .neuffer-filter-shell .filter-option-picker { border-radius:9px; border-color:var(--line); } .neuffer-filter-shell .filter-option-search { border:0; } .neuffer-filter-shell .filter-option-token-label { max-width:180px; } .neuffer-filter-hint { margin:0; color:var(--muted); font-size:12px; line-height:1.55; } .neuffer-filter-fields .filter-error { margin:0; font-size:13px; } .neuffer-filter-shell .filter-actions button { min-height:40px; padding:9px 18px; border-radius:10px; font-size:14px; } .neuffer-filter-shell .filter-actions .primary { color:white; border:1px solid var(--accent-strong); background:var(--accent-strong); } .neuffer-filter-shell .filter-actions .link { color:var(--accent-strong); border:0; background:transparent; } .neuffer-filter-shell .filter-user-preset-action.confirm { background:var(--accent-strong); } .neuffer-filter-shell .filter-user-preset-editor .form-control { padding:6px 8px; border:1px solid var(--line); border-radius:6px; } .filter-dropdown-floating { border-radius:9px; } .filter-dropdown-floating .filter-option-check { cursor:pointer; } .neuffer-filter-shell button:focus-visible, .filter-dropdown-floating button:focus-visible { outline:3px solid var(--accent-strong); outline-offset:2px; } @media(max-width:760px) { .orders-filter-toolbar { display:block; } .orders-filter-toolbar .filter-summary { margin-top:8px; font-size:12px; } .neuffer-filter-shell .filter-open-button { width:auto; min-width:110px; flex:1 1 150px; padding:5px 7px; justify-content:space-between; } .neuffer-filter-shell .filter-chips { display:flex; } .neuffer-filter-shell .filter-clear-button { display:block; } .neuffer-filter-shell .filter-popover { position:fixed; inset:10px; width:auto; height:auto; max-height:calc(100dvh - 20px); grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); border-radius:16px; } .neuffer-filter-shell .filter-presets { padding:10px; overflow-y:hidden; } .neuffer-filter-shell .filter-presets button { font-size:13px; } .neuffer-filter-shell .neuffer-filter-fields { grid-template-columns:minmax(0,1fr); gap:16px; } .neuffer-filter-fields .filter-period-fields { grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); } .neuffer-filter-fields .filter-range-separator { display:block; } .neuffer-filter-shell .filter-option-token-label { max-width:calc(100vw - 130px); } .neuffer-filter-shell .filter-chips .chip { max-width:150px; } .neuffer-filter-shell .filter-actions { display:flex; width:auto; } } /* Appearance only: report data, filters and open dialogs keep their state. */ :root { color-scheme:light; } .report-display-controls { display:flex; align-items:center; justify-self:end; gap:7px; } .theme-toggle.quiet-button { display:grid; place-items:center; flex:none; width:34px; height:34px; min-height:34px; padding:0; border:1px solid var(--n-control-border); border-radius:6px; background:#425b7b; color:var(--surface); box-shadow:none; cursor:pointer; } .theme-toggle.quiet-button:hover { background:#526e92; border-color:#b2c4de; color:var(--surface); } .theme-toggle svg { width:17px; height:17px; pointer-events:none; } .theme-icon-sun { display:none; } .theme-toggle:focus-visible, .report-language select:focus-visible { outline:2px solid #d9e8ff; outline-offset:3px; } html[data-theme="dark"] .theme-icon-moon { display:none; } html[data-theme="dark"] .theme-icon-sun { display:block; } @media(max-width:1000px) { .report-display-controls { grid-column:3; grid-row:1; } } @media(max-width:600px) { .report-display-controls { grid-column:2; grid-row:1; } .theme-toggle.quiet-button, .report-language select { min-height:38px; height:38px; } } /* The shared portal.css owns both palettes; this file retains view layout. */ .report-app-link{display:inline-flex;align-items:center;height:34px;padding:0 8px;border:1px solid var(--n-control-border);border-radius:6px;font-size:var(--n-font-caption,12px);font-weight:600;color:var(--surface);white-space:nowrap}.report-app-link:hover{background:#526e92;color:var(--surface)}.report-app-link:focus-visible{outline:2px solid #d9e8ff;outline-offset:3px} .topbar .report-section-menu{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #ffffff30;background:#ffffff17;border-radius:12px;white-space:nowrap}.topbar .report-section-menu .tabs{border:0;background:transparent;padding:0;margin:0}.mail-section-link{display:flex;align-items:center;justify-content:center;min-height:34px;padding:6px 12px;border-radius:9px;color:#e2eaf6;text-decoration:none;font-size:13px;font-weight:700}.mail-section-link:hover{background:#ffffff17;color:var(--surface)}.mail-section-link:focus-visible{outline:2px solid var(--surface);outline-offset:2px}@media(max-width:1000px){.topbar .report-section-menu{grid-column:2;grid-row:1;justify-self:end}}@media(max-width:600px){.topbar .report-section-menu{grid-column:1/-1;grid-row:2;justify-self:stretch;white-space:normal}.topbar .report-section-menu .tabs{flex:1;width:auto}.mail-section-link{font-size:12px;min-height:32px;padding:5px 9px}} /* Main CRM workbench: navigation, view switch, then the board. */ .crm-board-page { --crm-gutter:12px; } .crm-board-page .crm-shell .topbar-inner { min-height:54px; padding:6px 14px; gap:8px 12px; } .crm-board-page .crm-shell + .page { margin-top:6px; padding-bottom:8px; } .crm-board-page :is(.hero,.method-note) { display:none; } .crm-board-page #orders-view-context { display:none; } .crm-board-page .orders-view-toolbar { gap:6px; margin:0 0 6px; flex:none; } .crm-board-page .orders-view-switch { padding:2px; } .crm-board-page .orders-view-switch button { min-height:28px; padding:4px 10px; font-size:12px; } /* Flex height follows the actual header size, including wrapped mobile filters. */ .crm-board-page:has(#panel-orders:not([hidden]) #orders-kanban-view:not([hidden])) { display:flex; flex-direction:column; height:100dvh; min-height:0; overflow:hidden; } .crm-board-page:has(#panel-orders:not([hidden]) #orders-kanban-view:not([hidden])) > .page { display:flex; flex-direction:column; flex:1; min-height:0; } .crm-board-page:has(#panel-orders:not([hidden]) #orders-kanban-view:not([hidden])) #panel-orders { display:flex; flex-direction:column; flex:1; min-height:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:hidden; } .crm-board-page #orders-kanban-view:not([hidden]), .crm-board-page #orders-kanban-view:not([hidden]) > .kanban-scroll-shell { display:flex; flex:1; min-height:0; min-width:0; } .crm-board-page .orders-kanban { width:100%; height:100%; min-height:0; padding:6px 8px 8px; gap:8px; } .crm-board-page .orders-kanban .kanban-column { display:flex; flex-direction:column; flex:0 0 280px; min-width:0; } .crm-board-page .kanban-column-heading { flex:none; min-height:32px; padding:5px 18px; } .crm-board-page .kanban-column:first-child .kanban-column-heading { padding-left:10px; } .crm-board-page .kanban-column-heading :is(h3,.kanban-column-count) { font-size:12px; } .crm-board-page .kanban-column-summary { flex:none; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:center; min-height:32px; gap:3px 8px; padding:4px; } .crm-board-page .kanban-column-amount { padding:1px 6px; font-size:14px; } .crm-board-page .kanban-column-missing { font-size:var(--n-font-caption,12px); } .crm-board-page .kanban-column-list { flex:1; min-height:0; max-height:none; padding:6px 3px 3px; } @media(max-width:760px) { .crm-board-page { --crm-gutter:8px; } .crm-board-page .crm-shell .topbar-inner { padding:6px 10px; gap:6px 8px; } .crm-board-page .orders-kanban .kanban-column { flex-basis:min(280px,calc(100vw - 40px)); } .crm-board-page .orders-view-switch { display:flex; flex:0 1 auto; flex-wrap:nowrap; min-width:0; max-width:100%; overflow-x:auto; } .crm-board-page .orders-view-switch button { min-height:32px; padding:5px 8px; flex:none; } } /* Keep order cards readable while reducing repeated vertical gaps. */ .crm-board-page .kanban-card { margin-bottom:8px; padding:8px 10px; line-height:1.4; } .crm-board-page .kanban-card:not(.route-kanban-card) { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; } .crm-board-page .kanban-card:not(.route-kanban-card) > * { grid-column:1 / -1; min-width:0; } .crm-board-page .kanban-card:not(.route-kanban-card) > .kanban-card-open { grid-column:1; grid-row:1; min-height:28px; } .crm-board-page .kanban-card-open strong { font-size:17px; } .crm-board-page .kanban-card:not(.route-kanban-card) > .kanban-card-date { grid-column:2; grid-row:1; align-self:center; margin:0; font-size:var(--n-font-caption,12px); line-height:1.4; } .crm-board-page .kanban-country { margin:6px 0; gap:4px 8px; } .crm-board-page .kanban-country .delivery-address-list { gap:4px; } .crm-board-page .kanban-country .delivery-address-text { font-size:12px; line-height:1.4; } .crm-board-page .kanban-card-amount { margin:0 0 6px; } .crm-board-page .kanban-card-amount > strong { font-size:15px; line-height:1.4; } .crm-board-page .kanban-customer-refs { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:3px 8px; } .crm-board-page .kanban-customer-refs > span { margin:0; } .crm-board-page .kanban-customer-refs > div { justify-content:flex-end; gap:2px 8px; max-width:145px; text-align:right; } .crm-board-page .kanban-customer-refs strong { font-size:12px; line-height:1.4; } .crm-board-page .kanban-route-section { display:grid; grid-template-columns:50px minmax(0,1fr); align-items:baseline; gap:6px; margin-top:6px; } .crm-board-page .kanban-route-section .route-section-label { margin:0; } .crm-board-page .kanban-route-section .order-routes { gap:4px; } .crm-board-page .kanban-route-section .route-entry { padding:4px 6px; } .crm-board-page .kanban-quantities { margin:6px 0; padding:5px 0; } .crm-board-page .kanban-quantities > div { display:block; padding-right:5px; } .crm-board-page .kanban-quantities dt { white-space:normal; line-height:1.4; } .crm-board-page .kanban-quantities dd { margin:2px 0 0; font-size:14px; } .crm-board-page .kanban-card .badge { padding:3px 6px; line-height:1.35; } .crm-board-page .kanban-state-note { margin-top:4px; } .crm-board-page .kanban-card-latest { margin-top:6px; padding-top:5px; } .crm-board-page .kanban-card-open strong, .crm-board-page .route-entry-heading > strong { min-width:0; overflow-wrap:anywhere; } /* One fluid frame for CRM funnels, review queue and mail. */ :root { --crm-gutter:24px; } .crm-shell + .page { width:calc(100% - 2 * var(--crm-gutter)); max-width:none; margin:18px auto 0; padding:0 0 32px; min-width:0; } /* Shared CRM header: existing main tabs keep their IDs, roles and behavior. */ .crm-shell { display:block; position:sticky; top:0; z-index:80; flex:none; width:calc(100% - 2 * var(--crm-gutter)); max-width:none; min-height:0; margin:0 auto; padding:0; border:1px solid #ffffff55; border-top:0; border-radius:0 0 20px 20px; background:linear-gradient(110deg,#3b5374f2,#2a3e5cf0); box-shadow:0 10px 26px -19px #1d32568c; color:#f4f7fc; font:14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .crm-shell .topbar-inner { display:grid; grid-template-columns:auto auto minmax(180px,1fr) auto; align-items:center; gap:10px 18px; width:100%; max-width:none; min-height:64px; margin:0; padding:10px 20px; } .crm-shell .home-link { grid-column:1; grid-row:1; color:var(--surface); font-size:14px; font-weight:750; white-space:nowrap; text-decoration:none; } .crm-shell .home-link:hover { color:var(--surface); text-decoration:underline; text-underline-offset:3px; } .crm-shell .report-section-menu { display:flex; align-items:center; justify-self:start; grid-column:2; grid-row:1; min-width:0; gap:3px; margin:0; padding:3px; border:1px solid #ffffff30; border-radius:12px; background:#ffffff17; white-space:nowrap; } .crm-shell .report-section-menu .tabs { display:flex; flex:none; align-items:stretch; gap:3px; width:auto; margin:0; padding:0; border:0; border-radius:0; background:transparent; } .crm-shell .report-section-menu :is(.tab,.mail-section-link) { display:flex; align-items:center; justify-content:center; min-height:34px; margin:0; padding:6px 12px; border:0; border-radius:9px; background:transparent; color:#e2eaf6; font:inherit; font-size:13px; font-weight:700; line-height:1.3; white-space:nowrap; text-align:center; text-decoration:none; box-shadow:none; cursor:pointer; } .crm-shell .report-section-menu :is(.tab,.mail-section-link):hover { background:#ffffff17; color:var(--surface); } .crm-shell .report-section-menu :is(.tab.active,.mail-section-link[aria-current="page"]) { background:var(--surface); color:var(--ink); box-shadow:0 1px 4px #14223922; } .crm-shell :is(.header-order-filter,.topbar-inner > .neuffer-filter-shell) { grid-column:3; grid-row:1; min-width:0; width:100%; } .crm-shell :is(.header-order-filter,.topbar-inner > .neuffer-filter-shell)[hidden] { display:none; } .crm-shell .neuffer-filter-shell .filter-compact { height:40px; border-radius:10px; } .crm-shell .neuffer-filter-shell .filter-open-button { min-height:30px; font-size:13px; } .crm-shell .report-display-controls { display:flex; align-items:center; justify-self:end; grid-column:4; grid-row:1; gap:7px; } .crm-shell .report-language { display:flex; margin:0; } .crm-shell .report-language select { width:62px; height:34px; min-height:34px; margin:0; padding:5px 6px; border:1px solid var(--n-control-border); border-radius:6px; background:#425b7b; color:var(--surface); font:inherit; font-size:12px; cursor:pointer; } .crm-shell .report-language select:disabled { cursor:default; opacity:.65; } .crm-shell .report-language option { color:var(--ink); background:var(--surface); } .crm-shell .theme-toggle.quiet-button { display:grid; place-items:center; flex:none; width:34px; height:34px; min-height:34px; margin:0; padding:0; border:1px solid var(--n-control-border); border-radius:6px; background:#425b7b; color:var(--surface); box-shadow:none; cursor:pointer; } .crm-shell .theme-toggle.quiet-button:hover { background:#526e92; border-color:#b2c4de; color:var(--surface); } .crm-shell .theme-toggle svg { width:17px; height:17px; pointer-events:none; } .crm-shell .theme-icon-sun { display:none; } .crm-shell :is(.home-link,.tab,.mail-section-link,.theme-toggle,.report-language select):focus-visible { outline:2px solid #d9e8ff; outline-offset:3px; } html[data-theme="dark"] .crm-shell { background:#30445f; border-color:#536984; box-shadow:0 6px 24px #14223933; } html[data-theme="dark"] .crm-shell .report-section-menu { background:#ffffff0d; border-color:#7285a055; } html[data-theme="dark"] .crm-shell .report-section-menu :is(.tab.active,.mail-section-link[aria-current="page"]) { background:var(--accent-strong); color:#172b47; } html[data-theme="dark"] .crm-shell :is(.theme-toggle.quiet-button,.report-language select) { background:#2a3b54; border-color:var(--n-control-border); } html[data-theme="dark"] .crm-shell .theme-icon-moon { display:none; } html[data-theme="dark"] .crm-shell .theme-icon-sun { display:block; } /* Mail and the shared filter use the same palette as the main CRM. */ html[data-theme="dark"] .mail-page { background:radial-gradient(ellipse at 8% 0,#3d537355,transparent 55%),var(--bg); scrollbar-color:var(--n-control-border) var(--surface-2); } html[data-theme="dark"] .mail-page :is(.filter-compact,.filter-popover,.filter-dropdown-floating,.search-select-list,.filter-option-picker,.filter-option-search,.filter-user-preset-editor,.filter-dialog-heading,.filter-popover .filter-actions) { background:var(--surface); color:var(--ink); border-color:var(--n-control-border); } html[data-theme="dark"] .mail-page .neuffer-filter-shell :is(.filter-compact,.filter-popover,.filter-dialog-heading,.filter-panel,.filter-actions,.filter-option-picker,.filter-option-search) { background:var(--surface); color:var(--ink); border-color:var(--n-control-border); } html[data-theme="dark"] .mail-page :is(.filter-presets,.filter-panel,.filter-presets button,.search-select-option) { background:var(--surface); color:var(--ink); border-color:var(--line); } html[data-theme="dark"] .mail-page :is(.filter-presets button,.search-select-option,.filter-option-item):hover { background:var(--surface-hover); } html[data-theme="dark"] .mail-page :is(.filter-fields label,.filter-field-label,.filter-period legend,.filter-dialog-heading h3,.filter-preset-title) { color:var(--muted); } html[data-theme="dark"] .mail-page :is(.filter-option-token,.filter-preset-icon,.filter-chips .chip) { background:var(--accent-soft); color:var(--theme-link); border-color:#587294; } html[data-theme="dark"] .mail-page :is(.filter-option-check,.filter-option-sign,.filter-option-remove,.filter-clear-button,.filter-close,.filter-user-preset-action.cancel) { background:var(--surface-raised); color:var(--muted); border-color:var(--n-control-border); } html[data-theme="dark"] .mail-page :is(.filter-chip-exclude,.filter-option-token.exclude,.filter-option-check.selected.exclude) { background:var(--danger-bg); color:var(--danger); border-color:#a0687b; } html[data-theme="dark"] .mail-page .filter-option-check.selected { background:var(--accent-strong); color:#12233c; border-color:var(--accent-strong); } html[data-theme="dark"] .mail-page .neuffer-filter-shell :is(input,select,.form-control) { background:#253246; color:var(--ink); border-color:var(--n-control-border); } html[data-theme="dark"] .mail-page .filter-search-icon { color:var(--muted); } html[data-theme="dark"] .mail-page .filter-presets button.active { background:var(--accent-soft); color:var(--accent-strong); } html[data-theme="dark"] .mail-page .filter-presets button.active .filter-preset-icon { background:var(--accent-soft); color:var(--accent-strong); } @media(max-width:1180px) { .crm-shell .topbar-inner { grid-template-columns:auto minmax(0,1fr) auto; gap:10px 14px; } .crm-shell .report-section-menu { grid-column:2; grid-row:1; justify-self:end; } .crm-shell .report-display-controls { grid-column:3; grid-row:1; } .crm-shell :is(.header-order-filter,.topbar-inner > .neuffer-filter-shell) { grid-column:1/-1; grid-row:2; } } @media(max-width:900px) { :root { --crm-gutter:12px; } .crm-shell + .page { margin-top:14px; padding-bottom:24px; } .crm-shell { width:calc(100% - 2 * var(--crm-gutter)); border-radius:0 0 16px 16px; } .crm-shell .topbar-inner { grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; padding:10px 12px; } .crm-shell .home-link { font-size:13px; } .crm-shell .report-display-controls { grid-column:2; grid-row:1; } .crm-shell .report-section-menu { grid-column:1/-1; grid-row:2; justify-self:stretch; white-space:normal; } .crm-shell .report-section-menu .tabs { flex:1; min-width:0; } .crm-shell .report-section-menu :is(.tab,.mail-section-link) { flex:1; min-width:0; min-height:36px; padding:5px 8px; font-size:12px; white-space:normal; overflow-wrap:anywhere; } .crm-shell .report-section-menu > .mail-section-link:last-child { flex:0 0 auto; } .crm-shell :is(.header-order-filter,.topbar-inner > .neuffer-filter-shell) { grid-column:1/-1; grid-row:3; } .crm-shell :is(.theme-toggle.quiet-button,.report-language select) { height:36px; min-height:36px; } } /* The filter component replaces its mount class; retain its place in the header grid. */ @media(max-width:580px) { .crm-shell .report-display-controls { display:grid; grid-template-columns:62px 34px; justify-items:end; } .crm-shell .report-display-controls .crm-session-control { grid-column:1/-1; grid-row:2; } .crm-shell .report-display-controls .report-language { grid-column:1; grid-row:1; } .crm-shell .report-display-controls .theme-toggle { grid-column:2; grid-row:1; } .crm-shell .neuffer-filter-shell .filter-chips { flex:1 1 0; min-width:0; max-width:none; } .crm-shell .neuffer-filter-shell .filter-open-button { position:relative; flex:0 0 32px; width:32px; min-width:32px; height:32px; min-height:32px; padding:0; justify-content:center; white-space:nowrap; } .crm-shell .neuffer-filter-shell .filter-open-button > span:first-child { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .crm-shell .neuffer-filter-shell .filter-search-icon { font-size:18px; } } /* Native scrolling stays intact; all CRM panes share the same quiet controls. */ :root { --crm-scroll-thumb:#8698ad; --crm-scroll-hover:#667e9a; --crm-scroll-active:#526b89; } html[data-theme="dark"] { --crm-scroll-thumb:#8195ae; --crm-scroll-hover:#a1b2c8; --crm-scroll-active:#bdccdf; } html:root, html:root :is(body,body *,.mail-page *) { scrollbar-width:thin; scrollbar-color:var(--crm-scroll-thumb) transparent; } /* Chromium's standard properties override its rounded scrollbar pseudo-elements. */ @supports selector(::-webkit-scrollbar) { html:root, html:root :is(body,body *,.mail-page *) { scrollbar-width:auto; scrollbar-color:auto; } html:root::-webkit-scrollbar, html:root :is(body,body *,.mail-page *)::-webkit-scrollbar { width:10px; height:10px; } html:root::-webkit-scrollbar-track, html:root :is(body,body *,.mail-page *)::-webkit-scrollbar-track { background:transparent; } html:root::-webkit-scrollbar-thumb, html:root :is(body,body *,.mail-page *)::-webkit-scrollbar-thumb { background:var(--crm-scroll-thumb); background-clip:padding-box; border:2px solid transparent; border-radius:10px; } html:root::-webkit-scrollbar-thumb:hover, html:root :is(body,body *,.mail-page *)::-webkit-scrollbar-thumb:hover { background-color:var(--crm-scroll-hover); } html:root::-webkit-scrollbar-thumb:active, html:root :is(body,body *,.mail-page *)::-webkit-scrollbar-thumb:active { background-color:var(--crm-scroll-active); } html:root::-webkit-scrollbar-button, html:root :is(body,body *,.mail-page *)::-webkit-scrollbar-button { display:none; width:0; height:0; } html:root::-webkit-scrollbar-corner, html:root :is(body,body *,.mail-page *)::-webkit-scrollbar-corner { background:transparent; } } @media(forced-colors:active) { html:root, html:root :is(body,body *,.mail-page *) { scrollbar-color:auto; scrollbar-width:auto; --crm-scroll-thumb:CanvasText; --crm-scroll-hover:Highlight; --crm-scroll-active:Highlight; } } /* The state preview uses the CRM palette and keeps a complete batch visible. */ .order-state-actions:empty { display:none; } .order-state-actions { display:flex; justify-content:flex-end; gap:8px; margin:12px 0; } .order-state-entry.quiet-button { min-height:36px; border:1px solid var(--line,#d9e1ed); background:var(--surface,#fff); color:var(--accent-strong,#375f9e); } .order-state-dialog { width:calc(100% - 32px); max-width:1000px; max-height:calc(100dvh - 40px); padding:0; overflow:hidden; border:1px solid var(--line,#d9e1ed); border-radius:16px; color:var(--ink,#202b40); background:var(--surface,#fff); } .order-state-dialog::backdrop { background:#17263d80; } .order-state-frame { display:flex; flex-direction:column; max-height:calc(100dvh - 40px); min-height:0; } .order-state-header { display:flex; flex:none; align-items:flex-start; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--line,#d9e1ed); } .order-state-header h2 { margin:4px 0 0; color:inherit; font-size:23px; } .order-state-kicker { margin:0; color:var(--muted,#5c6980); font-size:12px; } .order-state-close.quiet-button { width:36px; min-height:36px; padding:0; border:0; border-radius:8px; font-size:25px; background:var(--surface-raised,#f0f3f8); color:var(--muted,#5c6980); } .order-state-body { min-height:0; overflow:auto; overscroll-behavior:contain; padding:20px 24px; } .order-state-fields { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .order-state-fields label { display:grid; gap:7px; margin:0; font-size:13px; color:var(--muted,#5c6980); } .order-state-fields select { min-width:0; width:100%; min-height:42px; border:1px solid var(--line,#b9c8db); background:var(--surface,#fff); color:var(--ink,#202b40); border-radius:8px; padding:8px 10px; } .order-state-inspect.quiet-button { min-height:40px; margin:14px 0; } .order-state-footer { flex:none; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; padding:14px 24px; border-top:1px solid var(--line,#d9e1ed); background:var(--surface,#fff); } .order-state-footer button { min-height:42px; } .order-state-apply { border:1px solid var(--ready,#276644); color:#fff; background:var(--ready,#276644); } .order-state-apply:disabled { opacity:.55; cursor:default; } .order-state-feedback,.order-state-note,.order-state-quantity-note { padding:12px 14px; border-radius:8px; background:var(--accent-soft,#e9f0fc); color:var(--ink,#202b40); font-size:13px; line-height:1.6; } .order-state-feedback[data-tone="warn"],.order-state-quantity-note[data-tone="warn"] { border-left:3px solid var(--warning,#805900); background:var(--warning-bg,#fff3d5); } .order-state-quantity-note[data-tone="good"] { border-left:3px solid var(--ready,#276644); background:var(--ready-bg,#e7f5ed); } .order-state-quantities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0 12px; padding:12px; background:var(--surface-raised,#f4f6fa); border-radius:8px; } .order-state-quantities dt { font-size:12px; color:var(--muted,#5c6980); } .order-state-quantities dd { margin:5px 0 0; font-size:22px; font-weight:700; } .order-state-small { font-size:12px; line-height:1.6; color:var(--muted,#5c6980); overflow-wrap:anywhere; } .order-state-table-wrap { width:100%; overflow:auto; border:1px solid var(--line,#d9e1ed); border-radius:8px; } .order-state-table { border-collapse:collapse; width:100%; min-width:640px; font-size:13px; line-height:1.6; } .order-state-table th,.order-state-table td { padding:10px 12px; border-bottom:1px solid var(--line,#d9e1ed); text-align:left; vertical-align:top; } .order-state-table th { color:var(--muted,#5c6980); background:var(--surface-raised,#f4f6fa); font-size:12px; font-weight:600; } .order-state-table tr:last-child td { border-bottom:0; } .order-state-table tr[data-tone="warn"] { background:var(--warning-bg,#fff3d5); } .order-state-reasons { padding:12px 0; } .order-state-reasons h3 { margin:0 0 8px; color:inherit; font-size:15px; } .order-state-reasons ul { margin:0; padding-left:20px; font-size:13px; line-height:1.6; } .order-state-history { margin-top:18px; padding-top:14px; border-top:1px solid var(--line,#d9e1ed); } .order-state-history summary { font-size:13px; cursor:pointer; color:var(--accent-strong,#375f9e); } .order-state-history button { margin-top:12px; } .order-state-history-row { display:grid; gap:4px; padding:10px 0; border-bottom:1px solid var(--line,#d9e1ed); font-size:13px; } .order-state-history-row small { color:var(--muted,#5c6980); overflow-wrap:anywhere; } .order-state-dialog :is(button,select):focus-visible { outline:2px solid var(--accent,#547fc3); outline-offset:3px; } .order-state-dialog [hidden],.order-state-actions [hidden] { display:none!important; } html[data-theme="dark"] .order-state-apply { background:#365d47; color:var(--ink); } html[data-theme="dark"] .order-state-apply:hover { background:#426f55; } @media(max-width:580px) { .order-state-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:12px; } .order-state-frame { max-height:calc(100dvh - 16px); } .order-state-header,.order-state-body,.order-state-footer { padding:16px; } .order-state-fields { grid-template-columns:1fr; gap:12px; } .order-state-quantities { gap:8px; padding:10px; } .order-state-quantities dt { font-size:var(--n-font-caption,12px); } .order-state-header h2 { font-size:20px; } .order-state-footer button { flex:1; } .order-state-entry.quiet-button { min-height:44px; } } /* Sign-in is a standalone full-screen page; the authenticated shell stays intact. */ html:root body.crm-auth-pending,html:root body.portal-has-sidebar.crm-auth-pending { overflow:hidden; margin-left:0; } .crm-auth-pending > :is(main,header,dialog,.mail-toast,.portal-sidebar,.portal-menu-backdrop,.skip-link) { visibility:hidden; pointer-events:none; } .crm-auth-gate[hidden],.crm-session-control[hidden],.crm-auth-form [hidden] { display:none!important; } html:root .crm-auth-gate { position:fixed; z-index:2000; inset:0; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr auto; gap:24px; padding:36px clamp(24px,7vw,112px) 24px; box-sizing:border-box; overflow:auto; background:#183447; color:var(--n-text,#243448); font:14px/1.5 var(--n-font,system-ui,sans-serif); } .crm-auth-scene { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; background:#183447; } .crm-auth-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#071b2d99 0%,#0e203d33 60%,#071b2d55),linear-gradient(0deg,#071b2d99,transparent 35%); } .crm-auth-video { width:100%; height:100%; object-fit:cover; object-position:center; display:block; } .crm-auth-layout { grid-column:1/-1; align-self:center; width:min(100%,1280px); justify-self:center; display:grid; grid-template-columns:minmax(0,1fr) 424px; align-items:center; gap:clamp(48px,8vw,140px); } .crm-auth-brand { color:#fff; text-shadow:0 2px 20px #031a2c88; } .crm-auth-logo { display:block; width:min(100%,402px); height:auto; filter:drop-shadow(0 2px 10px #05223d55); } .crm-auth-name { font-size:clamp(30px,3.3vw,48px); font-weight:650; line-height:1.15; margin:28px 0 12px; letter-spacing:-.035em; } .crm-auth-tagline { max-width:420px; margin:0; font-size:clamp(17px,1.65vw,23px); line-height:1.4; text-wrap:balance; } html:root .crm-auth-card { width:100%; padding:34px 36px 36px; box-sizing:border-box; border:1px solid #ffffffb3; border-radius:22px; background:#fffffffa; color:var(--n-text,#243448); box-shadow:0 24px 80px #061d3455; } .crm-auth-top { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:22px; } .crm-auth-eyebrow { color:var(--n-muted,#57697e); font-size:13px; font-weight:650; letter-spacing:.025em; } html:root .crm-auth-language { width:68px; min-height:36px; padding:5px 8px; border:1px solid var(--n-control-border,#7d93ae); border-radius:8px; background:var(--n-surface,#fff); color:var(--n-text,#243448); font:inherit; } .crm-auth-card h1 { margin:0; text-align:center; font-size:25px; font-weight:550; line-height:1.3; letter-spacing:-.025em; } .crm-auth-intro { margin:12px 0 24px; color:var(--n-muted,#57697e); text-align:center; font-size:13px; line-height:1.55; } .crm-auth-form { display:grid; gap:16px; } .crm-auth-field { display:grid; gap:7px; font-size:13px; font-weight:550; } html:root .crm-auth-field input { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--n-control-border,#7d93ae); border-radius:8px; background:var(--n-surface,#fff); color:var(--n-text,#243448); font:inherit; font-size:15px; box-sizing:border-box; } html:root .crm-auth-field input[readonly] { background:var(--n-surface-subtle,#f5f7fa); color:var(--n-muted,#57697e); } .crm-auth-note,.crm-auth-feedback { margin:0; font-size:13px; line-height:1.5; color:var(--n-muted,#57697e); } .crm-auth-feedback { padding:10px 12px; border-radius:8px; background:var(--n-info-bg,#e2f3fd); color:var(--n-info,#17608b); } .crm-auth-feedback.is-error { background:var(--n-danger-bg,#fde9ed); color:var(--n-danger,#a62c49); } html:root .crm-auth-gate .crm-auth-card .crm-auth-form .crm-auth-submit { min-height:46px; border:0; border-radius:8px; background:#16814b; color:#fff; padding:11px 16px; font:inherit; font-size:15px; font-weight:650; cursor:pointer; } html:root .crm-auth-gate .crm-auth-card .crm-auth-form .crm-auth-submit:hover { background:#116d3e; } html:root .crm-auth-gate .crm-auth-card .crm-auth-form .crm-auth-change { min-height:32px; padding:2px; border:0; background:transparent; color:var(--n-link,#0875ac); font:inherit; font-size:13px; cursor:pointer; } .crm-auth-form :disabled { opacity:.65; cursor:wait; } .crm-auth-gate :is(input,select,button):focus-visible { outline:3px solid var(--n-focus,#1b7cba); outline-offset:3px; } .crm-auth-footer { margin:0; align-self:center; color:#fff; font-size:12px; text-shadow:0 1px 8px #001b33; } .crm-auth-media-controls { display:flex; justify-content:flex-end; gap:8px; align-items:center; } html:root .crm-auth-media-controls button { min-height:36px; padding:6px 12px; border:1px solid #ffffff80; border-radius:8px; background:#10273bcc; color:#fff; font:inherit; font-size:12px; cursor:pointer; } html:root .crm-auth-media-controls button:hover { background:#10273bf0; } html:root .crm-auth-media-controls button:disabled { opacity:.8; cursor:default; } html:root .crm-auth-media-controls .crm-auth-theme { width:36px; padding:4px; font-size:19px; } .crm-auth-media-controls button:focus-visible { outline-color:#fff; } /* The sign-in card is dark even though the portal keeps light reading surfaces. */ html:root[data-theme="dark"] .crm-auth-card { background:#172437f5; color:#f4f7ff; border-color:#5b718a; box-shadow:0 24px 80px #0009; } html:root[data-theme="dark"] .crm-auth-card :is(h1,.crm-auth-field) { color:#f4f7ff; } html:root[data-theme="dark"] .crm-auth-card :is(.crm-auth-eyebrow,.crm-auth-intro,.crm-auth-note) { color:#c8d3e9; } html:root[data-theme="dark"] .crm-auth-gate .crm-auth-card .crm-auth-form .crm-auth-change { color:#a9ceff; } html:root[data-theme="dark"] .crm-auth-gate .crm-auth-card .crm-auth-form .crm-auth-submit { background:#66d69b; color:#102b20; } html:root[data-theme="dark"] .crm-auth-gate .crm-auth-card .crm-auth-form .crm-auth-submit:hover { background:#8ae6b3; } .crm-session-control { display:flex; gap:9px; align-items:center; min-width:0; } .crm-session-person { display:flex; flex-direction:column; min-width:0; max-width:160px; line-height:1.25; text-align:right; } .crm-session-person strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:650; } .crm-session-person small { color:#d2def0; font-size:var(--n-font-caption,12px); } .crm-shell .report-display-controls .crm-session-control .crm-session-logout { min-height:34px; padding:6px 9px; border:1px solid #91a1bd; border-radius:8px; background:#ffffff0a; color:inherit; font:inherit; font-size:var(--n-font-caption,12px); cursor:pointer; } .crm-shell .report-display-controls .crm-session-control .crm-session-logout:hover { background:#ffffff1a; } .crm-session-logout:focus-visible { outline:2px solid #d9e8ff; outline-offset:3px; } @media(max-width:900px) { .crm-auth-layout { grid-template-columns:minmax(0,1fr) 380px; gap:32px; } .crm-auth-card { padding:28px; } .crm-auth-logo { width:min(100%,300px); } .crm-auth-name { margin-top:22px; } .crm-session-person { max-width:110px; } } @media(max-width:700px) { html:root .crm-auth-gate { grid-template-columns:minmax(0,1fr); gap:18px; padding:28px 16px 20px; } .crm-auth-layout { grid-column:1; grid-template-columns:minmax(0,1fr); gap:24px; width:min(100%,424px); } .crm-auth-brand { text-align:center; } .crm-auth-logo { width:240px; margin:auto; } .crm-auth-name { font-size:24px; margin:16px 0 6px; } .crm-auth-tagline { font-size:15px; margin:auto; max-width:300px; } html:root .crm-auth-card { padding:26px 24px; border-radius:18px; } .crm-auth-top { margin-bottom:18px; } .crm-auth-card h1 { font-size:23px; } .crm-auth-footer { text-align:center; grid-row:3; font-size:11px; } .crm-auth-media-controls { justify-content:center; } .crm-session-person { max-width:82px; } .crm-session-person small { display:none; } .crm-session-control { gap:5px; } .crm-shell .report-display-controls .crm-session-control .crm-session-logout { padding:5px 7px; font-size:var(--n-font-caption,12px); } } /* Neuffer portal design system. Shared by /, /mail/ and the legacy /crm/ shell. * This file owns the palette and common UI. Feature styles own layout/behaviour. * Text and surfaces use semantic roles; a theme changes the roles, never data. */ html:root { color-scheme: light; --n-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --n-font-caption: 12px; --n-kanban-heading-shape: polygon(0 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,0 100%); --n-canvas: #edf3f7; --n-surface: #ffffff; --n-surface-subtle: #f6f8fa; --n-surface-raised: #eaf0f5; --n-hover: #e9f1f6; --n-text: #243442; --n-muted: #596c7c; --n-border: #d8e1e8; --n-control-border: #7b8f9f; --n-link: #066a9f; --n-link-hover: #055783; --n-selected: #def3fc; --n-primary: #0875b3; --n-primary-hover: #055e92; --n-primary-ink: #ffffff; --n-brand: #08795e; --n-brand-ink: #ffffff; --n-info: #086c9c; --n-info-bg: #dff3fd; --n-success: #236b4d; --n-success-bg: #e8f5ee; --n-warning: #865c14; --n-warning-bg: #fff4dd; --n-danger: #a6344b; --n-danger-bg: #fff0f2; --n-filter-choice-bg: #edf3f8; --n-filter-choice-border: #dbe5ee; --n-filter-choice-ink: #4b6275; --n-filter-exclude-bg: #f8f0f2; --n-filter-exclude-border: #e7dce1; --n-filter-exclude-ink: #785762; --n-violet: #7252a3; --n-violet-bg: #f2edf9; --n-teal: #226e72; --n-teal-bg: #e7f4f3; --n-focus: #6f89aa; --n-focus-halo: #6f89aa24; --n-scroll: #8395a3; --n-shadow: 0 2px 8px #24344209; --n-shadow-overlay: 0 20px 64px #15273329; --n-backdrop: #12233080; --n-radius: 12px; --n-radius-control: 8px; --n-rail: #344555; --n-rail-ink: #e5edf3; --n-rail-active: #45657a; --crm-gutter: 24px; } html:root[data-theme="dark"] { /* Bitrix uses a blue workspace with light reading surfaces. Card roles inherit * the neutral palette above; native fields therefore retain a light scheme. */ color-scheme: light; --n-canvas: #1c3061; --n-workspace-text: #f4f7ff; --n-workspace-muted: #c8d3e9; --n-chrome: #32466f; --n-chrome-raised: #405680; --n-chrome-active: #5c729b; --n-chrome-border: #8296b8; --n-chrome-focus: #b5c9e3; --n-card-canvas: #eef2f5; --n-link: #2864b5; --n-link-hover: #1e4f91; --n-selected: #e4efff; --n-primary: #2e70b8; --n-primary-hover: #235d9c; --n-shadow: 0 2px 8px #101f3d18; --n-shadow-overlay: 0 20px 64px #08173566; --n-backdrop: #0e204da6; --n-rail: #2b416b; --n-rail-active: #526b95; } /* Compatibility names for the existing report, filter and mail components. * Mail used to redeclare these on body, so aliases also live at that boundary. */ html:root, html:root[data-theme] body.mail-page { --bg: var(--n-canvas); --surface: var(--n-surface); --surface-2: var(--n-surface-subtle); --surface-raised: var(--n-surface-raised); --surface-hover: var(--n-hover); --ink: var(--n-text); --text: var(--n-text); --muted: var(--n-muted); --line: var(--n-border); --accent: var(--n-link); --accent-strong: var(--n-link); --accent-soft: var(--n-selected); --theme-link: var(--n-link); --blue: var(--n-link); --blue-dark: var(--n-link-hover); --ready: var(--n-success); --ready-bg: var(--n-success-bg); --green: var(--n-success); --warning: var(--n-warning); --warning-bg: var(--n-warning-bg); --amber: var(--n-warning); --danger: var(--n-danger); --danger-bg: var(--n-danger-bg); --red: var(--n-danger); --mail-teal: var(--n-teal); --mail-teal-soft: var(--n-teal-bg); --mail-violet: var(--n-violet); --mail-violet-soft: var(--n-violet-bg); --mail-primary: var(--n-primary); --mail-primary-ink: var(--n-primary-ink); --mb-rail: var(--n-rail); --mb-rail-ink: var(--n-rail-ink); --mb-rail-active: var(--n-rail-active); --mb-selection: var(--n-selected); --mb-selection-line: var(--n-link); --mb-important: var(--n-warning-bg); --mb-important-hover: var(--n-warning-bg); --mb-avatar-blue: var(--n-info-bg); --mb-avatar-blue-ink: var(--n-info); --mb-avatar-rose: var(--n-danger-bg); --mb-avatar-rose-ink: var(--n-danger); --brand-charcoal: var(--n-text); --shadow: var(--n-shadow); --radius-card: var(--n-radius); --radius-control: var(--n-radius-control); --crm-scroll-thumb: var(--n-scroll); --crm-scroll-hover: var(--n-muted); --crm-scroll-active: var(--n-link); } html, html:root body { color: var(--n-text); background: var(--n-canvas); font-family: var(--n-font); font-size: 14px; line-height: 1.55; font-synthesis: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } html:root body { margin: 0; } html:root .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } html:root :is(button, input, select, textarea) { font-family: var(--n-font); } html:root :is(a, button, summary) { touch-action: manipulation; } html:root a { color: var(--n-link); text-underline-offset: 3px; } html:root a:hover { color: var(--n-link-hover); } /* This shared rule owns focus across legacy component styles and embedded mail. * Important declarations prevent local 2–3px rings from stacking over it. */ html:root :is(button, a, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible { outline: 1px solid var(--n-focus) !important; outline-offset: var(--n-focus-offset,2px) !important; box-shadow: 0 0 0 3px var(--n-focus-halo) !important; } html:root :is(button,a,summary,[tabindex],[contenteditable="true"]):focus:not(:focus-visible) { outline: 0 !important; } html:root :is([role="tab"],.mail-detail-tabs button):focus-visible { border-radius:6px !important; } html:root :is(.message-row-main,.orders-kanban,.kanban-column-list,.mail-sidebar-folders,[role="tabpanel"]) { --n-focus-offset:-2px; } /* White panels must not inherit the pale focus colour of blue portal chrome. */ html:root :is(dialog,.filter-popover,.filter-dropdown-floating) { --n-focus:#6f89aa; --n-focus-halo:#6f89aa24; } html:root .crm-auth-media-controls { --n-focus:#dce8f6; --n-focus-halo:#dce8f626; } html:root :is(input, select, textarea) { color: var(--n-text); background: var(--n-surface); border-color: var(--n-control-border); border-radius: var(--n-radius-control); accent-color: var(--n-primary); } html:root :is(input, textarea)::placeholder { color: var(--n-muted); opacity: 1; } html:root :is(button, input, select, textarea):disabled { cursor: not-allowed; } html:root :is(.fine-print, .small, .meta, .muted, .method-note) { color: var(--n-muted); font-size: 12px; line-height: 1.55; } html:root :is(.mono, .order-metric, .kpi strong, .message-date, .route-card-metrics, .detail-key-facts) { font-variant-numeric: tabular-nums; } /* Frame: one row on large desktops; navigation and filter wrap at smaller widths. */ html:root .crm-shell { width: 100%; margin: 0; border: 0; border-bottom: 1px solid var(--n-border); border-radius: 0; background: var(--n-surface); color: var(--n-text); box-shadow: var(--n-shadow); font: 14px/1.45 var(--n-font); } html:root .crm-shell .topbar-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 20px; padding: 8px var(--crm-gutter); min-height: 56px; } html:root .crm-shell .home-link { display: flex; align-items: center; gap: 10px; grid-column: 1; grid-row: 1; color: var(--n-text); font-size: 14px; font-weight: 650; letter-spacing: -.015em; } .portal-brand-mark { display: grid; place-items: center; width: 32px; height: 32px; flex: none; color: var(--n-brand-ink); background: var(--n-brand); border-radius: 8px; font-size: 20px; font-weight: 700; } html:root .crm-shell .report-section-menu { grid-column: 2; grid-row: 1; justify-self: start; background: transparent; border: 0; border-radius: 0; padding: 0; gap: 4px; } html:root .crm-shell .report-section-menu .tabs { gap: 4px; } html:root .crm-shell .report-section-menu :is(.tab, .mail-section-link) { padding: 9px 12px; min-height: 40px; font-size: 14px; font-weight: 550; color: var(--n-muted); background: transparent; border-radius: 8px; } html:root .crm-shell .report-section-menu :is(.tab, .mail-section-link):hover { background: var(--n-hover); color: var(--n-text); } html:root .crm-shell .report-section-menu :is(.tab.active, .mail-section-link[aria-current="page"]) { color: var(--n-link); background: var(--n-selected); box-shadow: none; font-weight: 650; } html:root .crm-shell :is(.header-order-filter, .topbar-inner > .neuffer-filter-shell) { grid-column: 1/-1; grid-row: 2; } html:root .crm-shell .report-display-controls { grid-column: 3; grid-row: 1; gap: 8px; } html:root .crm-shell :is(.report-language select, .theme-toggle.quiet-button) { height: 40px; min-height: 40px; border-radius: 8px; background: var(--n-surface-subtle); color: var(--n-text); border: 1px solid var(--n-control-border); } html:root .crm-shell .report-language select { width: 62px; font-size: 13px; } html:root .crm-shell .theme-toggle.quiet-button { width: 40px; } html:root .crm-shell .theme-toggle.quiet-button:hover { background: var(--n-hover); color: var(--n-text); border-color: var(--n-control-border); } html:root .crm-shell :is(.report-language option, .dialog-language) { color: var(--n-text); background: var(--n-surface); } html:root .crm-shell + .page { margin-top: 24px; padding-bottom: 32px; } html:root .hero { padding: 0; margin-bottom: 20px; } html:root .hero h1 { margin: 0 0 6px; color: var(--n-text); font-size: clamp(26px, 2.4vw, 32px); letter-spacing: -.035em; } html:root .hero h1 > span { color: var(--n-muted); } html:root .hero-meta { margin: 0; color: var(--n-muted); font-size: 12px; } html:root .panel { border: 1px solid var(--n-border); border-radius: var(--n-radius); background: var(--n-surface); box-shadow: var(--n-shadow); padding: 20px; } html:root .section-heading h2 { color: var(--n-text); font-size: 22px; letter-spacing: -.025em; } html:root :is(.filter-summary, .metrics-period, .kanban-context, .report-notes, .report-notes summary) { color: var(--n-muted); font-size: 12px; } html:root :is(.source-chip, .status-note) { color: var(--n-info); background: var(--n-info-bg); border-radius: 6px; } html:root :is(.kpi, .reconciliation-kpi) { color: var(--n-text); background: var(--n-surface-subtle); border: 1px solid var(--n-border); border-radius: 8px; box-shadow: none; } html:root :is(.kpi strong, .reconciliation-kpi strong) { color: var(--n-text); } html:root :is(#panel-orders .reconciliation-kpis, #panel-review .kpis, #panel-review .review-actions) { background: var(--n-surface-subtle); border-color: var(--n-border); border-radius: 8px; } html:root #panel-review .kpi { border: 0; background: transparent; } html:root #panel-review .kpi + .kpi { border-left: 1px solid var(--n-border); } /* Bitrix reference: blue owns actions/navigation; green remains a success/brand role. */ html:root :is(.quiet-button, .secondary, .button, .icon-button) { color: var(--n-link); background: var(--n-surface); border-color: var(--n-control-border); border-radius: 8px; } html:root :is(.quiet-button, .secondary, .button, .icon-button):hover { color: var(--n-link-hover); background: var(--n-hover); } html:root :is(button.primary, .button.primary, #review-next-decision, #review-save-decision) { color: var(--n-primary-ink); background: var(--n-primary); border-color: var(--n-primary); } html:root :is(button.primary, .button.primary, #review-next-decision, #review-save-decision):hover { color: var(--n-primary-ink); background: var(--n-primary-hover); } html:root :is(.notice, .translation-notice, .sample-warning, .questions, .detail-attention, .discrepancy-card) { background: var(--n-warning-bg); color: var(--n-warning); border-color: var(--n-warning); } html:root .notice.error { background: var(--n-danger-bg); color: var(--n-danger); border-color: var(--n-danger); } html:root .badge { color: var(--n-muted); background: var(--n-surface-raised); border-radius: 5px; font-size: 12px; } html:root :is(#orders-table, #review-table, #order-dialog, #review-dialog, #route-dialog, .kanban-card) .badge { color: var(--n-muted); background: var(--n-surface-raised); } html:root :is(.badge.good, .lifecycle-stage.complete .lifecycle-status), html:root :is(#orders-table, #review-table, #order-dialog, #review-dialog, #route-dialog, .kanban-card) .badge.good { color: var(--n-success); background: var(--n-success-bg); } html:root :is(.badge.info, .lifecycle-stage.partial .lifecycle-status), html:root :is(#orders-table, #review-table, #order-dialog, #review-dialog, #route-dialog, .kanban-card) .badge.info { color: var(--n-info); background: var(--n-info-bg); } html:root :is(.badge.warn, .lifecycle-stage.waiting .lifecycle-status), html:root :is(#orders-table, #review-table, #order-dialog, #review-dialog, #route-dialog, .kanban-card) .badge.warn { color: var(--n-warning); background: var(--n-warning-bg); } html:root :is(.badge.danger, .lifecycle-stage.blocked .lifecycle-status), html:root :is(#orders-table, #review-table, #order-dialog, #review-dialog, #route-dialog, .kanban-card) .badge.danger { color: var(--n-danger); background: var(--n-danger-bg); } /* Filter: common surface, readable chips and visible focus in either theme. */ html:root :is(.filter-compact, .filter-popover, .filter-dropdown-floating, .search-select-list, .filter-option-picker, .filter-option-search, .filter-user-preset-editor) { color: var(--n-text); background: var(--n-surface); border-color: var(--n-control-border); } html:root .crm-shell .neuffer-filter-shell .filter-compact { min-height: 44px; height: auto; border-radius: 8px; } html:root :is(.filter-presets, .filter-panel, .filter-presets button, .search-select-option) { color: var(--n-text); background: var(--n-surface); border-color: var(--n-border); } /* The filter window owns spacing and quiet dividers; field borders stay distinct. */ html:root .filter-popover { box-sizing:border-box; padding:8px; border-color:var(--n-border); } html:root .filter-popover .filter-presets { padding:16px 14px; border-color:var(--n-border); border-radius:10px 0 0 10px; } html:root .filter-popover .filter-panel { border-radius:0 10px 10px 0; } html:root .filter-shell .filter-popover :is(.filter-dialog-heading,.filter-actions) { color:var(--n-text); background:var(--n-surface); border-color:var(--n-border); } html:root .filter-popover .filter-dialog-heading { padding:18px 24px 16px; } html:root .filter-popover .filter-component-fields.filter-fields { padding:20px 24px 24px; } html:root .filter-popover .filter-actions { padding:16px 24px; box-shadow:none; } html:root .filter-popover :is(.filter-preset-group + .filter-preset-group,.filter-user-presets) { border-color:var(--n-border); } @media (max-width:760px) { html:root .filter-popover { padding:6px; } html:root .filter-popover .filter-presets { padding:10px 12px; border-radius:10px 10px 0 0; } html:root .filter-popover .filter-panel { border-radius:0 0 10px 10px; } html:root .filter-popover .filter-dialog-heading { padding:16px; } html:root .filter-popover .filter-component-fields.filter-fields { padding:16px 16px 20px; } html:root .filter-popover .filter-actions { padding:12px 16px; } } html:root :is(.filter-presets button, .search-select-option, .filter-option-item):hover { background: var(--n-hover); } html:root :is(.filter-fields label, .filter-field-label, .filter-period legend, .filter-dialog-heading h3, .filter-preset-title) { color: var(--n-muted); } html:root :is(.filter-preset-icon, .filter-chips .chip, .filter-presets button.active) { color: var(--n-link); background: var(--n-selected); border-color: var(--n-control-border); } html:root :is(.filter-option-check, .filter-option-sign, .filter-option-remove, .filter-clear-button, .filter-close) { color: var(--n-muted); background: var(--n-surface-subtle); border-color: var(--n-control-border); } /* Selection is a quiet field value; plus/minus also distinguishes exclusions. */ html:root :is(.filter-option-token, .filter-option-check.selected) { color:var(--n-filter-choice-ink); background:var(--n-filter-choice-bg); border-color:var(--n-filter-choice-border); } html:root :is(.filter-chip-exclude, .filter-option-token.exclude, .filter-option-check.selected.exclude) { color:var(--n-filter-exclude-ink); background:var(--n-filter-exclude-bg); border-color:var(--n-filter-exclude-border); } html:root .filter-option-token { border-radius:999px; box-shadow:none; } html:root .filter-option-picker { border-radius:12px; border-color:var(--n-border); } html:root .filter-option-item { border-radius:8px; } html:root .filter-option-check { box-shadow:none; } html:root .filter-option-token :is(.filter-option-sign,.filter-option-remove) { color:inherit; background:transparent; border-color:transparent; box-shadow:none; opacity:.8; transform:none; } html:root .filter-option-token :is(.filter-option-sign,.filter-option-remove):hover { background:#60708012; box-shadow:none; opacity:1; transform:none; } html:root .neuffer-filter-shell :is(input, select, .form-control, #review-search):not(.filter-inline-search) { color: var(--n-text); background: var(--n-surface); border-color: var(--n-control-border); } /* Inline search shares filter values with the advanced panel; the shell owns focus. */ html:root .filter-shell.filter-has-inline-search .filter-compact { gap:4px; } html:root .filter-shell.filter-has-inline-search .filter-chips { display:flex; flex:0 2 auto; max-width:55%; } html:root .filter-shell.filter-has-inline-search .filter-clear-button { display:flex; flex:none; align-items:center; justify-content:center; } html:root .filter-shell .filter-inline-search { flex:1 1 120px; width:auto; min-width:64px; min-height:32px; height:32px; margin:0; padding:5px 7px; border:0; border-radius:0; color:var(--n-text); background:transparent; font:inherit; font-size:13px; box-shadow:none; } html:root .filter-shell .filter-inline-search::placeholder { color:var(--n-muted); opacity:1; } html:root .filter-shell .filter-search-button, html:root .filter-shell.filter-has-inline-search .filter-open-button { position:relative; flex:0 0 32px; width:32px; min-width:32px; min-height:32px; padding:5px; border:0; border-radius:5px; color:var(--n-muted); background:transparent; display:flex; align-items:center; justify-content:center; } html:root .filter-shell.filter-has-inline-search .filter-open-button > span { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } html:root .filter-shell.filter-has-inline-search .filter-open-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; } html:root .filter-shell .filter-search-button:hover, html:root .filter-shell.filter-has-inline-search .filter-open-button:hover { background:var(--n-hover); } /* Shared focus: one fine edge on fields, soft keyboard rings on actions. * The filter's legacy !important halo must not add a second heavy ring. */ html:root :is(input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit],[type=reset]),select,textarea):focus, html:root .filter-option-picker:focus-within { border-color:var(--n-focus) !important; outline:0 !important; outline-offset:0 !important; box-shadow:0 0 0 2px var(--n-focus-halo) !important; } html:root :is(.filter-shell.open .filter-compact,.filter-compact:focus-within) { border-color:var(--n-focus); box-shadow:0 0 0 2px var(--n-focus-halo); } /* Composite controls own the field edge; their inner search has no extra ring. */ html:root :is(.filter-option-search,.filter-compact input):focus { outline:0 !important; box-shadow:none !important; } html:root :is(.filter-option-sign,.filter-option-remove,.filter-option-check):is(:hover,:focus-visible) { box-shadow:0 0 0 2px var(--n-focus-halo); } /* Tables scroll within their region; the entire page never grows to table width. */ html:root :is(.table-wrap, .table-shell, .dt-container, .route-buyers-table-wrap) { min-width: 0; } /* Main report tables share a padded card; only the table row scrolls sideways. */ html:root :is(#orders-table-view, #panel-review > .table-wrap) { box-sizing: border-box; padding: 16px 20px; border: 1px solid var(--n-border); border-radius: 14px; background: var(--n-surface); overflow: hidden; } html:root :is(#orders-table-view, #panel-review > .table-wrap) .dt-layout-cell { min-width: 0; } html:root :is(#orders-table-view, #panel-review > .table-wrap) .dt-layout-row:not(.dt-layout-table) { margin-block: 0; } html:root :is(#orders-table-view, #panel-review > .table-wrap) .dt-layout-table { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 8px; } @media (max-width: 760px) { html:root :is(#orders-table-view, #panel-review > .table-wrap) { padding: 12px; border-radius: 12px; } } html:root :is(#orders-table, #review-table, .route-buyers-table, .customer-orders-table, .review-unread-table) { color: var(--n-text); background: var(--n-surface); } html:root :is(#orders-table, #review-table, .route-buyers-table, .customer-orders-table, .review-unread-table) thead th { background: var(--n-surface-subtle); color: var(--n-muted); border-color: var(--n-border); font-size: 12px; } html:root :is(#orders-table, #review-table, .route-buyers-table) tbody tr { background: var(--n-surface); } html:root :is(#orders-table, #review-table, .route-buyers-table) tbody tr:nth-child(even) { background: var(--n-surface-subtle); } html:root :is(#orders-table, #review-table, .route-buyers-table) tbody tr:hover { background: var(--n-hover); } html:root :is(#orders-table, #review-table, .route-buyers-table) tbody td { color: var(--n-text); border-bottom-color: var(--n-border) !important; } html:root :is(#orders-table, #review-table) :is(.customer-order-nos, .order-metric strong, .order-amount-cell, .mono, .digest, .review-reason-label, .review-date-cell span) { color: var(--n-text); } html:root :is(#orders-table, #review-table) :is(.small, .order-metric-label, .last-message-cell span, .last-message-cell small, .review-date-cell small) { color: var(--n-muted); font-size: 12px; } html:root :is(#orders-table, #review-table) .row-detail-button { color: var(--n-link); background: var(--n-surface); border-color: var(--n-control-border); min-height: 36px; font-size: 13px !important; border-radius: 6px; } html:root :is(#orders-table, #review-table) .row-detail-button:hover { color: var(--n-link-hover); background: var(--n-selected); border-color: var(--n-link); } html:root .dt-container .dt-input { color: var(--n-text); background: var(--n-surface) !important; border-color: var(--n-control-border) !important; border-radius: 8px !important; } html:root .dt-container .dt-paging .dt-paging-button { color: var(--n-muted) !important; } html:root .dt-container .dt-paging .dt-paging-button.current { color: var(--n-link) !important; background: var(--n-selected); border-color: var(--n-control-border); } /* Kanban: colour identifies the stage; cards remain quiet and legible. */ html:root .orders-kanban { background: var(--n-surface-subtle); border-color: var(--n-border); border-radius: 8px; } html:root #orders-kanban { position:relative; } html:root #orders-kanban .kanban-column-heading[data-reorder-enabled=true] { cursor:grab; touch-action:none; user-select:none; } html:root #orders-kanban .kanban-column-grip { display:grid; place-items:center; flex:none; margin-left:auto; width:22px; min-height:24px; padding:0; border:0; border-radius:5px; background:transparent; color:inherit; font-size:21px; line-height:1; cursor:grab; opacity:.65; } html:root #orders-kanban .kanban-column-grip:is(:hover,:focus-visible) { opacity:1; background:#ffffff36; } html:root #orders-kanban .kanban-column-grip:disabled { cursor:default; opacity:.25; } html:root #orders-kanban.is-reordering .kanban-column.is-dragging { opacity:.3; } html:root.is-dealer-kanban-dragging, html:root.is-dealer-kanban-dragging * { cursor:grabbing!important; } html:root .kanban-column.dealer-kanban-drag-preview { position:fixed; top:0; left:0; z-index:150; pointer-events:none; overflow:hidden; padding:10px; border:1px solid var(--n-control-border); border-radius:12px; background:var(--n-canvas); box-shadow:var(--n-shadow-overlay); opacity:.96; } html:root .kanban-column.dealer-kanban-drag-preview.is-outside { opacity:.5; } html:root .kanban-column.dealer-kanban-drag-preview .dealer-kanban-drag-cards { display:grid; gap:8px; margin-top:10px; } html:root .kanban-column.dealer-kanban-drag-preview .dealer-kanban-drag-note { padding:8px 10px; border-radius:7px; background:var(--n-surface); color:var(--n-muted); font-size:12px; } html:root #kanban-order-reset { margin-left:auto; min-height:28px; padding:3px 8px; font-size:12px; color:var(--n-link); background:transparent; border:0; } html:root #kanban-order-reset:disabled { opacity:.45; } html:root[data-theme=dark] #kanban-order-reset { color:var(--n-workspace-muted); } html:root #kanban-order-status:not(.sr-only) { margin:0; padding:8px 12px; border:1px solid var(--n-border); border-radius:8px; color:var(--n-danger); background:var(--n-surface); font-size:12px; } html:root #kanban-colors-open { min-height:28px; padding:3px 8px; font-size:12px; } html:root .kanban-colors-notice { margin:0; font-size:12px; color:var(--n-muted); } html:root[data-theme=dark] .kanban-colors-notice { color:var(--n-workspace-muted); } html:root .kanban-colors-dialog { box-sizing:border-box; width:min(700px,calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:24px; border:1px solid var(--n-border); border-radius:16px; overflow:auto; } html:root .kanban-colors-dialog header { display:flex; align-items:center; gap:16px; } html:root .kanban-colors-dialog header h2 { margin:0; font-size:20px; color:var(--n-text); } html:root .kanban-colors-dialog header button { margin-left:auto; width:32px; padding:0; } html:root .kanban-colors-description { margin:8px 0 22px; color:var(--n-muted); font-size:13px; } html:root .kanban-colors-rows { display:grid; gap:10px; } html:root .kanban-color-row { display:grid; grid-template-columns:minmax(0,1fr) 40px 90px auto; gap:12px; align-items:center; padding:10px; border:1px solid var(--n-border); border-radius:10px; } html:root .kanban-color-sample { padding:9px 12px; border:1px solid #142a4926; border-radius:6px; font-size:12px; font-weight:600; } html:root .kanban-color-row input[type=color] { box-sizing:border-box; width:40px; min-height:34px; padding:3px; border:1px solid var(--n-control-border); border-radius:8px; background:var(--n-surface); cursor:pointer; } html:root .kanban-color-value { box-sizing:border-box; width:90px; min-width:0; min-height:34px; padding:4px 6px; border:1px solid var(--n-border); border-radius:7px; font:12px monospace; color:var(--n-muted); background:var(--n-surface); } html:root .kanban-color-row button { min-height:30px; padding:3px 6px; font-size:12px; } html:root .kanban-colors-feedback { min-height:20px; margin:14px 0 4px; color:var(--n-danger); font-size:13px; } html:root .kanban-colors-dialog footer { display:flex; gap:10px; flex-wrap:wrap; padding-top:14px; } html:root .kanban-colors-dialog footer button:first-child { margin-right:auto; } html:root .kanban-colors-dialog footer .primary-button { color:#fff; background:var(--n-link); border-color:var(--n-link); } @media(max-width:560px) { html:root .kanban-colors-dialog { padding:18px; } html:root .kanban-color-row { grid-template-columns:minmax(0,1fr) 40px 90px; gap:8px; } html:root .kanban-color-row button { grid-column:1/-1; justify-self:end; } } html:root .kanban-column { --stage-bg: var(--n-surface-raised); --stage-ink: var(--n-text); } html:root .kanban-column[data-tone="danger"] { --stage-bg: var(--n-danger-bg); --stage-ink: var(--n-danger); } html:root .kanban-column:is([data-tone="warn"], [data-state="000000021"], [data-state="route:000000001"]) { --stage-bg: var(--n-warning-bg); --stage-ink: var(--n-warning); } html:root .kanban-column:is([data-tone="info"], [data-state="000000002"], [data-state="route:000000006"], [data-state="route:000000003"]) { --stage-bg: var(--n-info-bg); --stage-ink: var(--n-info); } html:root .kanban-column:is([data-tone="good"], [data-state="ready"], [data-state="realized"], [data-state="route:000000004"]) { --stage-bg: var(--n-success-bg); --stage-ink: var(--n-success); } html:root .kanban-column:is([data-state="production"], [data-state="route:000000002"]) { --stage-bg: var(--n-violet-bg); --stage-ink: var(--n-violet); } html:root .kanban-column-heading { background: var(--stage-bg); color: var(--stage-ink); font-size: 14px; } html:root .kanban-column-amount { background: transparent; color: var(--n-text); font-size: 16px; } html:root .kanban-card { background: var(--n-surface); border-color: var(--n-border); border-radius: 9px; box-shadow: var(--n-shadow); } html:root .kanban-card:hover { border-color: var(--n-control-border); } html:root .kanban-card .kanban-card-open { color: var(--n-link); background: transparent; } html:root .kanban-card .kanban-card-open:hover { color: var(--n-link-hover); background: var(--n-selected); } html:root :is(.kanban-card-date, .kanban-column-missing, .kanban-customer-refs > span, .kanban-quantities dt, .kanban-card-amount > span, .kanban-card-latest > span, .route-card-departure > span) { color: var(--n-muted); font-size: 12px; } html:root :is(.kanban-customer-refs strong, .kanban-quantities dd, .kanban-card-amount > strong, .route-card-departure > strong) { color: var(--n-text); } html:root :is(.kanban-quantities, .kanban-quantities > div, .kanban-card-latest) { border-color: var(--n-border); } html:root :is(.kanban-card-latest time, .route-departure time, .route-order-nos) { color: var(--n-muted); font-size: 12px; } html:root :is(.kanban-card, #order-dialog, #route-dialog, #review-dialog) :is(.country-caption, .delivery-address-empty, .delivery-address-text, .route-section-label, .route-empty, .buyer-counterparty, .readiness-progress p, .readiness-progress small) { font-size: 12px; line-height: 1.55; } html:root .neuffer-filter-shell :is(.chip, .filter-option-token) { font-size: 12px; } html:root :is(.kanban-empty, .detail-empty) { background: var(--n-surface-subtle); color: var(--n-muted); border-color: var(--n-control-border); } html:root .orders-view-switch { background: var(--n-surface-subtle); border-color: var(--n-border); } html:root .orders-view-switch .quiet-button { color: var(--n-muted); background: transparent; } html:root .orders-view-switch .quiet-button[aria-pressed="true"] { color: var(--n-link); background: var(--n-surface); } html:root :is(.route-card-metrics > div, .route-overview) { background: var(--n-surface-subtle); } html:root .route-card-meter { --meter-fill: var(--n-link); } html:root .route-card-meter[data-kind="readiness"] { --meter-fill: var(--n-success); } html:root .route-card-meter[data-overloaded="true"] { --meter-fill: var(--n-warning); } html:root :is(.route-meter-track, .route-meter-track::-webkit-progress-bar, .readiness-progress progress, .readiness-progress progress::-webkit-progress-bar) { background: var(--n-border); } html:root .route-card-menu-content { background: var(--n-surface); box-shadow: var(--n-shadow-overlay); } /* Cards and decisions: the same surfaces as the list, with clear scrolling boundaries. */ html:root :is(dialog, #order-dialog, #review-dialog, #route-dialog) { background: var(--n-surface); color: var(--n-text); border-radius: 14px; box-shadow: var(--n-shadow-overlay); } html:root dialog::backdrop { background: var(--n-backdrop); } html:root :is(#order-dialog, #review-dialog, #route-dialog) :is(.detail-header, .dialog-header, .detail-tabs, .order-dialog-body, .dialog-actions) { background: var(--n-surface); border-color: var(--n-border); } html:root :is(#order-dialog, #review-dialog, #route-dialog) :is(h2, h3, h4, h5, h6, .business-state-title, .detail-key-facts dd, .detail-linked-orders strong, .attribute-list dd, .timeline-event-heading strong, .route-overview strong, .customer-order-amount) { color: var(--n-text); } html:root :is(#order-dialog, #review-dialog, #route-dialog) :is(.fine-print, .small, .meta, .dialog-kicker, .eyebrow, .detail-key-facts dt, .detail-key-facts small, .detail-linked-orders span, .attribute-list dt, .lifecycle-date, .detail-tab-count, .review-current-decision > span, .review-files-note, .review-decision-context, .route-buyer-count, .route-scope-note) { color: var(--n-muted); font-size: 12px; } html:root :is(#order-dialog, #review-dialog, #route-dialog) :is(.summary-card, .customer-order-card, .order-position, .order-shared-wrap, .review-file-card, .review-decision-fields, .review-check-note, .timeline-evidence, .reconciliation-evidence, .technical-card, #review-evidence) { background: var(--n-surface-subtle); border-color: var(--n-border); } html:root :is(#order-dialog, #review-dialog, #route-dialog) :is(.summary-card > p, .timeline-summary, .correspondence-context > p, .review-file-card p, .review-check-note p, .review-decision-fields label, .customer-order-meta span, .customer-order-source-state, #review-evidence p) { color: var(--n-text); } html:root .detail-tabs .quiet-button { color: var(--n-muted); background: transparent; } html:root .detail-tabs .quiet-button[aria-selected="true"] { color: var(--n-link); border-bottom-color: var(--n-link); } html:root :is(#order-dialog, #review-dialog, #route-dialog) :is(.detail-header .quiet-button, .dialog-header .quiet-button) { color: var(--n-muted); background: var(--n-surface-subtle); } html:root .lifecycle-stage .lifecycle-icon { background: var(--n-surface-raised); color: var(--n-muted); border-color: var(--n-border); box-shadow: 0 0 0 4px var(--n-surface-subtle); } html:root .lifecycle-stage.complete .lifecycle-icon { color: var(--n-success); background: var(--n-success-bg); } html:root .lifecycle-stage.waiting .lifecycle-icon { color: var(--n-warning); background: var(--n-warning-bg); } html:root .lifecycle-stage.partial .lifecycle-icon { color: var(--n-info); background: var(--n-info-bg); } html:root .lifecycle-stage.blocked .lifecycle-icon { color: var(--n-danger); background: var(--n-danger-bg); } html:root .lifecycle-stage::before { background: var(--n-border); } /* Mail: comfortable text in folders, list, reader, composer and auxiliary dialogs. */ html:root body.mail-page { font-size: 14px; } html:root .mail-page :is(.mail-workspace, .mail-detail, .mail-list-pane, .reading-pane, .mail-compose, .mail-dialog) { background: var(--n-surface); color: var(--n-text); } html:root .mail-page .mail-workspace { border-radius: var(--n-radius); margin-top: 20px; box-shadow: var(--n-shadow); } html:root .mail-page .mail-sidebar { background: var(--n-surface-subtle); padding: 20px 12px 14px; } html:root .mail-page .compose-new { font-size: 14px; min-height: 42px; border-radius: 8px; } html:root .mail-page .mail-folders button { font-size: 13px; min-height: 38px; } html:root .mail-page :is(.folder-heading, .mail-account div > span, .folder-count, .folder-service-note, .mail-sidebar-note, .mail-auto-refresh) { font-size: 12px; color: var(--n-muted); letter-spacing: 0; text-transform: none; } html:root .mail-page .mail-list-heading { background: var(--n-surface); padding: 18px; min-height: 82px; } html:root .mail-page .mail-list-heading h1 { font-size: 21px; } html:root .mail-page :is(.mail-list-heading .muted, .message-date, .message-row-bottom, .mail-list-footer, .message-link, .message-link.unlinked, .attachment-count) { font-size: 12px; } html:root .mail-page .message-row-main { padding: 16px 40px 16px 16px; } html:root .mail-page .message-row-main, html:root .mail-page .message-row-main:hover { color: var(--n-text); background: transparent; } html:root .mail-page .mail-folders button { color: var(--n-text); background: transparent; } html:root .mail-page .mail-folders button[aria-current="page"] { color: var(--n-link); background: var(--n-selected); box-shadow: 0 1px 3px #29344707; } html:root .mail-page .message-sender { font-size: 13px; } html:root .mail-page .message-subject { font-size: 14px; line-height: 1.5; } html:root .mail-page .message-preview { font-size: 13px; } html:root .mail-page .mail-workspace .message-row.selected { background: var(--n-selected); border-left-color: var(--n-link); } html:root .mail-page :is(.message-heading h2, .message-envelope .message-heading h2) { font-size: 24px; line-height: 1.35; } html:root .mail-page :is(.sender-summary strong, .message-meta, .message-breadcrumb, .file-info strong) { font-size: 13px; } html:root .mail-page :is(.message-original, .message-plain, .translated-message-text) { font-size: 15px; line-height: 1.75; } html:root .mail-page :is(.message-actions button, .body-view-toggle button, .mail-detail-tabs button, .message-analysis summary) { font-size: 13px; } html:root .mail-page :is(.reply-label, .reply-feedback, .reply-length, .reply-file-limit, .reply-upload-info small, .reply-recipient-option span, .reply-file-state, .reply-translation-state) { font-size: 12px; } html:root .mail-page :is(.reply-upload-info strong, .reply-recipient-option strong, .reply-translation-tools button, .reply-upload) { font-size: 13px; } html:root .mail-page .reply-field-bodyText textarea { font-size: 15px; line-height: 1.7; } html:root .mail-page :is(.sorting-job, .contacts-row, .xml-preview-panel, .order-overview) { border-color: var(--n-border); } /* The authenticated letter iframe and PDF pages retain document-owned colours. * They are separate documents, not CSS-themed portal surfaces. */ /* Sign-in owns its video backdrop and form styling in auth-session.css. */ html:root .crm-session-person small { color: var(--n-muted); font-size: 12px; } html:root .crm-shell .report-display-controls .crm-session-control .crm-session-logout { color: var(--n-muted); background: var(--n-surface); border-color: var(--n-control-border); font-size: 12px; min-height: 40px; } html:root .crm-shell .report-display-controls .crm-session-control .crm-session-logout:hover { background: var(--n-hover); color: var(--n-text); } @media (max-width: 1180px) { html:root .crm-shell .topbar-inner { gap: 10px 16px; } html:root .crm-shell .report-section-menu { justify-self: start; } html:root .crm-shell .report-section-menu :is(.tab, .mail-section-link) { font-size: 13px; padding: 9px; } html:root .crm-session-person { max-width: 110px; } } @media (max-width: 900px) { html:root { --crm-gutter: 16px; } html:root .crm-shell .topbar-inner { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 12px var(--crm-gutter); } html:root .crm-shell .home-link { flex: 1; } html:root .crm-shell .report-display-controls { flex: none; } html:root .crm-shell .report-section-menu { order: 3; width: 100%; } html:root .crm-shell :is(.header-order-filter, .topbar-inner > .neuffer-filter-shell) { order: 4; width: 100%; } html:root .crm-shell .report-section-menu .tabs { flex: 1; min-width: 0; } html:root .crm-shell .report-section-menu :is(.tab, .mail-section-link) { flex: 1; min-width: 0; min-height: 44px; white-space: normal; overflow-wrap: anywhere; } html:root .crm-shell .report-section-menu > .mail-section-link:last-child { flex: 0 0 auto; } html:root .crm-shell + .page { margin-top: 20px; } html:root .crm-auth-pending .crm-shell .topbar-inner { min-height: 72px; } } @media (max-width: 600px) { html:root { --crm-gutter: 12px; } html:root .crm-shell .home-link > span:not(.portal-brand-mark) { display: none; } html:root .crm-shell .home-link::after { content: "Neuffer"; font-size: 16px; font-weight: 650; } html:root .crm-shell .report-display-controls { display: flex; gap: 6px; } html:root .crm-session-person { display: none; } html:root .crm-shell :is(.report-language select, .theme-toggle.quiet-button) { min-height: 44px; height: 44px; } html:root .crm-shell .report-language select { width: 56px; } html:root .crm-shell .report-display-controls .crm-session-control .crm-session-logout { min-height: 44px; padding: 6px 8px; } html:root .panel { padding: 14px; } html:root .hero h1 { font-size: 26px; } html:root .section-heading h2 { font-size: 20px; } html:root :is(.detail-tabs, .mail-detail-tabs) { gap: 16px; overflow-x: auto; } html:root :is(.detail-tabs .quiet-button, .mail-detail-tabs button) { min-height: 44px; font-size: 13px; } html:root .mail-page :is(.icon-button, .message-actions button, .mail-folders button) { min-height: 44px; } html:root .mail-page .icon-button { min-width: 44px; } html:root .mail-page .reading-pane { padding: 20px 16px; } html:root .mail-page :is(.message-heading h2, .message-envelope .message-heading h2) { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { html:root *, html:root *::before, html:root *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; } } @media (forced-colors: active) { html:root :is(button, a, input, select, textarea, summary, [tabindex], [contenteditable="true"]):focus-visible { outline:2px solid Highlight !important; box-shadow:none !important; } html:root :is(input:not([type=checkbox],[type=radio],[type=range],[type=button],[type=submit],[type=reset]),select,textarea):focus, html:root :is(.filter-option-picker,.filter-compact):focus-within { border-color:Highlight !important; outline:2px solid Highlight !important; outline-offset:0 !important; box-shadow:none !important; } html:root :is(.filter-option-search,.filter-compact input):focus { outline:0 !important; } html:root :is(.badge, .portal-brand-mark, .filter-option-check.selected) { border: 1px solid CanvasText; } } /* Operational workspace: compact chrome, tools first, methodology after tools. */ html:root .crm-shell + .page { margin-top: 6px; padding-bottom: 12px; } html:root .workspace-status { display:flex; justify-content:flex-end; color:var(--n-muted); font-size:12px; min-height:20px; margin:0 0 4px; } /* Orders have one freshness label; retain the review timestamp and page heading. */ html:root body:has(#panel-orders:not([hidden])) .workspace-status { min-height:0; margin:0; } html:root body:has(#panel-orders:not([hidden])) #updated-label { display:none; } html:root :is(#panel-orders,#panel-review) { padding:12px; border-radius:8px; box-shadow:none; } html:root .orders-heading { align-items:center; flex-wrap:wrap; gap:8px 16px; margin:0 0 8px; } html:root .orders-heading-title { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; } html:root .orders-heading-title h2 { margin:0; font-size:20px; } html:root .orders-heading-title .filter-summary { margin:0; } html:root .orders-heading .orders-source { margin-left:auto; } html:root .orders-heading .source-chip { font-size:12px; background:transparent; padding:0; } html:root .orders-view-switch { margin:0; padding:3px; border-radius:6px; gap:2px; } html:root .orders-view-switch .quiet-button { min-height:32px; padding:4px 10px; border-radius:4px; font-size:13px; } html:root .orders-view-switch .quiet-button[aria-pressed=true] { background:var(--n-selected); color:var(--n-link); box-shadow:none; } /* A one-pixel inner edge uses the same tint mix as light Kanban headings. */ html:root:not([data-theme=dark]) :is(.filter-chips .chip, .orders-view-switch .quiet-button[aria-pressed=true]) { --n-selection-fill:var(--n-selected); box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,var(--n-selection-fill)); } html:root:not([data-theme=dark]) .filter-chips .chip.filter-chip-exclude { --n-selection-fill:var(--n-filter-exclude-bg); } html:root .orders-view-toolbar { margin:0 0 6px; padding:0; min-height:0; } html:root .kanban-context { margin:0; line-height:1.4; } html:root .orders-kanban { padding:10px; gap:12px; } html:root .kanban-column-heading { border-radius:5px; min-height:38px; padding:8px 12px; } html:root :is(.kanban-column-heading,.dealer-kanban-column-heading) { clip-path:var(--n-kanban-heading-shape); border-radius:5px; padding-left:10px; padding-right:18px; } html:root .dealer-kanban-column-heading { background:color-mix(in srgb,var(--column-color,var(--n-surface-raised)) 18%,var(--n-surface)); } /* Two clipped layers trace the arrow contour without changing the heading size. */ html:root:not([data-theme=dark]) .kanban-column-heading { --n-heading-fill:var(--stage-bg); --n-heading-edge:var(--stage-ink); } html:root:not([data-theme=dark]) .dealer-kanban-column-heading { --n-heading-fill:color-mix(in srgb,var(--column-color,var(--n-surface-raised)) 18%,var(--n-surface)); --n-heading-edge:var(--column-color,var(--n-control-border)); } html:root:not([data-theme=dark]) :is(.kanban-column-heading,.dealer-kanban-column-heading) { position:relative; isolation:isolate; background:color-mix(in srgb,var(--n-heading-edge) 18%,var(--n-heading-fill)); } html:root:not([data-theme=dark]) :is(.kanban-column-heading,.dealer-kanban-column-heading)::before { content:""; position:absolute; inset:1px; z-index:-1; pointer-events:none; background:var(--n-heading-fill); border-radius:4px; clip-path:var(--n-kanban-heading-shape); } /* A shared custom fill keeps the same value in both themes; ink is contrast-aware. */ html:root .kanban-column-heading[data-custom-color=true] { --stage-ink:var(--kanban-custom-ink); --n-heading-fill:var(--kanban-custom-fill); --n-heading-edge:#000; color:var(--kanban-custom-ink); background:color-mix(in srgb,var(--kanban-custom-fill) 86%,#000); position:relative; isolation:isolate; } html:root .kanban-column-heading[data-custom-color=true]::before { content:""; position:absolute; inset:1px; z-index:-1; pointer-events:none; border-radius:4px; background:var(--kanban-custom-fill); clip-path:var(--n-kanban-heading-shape); } html:root .kanban-column-heading[data-custom-color=true] :is(h3,.kanban-column-count) { color:var(--kanban-custom-ink); } html:root :is(.xml-status-details,.review-method) { margin:8px 0 0; } html:root .mail-page .mail-workspace { margin:6px auto 8px; width:calc(100% - 16px); border-radius:8px; box-shadow:none; } html:root .mail-page .mail-sidebar { padding:12px 10px; } html:root .mail-page .mail-account { margin-bottom:12px; } html:root .mail-page .compose-new { margin-bottom:12px; min-height:38px; } html:root .mail-page .mail-list-heading { padding:12px 16px; min-height:60px; } html:root .mail-page .mail-list-heading h1 { font-size:20px; } /* Shared column rows keep the mailbox, list and reader dividers aligned. */ @media (min-width:761px) { html:root .mail-page .mail-workspace { --mail-pane-header-height:72px; --mail-pane-footer-height:56px; } html:root .mail-page :is(.mail-account,.mail-list-heading,.mail-detail-toolbar) { box-sizing:border-box; height:var(--mail-pane-header-height); min-height:var(--mail-pane-header-height); flex-shrink:0; } html:root .mail-page .mail-account { margin:-12px -10px 12px; padding:10px 18px; } html:root .mail-page .mail-list-heading { padding:10px 16px; } html:root .mail-page :is(.mail-sidebar-status,.mail-list-footer) { box-sizing:border-box; height:var(--mail-pane-footer-height); min-height:var(--mail-pane-footer-height); flex:0 0 var(--mail-pane-footer-height); } html:root .mail-page .mail-sidebar-status { display:flex; align-items:center; margin:0 -10px -12px; padding:8px 18px; } html:root .mail-page .mail-sidebar-status .mail-sidebar-note { display:grid; grid-template-columns:6px minmax(0,1fr); gap:2px 6px; width:100%; min-width:0; padding:0; line-height:1.5; } html:root .mail-page .mail-sidebar-status .status-dot { align-self:center; margin:0; } html:root .mail-page #mail-source-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html:root .mail-page .mail-sidebar-status .mail-auto-refresh { grid-column:2; padding-left:0; } html:root .mail-page .mail-list-footer { padding:8px 12px; } html:root .mail-page .mail-list-footer #updated { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } html:root .mail-page .mail-list-footer button { flex:none; } } html:root .crm-board-page #panel-orders > .orders-heading { display:flex; flex:none; } html:root .crm-board-page #panel-orders > .xml-status-details { display:block; flex:none; } html:root .crm-board-page .workspace-status { flex:none; } html:root .mail-page .mail-rail-account { background:var(--n-brand); color:var(--n-brand-ink); } html:root .mail-page .mail-rail-button { background:transparent; color:var(--n-muted); border-color:transparent; box-shadow:none; } html:root .mail-page .mail-rail-button:hover { background:var(--n-hover); color:var(--n-text); } html:root .mail-page .mail-rail-button:is(.active,[aria-current=page],[aria-pressed=true]) { background:var(--n-selected); color:var(--n-link); } html:root .mail-page .mail-rail-compose { background:var(--n-primary); color:var(--n-primary-ink); } html:root .mail-page .mail-rail-compose:hover { background:var(--n-primary-hover); color:var(--n-primary-ink); } html:root .mail-page .mail-rail-button:is(.active,[aria-current=page])::before { background:var(--n-link); } html:root .mail-page .message-row-main { padding:12px 34px 12px 12px; gap:9px; } html:root .mail-page :is(.message-date,.message-order-presence,.message-importance,.mail-list-footer,.mail-account small,.order-overview dt,.order-overview small) { font-size:12px; } html:root .mail-page .message-actions .action-reply { background:var(--n-primary); color:var(--n-primary-ink); border-color:var(--n-primary); } html:root .mail-page .message-actions .action-reply:hover { background:var(--n-primary-hover); color:var(--n-primary-ink); } html:root .mail-page .message-actions .mail-order-state-actions .order-state-entry { font-size:12px; } html:root .mail-page .message-actions .mail-order-state-actions [data-state-target="000000002"] { color:var(--n-success); background:var(--n-success-bg); border-color:var(--n-success); } html:root .mail-page .message-actions .mail-order-state-actions [data-state-target="000000005"] { color:var(--n-danger); background:var(--n-danger-bg); border-color:var(--n-danger); } @media(min-width:1440px) { html:root .crm-shell .topbar-inner { grid-template-columns:auto auto minmax(220px,1fr) auto; gap:12px; } html:root .crm-shell :is(.header-order-filter,.topbar-inner > .neuffer-filter-shell) { grid-column:3; grid-row:1; } html:root .crm-shell .report-display-controls { grid-column:4; } html:root .crm-shell .report-section-menu :is(.tab,.mail-section-link) { font-size:13px; padding:7px 10px; } } /* Entity cards follow the Bitrix side-panel reading path: facts then work/history. Native dialog owns trapping, Escape and focus return. Only the body scrolls. */ html:root :is(#order-dialog,#review-dialog,#route-dialog,.order-state-dialog,.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog) { position:fixed; inset:0 0 0 auto; margin:0; width:min(1180px,calc(100vw - 64px)); max-width:none; height:100dvh; max-height:100dvh; padding:0; border:0; border-left:1px solid var(--n-border); border-radius:12px 0 0 12px; overflow:hidden; background:var(--n-canvas); color:var(--n-text); } html:root :is(#order-dialog,#review-dialog,#route-dialog) > :is(article,form) { display:flex; flex-direction:column; height:100%; min-height:0; margin:0; padding:0; border:0; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header,.dialog-header) { flex:none; display:flex; align-items:center; gap:12px; padding:16px 24px 12px; min-height:82px; border-bottom:1px solid var(--n-border); background:var(--n-surface); } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header,.dialog-header) > div:first-child { flex:1; min-width:0; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header h3,.dialog-header h2) { margin:0; font-size:24px; line-height:1.3; overflow-wrap:anywhere; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.eyebrow,.dialog-kicker) { margin:0 0 4px; letter-spacing:.04em; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header,.dialog-header) .quiet-button { min-height:40px; width:40px; padding:0; flex:none; font-size:26px; } html:root .dialog-language { width:62px; min-height:36px; padding:4px 8px; flex:none; color:var(--n-text); background:var(--n-surface); } html:root :is(#order-dialog,#review-dialog) .detail-tabs { flex:none; padding:0 24px; gap:20px; overflow-x:auto; background:var(--n-surface); } html:root :is(#order-dialog,#review-dialog) .detail-tabs .quiet-button { min-height:44px; padding:10px 2px; font-size:14px; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.order-dialog-body,.review-dialog-grid,.route-dialog-body) { flex:1 1 0; min-height:0; overflow:auto; padding:20px 24px; background:var(--n-canvas); overscroll-behavior:contain; } html:root .portal-card-columns { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:20px; align-items:start; } html:root :is(.portal-card-facts,.portal-card-work) { min-width:0; } html:root .portal-card-facts { padding:18px; border:1px solid var(--n-border); border-radius:8px; background:var(--n-surface); } html:root :is(#order-dialog,#review-dialog) .portal-card-facts :is(.order-status-overview,.review-status-overview) { display:block; margin:0 0 16px; padding:0; border:0; } html:root .portal-card-facts .business-state-title { font-size:20px; line-height:1.4; } html:root .portal-card-facts :is(.detail-linked-orders,.review-current-decision) { text-align:left; align-items:start; margin-top:12px; } html:root .portal-card-facts .detail-key-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 16px; padding:14px 0; border-block:1px solid var(--n-border); } html:root .portal-card-facts .detail-key-facts > div { border:0; grid-column:auto; padding:0; min-width:0; } html:root .portal-card-facts .detail-key-facts dd { font-size:20px; overflow-wrap:anywhere; } html:root :is(#order-dialog,#review-dialog) .portal-card-work :is(.summary-card,.customer-order-card,.review-check-note,#review-evidence,.review-decision-fields) { background:var(--n-surface); border:1px solid var(--n-border); border-radius:8px; padding:16px 18px; margin:0 0 16px; } html:root :is(#order-dialog,#review-dialog) .portal-card-work :is(h4,h5,h6) { font-size:16px; } html:root :is(#order-dialog,#review-dialog) .portal-card-work .summary-card > p { font-size:14px; line-height:1.65; } html:root #order-dialog .timeline > li { background:var(--n-surface); border:1px solid var(--n-border); border-left:3px solid var(--n-link); padding:16px 18px; margin:0 0 12px; border-radius:8px; } html:root #order-dialog .timeline > li::before { display:none; } html:root #review-dialog .dialog-actions { flex:none; margin:0; padding:12px 24px; border-top:1px solid var(--n-border); display:flex; justify-content:space-between; gap:12px; background:var(--n-surface); } html:root #review-dialog .dialog-actions > div { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; } html:root #review-dialog .review-decision-fields { max-width:760px; margin:0 auto; padding:20px; border:1px solid var(--n-border); background:var(--n-surface); border-radius:8px; } html:root #route-dialog :is(.route-overview,.detail-key-facts,.route-buyers-table-wrap) { background:var(--n-surface); border:1px solid var(--n-border); border-radius:8px; padding:16px; } /* Small operations stay compact; header and footer share the entity-card geometry. */ html:root :is(.mail-dialog,#order-picker,#preview-filter) { border-radius:10px; padding:0; max-height:calc(100dvh - 32px); overflow:auto; } html:root :is(.mail-dialog,#order-picker,.file-preview-dialog,.mail-contacts-dialog,.mail-sorting-dialog) .modal-header { background:var(--n-surface); border-bottom:1px solid var(--n-border); padding:16px 20px; } html:root :is(.mail-dialog,#order-picker,.file-preview-dialog,.mail-contacts-dialog,.mail-sorting-dialog) .modal-header h2 { color:var(--n-text); font-size:22px; line-height:1.35; overflow-wrap:anywhere; } html:root :is(.mail-dialog,#order-picker) form { padding:0; } html:root :is(.mail-dialog,#order-picker) .modal-body { padding:20px; } html:root .mail-dialog .dialog-field { margin:0 0 16px; font-weight:500; font-size:14px; } html:root .mail-dialog :is(input,select) { min-height:40px; font-size:14px; } html:root .mail-dialog .dialog-footer { position:sticky; bottom:0; background:var(--n-surface); border-top:1px solid var(--n-border); padding:14px 0 0; } html:root .file-preview-dialog .file-preview-content { height:calc(100% - 74px); background:var(--n-canvas); } html:root dialog :is(.modal-header,.dialog-header) h2 { color:var(--n-text); } html:root dialog .dialog-header { background:var(--n-surface); border-color:var(--n-border); } html:root dialog :is(.modal-header,.dialog-header) .eyebrow { color:var(--n-muted); } html:root #order-dialog :is(.timeline time,.flow-arrow) { color:var(--n-muted); } /* Legacy arrows used an important literal; keep their owner in the shared palette. */ html:root #order-dialog .quantity-flow .flow-arrow { color:var(--n-muted) !important; } html:root #review-dialog #review-coverage { color:var(--n-muted); } html:root #route-dialog .route-buyer-filter label { color:var(--n-muted); } html:root :is(.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog)[open] { display:flex; flex-direction:column; } html:root :is(.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog) :is(.modal-header,.sorting-header) { flex:none; padding:16px 20px; background:var(--n-surface); border-bottom:1px solid var(--n-border); } html:root .mail-sorting-dialog .sorting-header h2 { color:var(--n-text); font-size:22px; } html:root .mail-sorting-dialog .sorting-header .eyebrow { color:var(--n-muted); } html:root :is(.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog) > :is(.mail-contacts-body,.sorting-body,.file-preview-content) { flex:1 1 0; min-height:0; height:auto; } html:root .mail-sorting-dialog .sorting-body { overflow:auto; background:var(--n-canvas); } html:root .order-state-dialog[data-mode] .order-state-frame { display:flex; flex-direction:column; height:100%; max-height:100%; } html:root .order-state-dialog[data-mode] :is(.order-state-header,.order-state-footer) { flex:none; background:var(--n-surface); border-color:var(--n-border); padding:16px 24px; } html:root .order-state-dialog[data-mode] .order-state-body { flex:1 1 0; min-height:0; overflow:auto; padding:20px 24px; } html:root .order-state-dialog[data-mode] .order-state-header h2 { font-size:24px; } html:root .order-state-dialog[data-mode] .order-state-apply { background:var(--n-primary); color:var(--n-primary-ink); border-color:var(--n-primary); } html:root .order-state-dialog[data-mode] .order-state-apply:hover:not(:disabled) { background:var(--n-primary-hover); color:var(--n-primary-ink); } html:root .order-state-dialog[data-mode] :is(.order-state-kicker,.order-state-small,.order-state-status-caption,.order-state-state-code,.order-state-footer-note) { color:var(--n-muted); font-size:12px; } html:root .order-state-dialog[data-mode] .order-state-action-display { background:var(--n-success-bg); color:var(--n-success); border-color:var(--n-success); } html:root .order-state-dialog[data-mode] .order-state-action-display[data-target="000000005"] { background:var(--n-danger-bg); color:var(--n-danger); border-color:var(--n-danger); } html:root .order-state-dialog[data-mode] .order-state-status[data-target="000000002"] strong { color:var(--n-success); } html:root .order-state-dialog[data-mode] .order-state-status[data-target="000000005"] strong { color:var(--n-danger); } html:root .order-state-dialog[data-mode] .order-state-test-result { color:var(--n-success); background:var(--n-success-bg); border-color:var(--n-success); } html:root .order-state-dialog[data-mode] .order-state-apply:disabled { color:var(--n-muted); background:var(--n-surface-raised); border-color:var(--n-control-border); opacity:1; } html:root .order-state-dialog[data-mode] .order-state-apply[data-complete=true]:disabled { color:var(--n-success); background:var(--n-success-bg); border-color:var(--n-success); } /* Bitrix card composition: exterior action rail, soft header, two work columns. */ html:root :is(#order-dialog,#review-dialog,#route-dialog,.order-state-dialog,.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog) { inset:12px 16px 0 auto; width:min(1600px,calc(100vw - 96px)); height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); border:0; border-radius:18px 18px 0 0; overflow:visible; } html:root .portal-card-rail { position:absolute; left:-44px; top:18px; display:flex; flex-direction:column; gap:8px; z-index:2; } html:root .portal-card-rail .quiet-button { display:grid; place-items:center; width:44px; min-height:36px; height:36px; margin:0; padding:0; border:0; border-radius:18px 0 0 18px; background:var(--n-primary); color:var(--n-primary-ink); font-size:25px; box-shadow:none; } html:root .portal-card-rail .quiet-button:hover { background:var(--n-primary-hover); color:var(--n-primary-ink); } /* Modal management has no ring. Keyboard users see the button's own highlight. */ html:root :is(.portal-card-rail button,.portal-card-rail a,.order-state-close,.sorting-close,.filter-close,dialog .modal-header>.icon-button):focus { outline:0 !important; box-shadow:none !important; } html:root :is(.portal-card-rail button,.portal-card-rail a,.order-state-close,.sorting-close,dialog .modal-header>.icon-button):focus-visible { background:var(--n-primary-hover); color:var(--n-primary-ink); } html:root .filter-close:focus-visible { background:var(--n-hover); } @media (forced-colors: active) { html:root :is(.portal-card-rail button,.portal-card-rail a,.order-state-close,.sorting-close,.filter-close,dialog .modal-header>.icon-button):focus-visible { outline:2px solid Highlight !important; } } html:root .portal-card-rail .dialog-close-icon { display:block; line-height:1; } html:root .portal-card-rail svg { width:18px; height:18px; } html:root :is(#order-dialog,#review-dialog,#route-dialog) > :is(article,form) { border-radius:inherit; overflow:hidden; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header,.dialog-header) { min-height:76px; background:var(--n-canvas); border:0; padding:20px 24px 12px; } html:root :is(#order-dialog,#review-dialog) .detail-tabs { padding:4px 24px 16px; border:0; background:var(--n-canvas); gap:10px; } html:root :is(#order-dialog,#review-dialog) .detail-tabs .quiet-button { min-height:34px; padding:6px 10px; border:1px solid transparent; border-radius:7px; } html:root :is(#order-dialog,#review-dialog) .detail-tabs .quiet-button[aria-selected=true] { border-color:var(--n-link); color:var(--n-link); background:var(--n-selected); } html:root .portal-card-columns { grid-template-columns:minmax(320px,.86fr) minmax(0,1.14fr); gap:28px; } html:root .portal-card-facts { background:var(--n-surface-subtle); padding:20px; border:0; border-radius:12px; } html:root :is(#order-dialog,#review-dialog) .portal-card-work :is(.summary-card,.customer-order-card,.review-check-note,#review-evidence) { border:0; border-radius:12px; padding:20px; } html:root #order-dialog .timeline > li { border:0; border-left:3px solid var(--n-info); border-radius:12px; } html:root :is(.order-state-dialog,.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog) :is(.order-state-header,.modal-header,.sorting-header) { border-radius:18px 18px 0 0; } html:root :is(.order-state-dialog .order-state-close,.mail-contacts-dialog .modal-header>.icon-button,.mail-sorting-dialog .sorting-close) { position:absolute; left:-44px; top:18px; width:44px; min-height:36px; height:36px; padding:0; border:0; border-radius:18px 0 0 18px; background:var(--n-primary); color:var(--n-primary-ink); } @media(max-width:1000px) { html:root .portal-card-columns { grid-template-columns:minmax(230px,.85fr) minmax(0,1.15fr); gap:16px; } } @media(max-width:760px) { html:root :is(#order-dialog,#review-dialog,#route-dialog,.order-state-dialog,.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog) { inset:0; width:100%; max-width:100%; height:100dvh; max-height:100dvh; border-radius:0; } html:root .portal-card-rail { left:auto; right:12px; top:12px; } html:root .portal-card-rail .quiet-button { width:44px; height:44px; min-height:44px; border-radius:50%; } html:root .portal-card-rail .portal-rail-action { display:none; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header,.dialog-header) { padding:14px 64px 10px 14px; } html:root :is(#order-dialog,#review-dialog) .detail-tabs { padding:4px 14px 12px; gap:4px; } html:root :is(#order-dialog,#review-dialog) .detail-tabs .quiet-button { min-height:44px; } html:root .portal-card-columns { grid-template-columns:minmax(0,1fr); gap:14px; } html:root .portal-card-facts { padding:14px; } html:root :is(.order-state-dialog .order-state-close,.mail-contacts-dialog .modal-header>.icon-button,.mail-sorting-dialog .sorting-close) { left:auto; right:12px; top:12px; width:44px; height:44px; min-height:44px; border-radius:50%; } html:root :is(.order-state-dialog,.mail-contacts-dialog,.mail-sorting-dialog) :is(.order-state-header,.modal-header,.sorting-header) { padding-right:64px; border-radius:0; } } @media(max-width:1000px) { html:root .portal-card-columns { grid-template-columns:minmax(230px,.85fr) minmax(0,1.15fr); gap:14px; } } @media(max-width:760px) { html:root .crm-shell .topbar-inner { padding:8px 12px; gap:6px; } html:root :is(#panel-orders,#panel-review) { padding:8px; } html:root .orders-heading-title { gap:6px; } html:root .orders-heading .orders-view-switch { width:100%; justify-content:space-between; } html:root .orders-view-switch .quiet-button { min-height:44px; padding:6px 8px; } html:root .mail-page .mail-workspace { width:100%; margin:0; border-radius:0; border:0; } html:root :is(#order-dialog,#review-dialog,#route-dialog,.order-state-dialog,.mail-contacts-dialog,.mail-sorting-dialog,.file-preview-dialog) { width:100%; max-width:100%; inset:0; border:0; border-radius:0; } html:root .order-state-dialog[data-mode] :is(.order-state-header,.order-state-body,.order-state-footer) { padding:14px; } html:root .order-state-dialog[data-mode] .order-state-header h2 { font-size:21px; } html:root .mail-page .mail-rail-button { min-height:44px; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header,.dialog-header) { padding:12px 64px 12px 14px; min-height:76px; gap:8px; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header h3,.dialog-header h2) { font-size:21px; } html:root :is(#order-dialog,#review-dialog) .detail-tabs { padding:0 14px; gap:16px; } html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.order-dialog-body,.review-dialog-grid,.route-dialog-body) { padding:14px; } html:root .portal-card-columns { grid-template-columns:minmax(0,1fr); gap:14px; } html:root .portal-card-facts { padding:14px; } html:root #review-dialog .dialog-actions { padding:10px 14px max(10px,env(safe-area-inset-bottom)); flex-wrap:wrap; } html:root #review-dialog .dialog-actions > .fine-print { font-size:12px; } html:root :is(.mail-dialog,#order-picker,#preview-filter) { width:calc(100vw - 16px); max-width:none; } html:root :is(dialog button,dialog .icon-button) { min-height:44px; } } /* Apply the same context/work structure to state operations and auxiliary cards. */ html:root #route-dialog .portal-card-facts :is(.route-overview,.detail-key-facts) { padding:0; border:0; background:transparent; } html:root #route-dialog .portal-card-facts .detail-key-facts { padding:16px 0; } html:root #route-dialog .route-overview span { color:var(--n-muted); font-size:12px; } html:root #route-dialog .portal-card-work { background:var(--n-surface); padding:20px; border-radius:12px; } html:root .order-state-dialog[data-mode] .order-state-body { display:grid; grid-template-columns:minmax(280px,.7fr) minmax(0,1.3fr); gap:16px 24px; align-content:start; align-items:start; background:var(--n-canvas); } html:root .order-state-dialog[data-mode] .order-state-test-note { grid-column:1/-1; } html:root .order-state-dialog[data-mode] .order-state-fields { grid-column:1; grid-row:2; display:grid; grid-template-columns:minmax(0,1fr); padding:20px; margin:0; background:var(--n-surface-subtle); border-radius:12px; } html:root .order-state-dialog[data-mode] .order-state-body > :is(.order-state-inspect,.order-state-feedback,.order-state-history) { grid-column:1; margin:0; } html:root .order-state-dialog[data-mode] .order-state-preview { grid-column:2; grid-row:2/span 5; min-width:0; padding:20px; background:var(--n-surface); border-radius:12px; } html:root .mail-contacts-body { background:var(--n-canvas); } html:root .mail-contacts-list-pane, html:root .mail-contact-detail { min-width:0; border:0; padding:16px; background:var(--n-surface); border-radius:12px; } html:root :is(.mail-dialog,#order-picker,#preview-filter) { position:fixed; inset:12px 16px auto auto; margin:0; width:min(620px,calc(100vw - 96px)); max-width:none; max-height:calc(100dvh - 24px); padding:0; border-radius:18px; overflow:visible; } html:root :is(.mail-dialog,#order-picker,#preview-filter) .modal-body { max-height:calc(100dvh - 120px); overflow:auto; } html:root :is(.mail-dialog,#order-picker,#preview-filter) :is(.modal-header,.dialog-header) { border-radius:18px 18px 0 0; background:var(--n-canvas); } html:root :is(.mail-dialog,#order-picker) .modal-header .icon-button, html:root .file-preview-dialog .preview-controls .icon-button { position:absolute; top:18px; left:-44px; width:44px; min-height:36px; height:36px; padding:0; border:0; border-radius:18px 0 0 18px; background:var(--n-primary); color:var(--n-primary-ink); } @media(max-width:1180px) { html:root .order-state-dialog[data-mode] .order-state-body { display:block; } html:root .order-state-dialog[data-mode] .order-state-fields { grid-template-columns:repeat(2,minmax(0,1fr)); padding:16px; margin-bottom:16px; } html:root .order-state-dialog[data-mode] .order-state-preview { margin-top:16px; padding:16px; } } @media(max-width:760px) { html:root :is(#order-dialog,#review-dialog,#route-dialog) :is(.detail-header,.dialog-header) { padding-right:64px; } html:root :is(.order-state-dialog,.mail-contacts-dialog,.mail-sorting-dialog) :is(.order-state-header,.modal-header,.sorting-header) { padding-right:64px; } html:root :is(.mail-dialog,#order-picker,#preview-filter) { inset:0 0 auto; width:100%; max-width:100%; max-height:100dvh; border-radius:0 0 12px 12px; } html:root :is(.mail-dialog,#order-picker) .modal-header { padding-right:64px; border-radius:0; } html:root :is(.mail-dialog,#order-picker) .modal-header .icon-button, html:root .file-preview-dialog .preview-controls .icon-button { left:auto; right:12px; top:12px; width:44px; min-height:44px; height:44px; border-radius:50%; } html:root .file-preview-dialog .modal-header { padding-right:64px; } html:root .order-state-dialog[data-mode] .order-state-fields { grid-template-columns:minmax(0,1fr); } } /* Funnel boundaries span the stage, including the space below its cards. */ html:root .kanban-column { position:relative; } html:root .kanban-column::before, html:root .kanban-column:last-child::after { content:""; position:absolute; top:38px; bottom:0; width:0; border-inline-start:1px dashed var(--n-control-border); pointer-events:none; } html:root .kanban-column::before { left:-4px; } html:root .kanban-column:first-child::before { left:0; } html:root .kanban-column:last-child::after { right:-4px; } html:root .dealer-kanban-column { border-inline:1px dashed var(--n-control-border); } /* The retained CRM entry point uses the same card shell and reading surfaces. */ html:root #order-dialog .customer-lifecycle { display:block; margin:20px 0 12px; } html:root #order-dialog .lifecycle-stage { display:grid; grid-template-columns:32px minmax(0,1fr) auto; grid-template-rows:auto auto; gap:2px 12px; align-items:start; text-align:left; padding:0 0 16px; } html:root #order-dialog .lifecycle-stage:not(:first-child)::before { top:-16px; bottom:0; left:16px; width:1px; height:auto; } html:root #order-dialog .lifecycle-icon { grid-column:1; grid-row:1/3; width:32px; height:32px; margin:0; } html:root #order-dialog .lifecycle-label { grid-column:2; grid-row:1; margin:0; font-size:13px; } html:root #order-dialog .lifecycle-value { grid-column:2; grid-row:2; min-height:0; margin:0; font-size:13px; } html:root #order-dialog .lifecycle-date { grid-column:3; grid-row:1/3; align-self:center; margin:0; } html:root .legacy-crm-page :is(#order-dialog,#xml-dialog)[open] { display:flex; flex-direction:column; } html:root .legacy-crm-page #xml-dialog { position:fixed; inset:12px 16px 0 auto; margin:0; width:min(1600px,calc(100vw - 96px)); max-width:none; height:calc(100dvh - 12px); max-height:calc(100dvh - 12px); border:0; border-radius:18px 18px 0 0; overflow:visible; } html:root .legacy-crm-page :is(#order-dialog,#xml-dialog) .modal-header { flex:none; padding:20px 24px 12px; border:0; border-radius:18px 18px 0 0; background:var(--n-canvas); } html:root .legacy-crm-page #order-tabs { flex:none; flex-wrap:wrap; gap:10px; padding:4px 24px 16px; border:0; background:var(--n-canvas); } html:root .legacy-crm-page #order-tabs button { padding:6px 10px; min-height:34px; border:1px solid transparent; border-radius:7px; } html:root .legacy-crm-page #order-tabs button[aria-selected=true] { background:var(--n-selected); border-color:var(--n-link); color:var(--n-link); } html:root .legacy-crm-page :is(#order-content,#xml-content) { flex:1; min-height:0; max-height:none; padding:24px; overflow:auto; background:var(--n-canvas); } html:root .legacy-crm-page .overview-grid { grid-template-columns:minmax(280px,.86fr) minmax(0,1.14fr); gap:28px; } html:root .legacy-crm-page .overview-grid > div:first-child .panel { background:var(--n-surface-subtle); } html:root .legacy-crm-page :is(.overview-grid .panel,.task-row,.mail-item) { border:0; border-radius:12px; } @media(max-width:760px) { html:root .legacy-crm-page #xml-dialog { inset:0; width:100%; height:100dvh; max-height:100dvh; border-radius:0; } html:root .legacy-crm-page :is(#order-dialog,#xml-dialog) .modal-header { padding:14px 64px 12px 14px; border-radius:0; } html:root .legacy-crm-page #order-tabs { padding:4px 14px 12px; gap:4px; } html:root .legacy-crm-page #order-tabs button { min-height:44px; } html:root .legacy-crm-page .portal-card-rail #copy-order-link { display:none; } html:root .legacy-crm-page :is(#order-content,#xml-content) { padding:14px; } html:root .legacy-crm-page .overview-grid { grid-template-columns:minmax(0,1fr); gap:14px; } } /* Attachments belong to the envelope, beside the 1C context and above the letter. */ html:root :is(.mail-page,.preview-mail) .message-files { margin:0; padding:8px 0 0; border:0; } html:root :is(.mail-page,.preview-mail) .message-files .section-caption { margin:0 0 6px; } html:root :is(.mail-page,.preview-mail) .attachment-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:6px; } html:root :is(.mail-page,.preview-mail) .message-file { display:flex; align-items:center; gap:8px; min-width:0; min-height:44px; margin:0; padding:6px 8px; border:1px solid var(--n-border); border-radius:6px; background:var(--n-surface); } html:root :is(.mail-page,.preview-mail) .file-type { display:grid; place-items:center; flex:none; width:28px; height:28px; font-size:12px; font-weight:650; border:0; border-radius:4px; color:var(--n-muted); background:var(--n-surface-subtle); } html:root :is(.mail-page,.preview-mail) .message-file[data-kind=PDF] .file-type { color:var(--n-danger); background:var(--n-danger-bg); } html:root :is(.mail-page,.preview-mail) .message-file[data-kind=XML] .file-type { color:var(--n-teal); background:var(--n-teal-bg); } html:root :is(.mail-page,.preview-mail) .file-info { min-width:0; flex:1; } html:root :is(.mail-page,.preview-mail) .file-info strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:550; line-height:1.35; } html:root :is(.mail-page,.preview-mail) .file-info small { display:block; margin:0; color:var(--n-muted); font-size:12px; line-height:1.35; } html:root :is(.mail-page,.preview-mail) .file-controls { display:flex; align-items:center; flex:none; gap:2px; } html:root :is(.mail-page,.preview-mail) .file-controls .icon-button { display:grid; place-items:center; flex:none; width:28px; height:28px; min-height:28px; padding:0; border:0; background:transparent; border-radius:4px; } html:root :is(.mail-page,.preview-mail) .file-controls svg { width:16px; height:16px; color:var(--n-link); } @media(max-width:760px) { html:root :is(.mail-page,.preview-mail) .file-controls .icon-button { width:44px; height:44px; min-height:44px; } } /* Mail-list badges retain three source states and a text alternative. */ html:root :is(.mail-page,.preview-mail) .message-order-presence { display:inline-flex; align-items:center; gap:3px; flex:none; min-height:18px; padding:1px 4px; border-radius:4px; color:var(--n-muted); background:var(--n-surface-subtle); font-size:12px; font-weight:600; line-height:1.4; white-space:nowrap; } html:root :is(.mail-page,.preview-mail) .message-order-presence svg { width:12px; height:12px; flex:none; } html:root :is(.mail-page,.preview-mail) .message-order-presence[data-state=present] { color:var(--n-success); background:var(--n-success-bg); } html:root :is(.mail-page,.preview-mail) .message-order-presence[data-presence=route][data-state=present] { color:var(--n-teal); background:var(--n-teal-bg); } html:root :is(.mail-page,.preview-mail) .message-order-presence[data-state=unknown] { color:var(--n-warning); background:var(--n-warning-bg); } /* Global sections live in a narrow Bitrix-style rail; expansion is a preference. */ html:root body.portal-has-sidebar { --portal-nav-width:56px; margin-left:var(--portal-nav-width); } html:root body.portal-nav-expanded { --portal-nav-width:224px; } html:root .portal-sidebar { --portal-nav-bg:#2b4365; --portal-nav-ink:#edf5ff; --portal-nav-active:#405b7c; --n-focus:#b5c9e3; --n-focus-halo:#b5c9e326; position:fixed; inset:0 auto 0 0; z-index:30; width:var(--portal-nav-width); display:flex; flex-direction:column; overflow:auto; scrollbar-width:thin; background:var(--portal-nav-bg); color:var(--portal-nav-ink); border-right:1px solid #ffffff18; } html:root[data-theme=dark] .portal-sidebar { --portal-nav-bg:var(--n-rail); --portal-nav-active:var(--n-rail-active); } html:root .portal-sidebar-heading { display:flex; align-items:center; gap:10px; flex:none; min-height:64px; margin:0 6px 8px; border-bottom:1px solid #ffffff26; } html:root .portal-menu-toggle { display:grid; place-items:center; flex:none; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:7px; color:var(--portal-nav-ink); background:transparent; cursor:pointer; } html:root .portal-menu-toggle svg { width:21px; height:21px; } html:root .portal-sidebar .portal-menu-toggle:hover { background:var(--portal-nav-active); color:var(--portal-nav-ink); } html:root .portal-sidebar-title { font-size:18px; font-weight:650; letter-spacing:-.2px; } html:root .portal-sidebar :is(.report-section-menu,.app-nav,.tabs) { display:flex; flex-direction:column; align-items:stretch; gap:4px; width:100%; margin:0; padding:0; border:0; background:transparent; } html:root .portal-sidebar :is(.report-section-menu,.app-nav) { padding:0 6px 12px; } html:root .portal-sidebar .portal-nav-item { position:relative; display:flex; align-items:center; gap:10px; justify-content:flex-start; width:100%; min-width:0; min-height:44px; padding:10px 11px; border:0; border-radius:7px; color:var(--portal-nav-ink); background:transparent; text-decoration:none; text-align:left; font:550 13px/1.45 var(--n-font); white-space:normal; box-shadow:none; } html:root .portal-sidebar .portal-nav-item>svg { flex:none; width:22px; height:22px; } html:root .portal-sidebar .portal-nav-item:hover { color:var(--portal-nav-ink); background:var(--portal-nav-active); } html:root .portal-sidebar .portal-nav-item:is(.active,[aria-current=page],[aria-selected=true]) { color:#fff; background:var(--portal-nav-active); font-weight:650; } html:root .portal-nav-label { min-width:0; overflow-wrap:anywhere; } html:root body:not(.portal-nav-expanded) .portal-sidebar :is(.portal-nav-label,.portal-sidebar-title) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } html:root .portal-header-brand { display:flex; align-items:center; gap:8px; min-width:0; grid-column:1; grid-row:1; } html:root #portal-menu-mobile { display:none; } html:root .portal-has-sidebar .crm-shell .topbar-inner { display:grid; grid-template-columns:auto minmax(180px,1fr) auto; gap:10px 14px; } html:root .portal-has-sidebar .crm-shell :is(.header-order-filter,.topbar-inner>.neuffer-filter-shell) { grid-column:2; grid-row:1; order:initial; width:auto; min-width:0; } html:root .portal-has-sidebar .crm-shell .report-display-controls { grid-column:3; grid-row:1; } html:root .portal-menu-backdrop { position:fixed; inset:0; z-index:29; background:var(--n-backdrop); } /* Totals stay compact; an unavailable amount remains a dash in the card. */ html:root .kanban-column-missing { display:none; } /* The deal's context stays left; correspondence remains visible on the right. */ html:root .portal-order-layout { display:grid; grid-template-columns:minmax(320px,.86fr) minmax(0,1.14fr); gap:28px; align-items:start; } html:root :is(.portal-order-context,.portal-correspondence) { min-width:0; } html:root .portal-order-context #order-reconciliation { margin-top:20px; } html:root .portal-order-context .order-positions { grid-template-columns:minmax(0,1fr); } html:root .portal-correspondence>.timeline-heading { margin:18px 0 12px; } html:root .portal-correspondence .timeline { position:relative; margin:0; padding:0 0 0 36px; list-style:none; } html:root .portal-correspondence .timeline::before { content:''; position:absolute; left:14px; top:20px; bottom:20px; width:1px; background:var(--n-control-border); } html:root #order-dialog .portal-correspondence .timeline>li { position:relative; margin:0 0 14px; padding:16px 18px; background:var(--n-surface); border:1px solid var(--n-border); border-radius:10px; } html:root .timeline-marker { position:absolute; left:-36px; top:14px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--n-selected); color:var(--n-link); border:1px solid var(--n-control-border); font-size:16px; line-height:1; } html:root .timeline-mail-link { display:inline-flex; align-items:center; gap:6px; min-height:32px; margin-top:8px; color:var(--n-link); font-size:13px; text-decoration:none; } html:root .timeline-mail-link::after { content:'↗'; font-size:16px; } html:root .timeline-mail-link:hover { text-decoration:underline; } html:root #order-dialog .timeline .timeline-empty { color:var(--n-muted); } html:root .portal-correspondence .timeline:has(>.timeline-empty) { padding-left:0; } html:root .portal-correspondence .timeline:has(>.timeline-empty)::before { display:none; } html:root .position-attribute-group { margin-top:16px; } html:root .position-attribute-group h6 { margin:0; color:var(--n-muted); font-size:12px; font-weight:650; } html:root .position-attribute-group .attribute-list { margin-top:6px; } @media(max-width:1000px) { html:root .portal-order-layout { grid-template-columns:minmax(230px,.85fr) minmax(0,1.15fr); gap:16px; } } @media(max-width:760px) { html:root .portal-order-layout { grid-template-columns:minmax(0,1fr); gap:20px; } html:root .timeline-mail-link { min-height:44px; } } @media(max-width:1100px) { html:root .portal-has-sidebar .crm-shell .topbar-inner { grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; } html:root .portal-has-sidebar .crm-shell :is(.header-order-filter,.topbar-inner>.neuffer-filter-shell) { grid-column:1/-1; grid-row:2; } html:root .portal-has-sidebar .crm-shell .report-display-controls { grid-column:2; } } @media(max-width:760px) { html:root body.portal-has-sidebar { margin-left:0; } html:root .portal-sidebar { width:min(264px,calc(100vw - 48px)); transform:translateX(-100%); visibility:hidden; } html:root .portal-menu-open .portal-sidebar { transform:none; visibility:visible; } html:root body.portal-menu-open { overflow:hidden; } html:root body .portal-sidebar :is(.portal-nav-label,.portal-sidebar-title) { position:static; width:auto; height:auto; overflow:visible; clip-path:none; white-space:normal; } html:root .portal-sidebar-heading { min-height:64px; } html:root #portal-menu-mobile { display:grid; color:var(--n-text); background:var(--n-surface-subtle); } html:root #portal-menu-mobile:hover { background:var(--n-hover); } html:root .portal-header-brand { gap:6px; } html:root .portal-has-sidebar .crm-shell .home-link { min-width:0; } } html:root .preview-mail .message-row-bottom { justify-content:flex-start; gap:5px; flex-wrap:wrap; } html:root .preview-mail .attachment-count { margin-left:auto; flex:none; white-space:nowrap; } /* Expose the previous card's left edge when another native dialog opens over it. * Specificity also covers legacy ID-based width limits without replacing dialog behaviour. */ html:root :is(#order-dialog,#review-dialog,#route-dialog,dialog).portal-dialog-nested { --portal-stack-step:56px; box-sizing:border-box; max-width:calc(var(--portal-parent-width) - var(--portal-stack-step)); left:auto; right:calc(100% - var(--portal-parent-edge)); margin-left:0; margin-right:0; border-left:1px solid var(--n-border); } html:root dialog.portal-dialog-nested::backdrop { background:#12233030; } @media(max-width:760px) { html:root :is(#order-dialog,#review-dialog,#route-dialog,dialog).portal-dialog-nested { --portal-stack-step:16px; } } /* Dark Bitrix workspace. Chrome, content and funnel colours have separate roles: * a white card never inherits white canvas text, including in nested dialogs. */ html:root[data-theme=dark] body { color:var(--n-workspace-text); } html:root[data-theme=dark] :is(.panel,.kanban-card,.dealer-kanban-card,.preview-mail) { color:var(--n-text); } html:root[data-theme=dark] .crm-shell { color:var(--n-workspace-text); background:var(--n-chrome); border-color:#ffffff1f; } html:root[data-theme=dark] .crm-shell :is(.home-link,.crm-session-person,.crm-session-person small) { color:var(--n-workspace-text); } html:root[data-theme=dark] .crm-shell :is(.report-language select,.theme-toggle.quiet-button,.crm-session-control .crm-session-logout,#portal-menu-mobile) { color:var(--n-workspace-text); background:var(--n-chrome-raised); border-color:var(--n-chrome-border); color-scheme:dark; } html:root[data-theme=dark] .crm-shell :is(.theme-toggle.quiet-button,.crm-session-control .crm-session-logout,#portal-menu-mobile):hover { color:#fff; background:var(--n-chrome-active); } html:root[data-theme=dark] .crm-shell .neuffer-filter-shell .filter-compact { background:var(--n-chrome-raised); color:var(--n-workspace-text); border-color:var(--n-chrome-border); } html:root[data-theme=dark] .crm-shell .filter-compact :is(input,.filter-open-button,.filter-search-button,.filter-search-icon,.filter-clear-button) { color:var(--n-workspace-muted); background:transparent; } html:root[data-theme=dark] .crm-shell .filter-compact input::placeholder { color:var(--n-workspace-muted); } html:root[data-theme=dark] .crm-shell .filter-compact .chip { color:var(--n-workspace-text); background:var(--n-chrome-active); } html:root[data-theme=dark] .crm-shell .filter-compact .chip.filter-chip-exclude { color:var(--n-filter-exclude-ink); background:var(--n-filter-exclude-bg); border-color:var(--n-filter-exclude-border); } html:root[data-theme=dark] :is(.crm-shell,.orders-view-switch,.workspace-heading .segmented) { --n-focus:var(--n-chrome-focus); --n-focus-halo:#b5c9e326; } html:root[data-theme=dark] :is(#panel-orders,#panel-review) { background:transparent; border-color:transparent; color:var(--n-workspace-text); } html:root[data-theme=dark] :is(.orders-heading-title h2,.workspace-heading h1,.kanban-column-amount) { color:var(--n-workspace-text); } html:root[data-theme=dark] :is(.workspace-status,.orders-heading .filter-summary,.orders-heading .source-chip,.workspace-heading .count-label,.source-bar,.xml-status-details>summary,.review-method>summary,.report-notes>summary) { color:var(--n-workspace-muted); } html:root[data-theme=dark] .orders-kanban { background:transparent; border-color:#ffffff1f; scrollbar-color:#9aaed0 var(--n-canvas); } html:root[data-theme=dark] :is(.kanban-column::before,.kanban-column:last-child::after,.dealer-kanban-column) { border-color:#a2b7d080; } html:root[data-theme=dark] :is(.orders-view-switch,.workspace-heading .segmented) { background:var(--n-chrome); border-color:#ffffff26; } html:root[data-theme=dark] :is(.orders-view-switch .quiet-button,.workspace-heading .segmented button) { color:var(--n-workspace-muted); } html:root[data-theme=dark] :is(.orders-view-switch .quiet-button,.workspace-heading .segmented button):hover { color:#fff; background:var(--n-chrome-raised); } html:root[data-theme=dark] :is(.orders-view-switch .quiet-button,.workspace-heading .segmented button)[aria-pressed=true] { color:#fff; background:var(--n-chrome-active); } html:root[data-theme=dark] :is(.table-wrap,.table-shell) { color:var(--n-text); background:var(--n-surface); } html:root[data-theme=dark] .kanban-column { --stage-bg:#a6b7d0; --stage-ink:#142a49; } html:root[data-theme=dark] .kanban-column[data-tone=danger] { --stage-bg:#fa8682; } html:root[data-theme=dark] .kanban-column:is([data-tone=warn],[data-state="000000021"],[data-state="route:000000001"]) { --stage-bg:#f3cd58; } html:root[data-theme=dark] .kanban-column:is([data-tone=info],[data-state="000000002"],[data-state="route:000000006"],[data-state="route:000000003"]) { --stage-bg:#50abed; } html:root[data-theme=dark] .kanban-column:is([data-tone=good],[data-state=ready],[data-state="route:000000004"]) { --stage-bg:#60ddc1; } html:root[data-theme=dark] .kanban-column:is([data-state=production],[data-state="route:000000002"]) { --stage-bg:#b491ed; } html:root[data-theme=dark] .kanban-column[data-state=realized] { --stage-bg:#9bd633; } html:root[data-theme=dark] .kanban-column:is([data-state="000000021"],[data-state="route:000000001"]) { --stage-bg:#f3cd58; } html:root[data-theme=dark] .kanban-column-heading :is(h3,.kanban-column-count) { color:var(--stage-ink); border-color:#142a494d; } html:root[data-theme=dark] .dealer-kanban-column { --column-color:#50abed; background:transparent; } html:root[data-theme=dark] .dealer-kanban-column:is([data-kanban-state="000000005"],[data-kanban-state="000000016"]) { --column-color:#fa8682; } html:root[data-theme=dark] .dealer-kanban-column:is([data-kanban-state="000000004"],[data-kanban-state="000000021"]) { --column-color:#f3cd58; } html:root[data-theme=dark] .dealer-kanban-column[data-kanban-state=production] { --column-color:#b491ed; } html:root[data-theme=dark] .dealer-kanban-column:is([data-kanban-state="000000002"],[data-kanban-state=ready],[data-kanban-state=realized]) { --column-color:#60ddc1; } html:root[data-theme=dark] .dealer-kanban-column-heading { color:#142a49; background:var(--column-color); } html:root[data-theme=dark] .dealer-kanban-column-heading .column-count { color:#142a49; } html:root[data-theme=dark] :is(.dealer-kanban-column-summary,.dealer-kanban-column-summary small,.empty-column) { color:var(--n-workspace-muted); } html:root[data-theme=dark] dialog { --n-canvas:var(--n-card-canvas); --bg:var(--n-canvas); color:var(--n-text); color-scheme:light; } html:root[data-theme=dark] .preview-mail { --n-canvas:var(--n-card-canvas); --bg:var(--n-canvas); } html:root[data-theme=dark] dialog::backdrop { background:var(--n-backdrop); } html:root[data-theme=dark] dialog.portal-dialog-nested::backdrop { background:#0e204d40; } /* Order-card sections share one label/value/note rhythm in both portal themes. */ html:root #order-dialog .portal-order-layout { grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:24px; } html:root #order-dialog .portal-card-facts { padding:0; background:transparent; display:grid; gap:16px; } html:root #order-dialog .order-fact-section { margin:0; padding:20px; background:var(--n-surface); border:1px solid var(--n-border); border-radius:12px; min-width:0; } html:root #order-dialog .order-section-title, html:root #order-dialog #detail-delivery h4 { margin:0 0 18px; font-size:12px; font-weight:600; color:var(--n-muted); letter-spacing:.035em; } html:root #order-dialog details.order-fact-section>summary { margin:0; cursor:pointer; line-height:24px; } html:root #order-dialog details.order-fact-section[open]>summary { margin-bottom:18px; } html:root #order-dialog .order-status-overview { display:grid; gap:18px; padding:0; background:transparent; border:0; } html:root #order-dialog .business-state-title { font-size:19px; line-height:1.4; margin:4px 0; } /* Key facts use the existing semantic palette; explanatory text stays quiet. */ html:root #order-dialog .order-key-label { --key-ink:var(--n-muted); --key-bg:var(--n-surface-raised); display:inline-block; max-width:100%; padding:5px 10px; border:1px solid var(--n-border); border-color:color-mix(in srgb,var(--key-ink) 22%,var(--key-bg)); border-radius:7px; color:var(--key-ink); background:var(--key-bg); font-size:12px; font-weight:600; line-height:1.5; white-space:normal; overflow-wrap:anywhere; vertical-align:middle; } html:root #order-dialog .order-key-label.info { --key-ink:var(--n-info); --key-bg:var(--n-info-bg); } html:root #order-dialog .order-key-label.good { --key-ink:var(--n-success); --key-bg:var(--n-success-bg); } html:root #order-dialog .order-key-label.warn { --key-ink:var(--n-warning); --key-bg:var(--n-warning-bg); } html:root #order-dialog .order-key-label.danger { --key-ink:var(--n-danger); --key-bg:var(--n-danger-bg); } html:root #order-dialog .business-state-title .order-key-label { padding:7px 12px; font-size:16px; line-height:1.4; } @media(forced-colors:active){html:root #order-dialog .order-key-label{border-color:CanvasText;}} html:root #order-dialog .detail-linked-orders { gap:5px; } html:root #order-dialog .detail-linked-orders strong { font-size:14px; font-weight:500; } html:root #order-dialog .order-amount-fact { margin:20px 0; display:grid; gap:5px; } html:root #order-dialog .order-amount-fact dt { color:var(--n-muted); font-size:12px; } html:root #order-dialog .order-amount-fact dd { margin:0; font-size:30px; font-weight:500; line-height:1.25; color:var(--n-text); font-variant-numeric:tabular-nums; } html:root #order-dialog .order-amount-fact small { color:var(--n-muted); font-size:12px; } html:root #order-dialog #detail-order-amount.by-application { font-size:14px; font-weight:400; line-height:1.5; } html:root #order-dialog .customer-order-state>small { color:var(--n-muted); font-size:11px; } html:root #order-dialog .order-state-actions { margin:0; } html:root #order-dialog .detail-metrics-heading { padding:0 0 14px; margin:0 0 16px; border-bottom:1px solid var(--n-border); flex-wrap:wrap; gap:8px; } html:root #order-dialog .detail-key-facts { margin:0; padding:0; border:0; gap:20px 24px; } html:root #order-dialog .detail-key-facts>div { display:grid; align-content:start; gap:5px; } html:root #order-dialog .detail-key-facts dd { margin:0; font-size:20px; line-height:1.3; } html:root #order-dialog #detail-progress .readiness-progress { margin:0; padding:0; border:0; } html:root #order-dialog #detail-delivery .delivery-address-list { margin:0; } html:root #order-dialog #detail-delivery .delivery-address { background:transparent; padding:0; border:0; } html:root #order-dialog .detail-attention { margin:0; border:1px solid #ebdfbc; border-radius:12px; padding:18px 20px; background:#fff9e9; color:var(--n-text); } html:root #order-dialog .detail-attention>h4 { display:flex; align-items:center; gap:8px; margin:0; font-size:15px; color:inherit; } html:root #order-dialog .detail-attention>h4 .order-attention-icon { display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px; width:22px; height:22px; color:var(--n-warning); } html:root #order-dialog .detail-attention>h4 .order-attention-icon svg { width:22px; height:22px; } html:root #order-dialog #open-questions-wrap { margin-top:12px; } html:root #order-dialog #open-questions-title { margin:0 0 8px; font-size:13px; color:inherit; } html:root #order-dialog #open-questions { margin:0; padding-left:20px; line-height:1.6; overflow-wrap:anywhere; } html:root #order-dialog #open-questions>li+li { margin-top:8px; } html:root #order-dialog .portal-correspondence #conversation-card { border:1px solid var(--n-border); padding:20px; background:var(--n-surface); } html:root #order-dialog .order-activity-tools { margin-top:16px; padding:18px 20px; border:1px solid var(--n-border); border-radius:12px; background:var(--n-surface); } html:root #order-dialog .order-activity-tools-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; } html:root #order-dialog .order-activity-tools-heading h4 { font-size:14px; margin:0; } html:root #order-dialog #order-reminder-form { display:grid; gap:10px; margin-top:18px; } html:root #order-dialog #order-reminder-form[hidden] { display:none; } html:root #order-dialog #order-reminder-form label { color:var(--n-muted); font-size:12px; } html:root #order-dialog #order-reminder-form input { min-width:0; width:100%; height:42px; padding:9px 12px; border:1px solid var(--n-control-border); border-radius:8px; background:var(--n-surface); color:var(--n-text); font:inherit; } html:root #order-dialog :is(.order-reminder-actions,.activity-actions) { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } html:root #order-dialog :is(.order-activity-tools,.activity-actions,.order-activity-filters) button { border-radius:8px; min-height:34px; font-size:12px; } html:root #order-dialog #order-activity-feedback { margin:12px 0 0; font-size:13px; color:var(--n-muted); } html:root #order-dialog #order-activity-feedback[data-tone=error] { color:#a34046; } html:root #order-dialog #order-activity-feedback[data-tone=success] { color:#287257; } html:root #order-dialog #order-activity-feedback button { margin-left:10px; } html:root #order-dialog .order-activity-filters { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; } html:root #order-dialog .order-activity-filters button { padding:6px 10px; background:transparent; border:1px solid transparent; color:var(--n-muted); } html:root #order-dialog .order-activity-filters button[aria-pressed=true] { background:var(--n-selected); border-color:var(--n-control-border); color:var(--n-link); } html:root #order-dialog .portal-correspondence .timeline { padding-left:50px; } html:root #order-dialog .portal-correspondence .timeline::before { left:20px; background:var(--n-border); top:20px; bottom:20px; } html:root #order-dialog .portal-correspondence .timeline>li.activity-event { padding:18px 20px; margin:0 0 14px; border:1px solid var(--n-border); border-radius:12px; background:var(--n-surface); } html:root #order-dialog .portal-correspondence .timeline>li.activity-day { padding:0; margin:24px 0 14px -50px; border:0; background:transparent; display:flex; justify-content:center; } html:root #order-dialog .activity-day:first-child { margin-top:0!important; } html:root #order-dialog .activity-day span { position:relative; border:1px solid var(--n-border); border-radius:20px; padding:4px 12px; font-size:11px; color:var(--n-muted); background:var(--n-surface-subtle); } html:root #order-dialog .timeline-marker { left:-50px; top:16px; background:#e8f3fc; border:1px solid #c3d9ee; color:#3374ac; width:40px; height:40px; } html:root #order-dialog .timeline-marker svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } html:root #order-dialog .activity-status .timeline-marker { background:#e8f5ee; border-color:#c4e2d2; color:#337452; } html:root #order-dialog .activity-reminder .timeline-marker { background:#f1edfa; border-color:#d9cdef; color:#7751a8; } html:root #order-dialog .activity-notification .timeline-marker { background:#fff5da; border-color:#e9d8a5; color:#966b21; } html:root #order-dialog .activity-event :is(time,.meta,.fine-print,.activity-reference) { font-size:12px; color:var(--n-muted); line-height:1.5; } html:root #order-dialog .activity-event time { display:block; margin-bottom:8px; } html:root #order-dialog .activity-title { display:block; font-size:15px; line-height:1.4; color:var(--n-text); } html:root #order-dialog .activity-value { margin:8px 0; font-size:14px; color:var(--n-text); } html:root #order-dialog .activity-event p { overflow-wrap:anywhere; } html:root #order-dialog .activity-reminder-meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:12px; font-size:12px; color:var(--n-muted); } html:root #order-dialog .timeline-evidence { border-radius:8px; margin-top:12px; } html:root #order-dialog .timeline-evidence li { border:0; background:transparent; } html:root #order-dialog .timeline-empty { border:0; background:transparent; padding:16px 0; color:var(--n-muted); } @media(max-width:1000px){html:root #order-dialog .portal-order-layout{grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);gap:16px;}} @media(max-width:760px){html:root #order-dialog .portal-order-layout{grid-template-columns:minmax(0,1fr);}html:root #order-dialog .order-fact-section{padding:18px;}html:root #order-dialog .portal-correspondence .timeline>li.activity-event{padding:16px;}html:root #order-dialog .order-amount-fact dd{font-size:26px;}html:root #order-dialog .order-activity-tools{padding:16px;}} /* Adapt copied Neuffer components to WebCalc request fields and IDs. */ [hidden]{display:none!important} #workspace{display:flex;flex-direction:column;height:100dvh;min-height:0} #workspace>.page{display:flex;flex:1;flex-direction:column;min-height:0} #panel-orders{display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden} #orders-kanban-view:not([hidden]),#orders-kanban-view>.kanban-scroll-shell{display:flex;flex:1;min-height:0} #board{width:100%;height:100%;min-height:0} #table{overflow:auto;flex:1;min-height:0} .webcalc-actions{display:flex;gap:8px;align-items:center} .webcalc-count{font-size:12px;color:var(--n-muted);margin-left:6px;font-weight:500} .webcalc-footer{flex:none;display:flex;gap:10px;align-items:center;padding:8px 0 0;color:var(--n-muted);font-size:12px} .webcalc-language{display:grid;place-items:center;min-height:40px;width:40px;border:1px solid var(--n-control-border);border-radius:8px;color:var(--n-text);background:var(--n-surface-subtle);font-size:13px} html[data-theme=dark] .webcalc-language{color:var(--n-workspace-text);background:var(--n-chrome);border-color:var(--n-chrome-border)} html:root .filter-compact #owner{flex:0 1 190px;min-width:160px;height:32px;padding:4px 8px;border:0;border-left:1px solid var(--n-border);border-radius:0;background:var(--n-surface);color:var(--n-text);font:inherit;font-size:12px} html:root .filter-compact #search{flex:1;min-width:100px;height:32px;border:0;background:transparent;color:var(--n-text);padding:5px 7px;font:inherit;font-size:13px} #notice{padding:0;margin:0 0 8px;min-height:18px;font-size:12px} #notice.error{padding:8px 12px;border-radius:8px;color:var(--n-danger);background:var(--n-danger-bg)} .kanban-card.webcalc-card{display:block;text-align:left;width:100%;color:var(--n-text);cursor:pointer} .webcalc-card .kanban-card-open{font-size:15px;min-height:28px;overflow-wrap:anywhere;font-weight:650} .webcalc-card .kanban-card-date{margin:0 0 6px;font-size:12px} .webcalc-card .kanban-customer-refs{display:block;margin:6px 0} .webcalc-card .kanban-customer-refs strong{display:block;font-size:14px} .webcalc-card .kanban-quantities{display:block;font-size:12px} .webcalc-card .kanban-card-latest{display:flex;align-items:center;gap:7px;font-size:12px} .webcalc-card .badge{white-space:normal;margin-top:6px} .webcalc-avatar{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:var(--n-selected);color:var(--n-link);font-size:11px;flex:none} .webcalc-card .kanban-card-open,.webcalc-card .kanban-card-latest{pointer-events:none} #detailBody .section{margin:0 0 18px;padding:18px;border:1px solid var(--n-border);border-radius:10px;background:var(--n-surface)} #detailBody .section h3{margin:0 0 14px;color:var(--n-text);font-size:16px;line-height:1.4} #detailBody .section p{font-size:13px;line-height:1.6;margin:8px 0;overflow-wrap:anywhere} html:root #detailBody .portal-card-facts{padding:0;gap:16px} html:root #detailBody .portal-card-facts .section{margin:0;padding:20px;border:1px solid var(--n-border);border-radius:12px;background:var(--n-surface)} html:root #detailBody .portal-card-facts .order-section-title{font-size:12px;font-weight:600;color:var(--n-muted);letter-spacing:.035em;margin-bottom:18px} .keyval{display:grid;grid-template-columns:minmax(90px,.85fr) minmax(0,1.15fr);gap:10px;padding:8px 0;border-bottom:1px solid var(--n-border);font-size:13px} .keyval span:first-child{color:var(--n-muted)} .keyval span:last-child{overflow-wrap:anywhere} .construction-preview{margin:0 0 16px;overflow:hidden;border:1px solid var(--n-border);border-radius:10px;background:var(--n-surface-subtle)} .construction-preview img{display:block;width:100%;height:340px;object-fit:contain;padding:16px;box-sizing:border-box;background:#f3f4f6} .construction-preview figcaption{display:flex;flex-direction:column;gap:4px;padding:12px 14px;font-size:12px;line-height:1.5;color:var(--n-muted)} .construction-preview figcaption strong{font-weight:600;color:var(--n-text)} #detailBody .section .construction-preview-notice{padding:10px 12px;border-left:3px solid var(--warning);border-radius:4px;background:var(--warning-bg);color:var(--warning)} .inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px} .inline-form select{flex:1;min-width:140px;width:auto} #detailBody .section textarea{display:block;min-height:90px;width:100%;resize:vertical;margin:12px 0} .comment{border-bottom:1px solid var(--n-border);padding:12px 0;white-space:pre-wrap;font-size:13px} .comment small{display:block;color:var(--n-muted);margin-bottom:6px} .history{border-left:2px solid var(--n-border);padding:8px 12px;margin:5px 0;color:var(--n-muted);font-size:12px} #table table{border-collapse:collapse;font-size:13px;text-align:left;background:var(--n-surface)} #table th,#table td{padding:12px 14px;border-bottom:1px solid var(--n-border);white-space:nowrap} #table th{background:var(--n-surface-subtle);font-size:12px;color:var(--n-muted)} #table td button{background:transparent;color:var(--n-link);padding:0} #accounts{width:min(520px,calc(100vw - 24px));background:var(--n-surface);color:var(--n-text)} #accounts .dialog-header{align-items:center} #accountResult{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px} .crm-auth-note.error:empty{display:none} @media(max-width:760px){ html:root .crm-shell .home-link::after{content:"WebCalc"} #workspace>.page{width:calc(100% - 16px);margin-top:10px} html:root .filter-compact{flex-wrap:wrap} html:root .filter-compact #search{flex:1 1 160px;min-width:0} html:root .filter-compact #owner{flex:1 0 100%;width:100%;border-left:0;border-top:1px solid var(--n-border);min-height:34px} .webcalc-footer{align-items:flex-start;flex-direction:column;line-height:1.5} .webcalc-actions .quiet-button{font-size:12px;padding:6px 8px} #detailBody .section{padding:14px} .keyval{font-size:12px;gap:8px} }