* { box-sizing: border-box; } html.preload body { display: none !important; } html, body, input, textarea, select, button { margin: 0; height: 100%; padding: 0; font-family: "Exo 2", sans-serif; font-optical-sizing: auto; color: #3e3e3e; font-weight: 500; transition: background 0.3s ease, color 0.3s ease; } body { background: #e8e8e8; } html { overflow-y: scroll; scrollbar-gutter: stable; } :target { scroll-margin-top: 80px; } .row-hidden { display: none !important; } .readonly-select { pointer-events: none; background-color: #eee; color: #555; } input:focus, textarea:focus { background-color: #fffadd !important; } @keyframes fadeIn { to { opacity: 1; } } .pointer { cursor: pointer !important; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .pointer[role="button"], .pointer[tabindex] { cursor: pointer !important; } tr.bom-type-row-clickable, tr.bom-type-row-clickable td { cursor: pointer; } tr.bom-type-row-clickable:hover td { background: var(--row-hover-bg, #e8f4fc); } tr.product-row-clickable, tr.product-row-clickable td { cursor: pointer !important; } .product-child-preview-block { padding: 10px 12px; border-radius: 6px; } .product-child-preview-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; } .product-child-preview-grid { display: flex; flex-wrap: wrap; gap: 10px 12px; } a.product-child-preview-item { flex: 0 0 auto; display: block; text-align: center; line-height: 1.25; min-width: 56px; text-decoration: none; color: inherit; border-radius: 4px; } .product-child-preview-photo { width: 56px; height: 56px; margin: 0 auto 4px; flex-shrink: 0; } .product-child-preview-photo img { display: block; width: 56px; height: 56px; object-fit: cover; border-radius: 4px; border: 1px solid #d0d7de; background: #fff; } .product-child-preview-code { font-size: 11px; font-weight: 600; color: #0077b6; white-space: nowrap; padding: 0 2px; } .product-detail-tab-body { margin: 0; } .product-detail-flash { padding: 10px 12px 0; } .product-detail-flash .alert { margin: 0; } .product-detail-sheet.bgwhite { padding: 0; box-sizing: border-box; overflow: visible; border-radius: 0; --cd-border: #e0e6ed; --cd-surface: #ffffff; --cd-muted: #546e7a; --cd-text: #263238; --cd-chip-bg: #eceff1; --cd-stat-bg: #f5f7fa; --cd-success-bg: #e8f5e9; --cd-success-text: #2e7d32; } .product-detail-sheet .pd-hero.cd-hero { border-bottom: 1px solid var(--cd-border); padding: 14px 16px; } .pd-hero__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 20px; align-items: start; } .pd-hero__photo-wrap { display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: max-content; } .pd-hero__upload { margin: 0; white-space: nowrap; } .pd-hero__frame { width: 96px; height: 116px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--cd-border, #e0e6ed); background: var(--cd-stat-bg, #f5f7fa); overflow: hidden; position: relative; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .pd-hero__frame:hover { border-color: #90caf9; box-shadow: 0 2px 8px rgba(21, 101, 192, 0.12); } .pd-hero__frame img { width: 100%; height: 100%; object-fit: contain; display: block; background: #fff; } .pd-hero__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #90a4ae; font-size: 28px; } .pd-hero__zoom { position: absolute; bottom: 3px; right: 3px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 4px; padding: 2px 5px; font-size: 9px; line-height: 1; pointer-events: none; } .pd-hero__main { min-width: 0; } .pd-hero__head { margin-bottom: 12px; } .pd-hero__head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 10px 12px; } .pd-hero__title { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.3; color: var(--cd-text, #263238); word-break: break-word; } .pd-hero__actions { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; } .pd-hero__actions .product-detail-photo-form { display: none; } .pd-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 18px; margin: 0; } .pd-hero__fact { min-width: 0; } .pd-hero__fact dt { margin: 0 0 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .pd-hero__fact dd { margin: 0; font-size: 14px; line-height: 1.35; word-break: break-word; } .product-detail-sheet > .product-detail-pane-header { margin: 0; } .product-detail-tab-panel { padding: 16px 18px; box-sizing: border-box; min-width: 0; } .product-detail-tab-panel > .data-block-grid, .product-detail-tab-panel > .product-bom-stack, .product-detail-tab-panel > .alert { margin-top: 0; } .product-detail-tab-panel--packaging, .product-detail-tab-panel--price, .product-detail-tab-panel--mould, .product-detail-tab-panel--bom, .product-detail-tab-panel--createset { font-size: 14px; line-height: 1.45; color: #37474f; } .product-detail-tab-panel--packaging .large-text.text-blue, .product-detail-tab-panel--price .data-block-header .large-text, .product-detail-tab-panel--mould .data-block > .bold700.large-text.text-blue, .product-detail-tab-panel--bom .product-bom-view-head .bold700.large-text, .product-detail-tab-panel--bom .product-bom-block-head .bold700.large-text { font-size: 12px !important; font-weight: 700 !important; color: #607d8b !important; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.35; } .product-detail-tab-panel--price .xlarge-text { font-size: 18px !important; font-weight: 700; line-height: 1.3; color: #1565c0; } .product-detail-tab-panel--price .data-block-header { margin: 0 0 10px; padding: 0; } .product-detail-tab-panel--price .data-block-body { padding: 0; } .product-detail-tab-panel--packaging .settings-table .bold600.text-blue, .product-detail-tab-panel--packaging form.data-block > .bold600.text-blue { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .product-detail-tab-panel--packaging .settings-table label { display: block; margin: 0 0 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .product-detail-tab-panel--packaging .view-packaging, .product-detail-tab-panel--packaging .view-inner, .product-detail-tab-panel--packaging .view-master { font-size: 14px; font-weight: 600; color: #1565c0; } .product-detail-tab-panel--packaging .settings-table, .product-detail-tab-panel--mould .settings-table, .product-detail-tab-panel--price table, .product-detail-tab-panel--bom .scroll-table { width: 100%; border-collapse: collapse; font-size: 10pt; table-layout: auto; } .product-detail-tab-panel--packaging .settings-table thead th, .product-detail-tab-panel--mould .settings-table thead th, .product-detail-tab-panel--price table thead th, .product-detail-tab-panel--bom .scroll-table thead th { position: static; background: #f0f4f7 !important; color: #607d8b !important; font-size: var(--mafa-th-font-size) !important; font-weight: var(--mafa-th-font-weight) !important; text-transform: var(--mafa-th-text-transform); letter-spacing: var(--mafa-th-letter-spacing); line-height: var(--mafa-th-line-height); padding: 8px !important; border-top: none !important; border-bottom: 1px solid #dce3e8 !important; border-left: none !important; border-right: none !important; white-space: nowrap; } .product-detail-tab-panel--packaging .settings-table td, .product-detail-tab-panel--mould .settings-table td, .product-detail-tab-panel--price table td, .product-detail-tab-panel--bom .scroll-table td { padding: 8px !important; border-top: none; border-bottom: 1px solid #ddd !important; border-left: none !important; border-right: none !important; font-size: 10pt; white-space: normal; overflow: visible; text-overflow: unset; } .product-detail-tab-panel--packaging .settings-table tbody tr:hover td, .product-detail-tab-panel--mould .settings-table tbody tr:hover td, .product-detail-tab-panel--price table tbody tr:hover td, .product-detail-tab-panel--bom .scroll-table tbody tr:hover td { background: #f3faff; } .product-detail-tab-panel--bom .scroll-table thead tr.bglightblue th { background: #f0f4f7 !important; color: #607d8b !important; } .product-detail-tab-panel--mould .data-block { padding: 15px; } .product-detail-tab-panel--packaging .small-text, .product-detail-tab-panel--price .small-text, .product-detail-tab-panel--mould .small-text, .product-detail-tab-panel--bom .small-text { font-size: 12px; line-height: 1.4; color: #78909c; } .product-detail-tab-panel--packaging a.bold600, .product-detail-tab-panel--mould a.bold600, .product-detail-tab-panel--price a.bold600, .product-detail-tab-panel--bom a.bold600 { font-weight: 600; } .product-detail-tab-panel--createset .psm-panel { border: 1px solid #ddd; border-radius: 5px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); margin-bottom: 10px; background: #fff; } .product-detail-tab-panel--createset .psm-panel__head { padding: 11px 16px; background: #f5f7fa; border-bottom: 1px solid #eceff1; } .product-detail-tab-panel--createset .psm-panel__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.35; color: #607d8b; } .product-detail-tab-panel--createset .psm-panel__title > i { font-size: 12px; opacity: 0.85; } .product-detail-tab-panel--createset .psm-panel__count { font-size: 12px; font-weight: 600; color: #78909c; text-transform: none; letter-spacing: 0; } .product-detail-tab-panel--createset .psm-members__head { padding: 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .product-detail-tab-panel--createset .psm-member-row { padding: 8px 16px; font-size: 10pt; border-bottom-color: #ddd; } .product-detail-tab-panel--createset .psm-member-row:hover { background: #f3faff; } .product-detail-tab-panel--createset .psm-member-code { font-size: 14px; font-weight: 600; color: #1565c0; } .product-detail-tab-panel--createset .psm-member-name { font-size: 14px; color: #37474f; } .product-detail-tab-panel--createset .psm-member-internal { font-size: 12px; color: #78909c; } .product-detail-tab-panel--createset .psm-field__label { font-size: 11px; font-weight: 600; color: #78909c; } .product-detail-tab-panel--createset .psm-readonly-val { font-size: 14px; font-weight: 600; color: #546e7a; } .product-detail-tab-panel--createset .psm-empty { font-size: 14px; color: #78909c; } .product-detail-tab-panel--createset .psm-search-empty { font-size: 13px; } .product-detail-tab-panel--createset .psm-search-list__head { padding: 8px 16px; background: #f0f4f7; border-bottom: 1px solid #dce3e8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #607d8b; } .product-detail-tab-panel--createset .psm-search-row { font-size: 10pt; border-bottom-color: #ddd; } .product-detail-tab-panel--createset .psm-search-row:hover { background: #f3faff; } .product-detail-overview-main { display: block; padding: 0; min-width: 0; } .product-detail-photo-form { margin: 0; } .product-detail-photo-input { display: none; } .product-image-modal { position: fixed; inset: 0; z-index: 999999; } .product-image-modal-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.9); cursor: pointer; z-index: 999999; } .product-image-modal-content { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; max-width: min(90vw, 1200px); max-height: 90vh; z-index: 999999; text-align: center; } .product-image-modal-content img { display: block; max-width: 100%; max-height: 90vh; width: auto; height: auto; margin: 0 auto; object-fit: contain; } .product-image-modal-close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; line-height: 1; z-index: 999999; } @media (max-width: 767px) { .product-image-modal-content { width: 90vw !important; max-width: 90vw !important; max-height: 90vh !important; padding: 0; } .product-image-modal-content img { width: 100% !important; max-width: 100% !important; max-height: calc(90vh - 48px) !important; height: auto !important; } .product-image-modal-close { position: fixed; top: 12px; right: 12px; left: auto; font-size: 36px; padding: 4px 10px; line-height: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } } .product-detail-parent-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 10px 12px; background: #e8f4fc; border: 1px solid #bbdefb; border-radius: 8px; text-decoration: none; color: inherit; transition: background .15s, border-color .15s; } .product-detail-parent-banner:hover { background: #dbeefc; border-color: #90caf9; } .product-detail-parent-banner__icon { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 8px; color: #1565c0; } .product-detail-parent-banner__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .product-detail-parent-banner__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #546e7a; } .product-detail-parent-banner__desc { font-size: 12px; color: #607d8b; } .product-detail-parent-banner__chev { flex-shrink: 0; color: #90a4ae; font-size: 12px; } .product-detail-section { margin-bottom: 18px; } .product-detail-section__title { margin: 0 0 10px 0; padding: 0; font-size: 13px; font-weight: 700; color: #37474f; display: flex; align-items: center; gap: 8px; } .product-detail-section__title i { color: #1565c0; font-size: 14px; width: 1.1em; text-align: center; } .product-detail-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px 20px; margin: 0; } .product-detail-meta-item { min-width: 0; } .product-detail-meta-item dt { margin: 0 0 3px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .product-detail-meta-item dd { margin: 0; font-size: 14px; line-height: 1.35; word-break: break-word; } .product-detail-meta-stack { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e0e6ed; } .product-detail-meta-stack__label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; margin-bottom: 4px; } .product-detail-meta-stack--gw-stages { margin-top: 14px; } .pd-gw-stage-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 4px 0 0; padding: 12px 14px; list-style: none; background: linear-gradient(135deg, #f8fafc 0%, #eef4fb 100%); border: 1px solid #dce4ec; border-radius: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .pd-gw-stage-flow__step { display: flex; align-items: center; flex-shrink: 0; } .pd-gw-stage-flow__node { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 8px; background: #fff; border: 1px solid #90caf9; box-shadow: 0 1px 3px rgba(21, 101, 192, 0.08); color: #1565c0; font-size: 13px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .pd-gw-stage-flow__index { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 999px; background: linear-gradient(180deg, #42a5f5 0%, #1565c0 100%); color: #fff; font-size: 11px; font-weight: 800; line-height: 1; flex-shrink: 0; } .pd-gw-stage-flow__label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .pd-gw-stage-flow__connector { display: inline-flex; align-items: center; flex-shrink: 0; width: 36px; margin: 0 2px; position: relative; color: #64b5f6; list-style: none; } .pd-gw-stage-flow__arrow-line { position: absolute; left: 4px; right: 14px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, #90caf9 0%, #42a5f5 55%, #1e88e5 100%); background-size: 200% 100%; border-radius: 1px; animation: pd-gw-flow-line 1.6s ease-in-out infinite; animation-delay: var(--pd-gw-flow-delay, 0s); } .pd-gw-stage-flow__arrow-icon { position: relative; z-index: 1; margin-left: auto; font-size: 12px; animation: pd-gw-flow-arrow 1.6s ease-in-out infinite; animation-delay: var(--pd-gw-flow-delay, 0s); } @keyframes pd-gw-flow-line { 0% { background-position: 100% 0; opacity: 0.35; } 50% { background-position: 0% 0; opacity: 1; } 100% { background-position: 100% 0; opacity: 0.35; } } @keyframes pd-gw-flow-arrow { 0%, 100% { opacity: 0.4; transform: translateX(-2px); } 50% { opacity: 1; transform: translateX(3px); } } .product-detail-gw-stage-empty { margin: 0; font-size: 14px; line-height: 1.4; } @media (prefers-reduced-motion: reduce) { .pd-gw-stage-flow__arrow-line, .pd-gw-stage-flow__arrow-icon { animation: none; } } @media (max-width: 768px) { .pd-gw-stage-flow { flex-wrap: nowrap; padding: 10px 12px; } .pd-gw-stage-flow__label { max-width: 120px; } } .product-detail-desc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .product-detail-desc-block { padding: 12px 14px; background: #f8fafc; border-radius: 8px; border: 1px solid #e8edf2; } .product-detail-desc-block__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; margin-bottom: 6px; } .product-detail-desc-block__text { font-size: 14px; line-height: 1.45; } .product-detail-desc-block__finish { margin-top: 6px; font-size: 13px; color: #607d8b; line-height: 1.4; } .product-detail-note { margin-bottom: 16px; padding: 10px 12px; background: #fff8e1; border-radius: 6px; border-left: 3px solid #ffb300; } .product-detail-note-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; margin-bottom: 4px; } .product-detail-note-text { margin: 0; font-size: 13px; line-height: 1.45; } .product-detail-children-banner { display: block; text-decoration: none; color: inherit; } .product-detail-children-banner .product-child-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .product-detail-children-banner__chev { margin-left: auto; color: #90a4ae; font-size: 12px; } .product-detail-system-meta { margin-top: 4px; padding-top: 12px; border-top: 1px solid #eceff1; color: #90a4ae; } .product-detail-edit-pane { padding: 16px 18px; border-top: 1px solid #e0e6ed; background: #fafbfc; } .product-detail-edit-pane__title { margin-bottom: 12px; } .product-detail-edit-pane__actions { margin-top: 12px; } .product-detail-pane { border-top: 1px solid #e0e6ed; } .product-detail-packaging-pane { padding: 0; border-top: none; background: transparent; box-sizing: border-box; } .product-detail-packaging-pane .product-detail-packaging-stack { gap: 12px; } .product-detail-packaging-pane .data-block { margin: 0; } @media (max-width: 768px) { .product-detail-tab-panel { padding: 12px; } .product-detail-overview-main { padding: 0; } .pd-hero__photo-wrap { width: auto; } } @media (max-width: 599px) { .pd-hero__title { font-size: 1.05rem; } } .expense-toggle-cell { display: inline-flex; align-items: center; gap: 10px; line-height: 1.45; white-space: normal; } .expense-collapse-icon, .expense-group-chevron { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; color: #0077b6; } .expense-collapse-icon i, .expense-group-chevron i { transition: color 0.2s ease; } .expense-stats-table td, .expense-stats-table th { vertical-align: middle; } .expense-stats-table th:first-child, .expense-stats-table td:first-child { width: 64% !important; } .expense-stats-table th:last-child, .expense-stats-table td:last-child { width: 36%; white-space: nowrap; } .expense-stats-table .expense-toggle-label { display: inline-block; line-height: 1.45; white-space: normal; } .expense-sub-row-content { display: block; overflow: visible; line-height: 1.45; padding: 1px 0; } @media (max-width: 768px) { .expense-stats-table th:first-child, .expense-stats-table td:first-child { width: 68% !important; } .expense-stats-table th:last-child, .expense-stats-table td:last-child { width: 32%; } .expense-stats-table .toggle-all-groups>th:first-child, .expense-stats-table .toggle-group>td:first-child { padding-left: 6px !important; } .expense-stats-table .expense-toggle-cell { display: flex; width: 100%; align-items: flex-start; gap: 6px; } .expense-stats-table .expense-collapse-icon, .expense-stats-table .expense-group-chevron { min-width: 12px; width: 12px; justify-content: flex-start; margin-left: 0; } .expense-stats-table .expense-toggle-label { padding-top: 1px; } } .container { max-width: 100%; width: 100%; box-sizing: border-box; display: flex; min-height: 100vh; min-height: 100dvh; min-width: 0; overflow-x: clip; } .main { background: #e8e8e8; flex: 1 1 auto; min-width: 0; max-width: 100%; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; } .main-content-card { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; max-width: 100%; box-sizing: border-box; } .topbar { background: rgba(0, 81, 128, 0.965); backdrop-filter: blur(10px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; color: #fff; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 10px; gap: 10px; } .filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 5px; } .theme-toggle { background: transparent; border: none; font-size: 20px; cursor: pointer; } select, textarea, input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], input[type="file"] { padding: 5px 12px; border-radius: 6px; border: 1px solid #6cace4; font-size: 14px; background: #fdfdfd; color: #333; max-width: 100%; box-sizing: border-box; } input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"], select { height: 30px; } select:focus, input[type="text"]:focus, textarea:focus { border-color: #0077b6; outline: none; background: #fdfff3; } .batchInput { font-size: 20px !important; font-weight: bold !important; border: 1px solid #ccc !important; border-radius: 6px !important; height: 50px !important; text-align: center !important; width: 95% !important; display: inline-block !important; padding: 2px !important; } .stats { display: flex; flex-wrap: wrap; gap: 10px; padding: 5px; background: #d8e4ed; } .stat-box { background: #ffffff; color: #0077b6; padding: 5px 15px; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); border-left: 4px solid #00b4d8; } .product-update-toolbar__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid #e8edf2; } .product-update-toolbar__section { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 6px; } .product-update-toolbar__section + .product-update-toolbar__section { margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e8edf2; } .product-update-section-label { flex: 0 0 auto; min-width: 68px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; line-height: 1.2; } .product-update-template-dropdown { flex: 0 0 auto; } .product-update-template-dropdown .menu-trigger.product-update-template-trigger { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin: 0; user-select: none; } .product-update-template-dropdown .menu-content { min-width: min(100%, 320px); } .product-update-template-dropdown .menu-content a i { color: #1d6f42; } .product-update-upload-form { margin: 0; } .product-update-upload-row { display: flex; flex: 1 1 0; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; } .product-update-type-select { flex: 1 1 180px; min-width: 0; max-width: 320px; box-sizing: border-box; } .product-update-file-btn { display: inline-flex; align-items: center; gap: 5px; margin: 0; flex: 0 0 auto; white-space: nowrap; } .product-update-preview { margin-top: 10px; overflow-x: auto; } .product-update-preview > .alert { margin-bottom: 10px; } .product-update-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .product-update-preview table { margin-top: 0; } .product-addphotos-customer-row .product-addphotos-customer-wrap { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; } .product-addphotos-customer-search { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0; flex: 1 1 220px; min-width: 0; max-width: 360px; width: 100%; } .product-addphotos-customer-search .searchUsers { top: 100%; margin-top: 0; } .product-addphotos-customer-preview { width: 100%; margin-top: 8px; align-self: flex-start; } .product-addphotos-customer-preview:empty { display: none; } .product-addphotos-customer-preview:has(.product-addnew-customer-card) { padding: 0; display: flex; justify-content: flex-start; align-items: flex-start; } .product-addphotos-upload-block { flex: 1 1 100%; width: 100%; } .product-addphotos-upload-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-left: 78px; min-width: 0; } .product-addphotos-mode-note { margin: 0; font-size: 12px; line-height: 1.35; color: #78909c; } @media (max-width: 640px) { .product-addphotos-customer-search { max-width: none; width: 100%; } .product-addphotos-upload-stack { margin-left: 0; width: 100%; } } @media (max-width: 640px) { .product-update-toolbar__head { flex-direction: column; align-items: flex-start; gap: 2px; } .product-update-section-label { width: 100%; min-width: 0; } .product-update-type-select { max-width: none; width: 100%; } } .stats .currency-stat-filter { cursor: pointer; user-select: none; transition: all 0.18s ease; } .stats .currency-stat-filter:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14); } .stats .currency-stat-filter.active-currency-filter { background: #0077b6; color: #ffffff; border-left-color: #005f91; } table { width: 100%; border-collapse: collapse; background: white; table-layout: fixed; } .settings-table { table-layout: auto !important; } th, td { padding: 10px 5px; border-bottom: 1px solid #eee; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } td.description { text-align: left; white-space: normal; word-break: break-word; } tr.row-error input { border: 1px solid red !important; background: #ffecec; } tbody tr:hover { background: #f3faff; transition: background 0.2s ease; } .no-hover tbody tr:hover { background: inherit !important; cursor: default; } td img { display: block; margin: 0 auto; max-width: 100%; height: auto; } td label { margin-bottom: 4px; } thead th { position: sticky; top: 0; background: rgb(59, 130, 172); z-index: 9; color: #fff; font-size: var(--mafa-th-font-size); font-weight: var(--mafa-th-font-weight); letter-spacing: var(--mafa-th-letter-spacing); line-height: var(--mafa-th-line-height); text-transform: var(--mafa-th-text-transform); } table thead, table thead tr, table thead th { overflow: visible; } table thead th:has(.dropdown-menu:hover), table thead th:has(.dropdown-menu:focus-within), table thead th:has(.dropdown-menu.is-open) { z-index: 10050; } table thead th .dropdown-menu .menu-content { z-index: 10060; } #orders-table, #orders-table thead, #orders-table thead tr, #orders-table thead th { overflow: visible !important; } #orders-table thead th .dropdown-menu .menu-content { z-index: 10060; } #orders-table thead th.orders-th-dropdown { position: sticky; top: 0; } #orders-table thead th.orders-th-dropdown:hover, #orders-table thead th.orders-th-dropdown:focus-within, #orders-table thead th.orders-th-export:hover, #orders-table thead th.orders-th-export:focus-within { z-index: 10050; } #orders-table thead th .orders-bcdr-trigger { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px 6px; font-size: 16px; line-height: 1; vertical-align: middle; } #orders-table thead th .orders-bcdr-trigger:hover { opacity: 0.85; } #orders-table thead th.orders-th-export { position: sticky; top: 0; } #orders-table tbody tr.order-row .order-checkbox-cell { position: relative; padding: 0; vertical-align: middle; } #orders-table .order-checkbox-cell-hit { display: flex; align-items: center; justify-content: center; position: absolute; inset: 0; margin: 0; box-sizing: border-box; cursor: pointer; } #orders-table .order-checkbox-cell-hit .order-checkbox { margin: 0; cursor: pointer; flex-shrink: 0; } .tooltip.tooltip-inline-hit { display: inline-block; max-width: 100%; cursor: help; } #orders-table td .order-deposit-bank-fee { cursor: help; } .dropdown-menu.force-close .menu-content { display: none !important; } @media (hover: none), (pointer: coarse), (max-width: 768px) { .dropdown-menu.dropdown-click.is-open:not(.force-close) .menu-content { display: block !important; opacity: 1 !important; transform: scale(1) !important; } } #orders-table { margin-top: 0; } #piecework-orders-table { margin-top: 0; } #piecework-orders-table, #piecework-orders-table thead, #piecework-orders-table thead tr, #piecework-orders-table thead th { overflow: visible !important; } #piecework-orders-table thead th { position: sticky; top: 0; } table.product-list-table { border-collapse: separate; border-spacing: 0; } table.product-list-table thead th { position: sticky; top: 0; z-index: 8; background: rgb(59, 130, 172); color: #fff; } .no-border th, .no-border td { border: 0; } .gw-greenware-entry-meta.table-bordered td:nth-child(1) { padding: 8px 8px 8px 12px !important; vertical-align: top; } .gw-greenware-entry-meta.table-bordered td:nth-child(2) { padding: 8px 12px 8px 10px !important; } .table-bordered { width: 100%; border-collapse: collapse; border: 1px solid #ccc; } .table-bordered th, .table-bordered td { border: 1px solid #ccc; padding: 8px !important; text-align: left; font-size: 14px; } .table-bordered td:first-child { padding-left: 8px !important; } .table-bordered th { background: #f5f6fa; font-weight: 600; } .table-bordered tr:nth-child(even) td { background: #fafafa; } .table-bordered tr:hover td { background: #f0f8ff; } .payroll-row { display: grid; grid-template-columns: 64% 34%; gap: 10px; align-items: stretch; } @media (max-width: 768px) { .payroll-row { grid-template-columns: 1fr; } } .wrapper-payroll { position: relative; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border-radius: 5px; padding: 10px; } .payroll-page-body, .workers-page-body { margin-top: 0; } .oc-create-page-title { margin-top: 20px; } .oc-create-seal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 15px 0; box-sizing: border-box; } .settings-page-title { display: block; font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0 0 12px 0; padding: 0; } .settings-page-title--section { margin-top: 16px; margin-bottom: 10px; } .settings-page-title-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 16px 0; } .settings-page-title-bar .settings-page-title { margin-bottom: 0; flex: 1 1 auto; min-width: 0; } .settings-page-title-bar .settings-page-title-actions { flex: 0 0 auto; padding-top: 2px; } .settings-form-block { border: 1px solid #e8e8e8; border-radius: 8px; padding: 16px 18px; background: #fafbfc; } .settings-form-block+.settings-form-block { margin-top: 14px; } .settings-form-block+form { margin-top: 14px; } .settings-form-block>.settings-page-title.settings-page-title--section:first-child { margin-top: 0; } .settings-page-flash-msg { margin-bottom: 12px; } .settings-page-flash-msg .alert { margin-bottom: 0; } .settings-company-logo-preview-wrap { margin-top: 10px; text-align: left; } .settings-company-logo-preview { display: block; width: auto; height: 120px; max-height: 120px; max-width: 100%; object-fit: contain; object-position: left center; } .psm-page__flash { margin-bottom: 12px; } .psm-panel { border: 1px solid #dce3e8; border-radius: 8px; background: #fff; margin-bottom: 16px; overflow: hidden; } .psm-panel__head { padding: 12px 16px; border-bottom: 1px solid #e8edf0; background: #fafbfc; } .psm-panel__title { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 700; color: #1565c0; } .psm-panel__title > i { font-size: 14px; opacity: 0.9; } .psm-panel__count { font-size: 12px; font-weight: 600; color: #78909c; } .psm-empty { padding: 28px 16px; text-align: center; color: #78909c; } .psm-empty > i { display: block; margin-bottom: 8px; font-size: 28px; opacity: 0.45; } .psm-empty p { margin: 0; font-size: 14px; } .psm-members { --psm-cols: 55px minmax(150px, 1.4fr) 76px minmax(200px, 1fr) 72px minmax(96px, auto); } .psm-members:not(.psm-members--edit) { --psm-cols: 55px minmax(150px, 1.5fr) 76px minmax(200px, 1fr) 72px; } .psm-member-row { display: grid; grid-template-columns: var(--psm-cols); gap: 10px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eceff1; box-sizing: border-box; } .psm-member-row:last-child { border-bottom: none; } .psm-members__head { padding: 8px 16px; background: #f0f4f7; border-bottom: 1px solid #dce3e8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #607d8b; } .psm-member-form, .psm-member-fields { display: contents; } .psm-members-bulk-form { margin: 0; } .psm-members__save-bar { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-top: 1px solid #eceff1; background: #fafbfc; } .psm-member-photo { display: block; width: 55px; height: 55px; border-radius: 6px; overflow: hidden; border: 1px solid #e0e0e0; background: #fff; } .psm-member-photo img { width: 100%; height: 100%; object-fit: cover; } .psm-member-row__product { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .psm-member-code { font-size: 14px; font-weight: 700; color: #1565c0; text-decoration: none; line-height: 1.3; } .psm-member-internal { font-size: 11px; color: #78909c; } .psm-member-name { font-size: 13px; color: #546e7a; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .psm-pack-fields { display: flex; flex-wrap: wrap; gap: 8px 12px; } .psm-field__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #90a4ae; line-height: 1.2; } .psm-input { width: 64px; max-width: 100%; text-align: center; box-sizing: border-box; } .psm-readonly-val { font-size: 13px; font-weight: 600; color: #90a4ae; font-variant-numeric: tabular-nums; } .psm-readonly-sep { margin: 0 4px; color: #bdbdbd; } .psm-member-row__actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; } .psm-member-row__show { display: flex; justify-content: center; align-items: center; } .psm-show-toggle-form { margin: 0; } .psm-show-switch.switch { margin: 0; } .psm-footnote { margin: 0; padding: 10px 16px 14px; font-size: 12px; line-height: 1.45; color: #90a4ae; border-top: 1px solid #eceff1; background: #fafbfc; } .psm-footnote > i { margin-right: 4px; opacity: 0.75; } .psm-search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; } .psm-search-input { flex: 1 1 260px; max-width: 420px; } .psm-search-empty { margin: 0 16px; padding: 0 0 4px; font-size: 13px; color: #c62828; } .psm-search-list { margin: 12px 16px 16px; border: 1px solid #eceff1; border-radius: 4px; overflow: hidden; } .psm-search-list__head { padding: 8px 16px; background: #f0f4f7; border-bottom: 1px solid #dce3e8; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #607d8b; } .psm-search-list__body:empty { display: none; } .psm-search-row { display: grid; grid-template-columns: 55px minmax(150px, 1fr) minmax(140px, auto); gap: 10px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid #eceff1; box-sizing: border-box; } .psm-search-row:last-child { border-bottom: none; } .psm-search-row__product { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .psm-search-row__form { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px 12px; flex-wrap: wrap; } .psm-search-row__form .psm-field--qty { flex: 0 0 auto; } .psm-search-row__form .button { flex: 0 0 auto; } @media (max-width: 991px) { .psm-members { --psm-cols: 55px minmax(120px, 1fr); } .psm-members:not(.psm-members--edit) { --psm-cols: 55px minmax(120px, 1fr); } .psm-members__head { display: none; } .psm-member-row { grid-template-columns: 55px minmax(0, 1fr) auto; grid-template-areas: "photo product actions" "fields fields fields"; gap: 12px; padding: 14px 12px; align-items: start; } .psm-member-row__photo { grid-area: photo; } .psm-member-row__product { grid-area: product; min-width: 0; align-self: center; } .psm-member-row__actions { grid-area: actions; align-self: start; } .psm-member-form, .psm-member-fields { grid-area: fields; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "qty show" "pack pack"; gap: 12px; width: 100%; min-width: 0; } .psm-member-form > .psm-member-row__qty, .psm-member-fields > .psm-member-row__qty { grid-area: qty; } .psm-member-form > .psm-member-row__show, .psm-member-fields > .psm-member-row__show { grid-area: show; } .psm-member-form > .psm-member-row__pack, .psm-member-fields > .psm-member-row__pack { grid-area: pack; } .psm-member-form > .psm-member-row__actions, .psm-member-fields > .psm-member-row__actions { display: none; } .psm-member-row > .psm-member-row__actions { display: flex; } .psm-member-row__qty, .psm-member-row__pack, .psm-member-row__show { min-width: 0; } .psm-member-row .psm-field { width: 100%; } .psm-pack-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; width: 100%; } .psm-pack-fields .psm-field, .psm-pack-fields .psm-pack-fields__item { min-width: 0; } .psm-member-fields .psm-input, .psm-pack-fields .psm-input { width: 100%; max-width: none; text-align: center; } .psm-field--show { align-items: flex-start; } .psm-field--show .psm-show-switch { align-self: flex-start; } .psm-member-row:not(:has(> .psm-member-row__actions)) { grid-template-columns: 55px minmax(0, 1fr); grid-template-areas: "photo product" "fields fields"; } .psm-search-list__head { display: none; } .psm-search-row { grid-template-columns: 55px 1fr; grid-template-areas: "photo product" "actions actions"; gap: 10px 12px; padding: 14px 12px; } .psm-search-row__photo { grid-area: photo; } .psm-search-row__product { grid-area: product; } .psm-search-row__form { grid-area: actions; justify-content: flex-start; } } .wrapper-payroll canvas { display: block; width: 100% !important; height: auto !important; } .table-payroll { width: 100%; border-collapse: collapse; background: #ffffff; table-layout: fixed; } .table-payroll th, .table-payroll td { padding: 4px; border: 0; border-bottom: 1px solid #eee; font-size: 15px; padding: 10px 5px; overflow: visible !important; text-overflow: unset !important; white-space: normal !important; } .table-payroll tr.payroll-header { background: #dcf0fe; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; } .form-item { display: flex; flex-direction: column; } .form-item.full { grid-column: 1 / -1; } .form-item label { font-weight: 600; margin-bottom: 5px; } @media (max-width: 480px) { .form-item label { font-size: 14px; } } .form-advance.advance-form .advance-form__inner { max-width: 480px; } .form-advance.advance-form .advance-form__grid { display: flex; flex-direction: column; gap: 10px; } .form-advance.advance-form .advance-form__pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; align-items: end; } .form-advance.advance-form .advance-form__worker-box { position: relative; width: 100%; min-width: 0; } .form-advance.advance-form .advance-form__field-label { display: block; font-weight: 600; margin-bottom: 4px; font-size: 13px; } .form-advance.advance-form .advance-form__deduct { padding: 8px 10px; background: #f7f9fc; border: 1px solid #e6eaf0; border-radius: 6px; } .form-advance.advance-form .advance-form__deduct-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; } .form-advance.advance-form .advance-form__option { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: normal; cursor: pointer; line-height: 1.3; white-space: nowrap; } .form-advance.advance-form .advance-form__option input { flex-shrink: 0; margin: 0; } .form-advance.advance-form .advance-form__month-wrap { display: flex; flex-direction: column; gap: 2px; max-width: 200px; } .form-advance.advance-form .advance-form__sub { font-size: 12px; color: #555; font-weight: 600; } .form-advance.advance-form .advance-form__actions { margin-top: 2px; padding-top: 10px; border-top: 1px solid #e8e8e8; } @media (max-width: 480px) { .form-advance.advance-form .advance-form__pair { grid-template-columns: 1fr; } .form-advance.advance-form .advance-form__inner { max-width: none; } .form-advance.advance-form .advance-form__option { white-space: normal; } } .table-nowrap { table-layout: auto; white-space: nowrap; overflow-x: auto; } .table-nowrap td, .table-nowrap th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nowrap { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word; } .progress-box .progress-container { height: 15px; border-radius: 10px; overflow: hidden; width: 100%; } .progress-container { height: 8px; background: #cecece; border-radius: 10px; overflow: hidden; width: 98%; } .progress-bar { height: 100%; background: #01be04; } .filter-option { display: inline-block; background: #f2f2f2; color: #333; border: 1px solid #ccc; border-radius: 6px; padding: 4px 10px; margin: 2px 2px 2px 0; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: normal; user-select: none; } .filter-option:hover { background: #e0f0ff !important; border-color: #66aaff !important; color: #0066cc !important; } .filter-option.active { background: #007bff !important; border-color: #006fe6 !important; color: #fff !important; font-weight: 600; box-shadow: 0 0 4px rgba(0, 123, 255, 0.4) !important; } .filter-option:active { transform: scale(0.97) !important; } :root { --app-sidebar-z: 99999; --app-sidebar-edge-z: 99998; --app-sidebar-edge-strip-z: 99997; --app-tooltip-z: 100000; --app-popup-z: 100001; --mafa-th-font-size: 12px; --mafa-th-font-weight: 700; --mafa-th-letter-spacing: 0.03em; --mafa-th-line-height: 1.35; --mafa-th-text-transform: uppercase; } .sidebar { position: fixed; inset: 0 auto 0 0; width: 180px; background: rgb(0, 81, 128); color: #fff; display: grid; grid-template-rows: auto 1fr auto; z-index: var(--app-sidebar-z); transform: translateX(0); transition: transform .35s cubic-bezier(.4, 0, .2, 1); } .sidebar-menu { overflow: auto; min-height: 0; padding-block: 6px; flex-grow: 1; display: flex; flex-direction: column; } .sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); flex-shrink: 0; } .sidebar-footer__actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .sidebar-footer__btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 14px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .sidebar-footer__btn:active { background: rgba(255, 255, 255, 0.18); } .sidebar-footer__btn i { pointer-events: none; } .sidebar-footer__brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; } .sidebar-footer__brand img { display: block; width: auto; height: 28px; max-height: 28px; max-width: min(130px, 100%); object-fit: contain; object-position: right center; opacity: 0.92; } @media (min-width: 1200px) { .sidebar-footer__btn:hover { background: rgba(255, 255, 255, 0.16); } } body.sidebar-closed .sidebar { transform: translateX(-100%); } .sidebar-toggle { display: none; } @media (max-width: 1199px) { .sidebar { transform: translateX(-100%); transition: transform 0.35s ease; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); overflow-y: auto; z-index: var(--app-sidebar-z); } body.sidebar-open .sidebar { transform: translateX(0); } .main:not(:has(.news-page--thread)) { margin-left: 0; width: 100%; align-self: flex-start; padding: 0 0 52px; box-sizing: border-box; } .main-content-card:not(:has(.news-page--thread)) { padding: 0; } } @media (min-width: 1200px) { .sidebar { transform: translateX(0); } .sidebar-toggle { display: none; } .main { margin-left: 180px; width: calc(100% - 180px); transition: margin-left 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .main:not(:has(.news-page--thread)) { padding: 10px; box-sizing: border-box; } } @media (max-height: 480px) { .sidebar-footer { padding: 6px 8px; } .sidebar-footer__brand img { height: 24px; max-height: 24px; max-width: min(110px, 100%); } .sidebar-footer__btn { width: 28px; height: 28px; font-size: 12px; } } @media (max-width: 1199px) { .bottom-bar { position: fixed; bottom: 0; left: 0; padding: 0 10px; width: 100%; height: 52px; background: rgba(0, 81, 128, 0.97); display: flex; justify-content: space-around; align-items: center; z-index: 1900; box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.25); backdrop-filter: blur(6px); transition: opacity 0.35s ease, transform 0.35s ease; } .bottom-bar .bar-link { color: white; text-decoration: none; font-size: 22px; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; transition: background 0.25s ease, transform 0.15s ease; } .bottom-bar .bar-link:hover { background: #ffffff22; } .bottom-bar .sidebar-toggle { display: flex; justify-content: center; align-items: center; width: 35px; height: 35px; border-radius: 8px; background: #ffffff22; color: white; border: 1px solid rgba(255, 255, 255, 0.3); font-size: 22px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); transition: background 0.3s ease, transform 0.15s ease; } .bottom-bar .sidebar-toggle:hover { background: #ffffff33; } .bottom-bar .bar-link.active { background: rgba(255, 255, 255, 0.25); transition: all 0.2s ease; } body.sidebar-open .bottom-bar { opacity: 0; transform: translateY(100%); pointer-events: none; } body:not(.sidebar-open) .bottom-bar { opacity: 1; transform: translateY(0); } .main:not(:has(.news-page--thread)) .main-content-card > *:last-child, .ps-page-body > *:last-child, .page-shell > *:last-child { margin-bottom: 0; } } .app-scroll-top-btn { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 10050; width: 44px; height: 44px; padding: 0; margin: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.38); background: rgba(30, 30, 30, 0.28); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; box-shadow: 0 2px 14px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity 0.35s ease, transform 0.28s ease, visibility 0.28s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .app-scroll-top-btn.is-visible { visibility: visible; transform: translateY(0); pointer-events: auto; } .app-scroll-top-btn.is-visible.is-scrolling { opacity: 1; background: rgba(30, 30, 30, 0.58); border-color: rgba(255, 255, 255, 0.42); box-shadow: 0 3px 16px rgba(0, 0, 0, 0.22); } .app-scroll-top-btn.is-visible.is-idle { opacity: 0.42; background: rgba(30, 30, 30, 0.14); border-color: rgba(255, 255, 255, 0.22); box-shadow: none; } .app-scroll-top-btn.is-visible.is-scrolling:hover { background: rgba(30, 30, 30, 0.72); } .app-scroll-top-btn.is-visible.is-idle:hover { opacity: 0.72; background: rgba(30, 30, 30, 0.32); } .app-scroll-top-btn:focus { outline: 2px solid rgba(0, 123, 255, 0.55); outline-offset: 2px; } @media (max-width: 1199px) { .app-scroll-top-btn { bottom: calc(52px + 16px + env(safe-area-inset-bottom, 0px)); } } @media (min-width: 1200px) { .bottom-bar { display: none; } body.sidebar-pc-collapsed .sidebar { transform: translateX(-100%) !important; pointer-events: none; } body.sidebar-pc-collapsed.sidebar-pc-hoverpeek .sidebar { transform: translateX(0) !important; pointer-events: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.4); z-index: var(--app-sidebar-z); } body.sidebar-pc-collapsed .main { margin-left: 0; width: 100%; } .sidebar-pc-toggle i { font-size: 13px; pointer-events: none; } body.sidebar-pc-collapsed .sidebar-pc-edge-strip { display: block; position: fixed; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 300px; margin: 0; padding: 0; border: none; z-index: var(--app-sidebar-edge-strip-z); pointer-events: none; background: rgb(0, 81, 128); border-radius: 0 5px 5px 0; box-shadow: 2px 0 8px rgba(0, 0, 0, 0.18); } body.sidebar-pc-collapsed .sidebar-pc-edge-hover { display: block; position: fixed; left: 0; top: 0; width: 8px; height: 100vh; height: 100dvh; z-index: var(--app-sidebar-edge-z); pointer-events: auto; background: transparent; cursor: default; } } .sidebar-pc-edge-strip, .sidebar-pc-edge-hover { display: none; } @media (max-width: 1199px) { .sidebar-pc-toggle { display: none !important; } } #bottom-tab-tooltip { position: fixed; left: 50%; bottom: 60px; transform: translate(-50%, 8px); max-width: calc(100vw - 32px); padding: 9px 16px; border-radius: 999px; background: rgba(0, 0, 0, 0.82); color: #fff; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; visibility: hidden; pointer-events: none; z-index: 2005; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } #bottom-tab-tooltip.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .sidebar-topbar { flex-shrink: 0; padding: 10px 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; text-decoration: none; color: #fff; padding: 0 10px 10px; margin: 0; background: transparent; border: none; } .sidebar-user:hover, .sidebar-user:focus, .sidebar-user:active { color: #fff; background: transparent; text-decoration: none; } .sidebar-user__avatar { margin: 0; flex-shrink: 0; width: 36px; border-width: 1px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .sidebar-user__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .sidebar-user__name { width: 100%; font-size: 14px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user__group { width: 100%; font-size: 11px; line-height: 1.25; color: rgba(255, 255, 255, 0.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 5px 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); } .sidebar-toolbar__btn { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; min-height: 0; padding: 0; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .sidebar-toolbar__btn:active { background: rgba(255, 255, 255, 0.18); } .sidebar-toolbar__btn.is-active { background: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(144, 224, 239, 0.45); } .sidebar-toolbar__btn i { pointer-events: none; } .sidebar-toolbar__badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #e53935; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; pointer-events: none; } .sidebar-toolbar #toggle-darkmode.theme-toggle--sun-active i { color: #fbbf24; } @media (min-width: 1200px) { .sidebar-toolbar__btn:hover { background: rgba(255, 255, 255, 0.16); } .sidebar-toolbar__btn.is-active:hover { background: rgba(255, 255, 255, 0.22); } .sidebar-toolbar #toggle-darkmode.theme-toggle--sun-active:hover i { color: #fcd34d; } } .sidebar-menu a { display: flex; align-items: center; gap: 10px; padding: 6px 20px; color: white; text-decoration: none; transition: background 0.3s, color 0.3s; border-left: 4px solid transparent; margin: 0 5px 1px 5px; background: rgba(255, 255, 255, 0.04); } .sidebar-menu a i { width: 1.25em; text-align: center; flex-shrink: 0; } .bottom-bar .bar-link i { width: 1.25em; text-align: center; } .sidebar-menu a:hover, .sidebar-menu a.active { background: rgba(255, 255, 255, 0.15); border-left: 4px solid #90e0ef; color: #90e0ef; } .sidebar-menu a.active { font-weight: bold; } .sidebar-menu a.selected { background: rgba(255, 255, 255, 0.15); border-left: 4px solid #90e0ef; color: #90e0ef; font-weight: bold; } .page-not-found { padding: 40px; text-align: center; font-size: 20px; font-weight: bold; color: #d90429; background: #ffecec; border: 1px solid #f5b5b5; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); margin: 40px auto; width: 350px; } .pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; margin: 20px auto; padding: 5px; font-size: 15px; user-select: none; } .pagination a { display: inline-block; padding: 4px 10px; border-radius: 6px; background: #f2f5f8; color: #004b80; text-decoration: none; border: 1px solid #d0d9e0; transition: all 0.2s ease; } .pagination a:hover { background: #0078d4; color: #fff !important; border-color: #0078d4; } .pagination a.active { background: #0078d4 !important; color: #fff !important; font-weight: 600; cursor: default; } .pagination a.disabled { opacity: 0.4; pointer-events: none; } @media (max-width: 600px) { .pagination { gap: 4px; font-size: 14px; } .pagination a { padding: 5px 9px; } } .chevron-open,.gw-issues-history-toggle.is-open .gw-issues-history-toggle__chev,.gw-order-ops-bar__btn--reopen-toggle.is-open .gw-order-ops-bar__chev,.gw-order-toolbar__btn--reopen-toggle.is-open .gw-order-toolbar__chev,.kilnload-page .kl-op-form-panel--collapsed .kl-op-form-panel__chevron,.news-chat-info-members__trigger--open .news-chat-info-members__chevron,.news-chat-settings__seen-btn--open .news-chat-settings__seen-chevron,.order-change-history.is-open .order-change-history__chevron { transform: rotate(180deg); } .chip-accent-soft,.gw-order-toolbar__pill--on,.gw-producer-stats-panel--daily .gw-producer-stats-panel__icon,.payroll-page .payroll-pane--advance .pa-block--info .pa-block__icon,.payroll-page .payroll-pane--monthly .pm-kpi-cell__icon--khoan,.payroll-page .payroll-pane--monthly .pm-kpi-cell__icon--net,.payroll-page .payroll-pane--worker .pa-block--info .pa-block__icon { background: rgba(21, 101, 192, 0.12); color: #1565c0; } .chip-danger,.gw-entry-act--del:hover,.kilnload-page .kl-load-card--type-nung_chin .kl-load-card__type,.kilnload-page .kl-plan-badge--danger,.kilnload-page .kl-view-hero--type-nung_chin .kl-view-type-badge,.leave-list-view .leave-status-badge.status-rejected,.license-page .license-cms-badge.is-offline,.notifications-page .notif-priority-badge--urgent,.payroll-page .payroll-pane--advance .pa-badge--pending,.payroll-page .payroll-pane--monthly .pm-badge--danger,.surplus-status--danger { background: #ffebee; color: #c62828; } .chip-info,.gw-entry-act--edit:hover,.gw-issue-card__priority--normal,.kilnload-page .kl-settings-item__type--door,.mould-detail-badge--inhouse,.neworder-page .no-pick-method--manual .no-pick-method__icon,.news-page .thread-tags .tag-link:hover,.notifications-page .notif-priority-badge--normal,.payroll-page .payroll-pane--monthly .pm-meta-chip--all,.surplus-status--info,.vks-page .vks-topbar__badge--type,.vks-page.kse-page .kse-order__status--pending { background: #e3f2fd; color: #1565c0; } .chip-neutral,.gw-entry-badge--daily,.gw-issue-card__priority--low,.kilnload-page .kl-load-card__type,.kilnload-page .kl-view-panel__toggle:hover,.mould-detail-badge--status-scrapped,.notifications-page .notif-priority-badge--low,.surplus-status--neutral { background: #eceff1; color: #546e7a; } .chip-success,.kilnload-page .kl-plan-badge--ok,.kilnload-page .kl-settings-item__type--piece,.kilnload-page .kl-slip-row__badge--ok,.leave-list-view .leave-status-badge.status-approved,.license-page .license-cms-badge.is-online,.mould-detail-badge--status-active,.neworder-page .no-pick-method--excel .no-pick-method__icon,.payroll-page .payroll-pane--advance .pa-badge--ok,.payroll-page .payroll-pane--monthly .pm-badge--success,.payroll-page .payroll-pane--monthly .pm-meta-chip--ok,.surplus-status--success,.vks-page.kse-page .kse-order__status--ok { background: #e8f5e9; color: #2e7d32; } .chip-warning,.gw-entry-badge--staging,.gw-issue-card__priority--high,.kilnload-page .kl-load-card--type-so_nung .kl-load-card__type,.kilnload-page .kl-plan-badge--warn,.kilnload-page .kl-settings-item__type--pipe,.kilnload-page .kl-slip-row__badge--pending,.kilnload-page .kl-view-hero--type-so_nung .kl-view-type-badge,.notifications-page .notif-priority-badge--high,.suggestion-box__badge--member,.vks-page.kse-page .kse-order__status--warn { background: #fff3e0; color: #e65100; } .flex-1-minw0,#orderProgressDropdown,.bom-items-list-head-row .gw-workflow-tab-heading,.bom-manage-list-item-main,.bom-type-block-header-title,.cd-download-link__text,.cd-hero__text,.fs-approver-dropdown__option-text,.gw-entry-topbar-left,.kilnload-page .kl-op-entry__title-wrap,.kilnload-page .kl-settings-item__main,.kpi-strip__label-text,.mould-detail-identity,.notifications-page .notif-item__body,.order-change-history__title,.pd-hero__head-text,.piecework-norm-eff-cell .gw-producer-stats-share,.ps-priority-row-main { flex: 1 1 auto; min-width: 0; } .flex-center-wrap,.avatar-list,.mould-detail-assign-actions,.mould-page-body-detail .mould-detail-edit-form .mould-lifecycle-field--edit,.news-chat-composer__form,.news-chat-settings__row,.news-search-form__row,.payroll-page .payroll-pane--monthly .pm-actions-bar__tools,.vks-page .vks-topbar__actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; } .flex-col-gap4,.kilnload-page .kl-op-edit-form .kl-op-field,.kilnload-page .kl-op-form .kl-op-field,.neworder-page .no-order-field,.payroll-page .payroll-pane--advance .pa-form__field,.psm-field,.psm-loose-pack__item,.psm-pack-fields__item { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .grid-cols-2,.gw-producer-stats--panels-2 .gw-producer-stats__grid,.kilnload-page .kl-an__fields--2,.kilnload-page .kl-an__picks--2,.kilnload-page .kl-form-row--2,.payroll-page .payroll-pane--monthly .pm-kpi-strip--cost.pm-kpi-strip--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3,.kilnload-page .kl-plan-kpis--pick,.kpi-strip--cols-3,.license-page .license-kpis--cols-3,.payroll-page .payroll-pane--monthly .pm-kpi-strip--cost.pm-kpi-strip--cols-3,.piecework-detail-worker-gw-stats .gw-producer-stats-kpis,.product-detail-meta-grid--class { grid-template-columns: repeat(3, minmax(0, 1fr)); } .maxw-full,.expense-supplier-search-input,.kilnload-page .kl-view-panel__search--full,.mould-fullwidth-inner .mould-supplier-search-input,.mould-page-body-detail .mould-detail-edit-form .mould-supplier-search-input,.piecework-detail-page .piecework-detail-hero-progress__bar { max-width: none; width: 100%; } .page-reset,.kilnload-page,.manual-page,.neworder-page,.news-page,.notifications-page,.production-schedule-page,.settings-page,.shipment-page,.surplus-page,.vks-page { box-sizing: border-box; padding: 0; } .row-hover-accent,.greenware-production-page .gwp-entries-table tr.gwp-entry-row-clickable:hover,.gw-order-greenware-stages .gw-ost-row:hover,.gw-producer-stats-table tbody tr:hover,.op-prod-product-row:hover,.payroll-page .payroll-pane--monthly .pm-payroll-table tbody tr:hover,.payroll-page .payroll-pane--yearly .pm-payroll-table tbody tr:hover,.payroll-page .payroll-pane--worker .pw-table tbody tr:hover,.workers-page .payroll-pane--worker-list .scroll-table.wl-worker-table tbody tr:hover,.piecework-detail-products-table tbody tr:hover { background: rgba(21, 101, 192, 0.04); } .row-hover-sky,.cd-page .scroll-table.cd-customer-list-table tbody tr:hover td.sticky-photo,.order-tab-hscroll-shell .scroll-table.order-mould-tab-table tbody tr:hover td.sticky-photo,.scroll-table.viewkilnslip-products-table tbody tr:hover td.sticky-photo,.viewkilnslip-table tbody tr:hover td,.viewkilnslip-table tbody tr:hover td.sticky-photo,.viewkilnslip-table tbody tr:hover td.sticky-stt { background: #f6fcff !important; } .text-accent-bold,.gw-order-greenware-stages .gw-ost-metric--has-val.gw-ost-metric--prod,.gw-order-greenware-stages .gw-stage-name-label,.gw-producer-stats-table__num--prod,.kilnload-page .kl-plan-table__ready,.kilnload-page .kl-slip-row__col--date .kl-slip-row__date,.order-change-log-item__code,.order-change-log-item__qty,.surplus-page .surplus-qty { color: #1565c0; font-weight: 700; } .u-underline,.kilnload-page .kl-plan-order__title a:hover,.kpi-strip--compact .kpi-strip__value--text .kpi-strip__value-link:hover,.news-chat-action:hover,.notifications-page .notif-empty__link:hover,.payroll-page .payroll-pane--worker .pw-month-link:hover,.psm-member-code:hover,.shift-time a:hover .text-red,.surplus-page .surplus-link:hover,.vks-page .vks-order__header .vks-order__title a:hover,.vks-page .vks-order__load:hover,.vks-page .vks-topbar__link:hover { text-decoration: underline; } .w-full-box,.fs-surplus-alloc-form__field .input,.kilnload-page .kl-load-search-input,.mould-catalog-filter-field .input,.mould-catalog-filter-field select.input,.mould-detail-assign-input,.mould-detail-price-add-form .input,.neworder-page .no-order-field .input,.neworder-page .no-order-field select.input,.order-tab-hscroll-block > .scroll-hint,.payroll-page .payroll-pane--monthly .pm-form-toolbar__search .input,.payroll-page .payroll-pane--worker .pw-filter-form__search .input,.payroll-page .payroll-toolbar__search .input,.product-addphotos-customer-search .input,.surplus-page .surplus-filter-bar__customer-search .input,.surplus-page .surplus-filter-bar__field--date .input,.surplus-reverse-form__input,.surplus-reverse-form__textarea,.workers-page .payroll-toolbar__search .input { box-sizing: border-box; width: 100%; } .w-full-min0,.bom-type-price-form .field input,.bom-type-price-form input[type="datetime-local"],.form-advance.advance-form .advance-form__control,.order-tab-hscroll-block,.product-bom-add-search .input,.product-bom-stack #productBomEdit,.product-bom-stack #productBomForm,.product-bom-stack #productBomView,.product-bom-stack .data-block,.product-bom-stack .data-block-body,.product-bom-stack .filters .input,.product-bom-stack .product-bom-add-search,.product-bom-stack .product-bom-scroll-zone,.product-bom-stack .scroll-table .input,.product-bom-stack .wrapper-payroll { box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%; } @media (hover: none), (pointer: coarse), (max-width: 768px) { .is-menu-hidden,#orders-table thead th.orders-th-dropdown:hover .dropdown-menu:not(.is-open) .menu-content,#orders-table thead th.orders-th-progress:hover .dropdown-menu:not(.is-open) .menu-content,#orders-table thead th.orders-th-export:hover .dropdown-menu:not(.is-open) .menu-content,.dropdown-menu.dropdown-click:hover .menu-content { display: none !important; opacity: 0 !important; } } @media (max-width: 1199px) { .grid-cols-3,.kpi-strip,.kpi-strip--cols-3,.kpi-strip--cols-4,.kpi-strip--cols-5,.kpi-strip--cols-6,.kpi-strip--cols-7,.kpi-strip--cols-8,.kpi-strip--compact.kpi-strip--cols-3,.kpi-strip--compact.kpi-strip--cols-4,.kpi-strip--compact.kpi-strip--cols-5,.kpi-strip--compact.kpi-strip--cols-6,.kpi-strip--compact.kpi-strip--cols-7,.kpi-strip--compact.kpi-strip--cols-8 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .row-hover-sky,.cd-page .scroll-table.cd-customer-defects-table tbody tr:hover td.sticky-code,.cd-page .scroll-table.cd-customer-orders-table tbody tr:hover td.sticky-code,.cd-page .scroll-table.cd-customer-top-orders-table tbody tr:hover td.sticky-code { background: #f6fcff !important; } } @media (max-width: 599px) { .flex-col-stretch,.mould-catalog-filter-bar,.mould-detail-assign-toolbar,.production-schedule-page .ps-filter-bar__inner,.shipment-page .shipment-kind-filter-bar { align-items: stretch; flex-direction: column; } .grid-cols-1,.neworder-page .no-kpi-strip.kpi-strip--cols-6,.pd-hero__facts,.production-schedule-page .ps-kpi-strip.kpi-strip--cols-5 { grid-template-columns: 1fr; } } @media (max-width: 600px) { .maxw-full,.gw-stage-prod-filters--custom .custom-checkbox--medium,.settings-table .gw-stage-prod-filters--custom .custom-checkbox--medium label,.settings-table .gw-stage-prod-filters--custom .custom-checkbox.custom-checkbox--medium { max-width: none; width: 100%; } } @media (max-width: 640px) { .grid-cols-1,#pwNormEffExplainModal .piecework-norm-eff-modal__pay-grid,.kilnload-page .kl-an__fields--2,.kilnload-page .kl-form-row--2,.kilnload-page .kl-form-type,.kilnload-page .kl-op-edit-form__grid,.kilnload-page .kl-settings-grid { grid-template-columns: 1fr; } .grid-cols-2,.gw-producer-stats-kpis,.kilnload-page .kl-plan-kpi-panel .gw-producer-stats-kpis,.kilnload-page .kl-view-meta,.userlogs-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .grid-cols-2,.kpi-strip--compact.kpi-strip--cols-3,.kpi-strip--compact.kpi-strip--cols-4,.kpi-strip--compact.kpi-strip--cols-5,.kpi-strip--compact.kpi-strip--cols-6,.kpi-strip--compact.kpi-strip--cols-7,.kpi-strip--compact.kpi-strip--cols-8,.license-page .license-kpis--cols-3,.license-page .license-kpis--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 768px) { .flex-col-stretch,.bom-items-list-head-row,.bom-type-block-header-row,.gw-workflow-form-actions,.vks-page.kse-page .kse-order__toolbar { align-items: stretch; flex-direction: column; } .grid-cols-1,.account-top-grid,.condition-row,.form-grid,.mould-detail-edit-grid,.oc-create-seal-row,.pd-hero__bar,.product-detail-meta-grid--class,.product-detail-packaging-pane .product-detail-packaging-row3,.product-detail-packaging-row3,.surplus-guide-grid,.surplus-page .surplus-kpi-strip.kpi-strip--cols-3 { grid-template-columns: 1fr; } .grid-cols-2,.payroll-page .payroll-pane--monthly .pm-kpi-strip--cost,.payroll-page .payroll-pane--monthly .pm-kpi-strip--pay,.pd-hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w-full-center,.bom-items-list-head-row .button,.bom-manage-page .gw-workflow-form-actions .button,.bom-manage-toolbar .button,.bom-type-block-header-actions .button,.bom-type-detail-page .gw-workflow-form-actions .button { box-sizing: border-box; text-align: center; width: 100%; } } @media (max-width: 900px) { .grid-cols-1,.cd-download-grid,.cd-stats-grid,.customer-detail-main,.kilnload-page .kl-an__layout,.kilnload-page .kl-op-log,.neworder-page .no-notes-grid,.neworder-page .no-pick-methods,.order-documents-download-grid.cd-download-grid,.production-schedule-page .ps-priority-grid { grid-template-columns: 1fr; } } .text-bold { font-weight: bold; } .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-white { color: #ffffff !important; } .text-blue { color: #0077b6 !important; } .text-green { color: #2e8b57 !important; } .text-gray { color: #666666 !important; } .text-orange { color: #ff8533 !important; } .text-red { color: #d90429 !important; } .xsmall-text { font-size: 12px; } .small-text { font-size: 14px; } .medium-text { font-size: 16px; } .large-text { font-size: 20px; } .xlarge-text { font-size: 24px; } .xxlarge-text { font-size: 28px; } .mafa-page-title { margin: 0; line-height: 1.3; color: #1a1a1a; } .mafa-page-title i { margin-right: 6px; color: #0077b6; font-size: 0.95em; } .mafa-page-title--toolbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; min-width: 0; } .mafa-page-title--spaced { margin-bottom: 12px; } .mafa-page-hint { margin: 0; line-height: 1.35; color: #78909c; } .mafa-page-head { padding-bottom: 10px; border-bottom: 1px solid #e8edf2; } .mafa-page-head .mafa-page-title { margin-bottom: 4px; } .mafa-page-head .mafa-page-hint { margin: 0; } .mafa-page-head--inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; } .mafa-page-head--inline .mafa-page-title { margin-bottom: 0; } .bold600 { font-weight: 600; } .bold700 { font-weight: 700; } .bold800 { font-weight: 800; } .button { display: inline-block; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; text-align: center; transition: background 0.3s ease, color 0.3s ease; white-space: nowrap; } .button.xsmall { font-size: 12px; padding: 1px 5px; } .button.small { font-size: 13px; padding: 5px 8px; } .button.medium { font-size: 14px; padding: 6px 14px; } .button.big { font-size: 18px; padding: 5px 10px; } .button.red { background-color: #e63946; color: white; } .button.green { background-color: #2a9d8f; color: white; } .button.blue { background-color: #0077b6; color: white; } .button.gray { background-color: #adb5bd; color: white; } .button.orange { background-color: #ff8533; color: white; } .button.purple { background-color: #e600ac; color: white; } .button.transparent { background: transparent; border: none; color: #ffffff; padding: 2px; cursor: pointer; transition: color 0.3s ease; } .button.transparent:hover { color: #ff8533; } .button.red:hover { background-color: #c62e3c; } .button.gray:hover { background-color: #888; } .button.orange:hover { background-color: #d98e51; } .button { color: white; text-decoration: none; } .button:hover { color: white; } .button.transparent:hover { color: #90e0ef; } .input.small.tcenter { width: 50px; padding: 2px; text-align: center; font-size: 14px; font-weight: bold; border: 1px solid #ccc; border-radius: 6px; height: 34px; } .input-cell { white-space: normal !important; overflow: visible !important; text-overflow: unset !important; padding: 6px !important; } .input-cell input { width: 40px; display: inline-block; text-align: center; } .main a, .main-content-card a, .scrollable a, .content a { color: #0077b6; text-decoration: none; transition: color 0.2s ease; } .main a:hover, .main-content-card a:hover, .scrollable a:hover, .content a:hover { color: #002e47; text-decoration: none; } .main a:focus, .main-content-card a:focus, .scrollable a:focus, .content a:focus { outline: none; text-decoration: none; } a.button { color: white !important; text-decoration: none; } a.button:hover { color: white !important; } #custom-tooltip { --tooltip-bg: #1e293b; --tooltip-fg: #f8fafc; --tooltip-arrow-x: 50%; --tooltip-arrow-size: 8px; position: fixed; left: 0; top: 0; transform: translateY(6px); opacity: 0; visibility: hidden; background: var(--tooltip-bg); color: var(--tooltip-fg); padding: 7px 11px; font-size: 13px; font-weight: 500; line-height: 1.4; border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 23, 42, 0.28); pointer-events: none; white-space: nowrap; z-index: var(--app-tooltip-z); display: none; overflow: visible; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; } #custom-tooltip.is-visible { opacity: 1; transform: translateY(0); visibility: visible; } #custom-tooltip.is-below:not(.is-visible) { transform: translateY(-6px); } #custom-tooltip.is-below.is-visible { transform: translateY(0); } #custom-tooltip::before { content: ''; position: absolute; left: var(--tooltip-arrow-x, 50%); top: 100%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: var(--tooltip-arrow-size) var(--tooltip-arrow-size) 0 var(--tooltip-arrow-size); border-color: var(--tooltip-bg) transparent transparent transparent; filter: drop-shadow(0 2px 1px rgba(15, 23, 42, 0.2)); } #custom-tooltip.is-below::before { top: auto; bottom: 100%; border-width: 0 var(--tooltip-arrow-size) var(--tooltip-arrow-size) var(--tooltip-arrow-size); border-color: transparent transparent var(--tooltip-bg) transparent; } #custom-tooltip.is-multiline { white-space: pre-line; max-width: min(92vw, 420px); text-align: left; } .order-header-grid.bigfont-mode { padding: 10px; margin: 0; text-align: justify; font-size: 0; min-height: 50px; background: linear-gradient(to top, #bbdcff, #ffffff); } .order-header-grid.bigfont-mode::after { content: ""; display: inline-block; width: 100%; } .order-header-grid.bigfont-mode>div { display: inline-block; font-size: 14px; min-width: 120px; white-space: nowrap; cursor: pointer; } .order-header-grid.bigfont-mode span { font-size: 13px; font-weight: 600; color: #666; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .order-header-grid.bigfont-mode strong { font-size: 18px; font-weight: 700; color: #1a1a1a; line-height: 1.3; word-break: break-word; } .order-header-grid.bigfont-mode strong:hover { color: #0077b6; } .order-header-delivery-label { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; line-height: 1; } .order-header-delivery-text { line-height: 1; } .order-header-grid.bigfont-mode .order-header-delivery-label .order-header-status-badge { margin-bottom: 0; } .order-delivery-edit-btn { display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; color: #007bff; font-size: 13px; line-height: 1; flex-shrink: 0; } .order-delivery-edit-btn i { display: block; line-height: 1; } .order-header-status-badge { display: inline-flex; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 2px 4px; border-radius: 2px; background: #05a62d; color: #fff !important; font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; flex-shrink: 0; } .order-header-status-badge i { font-size: 8px; line-height: 1; } .finance-col { transition: all 0.3s ease; } #orders-table.orders-finance-cols-hidden .finance-col { display: none !important; } .order-tabs { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; background: rgba(0, 81, 128, 0.956); padding: 5px; position: relative; z-index: 10; overflow-x: visible; overflow-y: visible; } .order-tabs:has(.dropdown-menu:hover), .order-tabs:has(.dropdown-menu:focus-within), .order-tabs:has(.dropdown-menu.is-open) { z-index: 10080; } .order-tabs .tab { flex: 0 0 auto; background: none; border: none; font-size: 15px; font-weight: 600; padding: 6px 10px; cursor: pointer; color: #fcfcfc; border-bottom: 3px solid transparent; transition: all 0.2s ease; text-align: center; white-space: nowrap; user-select: none; -webkit-user-select: none; -moz-user-select: none; } .order-tabs .tab:hover { color: #96dfff; border-color: #007bff; } .order-tabs .tab.active { color: #96dfff; border-color: #007bff; } .order-tabs .dropdown-menu { display: inline-flex; align-items: stretch; position: relative; } .order-tabs .dropdown-menu .menu-content { z-index: 10090; } .order-tabs .dropdown-menu .menu-trigger { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; background: none; border: none; font-size: 15px; font-weight: 600; padding: 6px 10px; cursor: pointer; color: #fcfcfc; border-bottom: 3px solid transparent; transition: all 0.2s ease; text-align: center; white-space: nowrap; user-select: none; height: 100%; box-sizing: border-box; } .order-tabs .dropdown-menu .menu-trigger:hover, .order-tabs .dropdown-menu .menu-trigger.active { color: #96dfff; border-color: #007bff; } .order-tabs .dropdown-menu .menu-content a i { margin-right: 8px; width: 1.1em; text-align: center; } .order-tabs-scroll { position: relative; overflow: visible; max-width: 100%; } @media (max-width: 1199px) { .order-tabs-scroll .order-tabs { flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 6px 8px; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; scrollbar-width: none; max-width: 100%; } .order-tabs-scroll:not(.is-scrollable) .order-tabs { overflow-x: hidden; } .order-tabs-scroll .order-tabs::-webkit-scrollbar { display: none; height: 0; } .order-tabs-scroll .order-tabs>.tab, .order-tabs-scroll .order-tabs>.dropdown-menu, .order-tabs-scroll .order-tabs>.order-tabs-right { flex: 0 0 auto; } .order-tabs-scroll .order-tabs .tab, .order-tabs-scroll .order-tabs .dropdown-menu .menu-trigger { padding: 8px 12px; font-size: 14px; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease, border-color 0.2s ease; } .order-tabs-scroll .order-tabs .order-tabs-right { margin-left: auto; } .order-tabs-scroll .order-tabs>.tab:hover, .order-tabs-scroll .order-tabs>.tab:active { color: #fcfcfc; border-color: transparent; } .order-tabs-scroll .order-tabs>.tab.active { color: #96dfff; border-color: #007bff; } .order-tabs-scroll .order-tabs .dropdown-menu .menu-trigger:hover:not(.active) { color: #fcfcfc; border-color: transparent; } .order-tabs-scroll .dropdown-menu.dropdown-click:hover .menu-content { display: none !important; opacity: 0 !important; } .order-tabs-scroll .dropdown-menu.is-open:not(.force-close) .menu-content { display: block !important; opacity: 1 !important; transform: none !important; translate: none !important; position: fixed !important; z-index: 10100; margin-top: 0; position-anchor: none; } .order-tabs-scroll:has(.dropdown-menu.is-open) { z-index: 10080; } } @media (min-width: 769px) { .order-tabs-scroll .dropdown-menu.dropdown-click:hover .menu-content { display: none !important; opacity: 0 !important; } .order-tabs-scroll .dropdown-menu.is-open:not(.force-close) .menu-content { display: block !important; opacity: 1 !important; transform: scale(1) !important; z-index: 10090; } .order-tabs-scroll:has(.dropdown-menu.is-open) { z-index: 10080; } } .mould-page-body { margin: 0; box-sizing: border-box; } .mould-page-body-detail { margin: 0; } .mould-detail-sheet.bgwhite { padding: 0; box-sizing: border-box; overflow: visible; } .mould-detail-sheet>.mould-detail-pane:first-child { border-top: none; } .mould-catalog-filter-form { margin: 0; } .mould-catalog-filter-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; } .mould-catalog-filter-field { flex: 0 1 auto; min-width: 140px; } .mould-catalog-filter-field--search { flex: 1 1 200px; min-width: 0; } .mould-catalog-filter-actions { flex: 0 0 auto; } .mould-catalog-pane-body--table { padding-top: 12px; } @media (max-width: 599px) { .mould-catalog-filter-field, .mould-catalog-filter-field--search { width: 100%; flex: 1 1 auto; } .mould-catalog-filter-actions .button { width: 100%; } } .mould-detail-alert-wrap { padding: 12px 16px 0; } .mould-detail-overview-inner { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; } @media (min-width: 900px) { .mould-detail-overview-inner { grid-template-columns: minmax(0, 1fr) minmax(320px, 38%); } } @media (min-width: 1200px) { .mould-detail-overview-inner { grid-template-columns: minmax(0, 1.15fr) minmax(360px, 420px); } } .mould-detail-overview-main { display: flex; gap: 16px; padding: 16px; align-items: flex-start; min-width: 0; } .mould-detail-thumb-col { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 144px; } .mould-detail-thumb-upload-btn { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; margin: 0; } .mould-detail-photo-form { margin: 0; } .mould-detail-photo-input { display: none; } .mould-detail-thumb-wrap { flex: 0 0 auto; width: 144px; height: 144px; border-radius: 8px; border: 1px solid #e0e6ed; overflow: hidden; background: #f5f7fa; position: relative; cursor: pointer; transition: border-color .15s, box-shadow .15s; } .mould-detail-thumb-wrap:hover { border-color: #90caf9; box-shadow: 0 2px 8px rgba(21, 101, 192, 0.15); } .mould-detail-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; } .mould-detail-thumb-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #90a4ae; font-size: 36px; } .mould-detail-thumb-zoom { position: absolute; bottom: 3px; right: 3px; background: rgba(0, 0, 0, 0.55); color: #fff; border-radius: 4px; padding: 2px 5px; font-size: 9px; line-height: 1; pointer-events: none; } .mould-detail-identity-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .mould-detail-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 0; } .mould-detail-head-actions .mould-detail-delete-form { margin: 0; padding: 0; border: none; } .mould-detail-code { font-size: 13px; font-weight: 700; color: #1565c0; letter-spacing: 0.02em; margin-bottom: 2px; } .mould-detail-title { margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: #263238; } .mould-detail-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mould-detail-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.4; white-space: nowrap; } .mould-detail-badge--status-retired { background: #fff3e0; color: #ef6c00; } .mould-detail-badge--status-unknown { background: #eceff1; color: #78909c; } .mould-detail-badge--external { background: #f3e5f5; color: #6a1b9a; } .mould-detail-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px 20px; margin: 0; } .mould-detail-meta-item { min-width: 0; } .mould-detail-meta-item dt { margin: 0 0 3px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .mould-detail-meta-item dd { margin: 0; font-size: 14px; font-weight: 500; color: #37474f; line-height: 1.35; word-break: break-word; } .mould-detail-meta-unit { font-size: 11px; font-weight: 400; color: #90a4ae; } .mould-detail-note { margin-top: 14px; padding: 10px 12px; background: #f5f7fa; border-radius: 6px; border-left: 3px solid #90caf9; } .mould-detail-note-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; margin-bottom: 4px; } .mould-detail-note-text { margin: 0; font-size: 13px; color: #546e7a; line-height: 1.45; } .mould-detail-delete-btn { background: #c0392b !important; color: #fff !important; border: none !important; } .mould-detail-price-panel { padding: 16px; border-top: 1px solid #e0e0e0; background: #fafbfc; box-sizing: border-box; min-width: 0; } @media (min-width: 900px) { .mould-detail-price-panel { border-top: none; border-left: 1px solid #e0e0e0; } } .mould-detail-price-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .mould-detail-price-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .mould-detail-price-label i { margin-right: 4px; color: #1565c0; } .mould-detail-price-current { font-size: 1.5rem; font-weight: 700; color: #1565c0; line-height: 1.2; margin-bottom: 12px; } .mould-detail-price-hint { display: block; font-size: 11px; font-weight: 500; color: #90a4ae; margin-top: 2px; } .mould-detail-price-add-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .mould-detail-price-history-title { font-size: 12px; font-weight: 600; color: #546e7a; margin: 0 0 6px 0; } .mould-detail-pane { border-top: 1px solid #e0e0e0; } .mould-detail-row-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #f5f7fa; font-weight: 700; font-size: 16px; color: #1565c0; border-bottom: 1px solid #eceff1; } .mould-detail-row-header i { opacity: 0.85; font-size: 15px; } .mould-detail-section-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #f5f7fa; font-weight: 700; font-size: 16px; color: #1565c0; border-bottom: 1px solid #eceff1; } .mould-detail-section-sub { margin-left: auto; font-size: 11px; font-weight: 600; color: #78909c; text-transform: uppercase; letter-spacing: 0.04em; } .mould-detail-section-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #1565c0; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .mould-detail-section-body, .mould-detail-pane-body { padding: 16px; box-sizing: border-box; } .mould-detail-bom-intro { margin: 0 0 12px 0; font-size: 13px; color: #78909c; line-height: 1.45; } .mould-detail-bom-total-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 14px; padding: 10px 14px; background: #e3f2fd; border-radius: 8px; } .mould-detail-bom-total-label { font-size: 13px; font-weight: 600; color: #546e7a; } .mould-detail-bom-total-value { font-size: 1.15rem; font-weight: 700; color: #1565c0; } .mould-detail-bom-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0 0; } .mould-detail-assign-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px solid #eceff1; } .mould-detail-assign-search { flex: 1 1 220px; position: relative; min-width: 0; } .mould-detail-field-label { display: block; font-size: 12px; font-weight: 600; color: #546e7a; margin-bottom: 4px; } .mould-detail-assign-suggestions { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 400; background: #fff; border: 1px solid #ddd; border-radius: 0 0 6px 6px; max-height: 280px; overflow-y: auto; margin-top: 2px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .mould-detail-assign-actions form { margin: 0; } .mould-detail-assign-msg { margin: 0 0 12px 0; } .mould-detail-products-pane { scroll-margin-top: 16px; } .mould-detail-products-table-wrap { margin-top: 4px; } .mould-detail-products-table-wrap .mould-assign-products-table { table-layout: fixed; width: 100%; } .mould-assign-product-code-wrap { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-width: 0; } .mould-assign-product-code-link { flex: 1 1 auto; min-width: 0; text-decoration: none; } .mould-assign-unassign-form { display: inline-flex; margin: 0; flex: 0 0 auto; } .mould-assign-unassign-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; color: #78909c; cursor: pointer; line-height: 1; font-size: 13px; transition: background .15s, color .15s, border-color .15s; } .mould-assign-unassign-btn:hover { background: #ffebee; border-color: #ef9a9a; color: #c62828; } .mould-assign-unassign-btn i { pointer-events: none; } .mould-detail-empty-state { text-align: center; padding: 28px 16px; color: #90a4ae; } .mould-detail-empty-state i { font-size: 28px; margin-bottom: 8px; opacity: 0.6; } .mould-detail-empty-state p { margin: 0; font-size: 14px; } .mould-detail-empty-state--compact { padding: 16px; } .mould-detail-inactive-notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #fff8e1; border-radius: 8px; border-left: 3px solid #ffb300; margin-bottom: 14px; color: #5d4037; font-size: 13px; line-height: 1.45; } .mould-detail-inactive-notice i { color: #f9a825; margin-top: 2px; flex-shrink: 0; } .mould-detail-inactive-notice p { margin: 0; } @media (max-width: 599px) { .mould-detail-overview-main { padding: 12px; gap: 12px; } .mould-detail-thumb-col { width: 112px; } .mould-detail-thumb-upload-btn { font-size: 11px; padding-left: 6px; padding-right: 6px; } .mould-detail-thumb-wrap { width: 112px; height: 112px; } .mould-detail-thumb-placeholder { font-size: 28px; } .mould-detail-title { font-size: 1.1rem; } .mould-detail-meta-grid { grid-template-columns: 1fr 1fr; } .mould-detail-assign-actions { width: 100%; } .mould-detail-assign-actions .button { flex: 1 1 auto; text-align: center; } } #mould-assign-products .mould-assign-products-table col.mould-assign-products-code-col { width: 240px; min-width: 200px; } #mould-assign-products .mould-assign-products-table .mould-assign-products-code-td { padding-right: 12px; } #mould-assign-products .mould-assign-products-table .mould-assign-products-desc-td { font-size: 0.92em; line-height: 1.34; } @media (max-width: 768px) { #mould-assign-products .mould-assign-products-table col.mould-assign-products-code-col { width: 38vw; min-width: 120px; max-width: 200px; } } @media (min-width: 769px) { .mould-detail-top-grid { grid-template-columns: minmax(0, 132px) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; } .mould-detail-top-grid>.data-block { box-sizing: border-box; min-height: 0; height: auto; display: flex; flex-direction: column; } .mould-detail-top-grid>.data-block:first-child #productPhotoPreview { text-align: center; } .mould-detail-top-grid>.data-block:first-child #productPhotoPreview img { margin: 0 auto; display: block; max-width: 100%; } } .scroll-table-wrapper.mould-price-history-scroll .mould-price-delete-th { width: 42px; padding-left: 4px !important; padding-right: 4px !important; } .scroll-table-wrapper.mould-price-history-scroll .mould-price-delete-td { width: 42px; padding: 6px 4px !important; } .mould-price-delete-btn { padding: 6px 8px !important; line-height: 1; min-height: auto; } .mould-price-delete-btn i { font-size: 12px; pointer-events: none; } .scroll-table-wrapper.mould-price-history-scroll .scroll-table .mould-price-history-th-date, .scroll-table-wrapper.mould-price-history-scroll .scroll-table .mould-price-history-td-date { width: 8.25rem; min-width: 8.25rem; max-width: 8.25rem; white-space: nowrap; vertical-align: middle; box-sizing: border-box; } .scroll-table-wrapper.mould-price-history-scroll .mould-price-history-price-cell { vertical-align: middle; word-break: break-word; } .scroll-table-wrapper.mould-price-history-scroll .mould-price-history-price-cell>.mould-price-history-amount { font-size: 12pt; line-height: 1.35; } .scroll-table-wrapper.mould-price-history-scroll .mould-price-history-note { margin-top: 4px; font-size: 9pt; line-height: 1.35; } .mould-detail-price-panel .scroll-table-wrapper.mould-price-history-scroll { width: 100%; max-width: 100%; } .mould-detail-price-panel .scroll-table-wrapper.mould-price-history-scroll .scroll-table { width: 100% !important; min-width: 0 !important; } .mould-page-body-detail .mould-detail-edit-form { display: block; width: 100%; box-sizing: border-box; } .mould-page-body-detail .mould-detail-edit-form .mould-edit-field { margin-bottom: 0; min-width: 0; } .mould-detail-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .mould-detail-edit-grid .mould-edit-field--full { grid-column: 1 / -1; } .mould-detail-edit-grid .mould-edit-actions-row { grid-column: 1 / -1; border-top: 1px solid #eceff1; padding-top: 12px; margin-top: 2px; } .mould-detail-edit-grid .mould-edit-actions-row .mould-edit-actions { margin-top: 0; } .mould-page-body-detail .mould-detail-edit-form .mould-edit-label { display: block; margin-bottom: 4px; line-height: 1.3; } .mould-page-body-detail .mould-detail-edit-form .mould-edit-control { width: 100%; max-width: 100%; box-sizing: border-box; } .mould-page-body-detail .mould-detail-edit-form .mould-edit-hint { margin: 6px 0 0 0; } .mould-page-body-detail .mould-detail-edit-form .mould-edit-control--lifecycle { width: auto; min-width: 7em; max-width: 12em; flex: 0 1 auto; } .mould-page-body-detail .mould-detail-edit-form .mould-edit-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .mould-page-body-detail .mould-detail-edit-form .mould-edit-field--supplier { overflow: visible; position: relative; z-index: 3; } .mould-fullwidth-wrap { width: 100%; max-width: none; box-sizing: border-box; margin: 0; padding: 0 0 20px; } .mould-fullwidth-inner { width: 100%; max-width: none; box-sizing: border-box; } .mould-fullwidth-inner .bgwhite { width: 100%; max-width: none; box-sizing: border-box; } .mould-fullwidth-inner table.mould-add-manual-table.settings-table { table-layout: fixed !important; } .mould-fullwidth-inner .mould-add-manual-table>tbody>tr>td:first-child:not([colspan]) { width: 30%; max-width: 30%; box-sizing: border-box; vertical-align: top; } .mould-fullwidth-inner .mould-add-manual-table>tbody>tr>td:nth-child(2) { width: 70%; box-sizing: border-box; vertical-align: top; } .mould-fullwidth-inner .settings-table tr.mould-supplier-autocomplete-row>td.mould-supplier-autocomplete-cell { overflow: visible !important; vertical-align: top; } .mould-fullwidth-inner .mould-supplier-autocomplete-wrap, .mould-page-body-detail .mould-detail-edit-form .mould-supplier-autocomplete-wrap { overflow: visible; } .mould-fullwidth-inner .mould-supplier-field-row, .mould-page-body-detail .mould-detail-edit-form .mould-supplier-field-row { display: flex; flex-direction: row; align-items: center; gap: 8px; position: relative; overflow: visible; max-width: none; } .mould-fullwidth-inner .mould-supplier-input-wrap, .mould-page-body-detail .mould-detail-edit-form .mould-supplier-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; overflow: visible; } .mould-fullwidth-inner .mould-supplier-clear-btn, .mould-page-body-detail .mould-detail-edit-form .mould-supplier-clear-btn { flex: 0 0 auto; width: auto !important; max-width: none !important; white-space: nowrap; } .mould-fullwidth-inner .mould-supplier-results.searchUsers, .mould-page-body-detail .mould-detail-edit-form .mould-supplier-results.searchUsers { display: none; position: absolute; left: 0; top: 100%; z-index: 10050; margin-top: 5px; width: 100%; min-width: min(420px, calc(100vw - 48px)); max-width: 420px; max-height: 300px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); box-sizing: border-box; } body.dark .mould-fullwidth-inner .mould-supplier-results.searchUsers, body.dark .mould-page-body-detail .mould-detail-edit-form .mould-supplier-results.searchUsers { background: #252525; border-color: #444; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .data-block .settings-table tr.expense-supplier-autocomplete-row>td.expense-supplier-autocomplete-cell, .expenses-page .settings-table tr.expense-supplier-autocomplete-row>td.expense-supplier-autocomplete-cell { overflow: visible !important; vertical-align: top; } .expense-supplier-autocomplete-wrap { overflow: visible; } .expense-supplier-field-row { display: flex; flex-direction: row; align-items: center; gap: 8px; position: relative; overflow: visible; max-width: min(420px, 100%); } .expense-supplier-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; overflow: visible; } .expense-supplier-clear-btn { flex: 0 0 auto; width: auto !important; max-width: none !important; white-space: nowrap; } .expense-supplier-results.searchUsers { display: none; position: absolute; left: 0; top: 100%; z-index: 10050; margin-top: 5px; width: 100%; min-width: min(420px, calc(100vw - 48px)); max-width: 420px; max-height: 300px; overflow-y: auto; overflow-x: hidden; background: #fff; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); box-sizing: border-box; } body.dark .expense-supplier-results.searchUsers { background: #252525; border-color: #444; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .dropdown-menu .menu-content a.active { background: #e0f0ff; color: #007bff; font-weight: 600; } .order-tab-content { display: none; z-index: 0; } .order-tab-content.active { display: block; } .dropdown-menu { position: relative; display: inline-block; z-index: 20; } .dropdown-menu .menu-trigger { anchor-name: --trigger; cursor: pointer; } .dropdown-menu .menu-content { display: none; position: absolute; z-index: 2100; min-width: 180px; width: max-content; max-width: min(480px, calc(100vw - 16px)); max-height: min(60vh, 480px); overflow: auto; background: #fff; border: 1px solid #ddd; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); border-radius: 6px; padding: 5px; text-align: left; opacity: 0; transform: scale(.98); transition: opacity .15s ease, transform .15s ease; margin-top: 0; top: 100%; left: 0; } .dropdown-menu .menu-content::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; background: transparent; } .dropdown-menu:hover .menu-content { display: block; opacity: 1; transform: scale(1); } @supports (position-anchor: --x) and (anchor-name: --x) { .dropdown-menu .menu-content { position-anchor: --trigger; top: anchor(bottom); left: anchor(center); translate: -50% 0; position-try: flip-block, flip-inline; position-try-order: most-useful; position-area: bottom 6px; } .order-tabs .dropdown-menu .menu-content { left: anchor(left); translate: 0 0; } .gw-workflow-tab-bar .dropdown-menu .menu-content, .subtab-links .dropdown-menu .menu-content { left: anchor(left); translate: 0 0; } #orders-table .dropdown-menu .menu-content { left: anchor(left); translate: 0 0; } } .dropdown-menu .menu-content a, .dropdown-menu .menu-content label { display: block; padding: 10px 30px; text-decoration: none; color: #333; font-size: 15px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid #eee; transition: background .3s; cursor: pointer; } .dropdown-menu .menu-content a:last-child { border-bottom: none; } .dropdown-menu .menu-content a:hover { background: #f0f0f0; color: #007bff; border-bottom: 2px solid #007bff; } .highlight-row { background-color: rgb(255, 246, 246) !important; } .login-wrapper { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; background: #eef1f5; } .login-form { background: white; padding: 30px 40px; border-radius: 12px; border-color: #989898; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); text-align: center; width: 100%; max-width: 560px; margin-top: 10vh; } .login-form h2 { margin-bottom: 20px; font-size: 24px; color: #0077b6; } .login-form input[type="tel"], .login-form input[type="password"] { width: 100%; padding: 10px 14px; margin-bottom: 15px; border-radius: 8px; height: 40px !important; font-size: 20px !important; font-weight: bold !important; border: 1px solid #ccc; background: #fdfdfd; color: #333; } .login-form input[type="submit"] { width: 100%; padding: 10px; border-radius: 8px; background: #0077b6; color: white; border: none; font-weight: bold; cursor: pointer; transition: background 0.3s; } .login-form input[type="submit"]:hover { background: #005f91; } .login-form .error-message { color: red; font-weight: 500; margin-bottom: 10px; } .permission-table { width: 100%; border-collapse: collapse; font-size: 13px; background: white; } .permission-table th, .permission-table td { padding: 10px; border-bottom: 1px solid #ddd; vertical-align: top; text-align: left; } .permission-table td label { background: #d5e9ff; padding: 4px 8px; border-radius: 6px; white-space: nowrap; } .permission-label { min-width: 200px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; } .dark .permission-table td label { background: rgba(255, 255, 255, 0.08); color: #eee; } #inactiveEmployees { min-height: 100px; overflow: hidden; } .invoice-header-wrapper { display: flex; flex-wrap: wrap; gap: 0; width: 100%; } .invoice-supplement-separator td { background: linear-gradient(90deg, #fff8f0 0%, #ffe8cc 50%, #fff8f0 100%); border-top: 2px solid #f57c00; border-bottom: 2px solid #ffb74d; padding: 12px 10px !important; font-weight: 700; font-size: 15px; color: #bf360c; text-align: center; } .invoice-card { display: flex; flex-direction: column; background: linear-gradient(to bottom, #fff, #e0f2ff); padding: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); flex: 0 0 auto; } .invoice-card:first-child { width: 27%; } .invoice-card:nth-child(2) { width: 27%; } .invoice-card:nth-child(3) { width: 24%; } .invoice-card:nth-child(4) { width: 22%; } @media (max-width: 768px) { .invoice-card { width: 100% !important; border-bottom: 2px solid #fff; } } .invoice-card h4 { margin-top: 0; margin-bottom: 8px; } .invoice-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .invoice-card-head-row h4 { margin: 0; flex: 1; min-width: 0; } .invoice-card-head-action { flex-shrink: 0; border: none; background: transparent; padding: 0; margin: 0; cursor: pointer; color: #007bff; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .invoice-payment-history-hint { margin-top: 6px; color: #2e8b57; display: flex; align-items: center; gap: 5px; } .invoice-payment-history-hint .fas { font-size: 12px; opacity: 0.9; } .finance-row { display: flex; justify-content: space-between; margin-bottom: 6px; border-bottom: 1px solid #cdcdcd; padding-bottom: 5px; } .finance-row span { font-weight: 500; } .money { font-weight: bold; color: #0077b6; } .info-block { margin: 5px 0 5px 0; } .invoice-card label { display: inline-flex; align-items: center; margin-right: 10px; } .file-icons { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; } .file-icons a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: #f0f7ff; border: 1px solid #cce5ff; border-radius: 6px; transition: all 0.2s ease; position: relative; } .file-icons a:hover { background: #0077b6; border-color: #0077b6; transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .file-icons i { font-size: 16px; color: #0077b6; transition: all 0.2s ease; } .file-icons a:hover i { color: white; transform: scale(1.1); } .file-label { display: none; } .history-payment-form form { display: inline-block; width: 100%; max-width: 420px; padding: 0px; } .history-payment-form table { width: 100%; border-collapse: collapse; font-size: 14px; } .history-payment-form td { padding: 5px; vertical-align: middle; } .history-payment-form input, .history-payment-form select { width: 100%; padding: 6px 10px; border-radius: 6px; border: 1px solid #ccc; font-size: 13px; } .suggestion-box { position: absolute; background: #fff; border: 1px solid #ccc; z-index: 9999; max-height: 180px; overflow-y: auto; min-width: 300px; font-size: 14px; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); } .suggestion-box div { padding: 6px 10px; cursor: pointer; } .suggestion-box div:hover { background: #f0f0f0; } .order-invoice-add-code-wrap { position: relative; } .order-invoice-add-product-modal { overflow: visible; } #addNewProduct .order-invoice-add-code-cell { overflow: visible; position: relative; z-index: 2; } .suggestion-box--product-pick { max-height: 280px; } .suggestion-box--floating { margin: 0; } .suggestion-box--product-pick.suggestion-box--floating { top: auto; left: auto; min-width: 280px; } .suggestion-box__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px !important; border-bottom: 1px solid #eee; } .suggestion-box__item:last-child { border-bottom: none; } .suggestion-box__item:hover { background: #f0f7ff; } .suggestion-box__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; flex-shrink: 0; background: #f5f5f5; } .suggestion-box__body { flex: 1; min-width: 0; padding: 0 !important; cursor: inherit; } .suggestion-box__code { font-weight: 600; line-height: 1.3; } .suggestion-box__desc { font-size: 12px; color: #666; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .suggestion-box__badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: #e8f4fd; color: #1565c0; vertical-align: middle; margin-left: 4px; } .suggestion-box__item--muted { color: #888; cursor: default; font-style: italic; } .suggestion-box__item--muted:hover { background: transparent !important; } #qtyCheckMsg { position: absolute; background: #fff; color: #000; border: 1px solid #ccc; padding: 8px 12px; margin-top: 4px; font-size: 0.9em; z-index: 9999; display: none; max-width: 320px; width: max-content; word-wrap: break-word; overflow-wrap: break-word; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 6px; } .qty-check-box { position: absolute; background: #fff; border: 1px solid #ccc; padding: 6px 10px; font-size: 0.9em; max-width: 300px; margin-top: 5px; z-index: 9999; display: none; right: 0; left: auto; text-align: left; } .output-day-group { background: linear-gradient(to top, #f3faff, #e0f2ff); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); border-radius: 5px; margin: 0 0 10px; overflow: hidden; border: 1px solid #b4e0ff; } .output-day-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #1a3e72; padding: 12px 16px; font-weight: 600; cursor: pointer; } .output-day-header:hover { background: linear-gradient(to top, #ffffff, #a3c8f0); } .gw-entry-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; } .gw-entry-actions { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: flex-end; flex: 0 0 auto; } .gw-entry-body { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-start; } .gw-entry-col-meta { flex: 1 1 200px; min-width: 200px; padding-left: 2px; } .gw-entry-col-sig { display: flex; flex-wrap: wrap; gap: 12px; flex: 0 1 auto; align-items: flex-start; } .gw-entry-production-date { font-size: 22px; font-weight: 700; line-height: 1.2; margin: 0; } .gw-entry-list { display: flex; flex-direction: column; gap: 10px; } .gw-entry-list-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 8px 12px; font-size: 13px; color: #546e7a; background: #f5f7f9; border: 1px solid #e0e4e8; border-radius: 8px; } .gw-entry-list-summary__count { font-weight: 700; color: #37474f; } .gw-entry-list-summary__prod { color: #1565c0; font-weight: 600; } .gw-entry-list-summary__def { color: #c62828; font-weight: 600; } .gw-entry-list-summary__sep { opacity: 0.45; } .gw-entry-month { border: 1px solid #d0dbe4; border-radius: 8px; overflow: hidden; background: #fff; } .gw-entry-month-summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 12px; cursor: pointer; list-style: none; background: linear-gradient(180deg, #eef4f8 0%, #e6eef4 100%); border-bottom: 1px solid transparent; user-select: none; } .gw-entry-month[open]>.gw-entry-month-summary { border-bottom-color: #d0dbe4; } .gw-entry-month-summary::-webkit-details-marker { display: none; } .gw-entry-month-summary::before { content: '\f054'; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 10px; color: #78909c; margin-right: 8px; transition: transform 0.15s ease; flex-shrink: 0; } .gw-entry-month[open]>.gw-entry-month-summary::before { transform: rotate(90deg); } .gw-entry-month-title { font-size: 14px; font-weight: 700; color: #1565c0; } .gw-entry-month-meta { font-size: 12px; color: #607d8b; font-weight: 500; } .gw-entry-month-body { padding: 0; } .gw-entry-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } .gw-entry-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; table-layout: fixed; } .gw-entry-table col.gw-entry-col-exp { width: 36px; } .gw-entry-table col.gw-entry-col-datetime { width: 96px; } .gw-entry-table col.gw-entry-col-producer { width: auto; min-width: 108px; } .gw-entry-table col.gw-entry-col-kind { width: 88px; min-width: 88px; } .gw-entry-table col.gw-entry-col-num { width: 68px; } .gw-entry-table col.gw-entry-col-status { width: 52px; min-width: 52px; } .gw-entry-table col.gw-entry-col-actions { width: 96px; } .gw-entry-table thead th, .gw-entry-table tbody td { overflow: visible; text-overflow: clip; white-space: nowrap; } .gw-entry-table thead th { position: sticky; top: 0; z-index: 1; padding: 7px 8px; font-size: var(--mafa-th-font-size); font-weight: var(--mafa-th-font-weight); text-transform: var(--mafa-th-text-transform); letter-spacing: var(--mafa-th-letter-spacing); color: #607d8b; background: #f8fafb; border-bottom: 1px solid #e0e4e8; } .gw-entry-table tbody td { padding: 6px 8px; border-bottom: 1px solid #eef1f3; vertical-align: middle; } .gw-entry-table tbody tr:last-child td, .gw-entry-table tbody tr.gw-entry-detail:last-child td { border-bottom: none; } .gw-entry-table__exp { width: 36px; padding-left: 6px !important; padding-right: 2px !important; text-align: center; } .gw-entry-table__datetime { font-variant-numeric: tabular-nums; font-weight: 600; color: #37474f; font-size: 12px; } .gw-entry-table__producer { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; padding-right: 10px !important; } .gw-entry-table__kind { white-space: nowrap; padding-left: 4px !important; padding-right: 6px !important; } .gw-entry-table__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .gw-entry-table__num--prod { color: #1565c0; } .gw-entry-table__num--def { color: #c62828; } .gw-entry-table__status { text-align: center; padding-left: 4px !important; padding-right: 4px !important; } .gw-entry-table__actions { text-align: right; white-space: nowrap; padding-right: 6px !important; } .gw-entry-row { cursor: pointer; } .gw-entry-row .gw-entry-table__actions { cursor: default; } .gw-entry-row--locked { background: #fffef5; } .gw-entry-row.is-expanded { background: #f3f8fc; } .gw-entry-row--focus { background: #fff8e1; box-shadow: inset 3px 0 0 #ffb300; } .gw-entry-row--focus.is-expanded { background: #fff3cd; } .gw-entry-row--warn .gw-entry-table__num--prod, .gw-entry-row--warn .gw-entry-table__num--def { cursor: help; } .gw-entry-expand-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: none; border-radius: 4px; background: transparent; color: #78909c; cursor: pointer; transition: background 0.12s, color 0.12s; } .gw-entry-expand-btn:hover { background: rgba(21, 101, 192, 0.1); color: #1565c0; } .gw-entry-expand-btn.is-open { color: #1565c0; } .gw-entry-expand-btn.is-open i { transform: rotate(90deg); } .gw-entry-expand-btn i { font-size: 10px; transition: transform 0.15s ease; } .gw-entry-badge { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; } .gw-entry-badge--pw { background: #e8eaf6; color: #3949ab; } .gw-entry-badge--lock { background: #fff3e0; color: #e65100; font-size: 11px; padding: 3px 8px; } .gw-entry-status { display: inline-block; font-size: 12px; line-height: 1; } .gw-entry-status--ok { color: #cfd8dc; font-size: 16px; font-weight: 700; line-height: 1; } .gw-entry-status--lock { font-size: 11px; } .gw-entry-status--over, .gw-entry-status--def { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; } .gw-entry-status--over { background: #ff9800; } .gw-entry-status--def { background: #e53935; } .gw-entry-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; } .gw-entry-act { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; color: #78909c; text-decoration: none; transition: background 0.12s, color 0.12s; } .gw-entry-act:hover { background: #eceff1; color: #37474f; } .gw-entry-act--lock:hover { background: #fff8e1; color: #f57c00; } .gw-entry-act--disabled { opacity: 0.45; cursor: not-allowed; } .gw-entry-act i { font-size: 12px; } .gw-entry-detail td { padding: 0 !important; background: #f8fafb; border-bottom: 1px solid #e0e4e8 !important; overflow: visible; white-space: normal; text-overflow: clip; } .gw-entry-detail-inner { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 10px 12px 12px 38px; max-width: 100%; box-sizing: border-box; min-width: 0; } .gw-entry-detail-block { flex: 0 1 auto; min-width: 140px; max-width: 100%; } .gw-entry-detail-block--full { flex: 1 1 100%; } .gw-entry-detail-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; flex: 1 1 100%; width: 100%; min-width: 0; } .gw-entry-detail-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #90a4ae; margin-bottom: 3px; } .gw-entry-detail-value { font-size: 12px; line-height: 1.45; color: #37474f; } .gw-entry-edit-line { margin-top: 4px; color: #5c6bc0; font-size: 11px; line-height: 1.35; } .gw-entry-detail-sigs { display: flex; flex-wrap: nowrap; gap: 12px 16px; flex: 0 1 auto; min-width: 0; margin-left: auto; box-sizing: border-box; } .gw-entry-detail-sig { flex: 0 1 auto; min-width: 0; max-width: 100%; } .gw-entry-detail-sig-media { width: 112px; max-width: 100%; } .gw-entry-detail-sig-empty { width: 100%; height: 52px; border: 1px dashed #cfd8dc; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #b0bec5; box-sizing: border-box; } .gw-entry-detail-sig-name { margin-top: 4px; font-size: 11px; font-weight: 600; color: #607d8b; word-break: break-word; } .gw-entry-detail-sig .gw-sig-preview-box--entry-detail { display: block; width: 100%; max-width: 112px; height: 52px; padding: 4px 6px; overflow: hidden; box-sizing: border-box; } .gw-entry-detail-sig .gw-sig-preview-box--entry-detail img { display: block; width: 100%; max-width: 100%; height: 100%; max-height: 44px; object-fit: contain; object-position: left center; } .gw-sig-preview-box--compact { width: 100px; height: 48px; } .gw-sig-preview-box--compact img { max-width: 100%; max-height: 100%; object-fit: contain; } @media (max-width: 767px) { .gw-entry-table { min-width: 0; width: 100%; table-layout: auto; font-size: 12px; } .gw-entry-table col.gw-entry-col-exp { width: 32px; } .gw-entry-table col.gw-entry-col-datetime { width: 70px; min-width: 70px; } .gw-entry-table col.gw-entry-col-producer { width: auto; min-width: 88px; } .gw-entry-table col.gw-entry-col-kind { width: auto; min-width: 80px; } .gw-entry-table col.gw-entry-col-num { width: auto; min-width: 44px; } .gw-entry-table col.gw-entry-col-status { width: auto; min-width: 40px; } .gw-entry-table col.gw-entry-col-actions { width: auto; min-width: 72px; } .gw-entry-table thead th, .gw-entry-table tbody td { padding-inline: 5px; } .gw-entry-table thead th.gw-entry-table__status { font-size: 9px; letter-spacing: 0; white-space: normal; line-height: 1.2; padding-inline: 3px; } .gw-entry-table__producer { padding-right: 8px !important; max-width: none; } .gw-entry-table__kind { padding-left: 8px !important; } .gw-entry-table__datetime { font-size: 11px; } .gw-entry-badge { font-size: 9px; padding: 2px 5px; white-space: nowrap; } .gw-entry-table__actions { padding-right: 4px !important; } } @media (max-width: 640px) { .gw-entry-detail-inner { padding-left: 12px; } .gw-entry-detail-row { flex-direction: column; align-items: stretch; } .gw-entry-detail-sigs { margin-left: 0; flex-wrap: wrap; } } .header-left { font-size: 16px; white-space: nowrap; flex: 1 1 56%; min-width: 0; padding-right: 8px; } .arrow { font-size: 16px; } .output-day-content { padding: 5px 5px; display: none; } .header-right { display: grid; grid-template-columns: repeat(5, auto); justify-content: end; gap: 10px; flex: 1 1 44%; min-width: 0; } .metric { min-width: 130px; text-align: left; } @media (max-width: 600px) { .metric { min-width: 100px; } .header-left { flex-basis: 58%; white-space: normal; } .header-right { grid-template-columns: repeat(2, auto); justify-content: flex-end; gap: 8px; } } @media (max-width: 420px) { .output-day-header { gap: 8px; padding: 10px 12px; } .header-left { flex-basis: 60%; } .metric { min-width: 90px; } } .subtab-links { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; position: relative; } .subtab-links a { position: relative; display: inline-block; font-weight: 600; color: #555; text-decoration: none; border-bottom: 2px solid transparent; padding: 4px 6px; transition: all 0.2s ease; border-bottom-color: #ced8e2; } .subtab-links a:hover, .subtab-links a.active { color: #007bff; border-bottom-color: #007bff; } .menu-trigger { position: relative; } .subtab-links .dropdown-menu .menu-content { top: calc(100% - 1px); padding: 10px 0; min-width: 0; max-width: min(480px, calc(100vw - 16px)); overflow-wrap: anywhere; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .subtab-links .dropdown-menu .menu-content a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; white-space: normal; border-bottom: none; transition: background 0.2s; } .subtab-links .dropdown-menu .menu-content a:hover { background: #f2f6ff; color: #007bff; border-bottom: none; } .subtab-links .dropdown-menu .menu-content a:last-child { border-bottom: none; } @media (max-width: 600px) { .subtab-links { gap: 8px 10px; } } .dashboard-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 10px; margin-bottom: 20px; } .dashboard-panel { background: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); min-width: 0; } .dashboard-panel canvas { height: 200px !important; max-height: 200px; } .dashboard-panel #categoryPieChart, .dashboard-panel #defectPieChartCustomer { height: 240px !important; max-height: 240px; } @media (max-width: 768px) { .dashboard-row { grid-template-columns: minmax(0, 1fr); } .dashboard-panel { width: 100%; max-width: 100%; overflow-x: auto; } .dashboard-panel canvas { width: 100% !important; max-width: 100%; } } .dashboard-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .dashboard-header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; } .dashboard-header-row .title h3 { margin: 0px; font-size: 20px; font-weight: bold; } .dashboard-header-row .filter { min-width: 150px; } th.defect-detail-col, td.defect-detail-col { display: none; } th.sortable-column.active { background: #ffebcc; color: #cc6600; } td.highlight-col { background: #fff3e0; } html.dark th.sortable-column.active { background: #7f5539; color: #ffe0b2; } html.dark td.highlight-col { background: #483429; } html.dark .dashboard-panel { background: #272c31; border-color: rgb(69, 69, 69); color: #cbd5e1; } .top-defect-table { width: 100%; } .sub-products { margin: 5px; font-size: 13px; background-color: #ecf5fe; padding: 8px; } .popup-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); z-index: var(--app-popup-z, 100000); display: flex; justify-content: center; align-items: flex-start; } .popup-hidden { display: none !important; } .popup-box { background: #fff; color: #111; padding: 24px 30px; border-radius: 10px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); text-align: center; font-size: 16px; margin-top: 5vh; overflow-x: hidden; overflow-y: auto; width: 40%; max-width: 560px; min-width: 320px; box-sizing: border-box; max-height: 90vh; } .popup-box--form, .order-delivery-date-modal { text-align: left; width: min(420px, calc(100vw - 32px)); max-width: min(420px, calc(100vw - 32px)); } .order-delivery-date-form { max-width: 100%; box-sizing: border-box; } .order-delivery-date-field { margin-bottom: 18px; max-width: 100%; } .order-delivery-date-field label { display: block; margin-bottom: 8px; } .order-delivery-date-input, .order-delivery-date-modal input[type="date"], .order-delivery-date-modal .lch-flatpickr-input { display: block; width: 100% !important; max-width: 100% !important; box-sizing: border-box; margin-top: 0; } .order-delivery-date-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: flex-start; } .order-delivery-date-actions .button { margin: 0; } .order-payment-modal { width: min(440px, calc(100vw - 32px)); max-width: min(440px, calc(100vw - 32px)); } .order-payment-form { max-width: 100%; box-sizing: border-box; } .order-payment-form__title { margin: 0 0 16px; font-size: 16px; font-weight: 700; line-height: 1.35; text-align: center; } .order-payment-field { margin-bottom: 12px; } .order-payment-field:last-of-type { margin-bottom: 0; } .order-payment-field__label { display: block; margin: 0 0 6px; font-weight: 600; line-height: 1.35; } .order-payment-field .input, .order-payment-field select, .order-payment-field input[type="date"], .order-payment-field input[type="text"] { display: block; width: 100% !important; max-width: 100%; box-sizing: border-box; } .order-payment-optional { font-weight: 500; font-size: 12px; color: #78909c; } .order-payment-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: flex-start; margin-top: 18px; } .order-payment-actions .button { margin: 0; } .order-change-history { margin: 0; border-top: none; border-bottom: none; } .order-vieworder-stack { margin: 0; padding: 0; } .order-vieworder-body { margin: 0; padding: 0; } .order-vieworder-body > .order-change-history.mould-detail-pane { border-top: none; } .order-change-history + .order-tabs { margin-top: 0; } .order-vieworder-body > .order-set-sync-warn { margin: 0 !important; padding: 10px 12px; display: flex; align-items: flex-start; gap: 10px; } .order-set-sync-warn + .order-tabs { margin-top: 0; } .order-set-sync-warn > .fas { margin-top: 2px; flex-shrink: 0; color: #856404; } .order-set-sync-warn ul { margin: 0; padding: 0; list-style: none; } .order-set-sync-warn li + li { margin-top: 6px; } .order-set-sync-warn a { white-space: nowrap; } .order-change-history__empty { padding: 12px 16px; font-size: 14px; color: #78909c; } tr.invoice-row--hash-target { outline: 2px solid #ffc107; outline-offset: -2px; background-color: #fffde7; } .order-change-history__toggle { width: 100%; margin: 0; border: none; border-bottom: none; cursor: pointer; text-align: left; font: inherit; color: inherit; background: #f5f7fa; box-sizing: border-box; transition: background 0.15s ease; } .order-change-history.is-open .order-change-history__toggle { border-bottom: 1px solid #eceff1; } .order-change-history__toggle:hover { background: #eef4ff; } .order-change-history__toggle:focus-visible { outline: 2px solid #1565c0; outline-offset: -2px; } .order-change-history__count { flex: 0 0 auto; padding: 2px 8px; border-radius: 999px; background: #e3f2fd; color: #1565c0; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .order-change-history__chevron { flex: 0 0 auto; margin-left: auto; font-size: 14px; opacity: 0.75; transition: transform 0.2s ease; } .order-change-history__panel { padding: 0; border-bottom: 1px solid #cfd8dc; } .order-change-history__panel.mould-detail-pane-body { padding: 0; } .order-change-log-list { list-style: none; margin: 0; padding: 0; } .order-change-log-item { margin: 0; padding: 11px 16px 11px 13px; border-bottom: 1px solid #eceff1; border-left: 3px solid #90a4ae; font-size: 14px; line-height: 1.55; color: #37474f; box-sizing: border-box; } .order-change-log-item:last-child { border-bottom: none; } .order-change-log-item--add { border-left-color: #2e7d32; } .order-change-log-item--remove { border-left-color: #c62828; } .order-change-log-item--qty { border-left-color: #1565c0; } .order-change-log-item--delivery { border-left-color: #ef6c00; } .order-change-log-item__line { margin: 0; } .order-change-log-item__user { font-weight: 700; color: #263238; } .order-change-log-item__qty--new { color: #0d47a1; } @media (max-width: 1024px) { .popup-box.order-delivery-date-modal, .popup-box.popup-box--form { width: min(420px, calc(100vw - 32px)) !important; max-width: min(420px, calc(100vw - 32px)) !important; } } @media (max-width: 1024px) { .popup-box:not(.popup-box--form):not(.order-delivery-date-modal) { width: 80% !important; } } @media (max-width: 600px) { .popup-box:not(.popup-box--form):not(.order-delivery-date-modal) { width: 90% !important; } } .popup-box button { margin: 12px 6px 0; padding: 8px 16px; font-weight: bold; border-radius: 5px; cursor: pointer; border: none; } .popup-box .confirm-btn { background: #f87171; color: white; } .popup-box .confirm-btn:hover { background: #bb3333; } .popup-box .cancel-btn { background: #b8b8b8; color: white; } .popup-box .cancel-btn:hover { background: #656565; } .delivery-route-empty { text-align: center; margin: 24px 0 8px; color: #555; } .delivery-route-timeline { --dr-accent: #0077b6; --dr-pill-bg: #0077b6; --dr-body-bg: #f0f7fb; --dr-body-border: rgba(0, 119, 182, 0.38); position: relative; padding: 12px 0 8px; margin-top: 8px; max-width: 980px; margin-left: auto; margin-right: auto; } .delivery-route-timeline::before { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 0; bottom: 0; width: 3px; background: var(--dr-accent); border-radius: 2px; z-index: 0; } .delivery-route-row { display: grid; grid-template-columns: 1fr 22px 1fr; column-gap: 10px; margin-bottom: 16px; align-items: flex-start; position: relative; z-index: 1; } .delivery-route-track { grid-column: 2; grid-row: 1; width: 22px; justify-self: center; position: relative; z-index: 2; } .delivery-route-row--left .delivery-route-block { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; max-width: 100%; width: min(100%, 460px); } .delivery-route-row--right .delivery-route-block { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; max-width: 100%; width: min(100%, 460px); } .delivery-route-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--dr-pill-bg); color: #fff; font-size: 13px; line-height: 1.25; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .delivery-route-body { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--dr-body-bg); border: 1px solid var(--dr-body-border); line-height: 1.45; max-width: 340px; box-sizing: border-box; } .delivery-route-body .delivery-route-inline-link { color: inherit; font-weight: inherit; text-decoration: underline; text-underline-offset: 2px; } .delivery-route-body .delivery-route-inline-link:hover { color: var(--dr-accent); } .delivery-route-row--left .delivery-route-body { margin-left: auto; } .delivery-route-row--right .delivery-route-body { margin-right: auto; } .delivery-route-node { display: block; width: 14px; height: 14px; margin: 10px auto 0; border-radius: 50%; background: #fff; border: 3px solid var(--dr-accent); box-sizing: border-box; box-shadow: 0 0 0 2px #fff; } .delivery-route-item--late { --dr-accent: #d90429; --dr-pill-bg: #d90429; --dr-body-bg: #fff5f5; --dr-body-border: rgba(217, 4, 41, 0.45); } .delivery-route-item--soon { --dr-accent: #ff8533; --dr-pill-bg: #ff8533; --dr-body-bg: #fff7ed; --dr-body-border: rgba(255, 133, 51, 0.45); } .delivery-route-item--mid { --dr-accent: #0077b6; --dr-pill-bg: #0077b6; --dr-body-bg: #f0f7fb; --dr-body-border: rgba(0, 119, 182, 0.38); } .delivery-route-item--far { --dr-accent: #2a9d8f; --dr-pill-bg: #2a9d8f; --dr-body-bg: #eefbf7; --dr-body-border: rgba(42, 157, 143, 0.38); } @media (max-width: 700px) { .delivery-route-timeline::before { left: calc(11px - 1.5px); transform: none; } .delivery-route-row { grid-template-columns: 22px 1fr; column-gap: 12px; } .delivery-route-track { grid-column: 1; } .delivery-route-row--left .delivery-route-block, .delivery-route-row--right .delivery-route-block { grid-column: 2; grid-row: 1; justify-self: stretch; text-align: left; max-width: none; width: 100%; } .delivery-route-row--left .delivery-route-body, .delivery-route-row--right .delivery-route-body { margin-left: 0; margin-right: 0; max-width: none; width: 100%; } } @media (max-width: 1100px) { .delivery-route-timeline::before { left: calc(11px - 1.5px); transform: none; } .delivery-route-row { grid-template-columns: 22px 1fr; column-gap: 12px; } .delivery-route-track { grid-column: 1; } .delivery-route-row--left .delivery-route-block, .delivery-route-row--right .delivery-route-block { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; max-width: none; } .delivery-route-row--left .delivery-route-body, .delivery-route-row--right .delivery-route-body { margin-left: 0; margin-right: 0; max-width: none; } } .order-tabs .order-tabs-right { margin-left: auto; display: inline-flex; gap: 10px; align-items: center; align-self: center; } .order-tabs .order-tabs-right .tab { display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; } .order-filters-box { border-top-left-radius: 0; border-top-right-radius: 0; margin: 0; padding: 10px; } .orders-status-trigger { padding: 0 2px; text-align: right; } .orders-progress-head, .orders-col-head { display: flex; align-items: center; gap: 4px; min-width: 0; } .orders-col-head--right { justify-content: flex-end; } .orders-col-sort-btn, .orders-progress-sort-btn { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 2px 4px; font-size: 14px; line-height: 1; flex: 0 0 auto; } .orders-col-sort-btn:hover, .orders-col-sort-btn.is-active, .orders-progress-sort-btn:hover, .orders-progress-sort-btn.is-active { color: #cc6600; } html.dark .orders-col-sort-btn:hover, html.dark .orders-col-sort-btn.is-active, html.dark .orders-progress-sort-btn:hover, html.dark .orders-progress-sort-btn.is-active { color: #ffb74d; } #orders-table thead th.orders-th-progress { position: sticky; top: 0; } #orders-table thead th.orders-th-progress:hover, #orders-table thead th.orders-th-progress:focus-within { z-index: 10050; } .orders-progress-trigger { padding: 0 2px; min-width: 0; } @media (hover: none), (pointer: coarse), (max-width: 768px) { #orders-table .dropdown-menu.dropdown-click.is-open:not(.force-close) .menu-content { z-index: 10070 !important; } } .ps-page-tabs-wrap { padding-top: 0; } .ps-page-body { margin-top: 0; } .ps-filter-bar { margin-bottom: 0; border: 1px solid #e0e0e0; border-bottom: none; border-radius: 5px 5px 0 0; padding: 0; box-sizing: border-box; } .ps-filter-bar__inner { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; padding: 12px 16px; } .ps-filter-bar__field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; } .ps-filter-bar__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .ps-filter-bar__field select.input { min-width: 140px; box-sizing: border-box; } .ps-filter-bar__check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding-bottom: 6px; } .fs-surplus-order-sheet .surplus-page__info-btn { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #546e7a; text-decoration: none; flex-shrink: 0; font-size: 17px; line-height: 1; } .fs-surplus-order-sheet .surplus-page__info-btn:hover { background: rgba(21, 101, 192, 0.08); color: #1976d2; } .order-tabs .tab.surplus-tab-info { min-width: 36px; padding: 6px 12px; font-size: 16px; line-height: 1; } .order-tabs .tab.surplus-tab-info i { display: block; line-height: 1; } .surplus-status { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } .surplus-status--primary { background: #ede7f6; color: #5e35b1; } .surplus-status--warning { background: #fff8e1; color: #f57f17; } .surplus-field-label { display: block; margin: 10px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .surplus-reverse-modal__box { max-width: 480px; } .surplus-reverse-modal__intro { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #546e7a; } .surplus-reverse-form__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; } .surplus-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 0; } .surplus-guide-card .mould-detail-pane { height: 100%; } .surplus-guide-card__head { flex-wrap: wrap; gap: 8px 10px; } .surplus-guide-card__step { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: rgba(21, 101, 192, 0.12); color: #1565c0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .surplus-guide-card__body { padding-top: 12px; } .surplus-guide-list { margin: 0; padding-left: 20px; line-height: 1.65; color: #37474f; font-size: 13px; } .surplus-guide-list li+li { margin-top: 8px; } .surplus-guide-list--bullet { list-style: disc; } .surplus-guide-tip { margin-top: 0; } .manual-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .manual-index-card { display: block; text-decoration: none; color: inherit; transition: box-shadow 0.15s ease, transform 0.15s ease; } .manual-index-card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transform: translateY(-1px); } .manual-index-card__head { gap: 8px; } .manual-index-card__body { padding-top: 0; } .manual-index-card__text { margin: 0; font-size: 13px; line-height: 1.55; color: #546e7a; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .surplus-guide-tip__body { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px !important; background: #f3f9ff; } .surplus-guide-tip__icon { color: #1976d2; font-size: 18px; margin-top: 2px; flex-shrink: 0; } .surplus-guide-tip__title { font-size: 13px; font-weight: 700; color: #1565c0; margin-bottom: 4px; } .surplus-guide-tip__text { margin: 0; font-size: 13px; line-height: 1.55; color: #546e7a; } .fs-surplus-order-sheet { margin-bottom: 0; } .fs-surplus-order-sheet+.fs-surplus-order-sheet, .fs-surplus-order-sheet+.alert, .alert+.fs-surplus-order-sheet, .fs-surplus-order-sheet+form, form.fs-surplus-order-form, .fs-surplus-order-form>.fs-surplus-order-sheet+.fs-surplus-order-sheet { margin-top: 0; } .fs-surplus-order-form { margin: 0; } .fs-surplus-order-sheet+.fs-surplus-order-sheet>.mould-detail-pane:first-child, .fs-surplus-order-sheet.surplus-sheet--kpi+.fs-surplus-order-sheet>.mould-detail-pane:first-child { border-top: none; } .fs-surplus-order-sheet+.surplus-page__alert, .surplus-page__alert+.fs-surplus-order-sheet, .surplus-page__alert+form.fs-surplus-order-form { margin-top: 0; } .alert.success.surplus-page__alert { margin-top: 0; margin-bottom: 0; border-radius: 0; } .fs-surplus-order-form+.fs-surplus-order-sheet { margin-top: 0; } .fs-surplus-kpi { margin-bottom: 0; } .fs-surplus-kpi .kpi-strip__value.text-green, .fs-surplus-kpi .kpi-strip__value.text-red { font-size: 18px; font-weight: 700; } .fs-surplus-kpi-cancel-reason { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; padding: 12px 18px 14px; border-top: 1px solid #e3e8ef; background: #f8fafc; font-size: 13px; line-height: 1.45; } .fs-surplus-kpi-cancel-reason__label { flex: 0 0 auto; font-weight: 700; color: #37474f; } .fs-surplus-kpi-cancel-reason__text { flex: 1 1 180px; min-width: 0; color: #546e7a; } .fs-surplus-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .fs-surplus-field label, .fs-surplus-field .ps-filter-bar__label { margin: 0; } .fs-surplus-note-input { width: 100%; min-height: 72px; box-sizing: border-box; resize: vertical; } .fs-surplus-sig-row { margin-top: 4px; } .fs-surplus-sig-row .gw-sig-block { background: #f5f7fa; border: 1px solid #e3e8ef; border-radius: 8px; padding: 12px; } .fs-surplus-sig-title { font-size: 12px; font-weight: 700; color: #37474f; margin-bottom: 8px; } .fs-surplus-sig-tools { margin-top: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .fs-surplus-sig-status { font-size: 12px; color: #78909c; } .fs-surplus-sig-status.is-signed { color: #2e7d32; font-weight: 600; } .fs-approver-dropdown { display: block; width: 100%; z-index: 30; } .fs-approver-dropdown__trigger { display: block; width: 100%; box-sizing: border-box; cursor: pointer; border: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 6px 10px; font: inherit; color: inherit; text-align: left; } .fs-approver-dropdown__trigger--readonly { cursor: default; pointer-events: none; } .fs-approver-dropdown__trigger-inner { display: flex; align-items: center; gap: 8px; min-width: 0; } .fs-approver-dropdown__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fs-approver-dropdown__label.is-placeholder { color: #78909c; } .fs-approver-dropdown__caret { flex: 0 0 auto; margin-left: auto; color: #607d8b; } .fs-approver-dropdown__avatar .avatar-wrapper, .fs-approver-dropdown__avatar { flex: 0 0 auto; } .fs-approver-dropdown__menu { width: 100%; min-width: 100%; max-width: 100%; max-height: 250px; overflow-y: auto; left: 0; right: 0; translate: none; box-sizing: border-box; } .fs-approver-dropdown__option { display: flex !important; align-items: center; gap: 8px; white-space: normal; line-height: 1.35; } .fs-approver-dropdown__option-av { flex: 0 0 auto; } .fs-approver-name-wrap .fs-approver-picker__option.is-hidden { display: none !important; } .fs-approver-name-wrap .fs-approver-picker__option.is-selected { border-color: #1565c0; background: #e3f2fd; } .fs-surplus-form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 0; padding: 14px 18px 18px; border-top: 1px solid #e3e8ef; background: #fff; } .fs-surplus-new-form-btn { display: inline-block; margin-bottom: 12px; } .fs-surplus-locked-msg { font-size: 13px; color: #2e7d32; font-weight: 600; } .fs-surplus-pool-table .fs-surplus-alloc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; align-items: end; min-width: 320px; } .fs-surplus-pool-table .scroll-table td.fs-surplus-receive-action-cell, .fs-surplus-pool-table .scroll-table td.fs-surplus-receive-action-cell { white-space: normal; vertical-align: top; min-width: 420px; } .fs-surplus-alloc-form__field { display: flex; flex-direction: column; gap: 4px; } .fs-surplus-alloc-form__field label { font-size: 11px; color: #78909c; margin: 0; } .fs-surplus-alloc-form__actions { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; } .fs-surplus-alloc-form__field--error label { color: #c62828; font-weight: 600; } .fs-surplus-alloc-form__field--error .input { border-color: #e53935; background: #fffafa; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12); } .fs-surplus-note-cell--error, .fs-surplus-qty-input--error { border-color: #e53935; background: #fffafa; box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.12); } .fs-receive-field-error { margin-top: 4px; font-size: 11px; line-height: 1.35; color: #c62828; font-weight: 600; } .fs-receive-alert { margin-bottom: 12px; } .fs-surplus-inline-alert { margin: 0 0 12px; } .alert.error.fs-receive-alert, .surplus-page__alert.alert.error.fs-receive-alert { font-size: 15px; } .fs-receive-alert__title { font-weight: 700; margin-bottom: 4px; } .fs-receive-alert__detail { font-size: 14px; line-height: 1.5; } .scroll-table.fs-surplus-count-table.order-vieworder-tab-table { table-layout: fixed; } .scroll-table.fs-surplus-count-table col.fs-surplus-col-stt { width: 44px; } .scroll-table.fs-surplus-count-table col.fs-surplus-col-code { width: 118px; } .scroll-table.fs-surplus-count-table col.fs-surplus-col-photo { width: 92px; } .scroll-table.fs-surplus-count-table col.fs-surplus-col-desc { width: 26%; } .scroll-table.fs-surplus-count-table col.fs-surplus-col-qty { width: 102px; } .scroll-table.fs-surplus-count-table col.fs-surplus-col-confirm { width: 118px; } .scroll-table.fs-surplus-count-table col.fs-surplus-col-note { width: 168px; } .scroll-table.fs-surplus-count-table th.fs-surplus-col-stt, .scroll-table.fs-surplus-count-table td.fs-surplus-col-stt, .scroll-table.fs-surplus-count-table th.fs-surplus-col-code, .scroll-table.fs-surplus-count-table td.fs-surplus-col-code, .scroll-table.fs-surplus-count-table th.fs-surplus-col-qty, .scroll-table.fs-surplus-count-table td.fs-surplus-col-qty, .scroll-table.fs-surplus-count-table th.fs-surplus-col-confirm, .scroll-table.fs-surplus-count-table td.fs-surplus-col-confirm { white-space: nowrap; } .scroll-table.fs-surplus-count-table td.fs-surplus-col-desc, .scroll-table.fs-surplus-count-table td.description.fs-surplus-col-desc { text-align: left; white-space: normal; word-wrap: break-word; word-break: break-word; overflow: visible; text-overflow: clip; vertical-align: top; } .scroll-table.fs-surplus-count-table td.fs-surplus-col-note { text-align: left; white-space: normal; vertical-align: middle; } .scroll-table.fs-surplus-count-table .fs-surplus-qty-input { width: 100px; max-width: 100%; box-sizing: border-box; } .scroll-table.fs-surplus-count-table .fs-surplus-note-cell { width: 100%; min-width: 0; box-sizing: border-box; } .scroll-table.fs-surplus-count-table tbody tr.bglightred>td, .fs-surplus-pool-table .scroll-table tbody tr.bglightred>td { background-color: #fbf0f0 !important; } .scroll-table.fs-surplus-count-table tbody tr.bglightred:hover>td, .fs-surplus-pool-table .scroll-table tbody tr.bglightred:hover>td { background-color: #f0dbdb !important; } .scroll-table.fs-surplus-count-table tbody tr.bglightred>td.sticky-photo, .fs-surplus-pool-table .scroll-table tbody tr.bglightred>td.sticky-photo { background-color: #fbf0f0 !important; } .scroll-table.fs-surplus-count-table tbody tr.bglightred:hover>td.sticky-photo, .fs-surplus-pool-table .scroll-table tbody tr.bglightred:hover>td.sticky-photo { background-color: #f0dbdb !important; } .scroll-table.fs-receive-count-table col.fs-receive-col-qty { width: 88px; } .scroll-table.fs-receive-count-table col.fs-receive-col-input { width: 120px; } .scroll-table.fs-receive-count-table th.fs-receive-col-qty, .scroll-table.fs-receive-count-table td.fs-receive-col-qty, .scroll-table.fs-receive-count-table th.fs-receive-col-input, .scroll-table.fs-receive-count-table td.fs-receive-col-input { white-space: nowrap; } .scroll-table.fs-receive-count-table td.fs-receive-col-input { vertical-align: middle; } .scroll-table.fs-receive-count-table .fs-receive-qty-input { width: 100%; min-width: 96px; max-width: 120px; text-align: center; } .fs-receive-order-form .fs-surplus-form-actions { border-top: 1px solid #eceff1; } @media (max-width: 768px) { .fs-surplus-kpi.kpi-strip--cols-4 { grid-template-columns: 1fr 1fr; } .fs-surplus-pool-table .fs-surplus-alloc-form { grid-template-columns: 1fr; min-width: 0; } .scroll-table.fs-receive-count-table .fs-receive-qty-input { min-width: 88px; } } .op-prod-sheet { margin-bottom: 0; border-radius: 0; } .op-prod-sheet+.scroll-hint { margin-top: 0; } .op-prod-control-sheet { border-bottom: 1px solid #eceff1; } .op-prod-control-row { padding: 8px 12px; border-bottom: 1px solid #eceff1; } .op-prod-control-row:last-child { border-bottom: none; } .op-prod-progress-inline { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .op-prod-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .op-prod-progress-label { font-size: 11px; font-weight: 700; color: #546e7a; text-transform: uppercase; letter-spacing: 0.03em; } .op-prod-progress-bar-wrap { width: 100%; min-width: 0; } .op-prod-progress-bar { width: 100%; height: 7px; margin: 0; border-radius: 999px; } .op-prod-progress-pct { font-size: 20px; font-weight: 700; color: #1565c0; line-height: 1; } .op-prod-control-row--progress { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .op-prod-kpi-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; } .op-prod-kpi-chip { min-width: 0; width: 100%; padding: 6px 10px; border-radius: 6px; background: #f5f7fa; border: 1px solid #e3e8ef; text-align: center; } .op-prod-kpi-chip__label { font-size: 10px; font-weight: 600; color: #78909c; text-transform: uppercase; letter-spacing: 0.03em; } .op-prod-kpi-chip__value { margin-top: 2px; font-size: 14px; font-weight: 700; color: #37474f; line-height: 1.2; } .op-prod-kpi-chip--success { border-color: #c8e6c9; background: #f1f8f2; } .op-prod-kpi-chip--success .op-prod-kpi-chip__value { color: #2e7d32; } .op-prod-kpi-chip--warning { border-color: #ffe0b2; background: #fff8ef; } .op-prod-kpi-chip--warning .op-prod-kpi-chip__value { color: #ef6c00; } .op-prod-kpi-chip--danger { border-color: #ffcdd2; background: #fff5f5; } .op-prod-kpi-chip--danger .op-prod-kpi-chip__value { color: #c62828; } .op-prod-kpi-chip--neutral { border-color: #e3e8ef; background: #f5f7fa; } .op-prod-kpi-chip--neutral .op-prod-kpi-chip__value { color: #78909c; } .op-prod-control-row--notes { background: #fffbeb; padding: 10px 12px; } .op-prod-notes-compact { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0; box-sizing: border-box; } .op-prod-notes-compact__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #e65100; flex-shrink: 0; } .op-prod-notes-compact__label i { font-size: 14px; } .op-prod-notes-compact__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .op-prod-notes__line { margin: 0; font-size: 14px; line-height: 1.35; color: #5d4037; word-break: break-word; } .op-prod-notes__type { font-weight: 700; color: #e65100; margin-right: 4px; } .op-prod-control-row--toolbar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; } .op-prod-filters { min-width: 0; } .op-prod-filters__label { font-size: 11px; font-weight: 700; color: #546e7a; text-transform: uppercase; letter-spacing: 0.03em; } .op-prod-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .op-prod-filter-chip { margin: 0; } .op-prod-actions { flex: 0 0 auto; display: flex; align-items: center; } .fs-surplus-order-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; } @media (min-width: 769px) { .op-prod-control-row { padding: 7px 14px; } .op-prod-control-row--progress { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; } .op-prod-progress-inline { flex: 0 0 60%; width: 60%; max-width: 60%; min-width: 0; } .op-prod-kpi-mini { flex: 0 0 40%; width: 40%; max-width: 40%; min-width: 0; align-self: center; } .op-prod-kpi-chip__label { font-size: 11px; } .op-prod-kpi-chip__value { font-size: 16px; } .op-prod-kpi-chip { padding: 8px 10px; } .op-prod-progress-pct { flex: 0 0 auto; font-size: 17px; text-align: right; } .op-prod-control-row--notes { padding: 10px 14px; } .op-prod-notes-compact { flex-direction: row; align-items: flex-start; gap: 10px; } .op-prod-notes-compact__label { flex: 0 0 auto; padding-top: 1px; font-size: 13px; } .op-prod-notes-compact__body { flex: 1; gap: 2px; } .op-prod-control-row--toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .op-prod-filters--inline { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; } .op-prod-filters--inline .op-prod-filter-chips { margin-top: 0; } } @media (max-width: 768px) { .op-prod-control-row--progress { flex-direction: column; align-items: stretch; gap: 8px; } .op-prod-progress-inline { flex: none; width: 100%; max-width: none; } .op-prod-progress-pct { font-size: 17px; text-align: right; } .op-prod-kpi-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: none; flex: none; } .op-prod-kpi-chip { padding: 6px 5px; } .op-prod-kpi-chip__label { font-size: 10px; } .op-prod-kpi-chip__value { font-size: 14px; } .op-prod-control-row--toolbar { gap: 10px; } .op-prod-actions { width: 100%; } .op-prod-actions .fs-surplus-order-actions { width: 100%; flex-direction: column; align-items: stretch; } .op-prod-actions .fs-surplus-order-actions .button { width: 100%; margin: 0; box-sizing: border-box; } } .op-prod-cell-pct { margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 1.2; color: #78909c; } .op-prod-cell-pct.text-red { color: #c62828; } .op-prod-product-row { cursor: pointer; transition: background-color 0.12s ease; } .op-prod-desc { line-height: 1.35; white-space: normal; word-break: break-word; } .news-list-toolbar { margin-bottom: 12px; } .news-search-input { flex: 1 1 220px; min-width: 0; max-width: 420px; box-sizing: border-box; } .news-thread-list.thread-list { gap: 8px; margin-top: 0; } .news-thread-card { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 14px; padding: 12px 14px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; box-sizing: border-box; width: 100%; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .news-thread-card__cover { position: absolute; inset: 0; z-index: 1; border-radius: 8px; } .news-thread-card:hover { border-color: #90caf9; box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08); } .news-thread-card--unread, .news-thread-card.highlight { background: #f3f9ff; border-color: #bbdefb; } .news-thread-card__new-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #1976d2; vertical-align: middle; } .news-thread-card__avatar, .news-thread-card__main, .news-thread-card__stats, .news-thread-card__members { position: relative; z-index: 0; } .news-thread-card__main { flex: 1; min-width: 200px; } .news-thread-card__title-text { font-size: 15px; line-height: 1.35; } .news-thread-card__stats { flex: 0 0 150px; font-size: 13px; line-height: 1.5; } .news-thread-card__stat+.news-thread-card__stat { margin-top: 2px; } .news-thread-card__members { flex: 0 0 150px; } .news-empty-state { padding: 28px 16px; text-align: center; color: #78909c; border: 1px dashed #cfd8dc; border-radius: 8px; background: #fafbfc; } .news-pagination.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid #eceff1; } .news-form-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .news-form-field--full { display: flex; flex-direction: column; } .news-form-content-editor { display: flex; flex-direction: column; gap: 0; width: 100%; min-width: 0; } .news-form-content-editor__toolbar-wrap { flex-shrink: 0; width: 100%; min-width: 0; margin-top: 5px; overflow: hidden; position: relative; z-index: 1; } .news-form-content-editor__toolbar-wrap .editor-toolbar, .news-editor-toolbar { display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 4px; margin-bottom: 0; padding: 2px 0; scrollbar-width: none; } .news-form-content-editor__toolbar-wrap .editor-toolbar::-webkit-scrollbar, .news-editor-toolbar::-webkit-scrollbar { display: none; } .news-form-content-editor__toolbar-wrap .editor-toolbar button, .news-editor-toolbar .fmt-btn { height: auto; min-height: 32px; flex: 0 0 auto; align-self: center; margin: 0; padding: 5px 8px; font-size: 12px; line-height: 1.2; white-space: nowrap; } .news-form-field--content { margin-bottom: 0; } .news-form-check { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 0; padding: 10px 12px; border-radius: 8px; background: #f5f7fa; border: 1px solid #e8edf0; box-sizing: border-box; cursor: pointer; } .news-form-check input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; cursor: pointer; } .news-form-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #eceff1; } .news-form-actions__submit { display: flex; flex-wrap: wrap; gap: 10px; } .news-form-alert { margin-bottom: 12px; } .news-member-picker { position: relative; display: flex; flex-direction: column; gap: 10px; width: 100%; } .news-member-picker__search-wrap { position: relative; } .news-member-picker__search { display: flex; flex-direction: column; gap: 4px; } .news-member-picker__search-label { position: relative; display: block; margin: 0; } .news-member-picker__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #78909c; font-size: 14px; pointer-events: none; } .news-member-picker__input, .news-member-picker__input.input { width: 100%; max-width: none; padding-left: 36px !important; min-height: 38px; box-sizing: border-box; } .news-member-picker__search.is-loading .news-member-picker__input { padding-right: 36px !important; background-image: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.08), transparent); background-size: 200% 100%; animation: news-member-picker-shimmer 1.1s ease-in-out infinite; } @keyframes news-member-picker-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } .news-member-picker__hint { font-size: 11px; color: #90a4ae; padding-left: 2px; } .news-member-picker__dropdown.searchUsers { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 120; margin-top: 0; min-width: 0; max-width: none; width: auto; padding: 6px; border: 1px solid #dce3ea; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12); max-height: 240px; overflow-y: auto; } .news-member-picker__result.search-item { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: #263238; font: inherit; text-align: left; cursor: pointer; box-sizing: border-box; } .news-member-picker__result.search-item:hover, .news-member-picker__result.search-item:focus { background: #e3f2fd; outline: none; } .news-member-picker__result-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #e0e0e0; } .news-member-picker__result-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-member-picker__result-action { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #e3f2fd; color: #1976d2; flex-shrink: 0; } .news-member-picker__no-results { padding: 12px 10px; font-size: 13px; color: #78909c; text-align: center; } .news-member-picker__selected { border: 1px solid #e4e6eb; border-radius: 10px; background: #f8f9fb; overflow: hidden; } .news-member-picker__selected-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-bottom: 1px solid #e4e6eb; background: #fff; } .news-member-picker__selected-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; } .news-member-picker__count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #e3f2fd; color: #1565c0; font-size: 12px; font-weight: 700; } .news-member-picker__chips.taggedUsers { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 52px; padding: 10px 12px; margin: 0; } .news-member-picker__empty { width: 100%; padding: 6px 0; font-size: 13px; line-height: 1.45; color: #90a4ae; text-align: center; } .news-member-chip.tagged-box { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 4px 8px 4px 4px; border: 1px solid #cfe3fb; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(25, 118, 210, 0.06); } .news-member-chip__av { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .news-member-chip__name { font-size: 13px; font-weight: 600; color: #263238; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .news-member-chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0; padding: 0; border: none; border-radius: 50%; background: transparent; color: #90a4ae; cursor: pointer; flex-shrink: 0; } .news-member-chip__remove:hover { background: #ffebee; color: #e41e3f; } .news-member-picker--compact { gap: 8px; } .news-member-picker--compact .news-member-picker__input, .news-member-picker--compact .news-member-picker__input.input { min-height: 34px; font-size: 13px; } .news-member-picker--compact .news-member-picker__hint { display: none; } .news-member-picker--compact .news-member-picker__selected-head { padding: 6px 10px; } .news-member-picker--compact .news-member-picker__chips.taggedUsers { min-height: 44px; padding: 8px 10px; gap: 6px; } .news-member-picker--compact .news-member-chip__name { max-width: 120px; font-size: 12px; } .news-editor-toolbar { margin-bottom: 0; } .news-content-textarea { width: 100%; height: auto; min-height: 180px; flex: 0 1 auto; box-sizing: border-box; resize: vertical; } .main-content-card:has(.news-page--thread) { height: 100dvh; min-height: 100dvh; padding-bottom: 0; overflow: hidden; box-sizing: border-box; } .news-page--thread { padding: 0; margin: 0; flex: 1; min-height: 0; height: 100%; display: flex; flex-direction: column; box-sizing: border-box; } .news-page--thread .ps-page-tabs-wrap { display: none; } .news-page--thread .ps-page-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .news-sheet--chat { padding: 0; overflow: hidden; display: flex; flex-direction: column; flex: 1; min-height: 0; height: 100%; max-height: none; border-radius: 0; } .news-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; } .news-chat-topbar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #e4e6eb; background: #fff; flex-shrink: 0; } .news-chat-back { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #0084ff; background: #f0f2f5; text-decoration: none; flex-shrink: 0; } .news-chat-back:hover { background: #e4e6eb; } .news-chat-topbar__info { flex: 1; min-width: 0; } .news-chat-topbar__title { font-size: 15px; font-weight: 700; color: #050505; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-chat-topbar__meta { font-size: 11px; color: #65676b; margin-top: 1px; } .news-chat-topbar__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; } .news-chat-topbar__tags .news-chat-tag { padding: 2px 8px; font-size: 11px; } .news-chat-settings-toggle { width: 36px; height: 36px; border: none; border-radius: 50%; background: #f0f2f5; color: #65676b; cursor: pointer; flex-shrink: 0; } .news-chat-settings-toggle:hover { background: #e4e6eb; } .news-chat-settings-toggle--active { background: #dbe7f3; color: #0084ff; } .news-chat-settings { flex-shrink: 0; border-bottom: 1px solid #e4e6eb; background: #f7f8fa; padding: 8px 10px; } .news-chat-settings__chip, .news-chat-settings__seen-btn { min-height: 28px; box-sizing: border-box; } .news-chat-settings__chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: #fff; border: 1px solid #e4e6eb; font-size: 12px; font-weight: 600; color: #050505; white-space: nowrap; } .news-chat-settings__chip--members { padding: 3px 10px 3px 10px; gap: 8px; } .news-chat-settings__chip-label { font-size: 12px; font-weight: 600; color: #050505; white-space: nowrap; } .news-chat-info-members__trigger { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; min-height: 28px; } .news-chat-info-members__chevron { font-size: 9px; color: #65676b; transition: transform 0.18s ease; flex-shrink: 0; margin-right: -2px; } .news-chat-settings__seen-chevron { font-size: 9px; color: #65676b; transition: transform 0.18s ease; flex-shrink: 0; margin-left: 2px; } .news-chat-settings__chip-av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .news-chat-settings__dropdown { margin-top: 8px; } .news-chat-info-members__detail { padding: 12px 14px; border: 1px solid #e4e6eb; border-radius: 10px; background: #fff; } .news-chat-info-members__detail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .news-chat-info-members__detail-title { font-size: 14px; font-weight: 700; color: #050505; } .news-chat-info-members__edit-btn { padding: 5px 12px; border: 1px solid #e4e6eb; border-radius: 999px; background: #f0f2f5; font-size: 12px; font-weight: 700; color: #0084ff; cursor: pointer; } .news-chat-info-members__edit-btn.is-active { background: #dbe7f3; border-color: #0084ff; } .news-chat-settings__member-stack { display: inline-flex; align-items: center; } .news-chat-settings__member-av { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; margin-left: -6px; background: #e4e6eb; box-shadow: 0 0 0 1px #e4e6eb; } .news-chat-settings__member-av:first-child { margin-left: 0; } .news-chat-settings__member-av img { width: 100%; height: 100%; object-fit: cover; display: block; } .news-chat-members--detail { display: flex; flex-wrap: wrap; gap: 8px; } .news-chat-members--detail .news-chat-settings__chip { font-size: 14px; padding: 5px 14px 5px 5px; gap: 8px; } .news-chat-members--detail .news-chat-settings__chip-av { width: 36px; height: 36px; } .news-chat-member-chip .news-chat-member-remove { display: none; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 50%; background: #fee; color: #e41e3f; font-size: 12px; text-decoration: none; line-height: 1; } .news-chat-members--detail.is-editing .news-chat-member-remove, .news-chat-info-members__detail.is-editing .news-chat-member-remove, .news-chat-info-members__detail.is-editing .btn-remove-user { display: inline-flex !important; position: static; left: auto; top: auto; padding: 0; background: #fee; color: #e41e3f; font-size: 12px; } .news-chat-add-members { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e4e6eb; } .news-chat-add-members__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .news-chat-settings__seen-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 12px; min-height: 28px; height: 28px; border: 1px solid #e4e6eb; border-radius: 999px; background: #fff; font-size: 12px; font-weight: 600; color: #65676b; cursor: pointer; white-space: nowrap; } .news-chat-seen-list--detail { padding: 12px 14px; border: 1px solid #e4e6eb; border-radius: 10px; background: #fff; } .news-chat-seen-list--detail .news-chat-seen-chip { font-size: 13px; padding: 6px 12px; } .news-chat-settings__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #e4e6eb; } .news-chat-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; background: #e4e6eb; color: #050505; font-size: 12px; text-decoration: none; } .news-chat-tag:hover { background: #dbe7f3; color: #0084ff; } .news-chat-seen-list { display: flex; flex-wrap: wrap; gap: 6px; } .news-chat-seen-chip { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #e4e6eb; color: #65676b; } .news-chat-action { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #0084ff; text-decoration: none; background: none; border: none; cursor: pointer; padding: 0; } .news-chat-action--danger { color: #e41e3f; } .news-chat-body { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column-reverse; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 10px; } .news-chat-messages { display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; width: 100%; background: transparent; } .news-chat-bottom-anchor { flex-shrink: 0; width: 100%; height: 1px; pointer-events: none; overflow-anchor: auto; } .news-chat-composer-spacer { flex-shrink: 0; width: 100%; height: 0; pointer-events: none; } .news-chat-orphan-notice { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0 4px; padding: 14px 12px; border-radius: 12px; background: rgba(228, 30, 63, 0.08); border: 1px solid rgba(228, 30, 63, 0.22); text-align: center; } .news-chat-orphan-notice__text { font-size: 13px; line-height: 1.45; color: #65676b; } .news-chat-date-divider { display: flex; justify-content: center; align-self: center; width: 100%; margin: 2px 0; } .news-chat-date-divider span { display: inline-block; font-size: 11px; font-weight: 600; line-height: 1.2; color: #65676b; background: #f0f2f5; padding: 5px 12px; border-radius: 999px; box-shadow: none; } .news-chat-msg { display: flex; max-width: 100%; content-visibility: auto; contain-intrinsic-size: auto 88px; } .news-chat-msg--mine { justify-content: flex-end; } .news-chat-msg--other, .news-chat-msg--starter.news-chat-msg--other { justify-content: flex-start; } .news-chat-msg__col { max-width: min(82%, 560px); min-width: 0; } .news-chat-msg--mine .news-chat-msg__col { margin-left: auto; } .news-chat-msg__row { display: flex; align-items: flex-end; gap: 8px; } .news-chat-msg__row>.news-chat-bubble { flex: 1; min-width: 0; max-width: 100%; } .news-chat-msg--mine .news-chat-msg__row { flex-direction: row-reverse; } .news-chat-msg__avatar { flex-shrink: 0; width: 28px; align-self: flex-end; line-height: 0; } .news-chat-msg__avatar .avatar-wrapper { margin: 0; width: 28px; height: 28px; box-sizing: border-box; border-width: 1px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .news-chat-msg__extras { margin-top: 2px; padding-left: 36px; } .news-chat-msg--mine .news-chat-msg__extras { padding-left: 0; padding-right: 36px; display: flex; flex-direction: column; align-items: flex-end; } .news-chat-msg__meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; padding: 0 36px; font-size: 11px; color: #65676b; } .news-chat-msg--mine .news-chat-msg__meta { justify-content: flex-end; } .news-chat-msg--other .news-chat-msg__meta, .news-chat-msg--starter.news-chat-msg--other .news-chat-msg__meta { justify-content: flex-start; } .news-chat-msg__author { font-weight: 700; color: #0084ff; } .news-chat-bubble { padding: 8px 12px; border-radius: 18px; font-size: 14px; line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); } .news-chat-msg--other .news-chat-bubble, .news-chat-msg--starter.news-chat-msg--other .news-chat-bubble { background: #e4e6eb; color: #050505; border-bottom-left-radius: 4px; } .news-chat-msg--mine .news-chat-bubble { background: #5a9fd4; color: #fff; border-bottom-right-radius: 4px; } .news-chat-msg--mine .news-chat-bubble a:not(.news-chat-quote):not(.news-order-mention) { color: #fff; text-decoration: underline; } .news-chat-bubble--starter { background: #e4e6eb; color: #050505; border: none; border-bottom-left-radius: 4px; max-width: 100%; } .news-chat-msg--starter.news-chat-msg--mine .news-chat-bubble--starter { background: linear-gradient(135deg, #5a9fd4, #4a85c4); color: #fff; border: none; border-bottom-right-radius: 4px; border-bottom-left-radius: 18px; } .news-chat-starter-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .news-chat-msg--starter.news-chat-msg--mine .news-chat-starter-title { border-bottom-color: rgba(255, 255, 255, 0.25); } .news-chat-bubble__text.post-content { padding: 0; border: none; margin: 0; } .news-chat-bubble:has(.news-chat-reply-stack) { padding: 8px 12px; } .news-chat-reply-stack { display: block; min-width: 0; } .news-chat-quote { display: block; margin: 0 0 8px; padding: 6px 10px; border: none; border-radius: 10px; background: #e8eaed; text-decoration: none !important; color: inherit; cursor: pointer; transition: background 0.15s ease; } .news-chat-quote:hover { background: #dfe1e6; text-decoration: none !important; } .news-chat-quote__author { display: block; font-size: 12px; font-weight: 700; color: #0084ff; margin-bottom: 2px; text-decoration: none; } .news-chat-quote__text { display: -webkit-box; font-size: 13px; line-height: 1.35; color: #65676b; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-decoration: none; } .news-chat-reply-body { margin: 0; padding: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; } .news-order-mention { display: inline; color: #2563eb; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(37, 99, 235, 0.35); white-space: nowrap; } .news-order-mention:hover { color: #1d4ed8; border-bottom-color: currentColor; } .news-order-mention .fa-file-invoice { font-size: 0.92em; opacity: 0.9; } .news-chat-msg--mine .news-order-mention { color: #dbeafe; border-bottom-color: rgba(219, 234, 254, 0.45); } .news-chat-msg--mine .news-order-mention:hover { color: #fff; } .news-product-tag-block { display: block; clear: both; margin: 2px 0 0; text-align: left; line-height: 0; } .news-product-tag-block+*, .news-product-tag-block~* { line-height: 1.45; } .news-product-tag { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; vertical-align: top; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; max-width: 96px; text-align: left; font: inherit; color: inherit; line-height: normal; } .news-product-tag__frame { display: flex; flex-direction: column; align-items: stretch; border: 2px solid #cfd8dc; border-radius: 10px; padding: 5px; background: #fff; line-height: normal; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08); overflow: hidden; } .news-product-tag__img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 6px; } .news-product-tag__codes { display: flex; flex-direction: column; align-items: center; width: 72px; margin-top: 4px; gap: 1px; } .news-product-tag__code { display: block; width: 100%; padding: 0 2px; text-align: center; word-break: break-word; white-space: normal; } .news-product-tag__code--customer { font-size: 10px; font-weight: 700; line-height: 1.2; color: #333333; } .news-product-tag__code--internal { font-size: 9px; font-weight: 600; line-height: 1.2; color: #666666; } .news-product-tag:hover .news-product-tag__frame { border-color: #90caf9; } .news-product-tag:focus-visible { outline: 2px solid #1976d2; outline-offset: 2px; border-radius: 10px; } .news-chat-msg--mine .news-product-tag__frame { background: #fff; border-color: rgba(255, 255, 255, 0.55); } .news-chat-msg--mine .news-chat-bubble .news-chat-quote { background: #e8eaed; } .news-chat-msg--mine .news-chat-bubble .news-chat-quote:hover { background: #dfe1e6; } .news-chat-msg--mine .news-chat-bubble .news-chat-quote__author { color: #0084ff; } .news-chat-msg--mine .news-chat-bubble .news-chat-quote__text { color: #65676b; } .news-chat-msg--other .news-chat-bubble .news-chat-quote, .news-chat-msg--starter.news-chat-msg--other .news-chat-bubble .news-chat-quote { background: #fff; } .news-chat-msg--other .news-chat-bubble .news-chat-quote:hover, .news-chat-msg--starter.news-chat-msg--other .news-chat-bubble .news-chat-quote:hover { background: #f7f8fa; } .news-chat-msg.is-quote-target .news-chat-bubble { animation: news-chat-quote-target 1.25s ease; } @keyframes news-chat-quote-target { 0%, 100% { filter: none; } 20%, 55% { filter: brightness(1.08); } } .news-chat-reply-quote { display: flex; align-items: flex-start; gap: 8px; flex: 1 1 100%; width: 100%; margin-bottom: 8px; padding: 8px 10px; border-left: 3px solid #0084ff; border-radius: 10px; background: #f0f2f5; box-sizing: border-box; } .news-chat-reply-quote__body { flex: 1; min-width: 0; } .news-chat-reply-quote__author { display: block; font-size: 12px; font-weight: 700; color: #0084ff; margin-bottom: 2px; } .news-chat-reply-quote__text { display: -webkit-box; font-size: 13px; line-height: 1.35; color: #65676b; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .news-chat-reply-quote__close { flex-shrink: 0; width: 28px; height: 28px; border: none; border-radius: 50%; background: #e4e6eb; color: #65676b; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .news-chat-reply-quote__close:hover { background: #d8dadf; } .news-chat-msg__actions { display: flex; gap: 4px; flex-shrink: 0; align-self: center; margin: 0 0 4px; opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .news-chat-msg__actions .news-chat-action { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 18px; border-radius: 50%; text-decoration: none; } .news-chat-msg__actions .news-chat-action:hover { text-decoration: none; background: rgba(0, 132, 255, 0.12); } .news-chat-msg__actions .news-chat-action--danger:hover { background: rgba(228, 30, 63, 0.12); } .news-chat-msg:hover .news-chat-msg__actions { opacity: 1; pointer-events: auto; } .news-chat-msg.is-actions-visible .news-chat-msg__actions { opacity: 1; pointer-events: auto; } .news-chat-edited { margin-top: 4px; padding: 0; border: none; background: none; font-size: 10px; color: #65676b; cursor: pointer; } .news-chat-history { display: none; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.9); border: 1px solid #e4e6eb; font-size: 12px; } .news-chat-history__time { font-size: 10px; color: #65676b; margin-bottom: 4px; } .news-chat-edit-form { width: 100%; margin-top: 6px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid #e4e6eb; box-sizing: border-box; } .news-chat-edit-form textarea { width: 100%; min-height: 80px; box-sizing: border-box; margin-top: 6px; resize: vertical; } .news-chat-edit-form__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; } .news-edit-post-overlay { z-index: 10050; } .news-edit-post-modal { text-align: left; width: min(680px, calc(100vw - 32px)); max-width: min(680px, calc(100vw - 32px)); } .news-edit-post-form.edit-form textarea, .news-edit-post-form .news-edit-post-form__textarea, #newsEditPostContent { display: block; width: 100%; height: 200px; min-height: 200px; box-sizing: border-box; margin-top: 12px; resize: vertical; font-size: 14px; line-height: 1.45; transition: none; } .news-edit-post-form__actions .button { display: inline-flex; align-items: center; gap: 6px; } #newsEditPostModalTitle i { margin-right: 6px; } .news-edit-post-form .news-chat-fmt-toolbar { margin-top: 12px; } .news-edit-post-form__actions { margin-top: 16px; } .news-chat-fmt-toolbar { margin-bottom: 0; } .news-chat-composer { flex-shrink: 0; position: sticky; bottom: 0; z-index: 20; border-top: 1px solid #e4e6eb; background: #fff; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); margin-top: auto; } .news-chat-composer__form.reply-form { position: static; bottom: auto; width: 100%; margin: 0; padding: 0; border: none; background: transparent; box-shadow: none; z-index: auto; } .news-chat-composer__input-row { display: flex; align-items: center; gap: 6px; width: 100%; flex: 1 1 100%; min-width: 0; } .news-chat-composer__expand { width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: #0084ff; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; font-size: 15px; } .news-chat-composer__help { width: 28px; height: 28px; border: none; border-radius: 50%; background: transparent; color: #65676b; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; font-size: 15px; } .news-chat-composer__help:hover { background: rgba(0, 0, 0, 0.06); color: #0084ff; } .news-chat-composer__expand:hover { background: rgba(0, 132, 255, 0.08); } .news-chat-composer.is-fmt-open .news-chat-composer__expand i { transform: rotate(90deg); } .news-chat-composer__expand i { transition: transform 0.15s ease; } .news-chat-composer__toolbar-wrap { display: none; flex: 1 1 100%; width: 100%; min-width: 0; margin: 0; overflow: hidden; } .news-chat-composer__toolbar-wrap .editor-toolbar { padding-top: 2px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 0; gap: 4px; } .news-chat-composer__toolbar-wrap .editor-toolbar button { flex-shrink: 0; margin: 0; padding: 5px 8px; font-size: 12px; } .news-chat-composer__force-wrap { width: 100%; margin: 0; padding: 8px 4px 2px; box-sizing: border-box; border-top: 1px solid #e4e6eb; } .news-chat-composer__force { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #65676b; cursor: pointer; margin: 0; padding: 0; box-sizing: border-box; } .news-chat-composer__input-wrap { flex: 1; min-width: 0; position: relative; } .news-mention-input-wrap { position: relative; } .news-mention-dropdown { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 40; max-height: 240px; overflow-y: auto; overflow-x: hidden; border: 1px solid #dce1e6; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); padding: 4px; box-sizing: border-box; } .news-mention-dropdown.is-loading { opacity: 0.92; } .news-mention-dropdown__item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; border-radius: 8px; background: transparent; padding: 6px 8px; text-align: left; cursor: pointer; font: inherit; color: inherit; box-sizing: border-box; } .news-mention-dropdown__item.is-product { cursor: default; flex-wrap: wrap; align-items: flex-start; } .news-mention-dropdown__item.is-product:hover { background: transparent; } .news-mention-dropdown__product-head { display: flex; align-items: stretch; gap: 10px; flex: 1 1 calc(100% - 34px); min-width: 0; } .news-mention-dropdown__photo-wrap { flex-shrink: 0; display: flex; align-self: stretch; } .news-mention-dropdown__product-head .news-mention-dropdown__photo-wrap .news-mention-dropdown__photo, .news-mention-dropdown__product-head .news-mention-dropdown__photo-wrap .news-mention-dropdown__photo--empty { width: auto; height: 100%; min-height: 100%; aspect-ratio: 1; min-width: 48px; max-width: 72px; } .news-mention-dropdown__product-head .news-mention-dropdown__code-badges { flex: 1; min-width: 0; justify-content: center; } .news-mention-dropdown__product-sub { flex: 1 1 100%; min-width: 0; padding: 0 2px 0 0; } .news-mention-dropdown__product-sub .news-mention-dropdown__sub { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-mention-dropdown__item:hover, .news-mention-dropdown__item.is-active { background: #f0f2f5; } .news-mention-dropdown__code-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; } .news-mention-dropdown__code-badge { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid #dce1e6; border-radius: 999px; padding: 3px 8px 3px 4px; background: #fff; cursor: pointer; font: inherit; color: inherit; box-sizing: border-box; } .news-mention-dropdown__code-badge.is-internal { background: #f7f8fa; } .news-mention-dropdown__code-badge:hover, .news-mention-dropdown__code-badge.is-active { border-color: #0084ff; background: #eef6ff; } .news-mention-dropdown__badge-tag { flex-shrink: 0; font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: #65676b; background: #eef0f3; border-radius: 999px; padding: 2px 5px; } .news-mention-dropdown__code-badge.is-internal .news-mention-dropdown__badge-tag { color: #5f6368; background: #e8ecf1; } .news-mention-dropdown__badge-code { font-size: 12px; font-weight: 700; color: #111; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-mention-dropdown__photo { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; flex-shrink: 0; border: 1px solid #e4e6eb; background: #fff; } .news-mention-dropdown__photo--empty, .news-mention-dropdown__photo--order { display: inline-flex; align-items: center; justify-content: center; color: #65676b; font-size: 13px; } .news-mention-dropdown__photo-wrap .news-mention-dropdown__photo--empty { display: flex; height: 100%; width: auto; aspect-ratio: 1; } .news-mention-dropdown__photo--order { color: #2563eb; background: #eef4ff; } .news-mention-dropdown__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .news-mention-dropdown__label { font-size: 13px; font-weight: 700; color: #111; line-height: 1.25; word-break: break-word; } .news-mention-dropdown__sub { font-size: 11px; color: #65676b; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-mention-dropdown__type { flex-shrink: 0; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: #65676b; background: #eef0f3; border-radius: 999px; padding: 2px 6px; } .news-mention-dropdown__item.is-order .news-mention-dropdown__type { color: #1d4ed8; background: #dbeafe; } .news-mention-dropdown__empty { padding: 10px 12px; font-size: 12px; color: #65676b; text-align: center; } .news-edit-post-form__mention-wrap { margin-top: 8px; } .news-edit-post-form__mention-wrap .news-mention-dropdown { bottom: auto; top: calc(100% + 6px); } .news-chat-composer__input { width: 100%; min-height: 36px; max-height: 120px; padding: 8px 14px; border: 1px solid #e4e6eb; border-radius: 20px; background: #f0f2f5; font-size: 14px; line-height: 1.4; resize: none; box-sizing: border-box; font-family: inherit; } .news-chat-composer__input:focus { outline: none; border-color: #0084ff; background: #fff; } .news-chat-composer__send { width: 40px; height: 40px; border: none; border-radius: 50%; background: #0084ff; color: #fff; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; } .news-chat-composer__send:hover { background: #006fe6; } .news-composer-help-modal { width: min(400px, calc(100vw - 32px)); max-width: min(400px, calc(100vw - 32px)); padding: 18px 20px 20px; } .news-composer-help-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .news-composer-help-modal__close { width: 32px; height: 32px; border: none; border-radius: 50%; background: #f0f2f5; color: #65676b; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; } .news-composer-help-modal__close:hover { background: #e4e6eb; color: #111; } .news-composer-help-list { margin: 0; padding: 0 0 0 18px; text-align: left; font-size: 14px; line-height: 1.5; color: #333; } .news-composer-help-list li+li { margin-top: 8px; } .news-composer-help-list code { font-size: 12px; padding: 1px 5px; border-radius: 4px; background: #f0f2f5; color: #111; } .news-composer-help-modal__actions { margin-top: 16px; text-align: right; } .news-chat-composer__readonly { text-align: center; color: #65676b; font-size: 13px; padding: 8px; } @media (max-width: 900px) { .news-thread-card { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "avatar info" "stats stats" "users users"; gap: 8px 12px; } .news-thread-card__avatar { grid-area: avatar; } .news-thread-card__main { grid-area: info; min-width: 0; } .news-thread-card__stats { grid-area: stats; flex: none; display: flex; justify-content: space-between; flex-wrap: wrap; } .news-thread-card__members { grid-area: users; flex: none; } .news-chat-msg__col { max-width: 92%; width: 100%; } .news-chat-msg__meta { padding: 0 4px 0 36px; } .news-chat-msg--mine .news-chat-msg__meta { padding: 0 36px 0 4px; } .news-chat-msg__extras { padding-left: 36px; padding-right: 4px; } .news-chat-msg--mine .news-chat-msg__extras { padding-right: 36px; padding-left: 4px; } .news-chat-msg__actions { display: none; order: 10; flex: 1 1 100%; width: 100%; justify-content: flex-start; align-self: stretch; padding-left: 36px; margin: 2px 0 0; box-sizing: border-box; opacity: 1; pointer-events: none; overflow: hidden; } .news-chat-msg:hover .news-chat-msg__actions { pointer-events: none; } .news-chat-msg.is-actions-visible .news-chat-msg__actions { pointer-events: auto; } .news-chat-msg__row { flex-wrap: wrap; gap: 6px 8px; width: 100%; } .news-chat-msg__row>.news-chat-bubble { flex: 0 1 auto; width: fit-content; max-width: calc(100% - 36px); } .news-chat-msg--mine .news-chat-msg__actions { justify-content: flex-end; padding-left: 0; padding-right: 36px; } } @media (max-width: 1199px) { .main:has(.news-page--thread) { padding-bottom: 0; overflow: hidden; height: calc(100dvh - 52px); box-sizing: border-box; } .main-content-card:has(.news-page--thread) { height: 100%; min-height: 0; max-height: 100%; } .news-page--thread .news-chat-composer { position: fixed; left: 0; right: 0; bottom: 52px; width: auto; max-width: calc(100vw - 20px); margin: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 1850; box-sizing: border-box; } .news-page--thread .news-mention-dropdown { border-left: 0; border-right: 0; max-height: min(44vh, 320px); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); } .news-page--thread .news-mention-dropdown__item { padding: 8px 10px; } .news-page--thread .news-mention-dropdown__product-head { gap: 12px; } .news-page--thread .news-mention-dropdown__product-head .news-mention-dropdown__photo-wrap .news-mention-dropdown__photo, .news-page--thread .news-mention-dropdown__product-head .news-mention-dropdown__photo-wrap .news-mention-dropdown__photo--empty { min-width: 56px; max-width: 84px; } .news-page--thread .news-mention-dropdown__badge-code { max-width: none; white-space: normal; word-break: break-word; } .news-page--thread .news-mention-dropdown__code-badge { width: 100%; max-width: 100%; } } .gantt { width: 100%; box-sizing: border-box; --gantt-grid: #e8edf0; --gantt-header-bg: #f5f7fa; --gantt-row-alt: #fafbfc; } .ps-month-grid-wrapper { margin: 0; background: #fafbfc; border: 1px solid #e0e0e0; border-radius: 5px; padding: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .ps-month-grid { display: grid; grid-template-columns: repeat(12, minmax(88px, 1fr)); gap: 8px; width: max-content; min-width: 100%; } .ps-month-chip { border: 1px solid #e0e0e0; background: #fff; border-radius: 8px; padding: 8px 10px; line-height: 1.3; text-align: left; box-sizing: border-box; } .ps-month-chip__head { margin-bottom: 4px; font-size: 13px; } .ps-month-chip__row { font-size: 12px; margin-top: 2px; } .ps-month-chip__row--remain { margin-top: 4px; } .ps-month-chip--peak { border-color: #1565c0; background: #f3f8ff; box-shadow: inset 0 0 0 1px rgba(21, 101, 192, 0.08); } .ps-priority-list { display: flex; flex-direction: column; } .ps-priority-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #eceff1; } .ps-priority-row:last-child { border-bottom: none; padding-bottom: 0; } .ps-priority-row:first-child { padding-top: 0; } .ps-priority-row-order { line-height: 1.35; } .ps-priority-row-customer { margin-top: 2px; line-height: 1.3; } .ps-priority-row-meta { flex: 0 0 auto; text-align: right; font-size: 14px; line-height: 1.35; white-space: nowrap; } .gantt-header, .gantt-row { display: grid; grid-template-columns: clamp(220px, 28vw, 320px) 1fr; gap: 12px; align-items: stretch; } .gantt-header { position: sticky; top: 0; z-index: 2; background: var(--gantt-header-bg); padding: 2px 0; border-bottom: 1px solid var(--gantt-grid); gap: 0; width: max-content; min-width: 100%; box-sizing: border-box; } .gantt-header .gantt-col--meta { display: flex; align-items: center; padding-top: 2px; padding-bottom: 2px; } .gantt-header .gantt-col--timeline { border-left: none; padding: 2px 0 2px 12px; } .gantt-header .gantt-col { background: inherit; } .gantt-row { border-bottom: 1px solid var(--gantt-grid); width: max-content; min-width: 100%; box-sizing: border-box; background: #fff; } .gantt-body .gantt-row:nth-child(even) { background: var(--gantt-row-alt); } .gantt-col--timeline { position: relative; border-left: 1px solid var(--gantt-grid); padding: 8px 0 8px 12px; background: transparent; } .gantt-body { margin-top: 0; } .gantt-col { box-sizing: border-box; } .gantt-col--meta { padding: 8px 8px 8px 4px; overflow: hidden; min-width: 220px; } .gantt-meta-subrow { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; } .gantt-meta-subrow-name { flex: 1 1 auto; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gantt-meta-subrow-remaining { flex: 0 0 auto; text-align: right; white-space: nowrap; } .gantt-row.bglightblue .gantt-col--meta, .gantt-row.bgwhite .gantt-col--meta { background-color: inherit; } .gantt-timeline-inner { position: relative; background: transparent; } .gantt-body .gantt-col--timeline, .gantt-body .gantt-timeline-inner { background: inherit; } .gantt-remaining-total { padding: 0 8px 0 4px; line-height: 1.15; min-height: 18px; visibility: hidden; display: flex; align-items: center; font-size: 12px; } .gantt-remaining-total.is-visible { visibility: visible; } .gantt-month-axis { position: relative; height: 20px; overflow: visible; padding: 0 12px; } .gantt-month-tick { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: #666; white-space: nowrap; line-height: 20px; } .gantt-month-tick--edge-left { transform: translateX(0); } .gantt-month-tick--edge-right { transform: translateX(-100%); } .gantt-month-tick--current { z-index: 2; } .gantt-month-tick-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 18px; padding: 0 7px; border-radius: 999px; background: #1565c0; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(21, 101, 192, 0.22); vertical-align: middle; } .gantt-month-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .gantt-month-line { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(0, 0, 0, 0.25); } .gantt-line-dates { position: relative; height: 14px; margin-bottom: 4px; line-height: 1.1; overflow: visible; } .gantt-date-pin { position: absolute; top: 0; font-size: 12px; font-weight: 600; white-space: nowrap; } .gantt-date-pin--start { transform: translateX(0); } .gantt-date-pin--end { transform: translateX(-100%); } .gantt-lane { position: relative; height: 22px; border-radius: 6px; background: rgba(0, 0, 0, 0.04); overflow: hidden; z-index: 1; box-sizing: border-box; } .gantt-bar { position: absolute; top: 2px; height: 18px; border-radius: 4px; background: #2a9d8f; box-shadow: none; min-width: 10px; transition: width 0.9s ease-out; z-index: 2; } @media (max-width: 1199px) { .gantt { min-width: 980px; } .gantt-timeline-inner { min-width: 980px; } #ganttScrollWrapper.scroll-table-wrapper { max-width: 100%; overflow-x: auto; overflow-y: clip; } } @media (min-width: 1200px) { #ganttScrollWrapper.scroll-table-wrapper { overflow-x: visible; } } .gantt-bar--late { background: #c62828; } .gantt-bar--soon { background: #1565c0; } .gantt-bar--ok { background: #2a9d8f; } .gantt-bar-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; pointer-events: none; } #qrImage { opacity: 0; transition: opacity 0.4s ease; } #qrImage.loaded { opacity: 1; } .bgblue { background-color: #005c99 !important; } .bgwhite { background-color: #fff !important; } .bgxlightblue { background-color: #f0f7ff !important; } .bglightred { background-color: #fbf0f0 !important; } .bglightgreen { background-color: #e0ffe0 !important; } .bglightgray { background-color: #f1efef !important; } .piecework-detail-expand-panel { margin-bottom: 15px; padding: 12px 10px; border-radius: 8px; border: 1px solid #eaeaea; } .piecework-detail-expand-panel .piecework-compare-scroll, .piecework-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 12px; } .piecework-compare-columns--stat { --pw-stat-c1: #d9e8f5; --pw-stat-c2: #f3e4e6; --pw-stat-c3: #d9f0e3; --pw-stat-c4: #ffecd4; --pw-stat-col-border: rgba(20, 60, 100, 0.14); --pw-stat-title-stripe: rgba(0, 90, 140, 0.28); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; min-width: 680px; box-sizing: border-box; } .piecework-compare-columns--stat .piecework-compare-col { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; border-radius: 8px; border: 1px solid var(--pw-stat-col-border); min-width: 0; box-sizing: border-box; } .piecework-compare-columns--stat .piecework-compare-col:nth-child(1) { background: var(--pw-stat-c1); } .piecework-compare-columns--stat .piecework-compare-col:nth-child(2) { background: var(--pw-stat-c2); } .piecework-compare-columns--stat .piecework-compare-col:nth-child(3) { background: var(--pw-stat-c3); } .piecework-compare-columns--stat .piecework-compare-col:nth-child(4) { background: var(--pw-stat-c4); } .piecework-detail-expand-panel .piecework-compare-columns--stat .pwc-title, .piecework-compare-columns--stat .pwc-title { font-weight: 700; line-height: 1.35; padding: 0 0 8px 0; margin: 0; border-bottom: 2px solid var(--pw-stat-title-stripe); } .piecework-detail-expand-panel .piecework-compare-columns--stat .pwc-value, .piecework-compare-columns--stat .pwc-value { font-size: 1.15rem; line-height: 1.4; margin: 0; padding: 0; } .piecework-detail-expand-panel .piecework-compare-columns--stat .pwc-extra, .piecework-compare-columns--stat .pwc-extra { font-size: 0.85rem; line-height: 1.35; color: #4a5568; margin: 0; padding: 0; } .piecework-detail-expand-panel .piecework-compare-columns--stat .pwc-sub, .piecework-detail-expand-panel .piecework-compare-columns--stat .pwc-foot, .piecework-compare-columns--stat .pwc-sub, .piecework-compare-columns--stat .pwc-foot { font-size: 0.88rem; line-height: 1.4; color: #333; margin: 0; padding: 0; } .piecework-detail-expand-panel .piecework-compare-columns--stat .pwc-muted, .piecework-compare-columns--stat .pwc-muted { color: #999; } .summary-box-wrapper.piecework-expand-stats { gap: 10px; align-items: flex-start; } .piecework-expand-stats .summary-box { --pw-stat-summary-bg: #edf3f9; --pw-stat-summary-border: #c5d5e6; background: var(--pw-stat-summary-bg) !important; border: 1px solid var(--pw-stat-summary-border) !important; border-radius: 6px; } .page-shell__tabs { padding: 0; } .page-shell--kpi-below .order-tabs--flush-below { margin-bottom: 0; } .page-body-flush { --page-gutter: 10px; margin-inline: calc(-1 * var(--page-gutter)); padding-inline: var(--page-gutter); padding-block: 0; } .page-body-flush>table, .page-body-flush #piecework-orders-table { margin-top: 0; } .kpi-strip { --kpi-bg: #e8eef4; --kpi-card-bg: #ffffff; --kpi-card-border: #d0dae6; --kpi-label: #5c6b7a; --kpi-value: #1a2b3c; --kpi-unit: #6b7c8f; --kpi-accent: #0077b6; --kpi-accent-soft: rgba(0, 119, 182, 0.12); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; background: var(--kpi-bg); border-radius: 0; border-bottom: 1px solid var(--kpi-card-border); box-sizing: border-box; } .kpi-strip--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi-strip--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpi-strip--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .kpi-strip--cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .kpi-strip--cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .packinglist-kpi-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; background: var(--kpi-bg, #e8eef4); border-bottom: 1px solid var(--kpi-card-border, #d0dae6); box-sizing: border-box; } .page-body-flush .scroll-table-hscroll-shell, .page-body-flush+.scroll-table-hscroll-shell { margin-top: 0; } .kpi-strip__card { display: flex; align-items: flex-start; gap: 12px; min-width: 0; padding: 12px 14px; background: var(--kpi-card-bg); border: none; border-radius: 0; border-right: 1px solid var(--kpi-card-border); border-top: 3px solid var(--kpi-accent); box-shadow: none; box-sizing: border-box; } .kpi-strip__card:last-child { border-right: none; } .kpi-strip__card--primary { --kpi-accent: #1565c0; --kpi-accent-soft: rgba(21, 101, 192, 0.12); } .kpi-strip__card--danger { --kpi-accent: #c62828; --kpi-accent-soft: rgba(198, 40, 40, 0.12); } .kpi-strip__card--warning { --kpi-accent: #f9a825; --kpi-accent-soft: rgba(249, 168, 37, 0.14); } .kpi-strip__card--success { --kpi-accent: #2e7d32; --kpi-accent-soft: rgba(46, 125, 50, 0.12); } .kpi-strip__card--money { --kpi-accent: #00897b; --kpi-accent-soft: rgba(0, 137, 123, 0.12); } .kpi-strip__card--info { --kpi-accent: #0288d1; --kpi-accent-soft: rgba(2, 136, 209, 0.12); } .kpi-strip__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 0; background: var(--kpi-accent-soft); color: var(--kpi-accent); font-size: 16px; line-height: 1; } .kpi-strip__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .kpi-strip__label { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--kpi-label); letter-spacing: 0.01em; } .kpi-strip__value { font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--kpi-value); font-variant-numeric: tabular-nums; } .kpi-strip__value--money { color: var(--kpi-accent); } .kpi-strip__unit { font-size: 13px; font-weight: 600; color: var(--kpi-unit); } .kpi-strip--compact .kpi-strip__card { gap: 10px; padding: 10px 12px; border-top-width: 2px; } .kpi-strip--compact .kpi-strip__icon { width: 28px; height: 28px; font-size: 14px; } .kpi-strip--compact .kpi-strip__body { gap: 3px; } .kpi-strip--compact .kpi-strip__label { font-size: 12px; line-height: 1.35; } .kpi-strip--compact .kpi-strip__value { font-size: 15px; line-height: 1.25; } .kpi-strip--compact .kpi-strip__value--money { color: var(--kpi-accent); } .kpi-strip--compact .kpi-strip__unit { font-size: 11px; } .kpi-strip__label--with-action { display: inline-flex; align-items: center; gap: 6px; } .kpi-strip__label--with-badge { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; } .kpi-strip__pct-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: auto; padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: 0.02em; color: #fff; white-space: nowrap; } .kpi-strip__pct-badge--ok { background: #2e7d32; } .kpi-strip__pct-badge--warn { background: #d90429; } .kpi-strip--compact .kpi-strip__pct-badge { font-size: 11px; padding: 3px 9px; } .kpi-strip__label-action { display: inline-flex; align-items: center; font-size: 14px; line-height: 1; opacity: 0.85; text-decoration: none; } .kpi-strip__label-action:hover { opacity: 1; } .kpi-strip__value--text { font-size: 16px; font-weight: 600; line-height: 1.3; } .kpi-strip--compact .kpi-strip__value--text { font-size: 14px; font-weight: 600; line-height: 1.3; } .kpi-strip--compact .kpi-strip__value--text.kpi-strip__value--stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .kpi-strip--compact .kpi-strip__value--text .kpi-strip__value-link { font-size: inherit; font-weight: inherit; line-height: inherit; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-decoration: none; } @media (max-width: 1199px) { .kpi-strip__card { grid-column: span 1; border-bottom: 1px solid var(--kpi-card-border); } .kpi-strip__card:nth-child(3n) { border-right: none; } .kpi-strip--cols-5 .kpi-strip__card--money, .kpi-strip--cols-3.kpi-strip--mobile-last-full .kpi-strip__card:last-child, .kpi-strip--mobile-last-full .kpi-strip__card:last-child, .kpi-strip--cols-6.kpi-strip--mobile-last-full .kpi-strip__card:nth-child(5), .kpi-strip--cols-6.kpi-strip--mobile-last-full .kpi-strip__card:nth-child(6) { grid-column: span 1; border-right: none; } .kpi-strip--compact .kpi-strip__card:nth-child(2n), .kpi-strip--compact .kpi-strip__card:nth-child(4n) { border-right: 1px solid var(--kpi-card-border); } .kpi-strip--compact .kpi-strip__card:nth-child(3n) { border-right: none; } } @media (max-width: 767px) { .kpi-strip, .kpi-strip--cols-3, .kpi-strip--cols-5, .kpi-strip--cols-4, .kpi-strip--cols-6, .kpi-strip--cols-7, .kpi-strip--cols-8, .kpi-strip--mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0; } .kpi-strip--mobile-1 { grid-template-columns: 1fr; } .kpi-strip__card { border-bottom: 1px solid var(--kpi-card-border); } .kpi-strip__card:nth-child(3n) { border-right: 1px solid var(--kpi-card-border); } .kpi-strip__card:nth-child(2n) { border-right: none; } .kpi-strip--mobile-1 .kpi-strip__card { border-right: none; grid-column: span 1; } .kpi-strip--mobile-1 .kpi-strip__card:nth-child(2n) { border-right: none; } .kpi-strip--cols-3 .kpi-strip__card, .kpi-strip--cols-4 .kpi-strip__card, .kpi-strip--cols-6 .kpi-strip__card, .kpi-strip--cols-7 .kpi-strip__card, .kpi-strip--cols-8 .kpi-strip__card { grid-column: span 1; } .kpi-strip--cols-5 .kpi-strip__card--money, .kpi-strip--cols-3.kpi-strip--mobile-last-full .kpi-strip__card:last-child, .kpi-strip--mobile-last-full .kpi-strip__card:last-child { grid-column: span 2; border-right: none; } .kpi-strip--cols-6.kpi-strip--mobile-last-full .kpi-strip__card:nth-child(5), .kpi-strip--cols-6.kpi-strip--mobile-last-full .kpi-strip__card:nth-child(6) { grid-column: span 2; border-right: none; } .kpi-strip__value { font-size: 17px; } .kpi-strip--compact .kpi-strip__value { font-size: 14px; } .kpi-strip--compact .kpi-strip__card { grid-column: span 1; } .kpi-strip--compact.kpi-strip--cols-5 .kpi-strip__card--money { grid-column: span 1; } .kpi-strip--compact.kpi-strip--cols-3.kpi-strip--mobile-last-full .kpi-strip__card:last-child, .kpi-strip--compact.kpi-strip--mobile-last-full .kpi-strip__card:last-child { grid-column: span 1; border-right: none; } .kpi-strip--compact .kpi-strip__card:nth-child(3n), .kpi-strip--compact .kpi-strip__card:nth-child(4n) { border-right: 1px solid var(--kpi-card-border); } .kpi-strip--compact .kpi-strip__card:nth-child(2n) { border-right: none; } } .scroll-table.order-packing-manage-table, .scroll-table.order-shipping-table, .scroll-table.order-viewshipment-table, .scroll-table.order-piecework-calc-table, .scroll-table.order-kilnbatch-table, .scroll-table.viewkilnslip-products-table, .scroll-table.order-packinglist-table, .scroll-table.order-vieworder-tab-table { width: 100%; min-width: 0; max-width: 100%; table-layout: auto; } .scroll-table.order-vieworder-tab-table thead th { position: sticky; top: 0; z-index: 11; background-color: #f0f4f7 !important; color: #607d8b; border-top: none !important; box-shadow: none; } .scroll-table.order-vieworder-tab-table thead th.sticky-photo { top: 0; z-index: 16; } .scroll-table.order-vieworder-tab-table tbody td.sticky-photo { top: auto; } .scroll-table.order-packing-manage-table th.sticky-photo, .scroll-table.order-packing-manage-table td.sticky-photo, .scroll-table.order-shipping-table th.sticky-photo, .scroll-table.order-shipping-table td.sticky-photo, .scroll-table.order-viewshipment-table th.sticky-photo, .scroll-table.order-viewshipment-table td.sticky-photo, .scroll-table.order-piecework-calc-table th.sticky-photo, .scroll-table.order-piecework-calc-table td.sticky-photo, .scroll-table.order-kilnbatch-table th.sticky-photo, .scroll-table.order-kilnbatch-table td.sticky-photo, .scroll-table.viewkilnslip-products-table th.sticky-photo, .scroll-table.viewkilnslip-products-table td.sticky-photo, .scroll-table.order-packinglist-table th.sticky-photo, .scroll-table.order-packinglist-table td.sticky-photo, .scroll-table.order-vieworder-tab-table th.sticky-photo, .scroll-table.order-vieworder-tab-table td.sticky-photo, .scroll-table.order-mould-tab-table th.sticky-photo, .scroll-table.order-mould-tab-table td.sticky-photo, .scroll-table.kl-plan-products-table th.sticky-photo, .scroll-table.kl-plan-products-table td.sticky-photo { width: 92px; min-width: 92px; max-width: 92px; overflow: visible; } @media (min-width: 1200px) { .scroll-table-wrapper:has(.order-vieworder-tab-table), .scroll-table-wrapper:has(.kl-plan-products-table) { overflow: visible; } .scroll-table-hscroll-shell:not(.order-tab-hscroll-shell) .scroll-table-wrapper { overflow: visible !important; } } @media (max-width: 1199px) { .scroll-table.order-packing-manage-table { width: auto; min-width: 960px; } .scroll-table.order-shipping-table { width: auto; min-width: 880px; } .scroll-table.order-viewshipment-table { width: auto; min-width: 720px; } .scroll-table.order-vieworder-tab-table { width: auto; min-width: 960px; } .scroll-table.kl-plan-products-table.order-vieworder-tab-table { width: auto; min-width: 860px; } .scroll-table.order-piecework-calc-table.order-vieworder-tab-table { width: auto; min-width: 1200px; } .scroll-table.order-carton-table.order-vieworder-tab-table { min-width: 1100px; } .scroll-table.order-kilnbatch-table.order-vieworder-tab-table { width: auto; min-width: 1050px; } .scroll-table.viewkilnslip-products-table.order-vieworder-tab-table { width: auto; min-width: 960px; } .scroll-table.fs-surplus-count-table.order-vieworder-tab-table { width: auto; min-width: 1080px; } } .bglightyellow { background-color: #fffceb !important; } .bglightblue { background-color: #ddefff !important; } .bggradientblue { background: linear-gradient(to bottom, #c5e1ff, #f5faff); } .bggradientorange { background: linear-gradient(to bottom, #ffe4c0, #fff3e5); } .viewkilnslip-table-wrapper { width: 100%; overflow-x: auto; overflow-y: visible; } .viewkilnslip-table-wrapper { overflow-x: auto; border: none; } .viewkilnslip-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10pt; table-layout: fixed; min-width: 790px; } .viewkilnslip-table th:nth-child(1), .viewkilnslip-table td:nth-child(1) { width: 60px; min-width: 60px; } .viewkilnslip-table th:nth-child(2), .viewkilnslip-table td:nth-child(2) { width: 100px; min-width: 100px; } .viewkilnslip-table th:nth-child(3), .viewkilnslip-table td:nth-child(3) { width: 230px; min-width: 230px; } .viewkilnslip-table th:nth-child(4), .viewkilnslip-table td:nth-child(4) { width: 80px; min-width: 80px; } .viewkilnslip-table th:nth-child(5), .viewkilnslip-table td:nth-child(5) { width: 80px; min-width: 80px; } .viewkilnslip-table th:nth-child(n+6):not(:last-child), .viewkilnslip-table td:nth-child(n+6):not(:last-child) { width: 80px; min-width: 80px; } .viewkilnslip-table th:last-child, .viewkilnslip-table td:last-child { width: 80px; min-width: 80px; } .viewkilnslip-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .viewkilnslip-table { width: max-content; min-width: 960px; } .viewkilnslip-table td, .viewkilnslip-table th { padding: 8px; border: 1px solid #ddd; } .viewkilnslip-table th { white-space: nowrap; word-wrap: normal; } .viewkilnslip-table td.description { word-wrap: break-word; overflow-wrap: break-word; } .viewkilnslip-table td.sticky-photo img { max-width: 70px; max-height: 70px; object-fit: contain; } .viewkilnslip-table .bglightred { padding: 10px; } .viewkilnslip-table th:not(:last-child), .viewkilnslip-table td:not(:last-child) { border-right: 1px solid #ddd; } .viewkilnslip-table th:not(:first-child), .viewkilnslip-table td:not(:first-child) { border-left: none; } .viewkilnslip-table th.sticky-photo, .viewkilnslip-table td.sticky-photo { border-left: none; } .viewkilnslip-table th { border-bottom: 1px solid #ddd; } .viewkilnslip-table tbody tr:not(:last-child) td { border-bottom: 1px solid #ddd; } .viewkilnslip-table th.sticky-stt, .viewkilnslip-table td.sticky-stt { width: 60px; min-width: 60px; position: relative; } .viewkilnslip-table th.sticky-photo, .viewkilnslip-table td.sticky-photo { width: 100px; min-width: 100px; position: relative; } .viewkilnslip-table th.sticky-stt, .viewkilnslip-table td.sticky-stt { position: sticky; left: 0; z-index: 1; } .scroll-table.viewkilnslip-products-table { table-layout: auto !important; width: 100% !important; max-width: 100%; } .scroll-table.viewkilnslip-products-table th.sticky-photo, .scroll-table.viewkilnslip-products-table td.sticky-photo { position: sticky; left: 0 !important; z-index: 1; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } .scroll-table-wrapper.is-sticky-photo-flush .scroll-table.viewkilnslip-products-table th.sticky-photo, .scroll-table-wrapper.is-sticky-photo-flush .scroll-table.viewkilnslip-products-table td.sticky-photo { border-left: none !important; box-shadow: inset 1px 0 0 #ddd, 2px 0 5px rgba(0, 0, 0, 0.1); } .scroll-table.viewkilnslip-products-table thead th.sticky-photo { top: 0; z-index: 15; } .scroll-table.viewkilnslip-products-table tbody td.sticky-photo { top: auto; } .scroll-table.viewkilnslip-products-table td.sticky-photo img { display: block; width: 80px; max-width: 100%; height: auto; margin: 0 auto; object-fit: contain; } .viewkilnslip-table th.sticky-photo, .viewkilnslip-table td.sticky-photo { position: sticky; left: 60px; z-index: 1; box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); } .viewkilnslip-table thead th.sticky-stt, .viewkilnslip-table thead th.sticky-photo { z-index: 10; } .viewkilnslip-table tr.bgxlightblue td.sticky-stt, .viewkilnslip-table tr.bgxlightblue td.sticky-photo, .scroll-table.viewkilnslip-products-table tr.bgxlightblue td.sticky-photo { background-color: #f0f7ff !important; } .viewkilnslip-table tr.bglightblue td.sticky-stt, .viewkilnslip-table tr.bglightblue td.sticky-photo, .scroll-table.viewkilnslip-products-table tr.bglightblue td.sticky-photo { background-color: #ddefff !important; } @media (max-width: 1199px) { .main, .main-content-card { overflow-x: clip; } .settings-table-wrapper, .gw-producer-stats-table-wrap, .piecework-detail-products-table-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (min-width: 1200px) { .order-form table { table-layout: fixed !important; width: 100% !important; } .order-form .ralo-input, .order-form .defect-input { width: 100% !important; box-sizing: border-box; } } @media (max-width: 1199px) { .order-form table { table-layout: auto !important; } } .order-form table thead td, .order-form table thead th, .order-form table th { overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; word-wrap: normal !important; } @media (min-width: 1200px) { .order-form table thead td[width], .order-form table thead th[width] { min-width: auto !important; width: auto !important; } } @media (max-width: 1199px) { .order-form table { width: auto !important; min-width: 1000px !important; font-size: 9pt; } .order-form>div[style*="overflow-x"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; background: #fff; } body.dark .order-form>div[style*="overflow-x"] { background: #2d2d2d; } .order-form table:not(.viewkilnslip-table) td:nth-child(2), .order-form table:not(.viewkilnslip-table) th:nth-child(2) { position: sticky; left: -1px; z-index: 15; background: #fff !important; border-left: 1px solid #ddd; box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1); } .order-form table:not(.viewkilnslip-table) thead tr.bglightblue th:nth-child(2), .order-form table:not(.viewkilnslip-table) thead tr.bglightblue td:nth-child(2) { background-color: #ddefff !important; } body.dark .order-form table:not(.viewkilnslip-table) td:nth-child(2), body.dark .order-form table:not(.viewkilnslip-table) th:nth-child(2) { background: #2d2d2d !important; border-left: 1px solid #555 !important; } body.dark .order-form table:not(.viewkilnslip-table) thead tr.bglightblue th:nth-child(2), body.dark .order-form table:not(.viewkilnslip-table) thead tr.bglightblue td:nth-child(2) { background-color: #ddefff !important; border-left: 1px solid #555 !important; } .order-form table:not(.viewkilnslip-table) tr[style*="background:#f0f8ff"] td:nth-child(2), .order-form table:not(.viewkilnslip-table) tr.bgxlightblue td:nth-child(2) { background: #f0f8ff !important; } .order-form table:not(.viewkilnslip-table) tr.bglightyellow td:nth-child(2) { background: #fffacd !important; } .order-form>div[style*="overflow-x"]::after { display: none; } } .order-form table td, .order-form table th { padding: 6px 4px !important; } .order-form .ralo-input, .order-form .defect-input { width: 50px !important; } .order-form .kiln-slip-order-heading { flex-wrap: wrap; gap: 10px; } .order-form .kiln-slip-order-actions-col { text-align: right; min-width: 0; } .order-form .kiln-slip-order-actions { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; box-sizing: border-box; } .order-form .kiln-slip-order-actions .button, .order-form .kiln-slip-order-actions button.submit-order-btn { box-sizing: border-box; } @media (max-width: 768px) { .kiln-slip-header { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .kiln-slip-actions { flex-direction: column !important; width: 100% !important; } .kiln-slip-actions .button { width: 100% !important; text-align: center !important; } .order-form .kiln-slip-order-heading { flex-direction: column !important; align-items: stretch !important; } .order-form .kiln-slip-order-actions-col { width: 100% !important; max-width: 100% !important; text-align: left !important; } .order-form .kiln-slip-order-actions { flex-direction: column !important; align-items: stretch !important; width: 100% !important; justify-content: flex-start !important; } .order-form .kiln-slip-order-actions>.button, .order-form .kiln-slip-order-actions>button.submit-order-btn { width: 100% !important; max-width: 100% !important; text-align: center !important; justify-content: center; } .order-form table { font-size: 8pt !important; } .order-form table td, .order-form table th { padding: 4px 2px !important; } .order-form .ralo-input, .order-form .defect-input { width: 45px !important; padding: 2px !important; font-size: 8pt !important; } .order-form table td img { max-width: 50px !important; max-height: 50px !important; } .order-form .button.small { padding: 2px 4px !important; font-size: 8pt !important; } .order-form .bglightgray>div[style*="display:flex"]:first-child { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; } .order-form h3 { font-size: 13pt !important; margin-bottom: 8px !important; } .order-form .bglightgray>div[style*="display:flex"]:first-child>div[style*="text-align:right"] { text-align: left !important; } .order-form .bglightgray>div[style*="display:flex"]:first-child>div[style*="display:flex"] { flex-direction: column !important; width: 100% !important; } .order-form .submit-order-btn, .order-form .button.medium { width: 100% !important; font-size: 11pt !important; padding: 10px !important; text-align: center !important; display: block !important; } .toggle-finish-btn, .toggle-notes-btn { font-size: 10pt !important; padding: 6px 12px !important; } .order-form .bglightgray>div[style*="justify-content:space-between"] { flex-direction: column !important; gap: 10px !important; } .order-form .bglightgray>div[style*="justify-content:space-between"]>div[style*="text-align:right"] { text-align: left !important; } .order-form table td:nth-child(n+5):nth-child(-n+20) { min-width: 50px; } .batch-note-input { font-size: 9pt !important; } } @media (min-width: 769px) and (max-width: 889px) { .order-form table { font-size: 9pt !important; } .order-form .ralo-input, .order-form .defect-input { width: 55px !important; } } .bggradientpurple { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; } .bgorange { background-color: #ff8533; } .bggreen { background-color: #2a9d3b; color: #fff; } input::placeholder, textarea::placeholder { color: #333; opacity: 1; } .invoice-card input[type="radio"] { display: none; } .invoice-card label[for] { display: inline-flex; align-items: center; padding: 6px 12px; background: #f0f7ff; border: 1px solid #cce5ff; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 13px; color: #555; position: relative; padding-left: 24px; } .invoice-card label[for]:before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border: 1.5px solid #0077b6; border-radius: 50%; transition: all 0.2s ease; } .invoice-card label[for]:hover { background: #e6f3ff; border-color: #0077b6; } .invoice-card input[type="radio"]:checked+label { background: #0077b6; border-color: #0077b6; color: white; } .invoice-card input[type="radio"]:checked+label:before { background: white; box-shadow: inset 0 0 0 2px #0077b6; } .editQty { cursor: pointer; } .editQty:hover, .editQty:focus, .editQty:active { background-color: #fbe1c2; } .qty-cell { position: relative; overflow: visible; } .edit-icon { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.6); color: white; padding: 6px 8px; border: none; cursor: pointer; display: none; } .qty-cell:hover .edit-icon { display: block; } .product-code-cell { position: relative; } .product-code-cell:hover { background-color: #fbe1c2; } .delete-icon { position: absolute; top: 20%; left: 50%; transform: translate(-50%, -50%); background: transparent; border: none; cursor: pointer; font-size: 14px; display: none; } .product-code-cell:hover .delete-icon { display: block; } .custom-radio input[type="radio"] { display: none; } .custom-radio label { display: inline-flex; align-items: center; padding: 3px 6px; background: #f0f7ff; border: 1px solid #cce5ff; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 13px; color: #555; position: relative; padding-left: 24px; } .custom-radio label:before { content: ''; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border: 1.5px solid #0077b6; border-radius: 50%; transition: all 0.2s ease; } .custom-radio label:hover { background: #e6f3ff; border-color: #0077b6; } .custom-radio input[type="radio"]:checked+label { background: #0077b6; border-color: #0077b6; color: white; } .custom-radio input[type="radio"]:checked+label:before { background: white; box-shadow: inset 0 0 0 2px #0077b6; } .custom-checkbox input[type="checkbox"] { display: none; } .custom-checkbox label { display: inline-flex; align-items: center; padding: 3px 6px; background: #f0f7ff; border: 1px solid #cce5ff; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: 13px; color: #555; position: relative; padding-left: 24px; } .custom-checkbox label:before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border: 1.5px solid #0077b6; border-radius: 3px; transition: all 0.2s ease; background: #fff; box-sizing: border-box; } .custom-checkbox label:hover { background: #e6f3ff; border-color: #0077b6; } .custom-checkbox input[type="checkbox"]:checked+label { background: #0077b6; border-color: #0077b6; color: #fff; } .custom-checkbox input[type="checkbox"]:checked+label:before { content: "✓"; font-size: 9px; font-weight: 700; line-height: 10px; text-align: center; color: #0077b6; background: #fff; border-color: #fff; display: flex; align-items: center; justify-content: center; } .custom-checkbox.custom-checkbox--medium label { padding: 6px 14px 6px 32px; font-size: 14px; line-height: 1.4; box-sizing: border-box; align-items: center; } .custom-checkbox.custom-checkbox--medium label:before { left: 7px; width: 14px; height: 14px; border-width: 1.5px; border-radius: 3px; } .custom-checkbox.custom-checkbox--medium input[type="checkbox"]:checked+label:before { font-size: 9px; line-height: 1; font-weight: 700; } .gw-assign-stages-checkboxes .custom-checkbox label { text-transform: uppercase; } @media (max-width: 600px) { .gw-stage-prod-filters--custom { flex-direction: column; align-items: stretch; } } .settings-table td.gw-product-greenware-stages-td { overflow: visible !important; } @media (max-width: 768px) { .settings-table .gw-stage-prod-filters--product-form.gw-stage-prod-filters--scroll { max-height: none !important; overflow-x: visible !important; overflow-y: visible !important; -webkit-overflow-scrolling: auto; } .settings-table .gw-stage-prod-filters--product-form.gw-stage-prod-filters--custom { flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 10px 0; } .settings-table .gw-stage-prod-filters--product-form .custom-checkbox.custom-checkbox--medium, .settings-table .gw-stage-prod-filters--product-form .custom-checkbox--medium { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; } .settings-table .gw-stage-prod-filters--product-form .custom-checkbox--medium label { white-space: normal !important; width: 100% !important; max-width: none !important; overflow-wrap: anywhere; } } .board-post { margin: 10px 0 10px 0; border-radius: 5px; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); padding: 5px; } .post-content { padding: 10px; border-top: 1px solid #d0d0d0; word-wrap: break-word; overflow-wrap: anywhere; word-break: break-word; } .searchUsers { position: absolute; background: #fff; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); z-index: 100; margin-top: 5px; max-height: 200px; overflow-y: auto; width: 100%; max-width: 450px; min-width: 300px; } @media (max-width: 1024px) { .searchUsers { max-width: 320px; min-width: 260px; } } @media (max-width: 480px) { .searchUsers { position: relative; width: 100% !important; max-width: 100% !important; min-width: 100% !important; left: 0 !important; } } .search-item { display: flex; align-items: center; padding: 6px 10px; gap: 8px; } .search-item-empty { padding: 10px 12px; color: #666; font-size: 13px; line-height: 1.4; } .search-item:hover { background-color: #66adff; color: #fff; } .search-item img.avatar { width: 30px; height: 30px; border-radius: 50%; } .product-addnew-block--intro { margin-bottom: 14px; } .product-addnew-block--intro+.gw-settings-workflow-outer { margin-top: 14px; margin-inline: 0; } .product-addnew-step { margin-bottom: 14px; } .product-addnew-step__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .product-addnew-step__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; font-weight: 700; font-size: 13px; background: #e3f2fd; color: #1565c0; border: 1px solid #bbdefb; } .product-addnew-step__title { font-weight: 700; font-size: 1.05rem; } .product-addnew-hint { margin: 0 0 12px 0; font-size: 13px; color: #666; line-height: 1.45; } .product-addnew-customer-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; } .product-addnew-customer-row .customer-search-wrapper { flex: 1 1 260px; min-width: 220px; max-width: 420px; position: relative; } .product-addnew-customer-row .currency-field { flex: 0 1 200px; min-width: 160px; } .product-addnew-customer-preview { margin-top: 8px; min-height: 0; } .product-addnew-customer-preview:has(.product-addnew-customer-card) { padding: 0; display: flex; justify-content: flex-start; } .product-addnew-customer-card { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; max-width: min(100%, 320px); } .product-addnew-customer-card__fullname { font-weight: 600; font-size: 14px; line-height: 1.35; text-align: left; color: #1a1a1a; word-break: break-word; } .product-addnew-customer-card__thumb { padding: 10px; box-sizing: border-box; border: 1px solid #e0e0e0; border-radius: 10px; background: #fff; line-height: 0; } .product-addnew-customer-card__thumb img { display: block; width: auto; height: 48px; max-height: 48px; max-width: 160px; object-fit: contain; object-position: left center; border-radius: 4px; border: 0; } .product-addnew-workflow .gw-workflow-tab:disabled { opacity: 0.55; cursor: not-allowed; } .product-addnew-workflow.product-addnew-workflow--locked .gw-workflow-tab-bar { opacity: 0.72; } .product-addnew-excel-panel { margin-top: 12px; } .product-addnew-excel-panel--gated { pointer-events: none; opacity: 0.72; } .product-addnew-excel-panel--gated .product-addnew-template-dl { pointer-events: auto; opacity: 1; cursor: pointer; } .product-addnew-excel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .select-currency--from-customer { cursor: not-allowed; pointer-events: none; opacity: 0.92; } .product-addnew-manual-panel { margin-top: 4px; } .product-import-preview-wrapper { margin-top: 10px; } .scroll-table.product-import-preview-table { width: 100%; min-width: 0; max-width: 100%; table-layout: auto; } .product-import-preview__cell--error { color: #b91c1c; background-color: #fecaca; } .product-import-preview__cell--error strong { color: #7f1d1d; font-weight: 700; } .taggedUsers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 5px; } .tagged-box { display: inline-flex; align-items: center; padding: 4px 8px; background: #d3e7ff; font-size: 14px; border: 1px solid #ccc; border-radius: 5px; } .tagged-box .avatar { width: 28px; height: 28px; } .tagged-box span.remove-tag { margin-left: 6px; color: #d00; cursor: pointer; } .avatar-wrapper { margin: 0 auto; aspect-ratio: 1/1; width: 48px; border-radius: 50%; overflow: hidden; background: #f0f0f0; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: center; } .avatar-wrapper img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .avatar-wrapper.small { width: 28px; } .avatar-wrapper.medium { width: 36px; } .avatar-wrapper.large { width: 48px; } .avatar-wrapper.xlarge { width: 64px; } .avatar-wrapper.xxlarge { width: 80px; } .avatar-wrapper.superlarge { width: 100px; } .account-sheet { padding: 10px; } .account-page-title { margin-bottom: 12px; } .account-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .account-layout .settings-form-block + .settings-form-block { margin-top: 0; } .account-top-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; } .account-card { height: 100%; } .account-card-desc { margin: 0 0 14px; } .account-photo-block { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; } .account-photo-block .account-photo-preview.avatar-wrapper { width: 144px; margin: 0; flex-shrink: 0; } .account-photo-actions { width: 100%; max-width: 100%; } .account-photo-actions .account-photo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .account-photo-hint { margin-top: 8px; line-height: 1.4; } .account-password-form { max-width: 520px; } .account-password-field { margin-bottom: 12px; max-width: 480px; } .account-password-field:last-of-type { margin-bottom: 16px; } .account-password-field input { width: 100%; max-width: 480px; margin-top: 4px; box-sizing: border-box; } .account-channels-table-wrap { margin-top: 8px; } .account-channels-table { width: 100%; min-width: 760px; table-layout: fixed; } .account-channels-table th:first-child, .account-channels-table td:first-child { width: 22%; } .account-channels-table th:nth-child(2), .account-channels-table td:nth-child(2) { width: 36%; } .account-channels-table th:nth-child(3), .account-channels-table td:nth-child(3) { width: 42%; } .account-channels-actions { white-space: nowrap; } .account-telegram-guide { margin-top: 14px; width: 100%; max-width: none; background: #f0f7ff; border-color: #bfdbfe; } .account-telegram-guide-title { margin-bottom: 8px; } .account-telegram-guide-steps { margin: 0 0 12px 18px; line-height: 1.6; } .account-telegram-guide-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; } .account-telegram-guide-command { display: block; word-break: break-all; padding: 8px; background: #fff; border-radius: 6px; border: 1px solid #dbeafe; } .account-telegram-guide-poll-status { margin-top: 10px; } @media (max-width: 768px) { .account-photo-actions .account-photo-btn { width: 100%; box-sizing: border-box; } } .avatar-list .avatar-wrapper { border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease; margin: 0; display: inline-flex; } .avatar-list .avatar-wrapper:hover { transform: translateY(-2px) scale(1.05); z-index: 2; } .btn-remove-user { position: absolute; left: -2px; top: -5px; background: #fcb8b3; color: #fff; font-size: 20px; border-radius: 50%; padding: 5px 6px 4px 3px; text-decoration: none; display: none; } .alert { padding: 10px; margin: 10px 0; border-radius: 5px; } .alert.success { background-color: #dff0d8; border-color: #d6e9c6; color: #3c763d; } .alert.error { background-color: #f2dede; border-color: #ebccd1; color: #a94442; } .alert.warning { background-color: #fff3cd; border: 1px solid #ffc107; border-left: 4px solid #ffc107; color: #856404; } .order-invoice-products > .alert { margin-top: 0; margin-bottom: 0; } @media screen and (max-width: 767px) and (orientation: portrait) { .hide-mobile-portrait { display: none; } } @media screen and (max-width: 1024px) { .hide-tablet { display: none; } } .summary-box-wrapper { display: flex; flex-wrap: wrap; gap: 0px; } .summary-box { flex: 1 1 auto; min-width: fit-content; max-width: 100%; padding: 10px; background: #fff; box-sizing: border-box; } .summary-box.span-2 { flex: 2 1 auto; } .summary-box.full { flex: 0 0 100%; } @media (max-width: 600px) { .summary-box { flex: 1 1 calc(50% - 10px); } .summary-box.span-2 { flex: 1 1 100%; } } @media (min-width: 600px) and (max-width: 900px) { .summary-box { flex: 1 1 calc(33.33% - 10px); } .summary-box.span-2 { flex: 1 1 calc(66.66% - 10px); } } @media (min-width: 900px) and (max-width: 1200px) { .summary-box { flex: 1 1 calc(25% - 10px); } .summary-box.span-2 { flex: 1 1 calc(50% - 10px); } } .cd-customers-head, .cd-addnew-head { margin-bottom: 10px; } .cd-customers-head .cd-panel__title, .cd-addnew-head .cd-panel__title { margin-bottom: 0; } .cd-customers-view-toggle { margin-left: auto; } .cd-customers-search-wrap { position: relative; } .cd-customers-search-wrap .input { width: 100%; } .cd-customers-search-results { left: 0; right: 0; min-width: 0; max-width: none; width: 100%; } .cd-customers-search-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cd-customer-list__no-photo { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 56px; color: var(--cd-muted); font-size: 22px; } .cd-customer-list__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cd-customer-list__status { margin-top: 3px; } .cd-customer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .cd-customer-card { display: flex; flex-direction: column; border: 1px solid var(--cd-border); background: var(--cd-stat-bg); text-decoration: none; color: inherit; transition: background .15s, border-color .15s; } .cd-customer-card:hover { background: var(--cd-accent-soft); border-color: var(--cd-accent); } .cd-customer-card__photo { display: flex; align-items: center; justify-content: center; height: 90px; padding: 5px; box-sizing: border-box; border-bottom: 1px solid var(--cd-border); background: var(--cd-surface); } .cd-customer-card__photo img { max-width: 80%; max-height: 80%; object-fit: contain; } .cd-customer-card__photo i { font-size: 25px; color: var(--cd-muted); } .cd-customer-card__body { padding: 10px 12px; } .cd-customer-card__name { font-size: 15px; font-weight: 700; color: var(--cd-accent); margin-bottom: 4px; } .cd-customer-card__meta { font-size: 12px; color: var(--cd-muted); line-height: 1.45; } .cd-customer-card__revenue { margin-top: 4px; font-weight: 700; color: var(--cd-accent); } .cd-addnew-form .settings-table { width: 100%; } .cd-hero { margin: 0; padding: 12px 14px; border: none; border-bottom: 1px solid var(--cd-border); border-radius: 0; background: var(--cd-surface); box-shadow: none; box-sizing: border-box; } .cd-hero__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; min-width: 0; } .cd-hero__identity { display: flex; align-items: center; gap: 14px; flex: 1 1 280px; min-width: 0; } .cd-hero__photo { flex: 0 0 auto; width: auto; height: 90px; min-width: 48px; max-width: min(240px, 40vw); padding: 5px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--cd-border); background: var(--cd-stat-bg); display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--cd-muted); font-size: 28px; } .cd-hero__photo img { width: auto; height: 100%; max-width: 100%; object-fit: contain; display: block; } .cd-hero__title { margin: 0 0 2px; font-size: 20px; font-weight: 700; line-height: 1.25; color: var(--cd-text); word-break: break-word; } .cd-hero__subtitle { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: var(--cd-muted); word-break: break-word; } .cd-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .cd-hero__badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.35; } .cd-hero__badge--active { background: var(--cd-success-bg); color: var(--cd-success-text); } .cd-hero__badge--inactive { background: var(--cd-inactive-bg); color: var(--cd-inactive-text); } .cd-hero__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--cd-chip-bg); font-size: 12px; font-weight: 600; color: var(--cd-text); max-width: 100%; word-break: break-word; } .cd-hero__chip i { color: var(--cd-muted); font-size: 11px; } .cd-hero__chip--muted { color: var(--cd-muted); } .cd-hero__stats { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; margin-left: auto; } .cd-hero__stat { min-width: 88px; padding: 8px 12px; border: 1px solid var(--cd-border); border-radius: 8px; background: var(--cd-stat-bg); text-align: center; box-sizing: border-box; } .cd-hero__stat-val { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--cd-accent); } .cd-hero__stat-label { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: var(--cd-muted); text-transform: uppercase; letter-spacing: 0.02em; } .cd-tab-scroll { position: relative; overflow: visible; max-width: 100%; } .cd-body { border: none; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .cd-body .cd-tab-scroll { margin-bottom: 0; } .cd-tab-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; border: none; border-bottom: 1px solid var(--cd-border); border-radius: 0; background: var(--cd-tab-bg); overflow: visible; position: relative; z-index: 1; } .cd-tab-bar > .cd-tab { flex: 1 1 0; min-width: 0; } .cd-tab { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 12px; border: none; border-bottom: 3px solid transparent; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--cd-muted); text-align: center; text-decoration: none; box-sizing: border-box; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .cd-tab:hover { background: #eceff1; color: var(--cd-accent); } .cd-tab.is-active { background: var(--cd-surface); color: var(--cd-accent); border-bottom-color: var(--cd-accent); margin-bottom: -1px; padding-bottom: 12px; } .cd-tab--danger { color: #c62828; } .cd-tab--danger:hover { background: var(--cd-danger-bg); color: #b71c1c; } .cd-panel { padding: 14px 16px; border: none; border-radius: 0; background: var(--cd-surface); box-shadow: none; box-sizing: border-box; min-width: 0; } .cd-panel__title { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--cd-text); } .cd-panel__title i { margin-right: 6px; color: var(--cd-accent); } .cd-panel .customer-detail-readonly { margin-top: 0; } .cd-panel .cd-edit-form { margin-top: 0; } .cd-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 32px 16px; text-align: center; color: var(--cd-muted); } .cd-empty__icon { font-size: 28px; line-height: 1; } .cd-orders-head { margin-bottom: 10px; } .cd-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--cd-border); border-radius: 6px; } .cd-orders-table { width: 100%; border-collapse: collapse; font-size: 14px; } .cd-orders-table th, .cd-orders-table td { padding: 8px 10px; border-bottom: 1px solid #eceff1; } .cd-orders-table tbody tr:last-child td { border-bottom: none; } .cd-orders-table tbody tr:hover { background: #f5f7fa; } .cd-stats-insight { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; font-size: 15px; line-height: 1.6; } .cd-stats-insight--compact { padding: 10px 12px; font-size: 14px; line-height: 1.5; border-radius: 0; } .cd-stats-insight-list { margin: 0; padding: 0 0 0 18px; } .cd-stats-insight-list li { margin: 0 0 6px; } .cd-stats-insight-list li:last-child { margin-bottom: 0; } .cd-panel.cd-panel--stats { padding-top: 0; } .cd-panel.cd-panel--stats > .cd-stats-top:first-child { margin: 0 -16px 14px; border-bottom: 1px solid var(--cd-border); } .cd-stats-top { background: var(--cd-surface); } .cd-stats-top .cd-stats-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--cd-border); } .cd-stats-year-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; } .cd-stats-year-form__label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--cd-muted); margin: 0; } .cd-stats-year-form__label i { color: var(--cd-accent); } .cd-stats-top .cd-stats-kpis { margin: 0; border-bottom: none; } .cd-stats-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--cd-border); } .cd-stats-kpi { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 72px; padding: 10px 8px; background: var(--cd-stat-bg); text-align: center; box-sizing: border-box; } .cd-stats-kpi__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cd-accent-soft); color: var(--cd-accent); font-size: 13px; line-height: 1; } .cd-stats-kpi__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--cd-muted); line-height: 1.25; } .cd-stats-kpi__value { font-size: 15px; font-weight: 700; color: var(--cd-text); line-height: 1.2; word-break: break-word; } @media (max-width: 1199px) { .cd-stats-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .cd-panel.cd-panel--stats > .cd-stats-top:first-child { margin-inline: -14px; } .cd-stats-top .cd-stats-toolbar { padding-inline: 14px; } .cd-stats-kpi__value { font-size: 14px; } } .cd-stats-insight .analysis-box h3 { margin: 0 0 8px; font-size: 16px; } .cd-stats-insight .analysis-box p { margin: 0 0 8px; } .cd-stats-insight .analysis-box p:last-child { margin-bottom: 0; } .cd-stats-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 14px; } .cd-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; } .cd-stats-grid--full { grid-template-columns: 1fr; } .cd-stats-grid .dashboard-panel { margin: 0; } .cd-stats-grid .dashboard-panel.cd-stats-panel--table { padding: 0 0 10px; overflow: hidden; } .cd-stats-grid .dashboard-panel.cd-stats-panel--table > h4 { margin: 20px 0; padding: 0 10px; font-size: 15px; font-weight: 700; line-height: 1.3; } .cd-stats-grid .dashboard-panel.cd-stats-panel--table .scroll-hint, .cd-stats-grid .dashboard-panel.cd-stats-panel--table .scroll-table-wrapper { width: auto; max-width: none; margin-inline: 10px; } .cd-stats-grid .dashboard-panel.cd-stats-panel--table .scroll-hint { margin-top: 0; margin-bottom: 0; } .cd-panel .alert { margin-bottom: 12px; } .cd-products-head { margin-bottom: 10px; } .cd-products-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; } .cd-products-filters__search { flex: 1 1 180px; min-width: 140px; max-width: 280px; } .cd-products-table__photo { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; overflow: hidden; border: 1px solid var(--cd-border); background: var(--cd-stat-bg); } .cd-products-table__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .cd-empty--inline { padding: 24px 12px; } .cd-download-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; } .cd-download-head .cd-panel__title { margin-bottom: 0; } .cd-download-year { display: flex; align-items: center; gap: 8px; } .cd-download-year__label { font-size: 13px; font-weight: 600; color: var(--cd-muted); white-space: nowrap; } .cd-download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .cd-download-group { border: 1px solid var(--cd-border); border-radius: 8px; background: var(--cd-stat-bg); overflow: hidden; } .cd-download-group__head { padding: 12px 14px; border-bottom: 1px solid var(--cd-border); background: var(--cd-tab-bg); } .cd-download-group__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--cd-text); } .cd-download-group__title i { margin-right: 6px; color: var(--cd-accent); } .cd-download-group__desc { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--cd-muted); } .cd-download-list { list-style: none; margin: 0; padding: 0; } .cd-download-link { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--cd-border); text-decoration: none; color: var(--cd-text); transition: background .15s; } .cd-download-link__text { flex: 1 1 auto; min-width: 0; } .cd-download-list li:last-child .cd-download-link { border-bottom: none; } .cd-download-link:hover { background: var(--cd-accent-soft); color: var(--cd-accent); } .cd-download-link__icon { flex: 0 0 32px; width: 32px; height: 32px; margin-top: 1px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--cd-surface); border: 1px solid var(--cd-border); color: var(--cd-accent); font-size: 14px; } .cd-download-link__label { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; } .cd-download-link__note { display: block; margin-top: 2px; font-size: 12px; color: var(--cd-muted); } .cd-download-link__action { flex: 0 0 auto; font-size: 12px; color: var(--cd-muted); } .cd-download-link:hover .cd-download-link__action { color: var(--cd-accent); } @media (max-width: 900px) { .cd-hero__stats { margin-left: 0; width: 100%; } .cd-hero__stat { flex: 1 1 calc(50% - 4px); } } @media (max-width: 1199px) { .cd-tab-scroll .cd-tab-bar { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; scrollbar-width: none; border-radius: 0; } .cd-tab-scroll:not(.is-scrollable) .cd-tab-bar { overflow-x: hidden; } .cd-tab-scroll .cd-tab-bar::-webkit-scrollbar { display: none; height: 0; } .cd-tab-scroll .cd-tab-bar > .cd-tab { flex: 0 0 auto; min-width: max-content; } .cd-tab-scroll .cd-tab-bar > .cd-tab { white-space: nowrap; padding-left: 14px; padding-right: 14px; } .cd-tab-scroll .cd-tab-bar > .cd-tab:hover:not(.is-active), .cd-tab-scroll .cd-tab-bar > .cd-tab:active:not(.is-active) { background: transparent; color: var(--cd-muted); } } @media (max-width: 520px) { .cd-hero__identity { flex-direction: row; align-items: center; } .cd-hero__title { font-size: 18px; } .cd-panel { padding: 12px; } .cd-products-filters__search { max-width: none; flex-basis: 100%; } } .customer-detail-readonly { margin-top: 0; --cd-card-bg: #ffffff; --cd-card-border: #d8dee6; --cd-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --cd-preview-bg: #fafbfc; --cd-preview-border: #e5e9ef; --cd-title-border: #e8edf3; --cd-title-color: rgb(0, 81, 128); --cd-row-sep: #f0f3f7; --cd-label: #5a6570; --cd-value: #1a1a1a; --cd-value-mobile-label: #7a8490; } .customer-detail-status-banner { margin-top: 16px; } .customer-detail-status-banner__hint { margin-top: 10px; } .customer-detail-photo-form { display: none; } .customer-detail-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--cd-row-sep); } .customer-detail-toolbar__btn { margin: 0; } .customer-detail-main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; } .customer-detail-card { background: var(--cd-card-bg); border: 1px solid var(--cd-card-border); border-radius: 8px; padding: 14px 16px; box-shadow: var(--cd-card-shadow); min-width: 0; } .customer-detail-card--span2 { grid-column: 1 / -1; } .customer-detail-card__title { margin: 0 0 12px 0; padding-bottom: 8px; border-bottom: 1px solid var(--cd-title-border); font-size: 15px; font-weight: 700; color: var(--cd-title-color); } .customer-detail-kv { margin: 0; } .customer-detail-kv__row { display: grid; grid-template-columns: minmax(100px, 34%) 1fr; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--cd-row-sep); font-size: 14px; line-height: 1.45; } .customer-detail-kv__row:last-child { border-bottom: none; padding-bottom: 0; } .customer-detail-kv__row dt { margin: 0; color: var(--cd-label); font-weight: 600; } .customer-detail-kv__row dd { margin: 0; color: var(--cd-value); font-weight: 600; word-break: break-word; } .customer-detail-block-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cd-value); font-weight: 600; word-break: break-word; } @media (max-width: 900px) { .customer-detail-toolbar { justify-content: stretch; } .customer-detail-toolbar__btn { flex: 1 1 calc(50% - 4px); justify-content: center; text-align: center; } .customer-detail-card--span2 { grid-column: auto; } } @media (max-width: 520px) { .customer-detail-kv__row { grid-template-columns: 1fr; gap: 2px 0; } .customer-detail-kv__row dt { font-size: 12px; color: var(--cd-value-mobile-label); } } .collection-album { display: grid; gap: 10px; } .collection-album.small { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .collection-album.medium { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); } .collection-album.large { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } @media (max-width: 640px) { .collection-album.large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .collection-album.large>.collection-item { width: 100%; max-width: none; min-width: 0; } } @media (max-width: 339px) { .collection-album.large { grid-template-columns: 1fr; } } .collection-item { border-radius: 5px; display: flex; flex-direction: column; padding: 5px; box-sizing: border-box; transition: all 0.2s ease-in-out; max-width: 250px; position: relative; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .collection-item:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border-color: #006fe6; } .collection-item:hover .cover-photo-wrapper img { transform: scale(1.05); } .worker-grid { display: grid; gap: 10px; justify-content: flex-start !important; } .worker-grid.small { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .worker-grid.medium { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); } .worker-grid.large { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .worker-grid.large>.collection-item, .worker-grid.large>.customer-card, .worker-grid.large>.worker-card { width: 100%; max-width: none; min-width: 0; } @media (max-width: 640px) { .worker-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } @media (max-width: 339px) { .worker-grid.large { grid-template-columns: 1fr; } } .customer-card, .worker-card { background: #fff; border-radius: 5px; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; max-width: 250px; } .worker-card:hover, .customer-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border-color: #006fe6; } .worker-card:hover .cover-photo-wrapper img, .customer-card:hover .cover-photo-wrapper img { transform: scale(1.05); } .no-cover { font-size: 50px; color: #bbb; display: flex; align-items: center; justify-content: center; height: 100%; text-align: center; } .customer-card .collection-info { padding: 10px 12px; flex-grow: 1; } .customer-card h4 { margin: 0 0 5px; font-size: 16px; color: #111; } .customer-card .sub { color: #666; font-size: 13px; margin-top: 3px; } .customer-card .sub.email { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .customer-card .collection-actions { border-top: 1px solid #eee; display: flex; justify-content: space-between; padding: 8px 10px; } .customer-card .collection-actions .button { flex: 1; text-align: center; margin: 0 3px; } .edit-cover-form .cover-input { display: none; } .edit-cover-form .edit-icon { position: absolute; top: 20px; right: 8px; background: rgba(0, 0, 0, 0.6); color: white; padding: 6px 8px; border-radius: 4px; cursor: pointer; display: none; font-size: 14px; text-align: center; } .cover-photo-wrapper:hover .edit-icon { display: block; } .collection-info { padding: 5px; font-size: 14px; display: flex; flex-direction: column; flex-grow: 1; margin-top: 10px; } .collection-info .manage-btn { margin-top: auto; align-self: flex-start; } .collection-info h4 { margin: 0; font-size: 16px; color: #333; } .sub { color: #555; font-size: 13px; margin-bottom: 5px; } .note { font-size: 13px; color: #666; margin-top: 6px; margin-bottom: 6px; } .icon-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; } .icon-link i { width: 20px; text-align: center; } .expense-detail-grid { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 14px; line-height: 1.6; text-align: left; } .expense-detail-grid div:nth-child(odd) { font-weight: 600; color: #555; } .expenses-list-table .expense-total-col { white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; } @media (max-width: 768px) { .expenses-list-table .expense-total-col { min-width: 95px; font-size: 13px; } .expense-info-table tr { margin-bottom: 4px !important; } .expense-info-table td { padding: 2px 0 !important; line-height: 1.35 !important; } .expense-info-table td:first-child { padding-bottom: 1px !important; } } @media (max-width: 500px) { .expense-detail-grid { grid-template-columns: 1fr; } .expense-detail-grid div:nth-child(odd) { margin-top: 10px; color: #999; } } #expensesChart { width: auto !important; height: 320px !important; } .expense-stat-flex { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 0; } .expense-stat-half { flex: 1 1 calc(50% - 10px); box-sizing: border-box; min-width: 300px; max-width: 100%; } @media (max-width: 768px) { .expense-stat-half { flex: 1 1 100%; } } .system-settings-form { display: block; width: 100%; margin: 0 auto; } .system-settings-form fieldset { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px 16px 16px; margin-bottom: 20px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); height: auto; box-sizing: border-box; } .system-settings-form legend { font-weight: 700; color: #0077b6; font-size: 16px; padding: 0 8px; } .settings-form-table { width: 100%; border-collapse: collapse; } .settings-form-table td { border-bottom: 1px solid #eee; padding: 10px 6px; vertical-align: middle; font-size: 14px; } .settings-form-table input, .settings-form-table select { width: 100%; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box; } .form-footer { text-align: right; margin-top: 15px; } @media (max-width: 768px) { .system-settings-form .settings-table td { display: block; width: 100%; } .system-settings-form .settings-table tr { display: block; } .system-settings-form fieldset { margin-bottom: 15px; padding: 10px; } .system-settings-form .settings-table input, .system-settings-form .settings-table select { font-weight: bold; } .settings-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; table-layout: auto !important; box-sizing: border-box !important; border: none !important; } .settings-table td { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; border: none !important; border-bottom: none !important; } .settings-table tr { display: block !important; margin-bottom: 10px; width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .settings-table td:first-child { padding-bottom: 5px; font-weight: 600; } .settings-table td:last-child { padding-top: 0; } .settings-table input, .settings-table select, .settings-table textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .settings-table input[type="text"], .settings-table input[type="password"], .settings-table input[type="email"], .settings-table input[type="number"], .settings-table input[type="tel"], .settings-table input[type="url"], .settings-table input[type="search"], .settings-table select { height: auto !important; min-height: 36px !important; line-height: normal !important; } .settings-table td input, .settings-table td select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .settings-table tr.setting-holiday-dept-row[hidden], .settings-table tr.setting-holiday-dept-row.is-collapsed { display: none !important; margin: 0 !important; padding: 0 !important; border: none !important; } .settings-table .setting-holiday-dept-pick { max-width: 100%; height: auto; max-height: 220px; } } .orderSearchResults { position: absolute; background: #fcfcde; border: 1px solid #ddd; width: 30%; max-height: 200px; overflow-y: auto; display: none; z-index: 100; } @media (max-width: 768px) { .orderSearchResults { inset: auto 20px auto 20px; width: auto !important; } } .order-item { padding: 10px; cursor: pointer; } .order-item:hover { background: rgb(181, 221, 253); } .notification-container { position: fixed; top: 10px; right: 10px; z-index: 9999; display: none; } .notification { min-width: 280px; padding: 12px 18px; border-radius: 8px; color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); animation: fadeIn 0.3s ease; } .notification.success { background-color: #4caf50; } .notification.error { background-color: #e53935; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .unread { transition: background-color 0.3s ease; } #unreadmsg { color: #0b62d4; } .unread a { color: #0a58ca; } .badge { display: inline-block; background: #ff3b3b; color: white; font-size: 12px; border-radius: 10px; padding: 2px 6px; margin-left: 6px; min-width: 18px; text-align: center; font-weight: 400; } .tag-link { display: inline-block; text-decoration: none !important; color: #003049 !important; transition: all 0.2s ease; padding: 2px 4px; border-radius: 3px; white-space: nowrap; } .tag-link:hover { color: #0077b6 !important; background-color: #f0f8ff; transform: translateY(-1px); } .thread-header { display: grid; grid-template-columns: 35% 40% 25%; align-items: start; padding: 10px; box-sizing: border-box; transition: all 0.3s ease; } .thread-header>div { background: transparent; min-width: 0; overflow-wrap: break-word; } @media (max-width: 767px) and (orientation: portrait) { .thread-header { display: grid; grid-template-columns: 1fr; } .hide-mobile-portrait { display: none !important; } } @media (min-width: 768px) and (max-width: 1023px) { .thread-header { grid-template-columns: 35% 40% 25%; } } .reply-form { position: sticky; bottom: 0; background: #f0f7ff; padding: 10px; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); z-index: 1000; } @media (max-width: 1199px) { .reply-form:not(.news-chat-composer__form) { bottom: 52px; } } .reply-form textarea, .edit-form textarea { width: 100%; height: 70px; min-height: 50px; resize: none; transition: height 0.25s ease; font-family: inherit; font-size: 16px; box-sizing: border-box; } .news-edit-post-form.edit-form textarea, .news-edit-post-form .news-edit-post-form__textarea, #newsEditPostContent { height: 200px; min-height: 200px; resize: vertical; transition: none; } .news-chat-composer__form.reply-form .news-chat-composer__input { width: 100%; height: auto; min-height: 40px; max-height: 120px; padding: 9px 14px; font-size: 14px; line-height: 1.4; resize: none; transition: none; border: none; background: #f0f2f5; } .news-chat-composer__form.reply-form .news-chat-composer__input:focus { outline: none; border: none; background: #f0f2f5; box-shadow: none; } .editor-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; } .editor-toolbar button { margin-right: 2px; cursor: pointer; border: none; background: #eee; padding: 6px 10px; border-radius: 4px; border: 1px solid #ccc; } .editor-toolbar button:hover { background: #ddd; } .edit-history-list { display: none; margin-top: 8px; border-left: 3px solid #ccc; padding-left: 20px; margin-left: 20px; } .inline-user { display: inline-flex; align-items: center; line-height: 1; height: 20px; padding: 0 5px 0 0; border-radius: 20px; background: #ff8533; margin-right: 6px; position: relative; overflow: visible; color: #fff; text-indent: 3px; } .search-dropdown { position: absolute; background: white; border: 1px solid #ccc; border-radius: 6px; max-height: 220px; overflow-y: auto; width: 280px; z-index: 10; display: none; font-weight: 600; color: #333; font-size: 14px; } .search-dropdown div { display: flex; align-items: center; padding: 6px 10px; cursor: pointer; } .search-dropdown div:hover { background: #f0f7ff; } .product-grid { display: grid; gap: 10px; margin-top: 0; } .product-grid.small { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; } .product-grid.medium { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important; } .product-grid.large { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; } .product-grid.large>.product-card { width: 100%; max-width: none; min-width: 0; } @media (max-width: 640px) { .product-grid.large { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } } @media (max-width: 339px) { .product-grid.large { grid-template-columns: 1fr !important; } } .bgwhite.order-documents-sheet { padding: 20px; box-sizing: border-box; } .order-documents-pane { --cd-border: #e0e0e0; --cd-surface: #ffffff; --cd-muted: #546e7a; --cd-text: #263238; --cd-accent: #1565c0; --cd-accent-soft: #e3f2fd; --cd-tab-bg: #f5f7fa; --cd-stat-bg: #fafbfc; --cd-danger-bg: #ffebee; --cd-danger-text: #c62828; padding: 0; } .order-documents-pane__flash { margin: 0 0 12px; } .order-documents-pane .cd-download-head.order-documents-section-head { margin-top: 22px; } .order-documents-pane > .cd-download-head:first-child { margin-top: 0; } .order-documents-download-grid.cd-download-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; } @media (max-width: 640px) { .order-documents-download-grid.cd-download-grid { grid-template-columns: 1fr; } .bgwhite.order-documents-sheet { padding: 12px; } } .order-documents-export-options__body { padding: 12px 14px; border-bottom: 1px solid var(--cd-border); } .order-documents-options-table { width: 100%; margin: 0; } .order-documents-radio-row { display: flex; gap: 10px; flex-wrap: wrap; } .order-documents-upload-group__body { padding: 12px 14px; } .order-documents-upload-input { display: none; } .order-documents-upload-hint { margin-top: 8px; } .order-documents-file-row.order-documents-file-row { padding: 0; } .order-documents-file-row__main { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 14px; text-decoration: none; color: var(--cd-text); } .order-documents-file-row:hover { background: var(--cd-accent-soft); } .order-documents-file-row:hover .order-documents-file-row__main { color: var(--cd-accent); } .order-documents-file-row__delete { flex: 0 0 auto; padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--cd-danger-text); text-decoration: none; border-left: 1px solid var(--cd-border); align-self: stretch; display: flex; align-items: center; } .order-documents-file-row__delete:hover { background: var(--cd-danger-bg); } .product-grid.xlarge { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; } .product-grid.xxlarge { grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)) !important; } .product-grid.superlarge { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; } .product-card { position: relative; border-radius: 4px; display: flex; flex-direction: column; padding: 4px; box-sizing: border-box; transition: all 0.2s ease-in-out; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .product-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); border-color: #006fe6; } .product-card:hover .cover-photo-wrapper img { transform: scale(1.05); } .cover-photo-wrapper img { transition: transform 0.3s ease; } .product-card .select-product { position: absolute !important; top: 8px !important; right: 8px !important; z-index: 20 !important; transform: scale(1.2); cursor: pointer; accent-color: #007bff; } .product-card form { margin-top: auto; } .cover-photo-wrapper, .cover-photo, .cover-photo img { position: relative; z-index: auto; background-color: #fff; } .cover-photo-wrapper { width: 100%; overflow: hidden; } .product-card .code { font-size: 15px; font-weight: 700; color: #0d6efd; margin-top: 10px; } .product-card .desc { font-size: 13px; margin-bottom: 10px; font-weight: 600; } .product-card .info { font-size: 13px; margin-bottom: 2px; font-weight: 500; } .product-card .finish { font-size: 12px; margin-bottom: 5px; color: #666; } .product-card .price { margin-top: auto; align-self: flex-start; } .view-toggle .active { background: #0d6efd; color: #fff; } .data-block-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; position: relative; } .product-detail-packaging-stack { display: flex; flex-direction: column; gap: 10px; } .product-detail-packaging-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 768px) { .data-block-grid { grid-template-columns: 1fr !important; } } @media (max-width: 600px) and (orientation: portrait) { .data-block-grid { grid-template-columns: repeat(1, 1fr); } } .data-block { position: relative; border-radius: 5px; padding: 15px; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .data-block.span-2, .data-block.wide-block { grid-column: span 2; } .data-block.full { grid-column: span 3; } .data-block-blank { padding: 0; position: relative; } .data-block-blank.full { grid-column: span 3; } @media (max-width: 1199px) { .data-block.span-2, .data-block.wide-block, .data-block.full { grid-column: span 1 !important; } .data-block-blank.full { grid-column: span 1 !important; } } .mould-detail-thumb-wrap#productPhotoPreview { display: flex; justify-content: center; align-items: center; height: 100%; min-height: 200px; padding: 10px; } .mould-detail-thumb-wrap#productPhotoPreview img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; } .pd-hero__frame#productPhotoPreview { display: block; min-height: 0; height: 116px; padding: 0; } .cover-photo-wrapper img { display: block; transition: transform 0.3s ease; } .cover-photo-wrapper.small { width: 100%; height: 90px; } .cover-photo-wrapper.medium { width: 100%; height: 120px; } .cover-photo-wrapper.large { width: 100%; height: 200px; } .cover-photo-wrapper.xlarge { width: 100%; height: 300px; } .cover-photo-wrapper.cover-fill { overflow: hidden; } .cover-photo-wrapper.cover-fill img { width: 100%; height: 100%; object-fit: cover; } .cover-photo-wrapper.cover-fill>a { display: block; height: 100%; color: inherit; text-decoration: none; } .cover-photo-wrapper.cover-contain { display: flex; justify-content: center; align-items: center; overflow: hidden; } .cover-photo-wrapper.cover-contain img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .cover-photo-wrapper.small-image { width: 100%; height: 90px; display: flex; justify-content: center; align-items: center; overflow: hidden; } .cover-photo-wrapper.small-image img { width: 80%; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .cover-photo-wrapper.no-image { background: #eee; color: #666; font-weight: 600; font-size: 14px; display: flex; justify-content: center; align-items: center; } .thread-list { display: flex; flex-direction: column; gap: 10px; margin-top: 0; } .thread-card { display: flex; flex-wrap: wrap; align-items: flex-start; border: 1px solid #ddd; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); border-radius: 5px; padding: 12px 16px; box-sizing: border-box; width: 100%; max-width: 100%; gap: 10px; } .thread-card:hover { border-color: #0078ff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); } .thread-card.highlight { background: #eaf5ff; } .thread-left { flex: 0 0 70px; display: flex; justify-content: center; align-items: center; } .thread-info { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 200px; } .thread-title a { text-decoration: none; font-size: 16px; line-height: 1.3; } .thread-title a:hover { color: #0078ff; } .thread-meta { font-size: 14px; color: #444; } .thread-tags { margin-top: 2px; } .thread-tags a { font-size: 13px; text-decoration: none; margin-right: 6px; padding: 1px 5px; } .thread-tags a:hover { color: #0078ff; } .thread-stats { flex: 0.1 0 160px; font-size: 14px; color: #333; line-height: 1.5; } .thread-users { flex: 0.2 0 160px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .thread-users .small-text { font-size: 13px; } .thread-users .avatar-list { justify-content: flex-end; } @media (max-width: 900px) { .thread-card { display: grid; grid-template-columns: 60px 1fr; grid-template-areas: "avatar info" "stats stats" "users users"; gap: 8px 12px; } .thread-left { grid-area: avatar; justify-content: flex-start; } .thread-info { grid-area: info; } .thread-stats { grid-area: stats; display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 13px; } .thread-users { grid-area: users; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; } .thread-users .avatar-list { justify-content: flex-start; } } .op-info { padding: 5px; font-size: 15px; } .profile-card-container { display: flex; gap: 20px; background: #fff; border: 1px solid #e0e0e0; padding: 10px; margin: 10px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); align-items: flex-start; } .pc-avatar { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 180px; height: 180px; border-radius: 50%; overflow: hidden; border: 3px solid #e0e0e0; margin-bottom: 10px; background: #f0f0f0; } .pc-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .pc-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px; } .profile-card-container .pc-right>h2 { margin: 0 0 4px 0; font-size: 22px; color: #0050b3; } .profile-card-container .pc-worker-dept { margin: 0 0 10px 0; color: #666; font-size: 15px; } .compact-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; } .c-stat-item { background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .c-stat-label { font-size: 11px; text-transform: uppercase; color: #888; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-stat-value { font-size: 16px; font-weight: 700; color: #333; min-width: 0; word-break: break-word; } .c-stat-item.highlight { background: #e6f7ff; border-color: #91d5ff; grid-column: span 2; } .c-stat-item.highlight .c-stat-value { color: #0050b3; font-size: 20px; } @media (max-width: 600px) { .profile-card-container { flex-direction: column; align-items: center; text-align: center; gap: 15px; padding: 15px; } .profile-card-container>.pc-avatar { margin-left: auto; margin-right: auto; } .pc-right { width: 100%; min-width: 0; } .compact-stats { grid-template-columns: repeat(3, 1fr); } .c-stat-item.highlight { grid-column: 1 / -1; } } @media (max-width: 394px) { .compact-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .bao-on-title { margin: 20px 0 15px 0; } .bao-on-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; margin-bottom: 20px; } .bao-on-card { background: #f8f9fa; border: 2px solid #dee2e6; border-radius: 8px; padding: 15px; } .bao-on-card-header { text-align: center; margin-bottom: 12px; } .bao-on-card-header-title { font-size: 24px; font-weight: bold; color: #0d6efd; } .bao-on-main-stat { text-align: center; margin-bottom: 15px; padding: 12px; background: #e7f5e7; border-radius: 6px; } .bao-on-main-stat-label { font-size: 12px; color: #666; margin-bottom: 5px; text-transform: uppercase; font-weight: 600; } .bao-on-main-stat-value { font-size: 32px; font-weight: bold; color: #2ca02c; } .bao-on-main-stat-unit { font-size: 18px; color: #888; } .bao-on-secondary-stats { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; } .bao-on-stat-item { flex: 1; text-align: center; padding: 8px; border-radius: 6px; } .bao-on-stat-item.count { background: #fff3cd; } .bao-on-stat-item.min { background: #ffe6e6; } .bao-on-stat-item.max { background: #e6f2ff; } .bao-on-stat-label { font-size: 11px; margin-bottom: 3px; font-weight: 600; } .bao-on-stat-item.count .bao-on-stat-label { color: #856404; } .bao-on-stat-item.min .bao-on-stat-label { color: #721c24; } .bao-on-stat-item.max .bao-on-stat-label { color: #004085; } .bao-on-stat-value { font-weight: bold; } .bao-on-stat-item.count .bao-on-stat-value { font-size: 18px; color: #d62728; } .bao-on-stat-item.min .bao-on-stat-value { font-size: 16px; color: #d62728; } .bao-on-stat-item.max .bao-on-stat-value { font-size: 16px; color: #1f77b4; } .bao-on-stat-unit-small { font-size: 12px; } @media (max-width: 600px) { .bao-on-stats-grid { grid-template-columns: 1fr !important; gap: 12px !important; } .bao-on-card { padding: 12px !important; } .bao-on-card-header-title { font-size: 20px !important; } .bao-on-main-stat-value { font-size: 28px !important; } } @media (min-width: 601px) and (max-width: 900px) { .bao-on-stats-grid { grid-template-columns: repeat(2, 1fr) !important; } } .text-danger { color: #d93025 !important; } .text-success { color: #188038 !important; } .text-warning { color: #f1c232 !important; } #filterDate.att-daily-filter-date, input.att-daily-filter-date[type="date"] { width: 9.75rem; min-width: 0; max-width: 100%; padding: 6px 8px; box-sizing: border-box; } .worker-row { position: relative; box-sizing: border-box; padding: 10px 36px 10px 10px; gap: 10px; align-items: flex-start; } .worker-row-edit { position: absolute; top: 8px; right: 6px; z-index: 2; padding: 6px; font-size: 1.125rem; line-height: 1; } .worker-row .row-number { flex: 0 0 30px; width: 30px; min-width: 30px; display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; font-weight: 700; font-size: 1.25rem; color: #666; } .worker-row .row-number .row-number-value { font-weight: 700; } .worker-row-name { flex: 1 1 0; min-width: 0; } .worker-row-name .worker-row-name-line { line-height: 1.35; } .worker-row-shifts { flex: 0 1 auto; min-width: 130px; } .worker-row-shifts .session-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-bottom: 4px; } .worker-row-shifts .session-line:last-child { margin-bottom: 0; } .worker-row-notes { flex: 1 1 120px; min-width: 120px; padding-right: 4px; } .worker-row-notes>div { margin-bottom: 4px; } .worker-row-notes>div:last-child { margin-bottom: 0; } @media (min-width: 769px) { .worker-row { display: grid; grid-template-columns: 30px minmax(130px, 2.35fr) minmax(130px, 1.35fr) minmax(120px, 2.4fr); column-gap: 10px; row-gap: 6px; align-items: start; } .worker-row .row-number { grid-column: 1; grid-row: 1; } .worker-row-name { grid-column: 2; grid-row: 1; flex: none; min-width: 0; } .worker-row-shifts { grid-column: 3; grid-row: 1; flex: none; min-width: 0; } .worker-row-notes { grid-column: 4; grid-row: 1; flex: none; min-width: 0; } } @media (max-width: 768px) { .worker-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; row-gap: 8px; padding: 10px 40px 10px 10px; } .worker-row .row-number { grid-column: 1; grid-row: 1; width: 28px; min-width: 28px; flex: none; padding-top: 3px; } .worker-row-name { grid-column: 2; grid-row: 1; min-width: 0; } .worker-row-name .worker-row-name-line { font-size: 0.9375rem; } .worker-row-shifts { grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; padding: 6px 8px; background: #f8fafc; border: 1px solid #e8ecf1; border-radius: 6px; box-sizing: border-box; } .worker-row-notes { grid-column: 1 / -1; grid-row: 3; min-width: 0; width: 100%; padding: 8px 0 0; margin: 0; border-top: 1px solid #e8ecf1; } } .r-table { display: flex; flex-direction: column; width: 100%; border: 1px solid #e0e0e0; margin-top: 20px; } .r-row { display: flex; border-bottom: 1px solid #f0f0f0; background: #fff; align-items: center; transition: background 0.3s ease, color 0.3s ease; } .r-row:last-child { border-bottom: none; } .r-row.header { font-weight: 700; color: #495057; font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e9ecef; position: sticky; z-index: 100; top: 0; } .r-cell { padding: 12px 8px; font-size: 15px; display: flex; align-items: center; justify-content: center; text-align: center; color: #333; } .r-cell.left { justify-content: flex-start; text-align: left; } .r-cell.right { justify-content: flex-end; text-align: right; } .r-cell.w-date { flex: 0 0 120px; } .r-cell.w-shift { flex: 0 0 60px; font-size: 15px; } .r-cell.w-time { flex: 0 0 140px; flex-direction: column; gap: 2px; font-size: 15px; font-weight: 700; } .shift-emoji { display: inline-block; width: 24px; text-align: center; } .r-cell.w-num { flex: 0 0 90px; font-weight: 500; } .r-cell.w-money { flex: 0 0 120px; font-weight: 700; } .r-cell.w-note { flex: 1; color: #666; font-size: 14px; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .r-row.is-weekend { background: #fcfcfc; } .r-row.is-weekend .w-date { color: #d93025; } @media (max-width: 768px) { .r-table { border: none; background: transparent; gap: 12px; } .r-row.header { display: none; } .r-row { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-areas: "date shift income" "time time time" "stats stats stats" "note note note"; gap: 8px 12px; padding: 16px; border: 1px solid #eee; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); align-items: start; } .r-cell { flex: unset; width: auto; padding: 0; border: none; justify-content: flex-start; text-align: left; min-height: 0; } .r-cell.w-date { grid-area: date; font-weight: 700; font-size: 17px; color: #000; } .r-cell.w-shift { grid-area: shift; justify-content: center; font-size: 22px; } .r-cell.w-money { grid-area: income; justify-content: flex-end; font-size: 17px; } .r-cell.w-time { grid-area: time; flex-direction: row; align-items: center; gap: 20px; background: #f9f9f9; padding: 10px 12px; border-radius: 6px; font-size: 15px; color: #444; font-weight: 500; } .mobile-stats-group { grid-area: stats; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; background: #f0f5ff; padding: 10px 12px; border-radius: 6px; } .r-cell.w-num:nth-child(4) { grid-row: 3; grid-column: 1; justify-content: center; flex-direction: column; gap: 4px; } .r-cell.w-num:nth-child(5) { grid-row: 3; grid-column: 2; justify-content: center; flex-direction: column; gap: 4px; } .r-cell.w-num:nth-child(6) { grid-row: 3; grid-column: 3; justify-content: center; flex-direction: column; gap: 4px; } .r-cell.w-num::before { content: attr(data-label); font-size: 11px; text-transform: uppercase; color: #777; font-weight: 700; } .r-cell.w-num { background: #f7f7f7; padding: 8px; border-radius: 6px; font-size: 15px; font-weight: 600; } .r-cell.w-note { grid-area: note; font-size: 14px; color: #666; margin-top: 6px; white-space: normal; font-style: normal; } .r-cell.w-note:empty { display: none; } .filter-group { display: flex; flex-direction: column; gap: 6px; } .filter-label { font-size: 13px; font-weight: 600; color: #555; } .filter-select { padding: 8px 12px; border: 1px solid #ddd; } } .badge { padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; } .badge-blue { background: #e3f2fd; color: #1976d2; } .badge-orange { background: #fff3e0; color: #f57c00; } .badge-green { background: #05a62d; color: #fff; } .badge-red { background: #f8d7da; color: #721c24; } .badge-gray { background: #f0f0f0; color: #666; } .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 24px; overflow: hidden; } .slider:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; } input:checked+.slider { background-color: #4CAF50; } input:checked+.slider:before { transform: translateX(26px); } @media only screen and (max-width: 768px) { .mobile-large { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 36px !important; font-size: 16px !important; padding: 5px 12px !important; box-sizing: border-box !important; } .settings-table .mobile-large { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 20px 0; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; } .form-group input[type="text"], .form-group input[type="number"], .form-group select, .form-group textarea { width: 100%; border: 1px solid #ddd; border-radius: 4px; } .form-group small { color: #666; font-size: 12px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .radio-group { display: flex; gap: 20px; } .radio-group label { display: flex; align-items: center; gap: 5px; } .condition-row { display: grid; grid-template-columns: 2fr 1fr 1fr 60px; gap: 10px; margin-bottom: 10px; align-items: center; } #conditionsContainer { margin: 15px 0; } @media (max-width: 768px) { .leave-card-header { display: flex; flex-direction: column; gap: 12px; } .leave-card-header>div:last-child { width: 100% !important; text-align: center; } } .view-mode-toggle { display: inline-flex; background: #f5f5f5; border-radius: 5px; padding: 3px; gap: 3px; } .view-mode-btn { padding: 8px 16px; border: none; background: transparent; cursor: pointer; border-radius: 3px; font-size: 14px; font-weight: 600; color: #666; transition: all 0.2s ease; } .view-mode-btn:hover { color: #333; background: rgba(0, 0, 0, 0.05); } .view-mode-btn.active { background: #fff; color: #2196F3; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .view-mode-toggle.small { padding: 2px; gap: 2px; } .view-mode-toggle.small .view-mode-btn, .view-mode-btn.small { padding: 5px 8px; font-size: 13px; } .view-mode-toggle.medium .view-mode-btn, .view-mode-btn.medium { padding: 8px 16px; font-size: 14px; } .view-mode-toggle.big .view-mode-btn, .view-mode-btn.big { padding: 9px 18px; font-size: 16px; } .leave-list-view { display: block !important; } .leave-list-view .data-block { margin-bottom: 10px !important; width: 100% !important; padding: 10px 15px !important; border-left: 3px solid transparent; } .leave-list-view .data-block:has(.bglightyellow) { border-left-color: #ff9800; } .leave-list-view .data-block:has(.bglightgreen) { border-left-color: #4caf50; } .leave-list-view .data-block:has(.bglightred) { border-left-color: #f44336; } .product-grid .leave-inline-info, .product-grid .leave-actions-inline, .product-grid .leave-approver-info, .product-grid .leave-status-badge, .product-grid .leave-line2-actions { display: none !important; } .leave-list-view .leave-info-table, .leave-list-view .bgxlightblue:not(.leave-reason-section), .leave-list-view .leave-gridview-info { display: none !important; } .leave-list-view .data-block>div:last-child { display: none !important; } .leave-list-view .leave-line2-wrapper { display: flex !important; align-items: center; gap: 15px; margin-left: 55px; } .leave-list-view .leave-info-section { display: block !important; flex: 1; min-width: 0; } .leave-list-view .leave-additional-info-wrapper { display: flex !important; align-items: center; gap: 12px; flex-shrink: 0; margin-left: auto; } .leave-list-view .leave-approver-info { display: flex !important; align-items: baseline; gap: 5px; padding: 6px 12px; background: #f5f5f5; border-radius: 3px; font-size: 12px; line-height: 1.5; white-space: nowrap; } .leave-list-view .leave-approver-info>span { line-height: 1.5; } .leave-list-view .leave-approver-info>strong { line-height: 1.5; } .leave-list-view .leave-status-badge { display: flex !important; align-items: baseline; gap: 5px; padding: 6px 12px; border-radius: 3px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .leave-list-view .leave-status-badge>span { line-height: 1.5; font-weight: 400; } .leave-list-view .leave-status-badge.status-pending { background: #fff3e0; color: #f57c00; } .leave-list-view .leave-line2-actions { display: flex !important; align-items: center; gap: 6px; flex-wrap: wrap; } .leave-list-view .leave-line2-actions .leave-line2-action-form { display: flex; align-items: center; margin: 0; } .leave-list-view .leave-line2-actions .leave-line2-action-form .button { flex: 1 1 auto; } .leave-list-view .leave-line2-actions .button { box-sizing: border-box; min-height: 0; height: auto; display: inline-flex !important; align-items: center; justify-content: center; align-self: center; padding: 6px 12px !important; font-size: 12px !important; font-weight: 600; line-height: 1.5 !important; white-space: nowrap; } @media (max-width: 1200px) { .leave-list-view .leave-header-section>div:nth-child(2) { flex: 0 0 200px; } .leave-list-view .leave-inline-info { gap: 8px; font-size: 12px; } .leave-list-view .leave-additional-info-wrapper { gap: 8px; } .leave-list-view .leave-status-badge span { display: none; } } .leave-list-view .leave-header-section { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .leave-list-view .leave-header-section>div:first-child { display: none !important; } .leave-list-view .leave-header-section>div:nth-child(2) { display: flex !important; align-items: center; gap: 10px; flex: 0 0 250px; margin-bottom: 0 !important; } .leave-list-view .avatar-wrapper { width: 60px !important; height: 60px !important; flex-shrink: 0; } .leave-list-view .leave-header-section>div:nth-child(2)>div:last-child { flex: 1; min-width: 0; } .leave-list-view .leave-header-section .large-text { font-size: 15px !important; font-weight: 700 !important; margin-bottom: 2px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leave-list-view .leave-header-section .text-gray { font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #666 !important; } .leave-list-view .leave-inline-info { display: flex !important; align-items: center; gap: 12px; flex: 1; font-size: 13px; justify-content: flex-end; margin-left: auto; } .leave-list-view .leave-inline-info>span { white-space: nowrap; } .leave-list-view .leave-actions-inline { display: none !important; } .leave-list-view .leave-reason-section { margin: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; display: inline-flex !important; align-items: baseline; gap: 5px; } .leave-list-view .leave-reason-section .bold700 { font-size: 12px !important; margin: 0 !important; color: #888 !important; font-weight: 600 !important; flex-shrink: 0; line-height: 1.5; } .leave-list-view .leave-reason-section .small-text { font-size: 13px !important; line-height: 1.5 !important; color: #333 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leave-list-view .leave-rejection-inline { display: inline-flex !important; align-items: baseline; gap: 5px; margin-left: 12px; vertical-align: baseline; } .leave-list-view .leave-rejection-inline .rejection-label { font-size: 12px; font-weight: 600; color: #d32f2f; flex-shrink: 0; line-height: 1.5; } .leave-list-view .leave-rejection-inline .rejection-text { font-size: 12px; color: #d32f2f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 350px; line-height: 1.5; } .leave-list-view .leave-info-section { display: block !important; } @media (max-width: 1400px) { .leave-list-view .leave-inline-info { gap: 10px; font-size: 12px; } .leave-list-view .leave-actions-inline .button { padding: 5px 10px !important; font-size: 11px !important; } } @media (max-width: 768px) { .leave-list-view .data-block { padding: 8px !important; } .leave-list-view .leave-header-section { flex-wrap: wrap; } .leave-list-view .leave-header-section>div:nth-child(2) { flex: 1 1 auto; width: 100%; } .leave-list-view .leave-inline-info { width: 100%; flex-wrap: wrap; gap: 6px; font-size: 12px; } .leave-list-view .leave-line2-wrapper { flex-direction: column; align-items: flex-start; margin-left: 0; gap: 8px; } .leave-list-view .leave-info-section { width: 100%; } .leave-list-view .leave-additional-info-wrapper { width: 100%; flex-wrap: wrap; gap: 8px; } .leave-list-view .leave-approver-info, .leave-list-view .leave-status-badge { flex: 1 1 auto; } .leave-list-view .leave-status-badge span { display: inline !important; } .leave-list-view .leave-line2-actions { width: 100%; justify-content: flex-end; } .leave-view-toggle { width: 100%; justify-content: center; } .leave-view-toggle .view-mode-btn { flex: 1; } } .logs-filters { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; } .logs-filters .filter-group { display: flex; flex-direction: column; gap: 4px; } .logs-filters label { font-size: 11px; font-weight: 600; } .userlogs-toolbar { padding: 10px 12px; margin-bottom: 10px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fafbfc; box-sizing: border-box; } .userlogs-filters { width: 100%; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 8px 10px; align-items: end; margin: 0; padding: 0; } .userlogs-filters__field { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .userlogs-filters__label { font-size: 11px; font-weight: 700; color: #607d8b; line-height: 1.2; } .userlogs-filters__actions { display: flex; flex-direction: column; gap: 3px; align-self: end; min-width: 0; } .userlogs-filters__label--spacer { visibility: hidden; pointer-events: none; user-select: none; } .userlogs-filters__actions-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .userlogs-filters__actions-btns .button, .userlogs-filters__actions-btns a.button { margin: 0; flex-shrink: 0; } .userlogs-cleanup-toggle.is-active { border-color: #c62828; color: #c62828; background: #ffebee; } .userlogs-cleanup-panel { margin-bottom: 10px; padding: 10px 12px; border: 1px solid #ffcdd2; border-radius: 8px; background: #fff8f8; box-sizing: border-box; } .userlogs-cleanup-panel__hint { margin: 0 0 8px; line-height: 1.4; } .userlogs-cleanup-modules { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #ffcdd2; } .userlogs-cleanup-modules__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-bottom: 8px; } .userlogs-cleanup-modules__title { font-size: 12px; font-weight: 700; color: #455a64; } .userlogs-cleanup-modules__actions { display: flex; flex-wrap: wrap; gap: 6px; } .userlogs-cleanup-modules__grid, .userlogs-cleanup-modules__protected-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .userlogs-cleanup-module { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 8px 10px; border: 1px solid #e8e8e8; border-radius: 6px; background: #fff; box-sizing: border-box; cursor: pointer; } .userlogs-cleanup-module--protected { cursor: default; background: #f5f5f5; border-color: #e0e0e0; color: #78909c; } .userlogs-cleanup-module__input { margin: 2px 0 0; flex-shrink: 0; } .userlogs-cleanup-module__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .userlogs-cleanup-module__label { font-size: 12px; font-weight: 700; color: #37474f; line-height: 1.3; } .userlogs-cleanup-module--protected .userlogs-cleanup-module__label { color: #607d8b; } .userlogs-cleanup-module__meta { font-size: 11px; color: #78909c; line-height: 1.3; } .userlogs-cleanup-modules__protected { margin-top: 10px; } .userlogs-cleanup-modules__protected-title { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 700; color: #c62828; } .userlogs-cleanup-modules__empty { margin: 0; } .userlogs-cleanup { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12px; color: #546e7a; } .userlogs-cleanup__days { width: 64px; min-width: 64px; text-align: center; } .userlogs-cleanup__status { font-size: 12px; color: #546e7a; } .userlogs-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; font-size: 13px; color: #546e7a; } .userlogs-results-head__count strong { color: #37474f; } .userlogs-pagination { margin: 0; font-size: 13px; } .userlogs-pagination--top { flex-shrink: 0; } .userlogs-pagination__gap { padding: 0 4px; color: #9aa0a6; } .userlogs-table-wrap { border: 1px solid #e0e0e0; border-radius: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .userlogs-table { width: 100%; min-width: 1020px; table-layout: fixed; border-collapse: collapse; } .userlogs-table col.userlogs-col-time { width: 14%; } .userlogs-table col.userlogs-col-user { width: 17%; } .userlogs-table col.userlogs-col-module { width: 9%; } .userlogs-table col.userlogs-col-type { width: 8%; } .userlogs-table col.userlogs-col-ip { width: 11%; } .userlogs-table col.userlogs-col-action { width: 41%; } .userlogs-table thead th { padding: 7px 8px; font-size: var(--mafa-th-font-size); font-weight: var(--mafa-th-font-weight); text-transform: var(--mafa-th-text-transform); letter-spacing: var(--mafa-th-letter-spacing); background: #f0f4f7; color: #607d8b; border-bottom: 1px solid #dce3e8; white-space: nowrap; } .userlogs-table tbody td { padding: 6px 8px; font-size: 12px; line-height: 1.35; vertical-align: top; border-bottom: 1px solid #eceff1; } .userlogs-table tbody tr:hover td { background: #f6fcff; } .userlogs-table .userlogs-th-time, .userlogs-table .userlogs-cell-time, .userlogs-table .userlogs-th-user, .userlogs-table .userlogs-cell-user, .userlogs-table .userlogs-th-action, .userlogs-table .userlogs-cell-action { text-align: left; } .userlogs-table .userlogs-th-module, .userlogs-table .userlogs-cell-module, .userlogs-table .userlogs-th-type, .userlogs-table .userlogs-cell-type, .userlogs-table .userlogs-th-ip, .userlogs-table .userlogs-cell-ip { text-align: center; } .userlogs-th-time, .userlogs-th-user, .userlogs-th-module, .userlogs-th-type, .userlogs-th-action, .userlogs-th-ip { overflow: hidden; } .userlogs-cell-time { font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; } .userlogs-cell-type { vertical-align: middle; } .userlogs-cell-type .log-badge { vertical-align: middle; } .userlogs-cell-module, .userlogs-cell-ip { vertical-align: middle; } .userlogs-cell-user { min-width: 0; } .userlogs-user-name { display: block; font-weight: 700; font-size: 12px; word-break: break-word; line-height: 1.3; } .userlogs-user-role { display: block; font-size: 10px; color: #78909c; word-break: break-word; line-height: 1.25; } .userlogs-cell-module { font-size: 11px; word-break: break-word; line-height: 1.35; } .userlogs-cell-action { min-width: 0; } .userlogs-action-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 600; font-size: 12px; line-height: 1.35; word-break: break-word; } .userlogs-action-code { display: block; margin-top: 2px; font-size: 10px; color: #78909c; word-break: break-all; line-height: 1.3; } .userlogs-cell-ip { font-size: 11px; color: #78909c; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; word-break: break-all; line-height: 1.35; } .userlogs-empty.no-logs-message { padding: 24px 16px; font-size: 14px; } .userlogs-empty.no-logs-message i { font-size: 32px; margin-bottom: 6px; } @media (max-width: 1100px) { .userlogs-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } .userlogs-filters__actions { grid-column: 1 / -1; } } @media (max-width: 640px) { .userlogs-filters__actions { grid-column: 1 / -1; } } .log-badge { display: inline-block; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .log-badge.insert { background: #d4edda; color: #155724; } .log-badge.update { background: #fff3cd; color: #856404; } .log-badge.delete { background: #f8d7da; color: #721c24; } .log-badge.approve { background: #d1ecf1; color: #0c5460; } .log-badge.reject { background: #f8d7da; color: #721c24; } .log-badge.finalize { background: #cce5ff; color: #004085; } .log-detail-section { margin-bottom: 25px; padding-bottom: 15px; border-bottom: 1px solid #e9ecef; } .log-detail-section:last-child { border-bottom: none; margin-bottom: 0; } .log-detail-section h4 { font-size: 14px; font-weight: 600; margin-bottom: 12px; text-transform: uppercase; padding-bottom: 8px; border-bottom: 2px solid #dee2e6; } .log-detail-grid { display: grid; grid-template-columns: 150px 1fr; gap: 12px 15px; font-size: 13px; line-height: 1.6; } .log-detail-grid .label { font-weight: 600; } .log-detail-grid .value { word-break: break-word; } .log-diff-container { padding: 15px; border-radius: 4px; font-family: 'Courier New', monospace; font-size: 13px; } .log-diff-row { padding: 5px 0; } .log-diff-label { font-weight: 600; display: inline-block; min-width: 150px; } .log-diff-old { color: #dc3545; text-decoration: line-through; } .log-diff-new { color: #28a745; font-weight: 600; } .log-diff-empty { text-align: center; font-style: italic; padding: 20px; } .no-logs-message { text-align: center; padding: 40px; font-size: 16px; } .no-logs-message i { font-size: 48px; margin-bottom: 10px; display: block; opacity: 0.3; } .log-json-data { background: #f8f9fa; padding: 10px; border-radius: 4px; font-size: 12px; overflow-x: auto; max-height: 300px; border: 1px solid #dee2e6; } .log-record-detail-box { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 15px; margin-top: 10px; } .log-modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #dee2e6; } .log-modal-header h3 { margin: 0; font-size: 18px; } .log-modal-body { max-height: 70vh; overflow-y: auto; } .log-loading { text-align: center; padding: 40px; } .log-modal-box { width: 80%; max-width: 900px; text-align: left; } .scroll-table-wrapper { width: 100%; border: none; position: relative; } @media (max-width: 1199px) { .scroll-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } } @media (min-width: 1200px) { .scroll-table-wrapper { overflow: visible; } } .scroll-table-wrapper.mould-price-history-scroll { max-height: min(350px, 42vh); overflow-y: auto; border-radius: 5px; } .mould-price-header-row::after { content: ''; display: table; clear: both; } .mould-price-header-row .mould-price-add-toggle-btn { float: right; margin-left: 10px; } .mould-price-header-row .mould-price-current-text { overflow: hidden; } .scroll-table { width: 100%; border-collapse: collapse; font-size: 10pt; table-layout: fixed; } .scroll-table td, .scroll-table th { padding: 8px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: none !important; border-right: none !important; } .scroll-table th { white-space: nowrap; word-wrap: normal; } .scroll-table thead th { position: sticky; top: 0; z-index: 11; font-size: var(--mafa-th-font-size); font-weight: var(--mafa-th-font-weight); text-transform: var(--mafa-th-text-transform); letter-spacing: var(--mafa-th-letter-spacing); line-height: var(--mafa-th-line-height); color: #607d8b; background: #f0f4f7 !important; border-top: none !important; border-bottom: 1px solid #dce3e8; border-left: none !important; border-right: none !important; box-shadow: none; } .scroll-table-wrapper.is-thead-stuck .scroll-table thead th { box-shadow: inset 0 1px 0 #dce3e8; } .scroll-table-sticky-sentinel { height: 0; width: 100%; margin: 0; padding: 0; border: 0; overflow: hidden; pointer-events: none; visibility: hidden; } .scroll-table tbody tr td { border-bottom: 1px solid #ddd !important; } .scroll-table th.sticky-photo, .scroll-table td.sticky-photo { position: sticky; left: 0; z-index: 1; box-shadow: none; overflow: visible; } .scroll-table th.is-sticky-stuck.sticky-photo, .scroll-table td.is-sticky-stuck.sticky-photo, .scroll-table th.is-sticky-stuck.sticky-code, .scroll-table td.is-sticky-stuck.sticky-code, .scroll-table th.is-sticky-stuck.pw-products-table__photo, .scroll-table td.is-sticky-stuck.pw-products-table__photo, .scroll-table th.is-sticky-stuck.sticky-stt, .scroll-table td.is-sticky-stuck.sticky-stt, .scroll-table th.is-sticky-stuck.gw-stages-sticky-col, .scroll-table td.is-sticky-stuck.gw-stages-sticky-col { box-shadow: inset -1px 0 0 #ddd !important; border-left: none !important; border-right: none !important; } .scroll-table th.is-sticky-stuck.sticky-photo::after, .scroll-table td.is-sticky-stuck.sticky-photo::after, .scroll-table th.is-sticky-stuck.sticky-code::after, .scroll-table td.is-sticky-stuck.sticky-code::after, .scroll-table th.is-sticky-stuck.pw-products-table__photo::after, .scroll-table td.is-sticky-stuck.pw-products-table__photo::after, .scroll-table th.is-sticky-stuck.sticky-stt::after, .scroll-table td.is-sticky-stuck.sticky-stt::after, .scroll-table th.is-sticky-stuck.gw-stages-sticky-col::after, .scroll-table td.is-sticky-stuck.gw-stages-sticky-col::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 8px; transform: translateX(100%); pointer-events: none; z-index: 4; background: linear-gradient(to right, rgba(0, 0, 0, 0.07), rgba(0, 0, 0, 0.02) 60%, transparent); } .gw-order-greenware-stages th.is-sticky-stuck, .gw-order-greenware-stages td.is-sticky-stuck { box-shadow: none !important; border-left: none !important; border-right: none !important; } .gw-order-greenware-stages th.is-sticky-stuck::after, .gw-order-greenware-stages td.is-sticky-stuck::after { content: none !important; display: none !important; } .scroll-table-wrapper.is-sticky-photo-flush .scroll-table th.sticky-photo, .scroll-table-wrapper.is-sticky-photo-flush .scroll-table td.sticky-photo { border-left: none !important; } .scroll-table-wrapper.is-sticky-photo-flush .scroll-table th.sticky-photo:not(.is-sticky-stuck), .scroll-table-wrapper.is-sticky-photo-flush .scroll-table td.sticky-photo:not(.is-sticky-stuck) { box-shadow: inset 1px 0 0 #ddd; } .scroll-table thead th.sticky-photo { top: 0; z-index: 15; background-color: #f0f4f7 !important; color: #607d8b !important; } .scroll-table tbody td.sticky-photo { top: auto; background-color: #fff !important; } .scroll-table tbody tr:hover td.sticky-photo { background: #f5f9fd !important; } .scroll-table td.description { text-align: left; white-space: normal; } .scroll-table td.total { font-weight: bold; background: #f0f8ff; } .scroll-table tbody tr:hover { background: #f6fcff; } .scroll-table td.sticky-photo img { display: block; width: 80px; max-width: 100%; height: auto; margin: 0 auto; } .scroll-table.order-packinglist-table { width: max-content; min-width: 1800px; max-width: none; table-layout: auto; border-collapse: separate; border-spacing: 0; } .scroll-table.order-packinglist-table th, .scroll-table.order-packinglist-table td { border-top: none !important; } .scroll-table.order-packinglist-table .pl-col-carton { width: 120px; min-width: 120px; } .scroll-table.order-packinglist-table .pl-col-packed { width: 100px; min-width: 100px; } .scroll-table.order-packinglist-table .pl-col-code { width: 120px; min-width: 120px; } .scroll-table.order-packinglist-table .pl-col-desc { min-width: 200px; white-space: normal; text-align: left; } .scroll-table.order-packinglist-table th.sticky-photo, .scroll-table.order-packinglist-table td.sticky-photo { width: 92px; min-width: 92px; max-width: 92px; box-sizing: border-box; padding-left: 6px; padding-right: 6px; } .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table th.sticky-photo, .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table td.sticky-photo { box-shadow: none; } .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table th.sticky-photo:not(.is-sticky-stuck)::after, .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table td.sticky-photo:not(.is-sticky-stuck)::after { content: none !important; display: none !important; } .order-tab-hscroll-shell .scroll-table.order-mould-tab-table th.sticky-photo, .order-tab-hscroll-shell .scroll-table.order-mould-tab-table td.sticky-photo { position: sticky; left: 0; z-index: 4; box-sizing: border-box; overflow: visible; box-shadow: none; } .order-tab-hscroll-shell .scroll-table.order-mould-tab-table thead th.sticky-photo { z-index: 16; background-color: #f0f4f7 !important; } .order-tab-hscroll-shell .scroll-table.order-mould-tab-table tbody td.sticky-photo { background-color: #fff !important; } .order-tab-hscroll-shell .scroll-table.order-mould-tab-table th.sticky-photo:not(.is-sticky-stuck)::after, .order-tab-hscroll-shell .scroll-table.order-mould-tab-table td.sticky-photo:not(.is-sticky-stuck)::after { content: none !important; display: none !important; } .order-tab-hscroll-shell .scroll-table.order-mould-tab-table th.order-mould-col-stt, .order-tab-hscroll-shell .scroll-table.order-mould-tab-table td.order-mould-col-stt { width: 52px; min-width: 52px; max-width: 52px; } .scroll-table.order-mould-tab-table td.sticky-photo img { display: block; width: 80px; max-width: 100%; height: auto; margin: 0 auto; object-fit: contain; border-radius: 0; vertical-align: middle; } .order-mould-tab-table col.order-mould-col-code, .order-mould-tab-table th.order-mould-col-code, .order-mould-tab-table td.order-mould-col-code { width: 118px; min-width: 118px; max-width: 140px; white-space: normal; word-break: break-word; vertical-align: top; text-align: left; } .order-mould-tab-table col.order-mould-col-desc, .order-mould-tab-table th.order-mould-col-desc, .order-mould-tab-table td.order-mould-col-desc { width: 280px; min-width: 280px; max-width: none; white-space: normal; word-break: break-word; overflow-wrap: break-word; vertical-align: top; text-align: left; } .scroll-table.order-mould-tab-table col.order-mould-col-photo, .scroll-table.order-mould-tab-table th.order-mould-col-photo, .scroll-table.order-mould-tab-table td.order-mould-col-photo, .scroll-table.order-mould-tab-table th.sticky-photo.order-mould-col-photo, .scroll-table.order-mould-tab-table td.sticky-photo.order-mould-col-photo { width: 100px; min-width: 100px; max-width: 100px; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table th.order-mould-col-code, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table td.order-mould-col-code { width: 118px !important; min-width: 118px !important; max-width: 140px !important; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table th.order-mould-col-desc, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table td.order-mould-col-desc { width: 280px !important; min-width: 280px !important; max-width: none !important; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table th.order-mould-col-photo, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table td.order-mould-col-photo, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table th.sticky-photo.order-mould-col-photo, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-mould-tab-table td.sticky-photo.order-mould-col-photo { width: 100px !important; min-width: 100px !important; max-width: 100px !important; } .mould-sp-link-details > .scroll-hint, .mould-sp-link-details > [class*="-scroll-hint"], .mould-sp-link-details .order-tab-hscroll-block > .scroll-hint { margin-top: 10px; margin-bottom: 0; } .order-tab-hscroll-shell { position: relative; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; overflow-y: clip; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #3b82ac #f0f0f0; } .order-tab-hscroll-shell.is-photo-col-stuck::before { content: ""; position: absolute; top: 0; left: var(--pl-photo-col-edge, var(--pl-photo-col-width, 92px)); bottom: 12px; width: 10px; pointer-events: none; z-index: 12; background: linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02) 55%, transparent); } .order-tab-hscroll-shell .scroll-table-wrapper { overflow: visible !important; width: 100%; min-width: 0; max-width: none; } .order-tab-hscroll-shell.is-table-expanded .scroll-table-wrapper { width: auto; } @media (max-width: 1199px) { .order-tab-hscroll-shell .scroll-table-wrapper { overflow-x: visible !important; overflow-y: visible !important; } } .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table { table-layout: auto; width: 100%; min-width: 0; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-vieworder-tab-table { width: max-content; } @media (max-width: 1199px) { .order-tab-hscroll-shell:not(.is-table-expanded) .scroll-table.order-vieworder-tab-table { width: 100% !important; min-width: 0 !important; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-vieworder-tab-table { width: max-content !important; min-width: 0 !important; } } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-stt, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-stt { min-width: 46px; width: 46px; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-check, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-check { min-width: 44px; width: 44px; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-code, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-code { min-width: 96px; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-desc, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-desc { min-width: 260px; white-space: normal; word-wrap: break-word; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-qty, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-qty, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-ralo, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-ralo, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-dc, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-dc { min-width: 76px; } .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table th.wh-col-defect, .order-tab-hscroll-shell.is-table-expanded .scroll-table.order-warehouse-table td.wh-col-defect { min-width: 88px; } .order-tab-hscroll-shell .scroll-table.order-warehouse-table td.wh-col-desc { white-space: normal; word-wrap: break-word; } .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table tbody td.sticky-photo { position: sticky; left: 0; z-index: 4; background-color: #fff; } .order-tab-sticky-sentinel { height: 0; width: 0; overflow: hidden; pointer-events: none; } .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table thead th { position: sticky; top: 0; z-index: 11; background-color: #f0f4f7 !important; color: #607d8b; border-top: none !important; box-shadow: none; } .order-tab-hscroll-shell.is-thead-stuck .scroll-table.order-vieworder-tab-table thead th { box-shadow: inset 0 1px 0 #dce3e8; } .order-tab-hscroll-shell .scroll-table.order-vieworder-tab-table thead th.sticky-photo { position: sticky; top: 0; left: 0; z-index: 16; background-color: #f0f4f7 !important; color: #607d8b !important; } .packinglist-thead-floater { position: fixed; top: 0; z-index: 90; overflow: hidden; pointer-events: none; box-sizing: border-box; background: #f0f4f7; border-top: 1px solid #dce3e8; box-shadow: inset 0 1px 0 #f0f4f7, 0 1px 0 #dce3e8; } .packinglist-thead-floater[hidden] { display: none !important; } .packinglist-thead-floater__clip { width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; } .packinglist-thead-floater__clip::-webkit-scrollbar { display: none; height: 0; } .packinglist-thead-clone { margin: 0; border-collapse: separate; border-spacing: 0; } .packinglist-thead-clone thead th { border-top: none !important; box-shadow: none; } .packinglist-thead-clone thead th:not(.sticky-photo) { position: static; } .packinglist-thead-clone thead th.sticky-photo { position: sticky; left: 0; top: 0; z-index: 2; background-color: #f0f4f7 !important; color: #607d8b !important; } .order-tab-hscroll-shell::-webkit-scrollbar { height: 12px; } .order-tab-hscroll-shell::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 6px; } .order-tab-hscroll-shell::-webkit-scrollbar-thumb { background: #3b82ac; border-radius: 6px; } .order-tab-hscroll-shell::-webkit-scrollbar-thumb:hover { background: #2d6a8a; } .scroll-table-hscroll-shell { position: relative; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .scroll-hint.scroll-hint--before-hscroll-shell { margin-bottom: 0; } .order-tab-hscroll-block > .scroll-hint, .scroll-hint:has(+ .order-tab-hscroll-shell), .scroll-hint + .scroll-table-wrapper:has(.order-vieworder-tab-table) { margin-top: 0; margin-bottom: 0; } .scroll-hint.scroll-hint--before-hscroll-shell + .scroll-table-hscroll-shell, .scroll-hint:has(+ .order-tab-hscroll-shell) + .scroll-table-hscroll-shell { margin-top: 0; } .scroll-table-hscroll-shell > .scroll-hint { margin-top: 0; } .scroll-table-hscroll-controls { position: fixed; right: calc(max(16px, env(safe-area-inset-right, 0px)) + 44px + 10px); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 10049; display: flex; align-items: center; height: 44px; gap: 5px; pointer-events: auto; opacity: 0.8; transition: opacity 0.35s ease, visibility 0.28s ease; } .scroll-table-hscroll-controls:hover { opacity: 1; } .scroll-table-hscroll-shell:not(.needs-scroll) .scroll-table-hscroll-controls { display: none; } .scroll-table-hscroll-shell .scroll-btn { background: rgba(59, 130, 172, 0.72); color: #fff; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 4px; padding: 0 12px; height: 36px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; line-height: 1; transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.2s ease, box-shadow 0.35s ease; box-shadow: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .scroll-table-hscroll-controls:hover .scroll-btn { background: rgba(59, 130, 172, 0.92); color: #fff; border-color: rgba(255, 255, 255, 0.38); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); } .scroll-table-hscroll-shell .scroll-btn:hover { background: rgba(45, 106, 138, 1); transform: scale(1.04); } .scroll-table-hscroll-shell .scroll-btn:active { transform: scale(0.96); } .scroll-table-hscroll-shell .scroll-btn:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; } @media (max-width: 1199px) { .scroll-table-hscroll-controls { bottom: calc(52px + 16px + env(safe-area-inset-bottom, 0px)); } } .scroll-table-hscroll-shell .scroll-table-wrapper { overflow: visible !important; width: auto; min-width: 0; max-width: none; } .scroll-table-wrapper.is-sticky-photo-scrolled .scroll-table th.sticky-photo:not(.is-sticky-stuck), .scroll-table-wrapper.is-sticky-photo-scrolled .scroll-table td.sticky-photo:not(.is-sticky-stuck) { box-shadow: none; } .scroll-table-wrapper.is-sticky-photo-flush.is-sticky-photo-scrolled .scroll-table th.sticky-photo:not(.is-sticky-stuck), .scroll-table-wrapper.is-sticky-photo-flush.is-sticky-photo-scrolled .scroll-table td.sticky-photo:not(.is-sticky-stuck) { border-left: none !important; box-shadow: inset 1px 0 0 #ddd; } .scroll-table tfoot tr td { border-bottom: 1px solid #ddd !important; } .scroll-hint, .viewkilnslip-scroll-hint, .settings-scroll-hint, .settings-users-scroll-hint, .userlogs-scroll-hint, .bom-type-price-scroll-hint, .piecework-list-scroll-hint { box-sizing: border-box; display: none; margin: 0; padding: 8px 12px; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.35; color: #546e7a; background: #fff; border: none; border-radius: 0; } .scroll-hint__inner { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; } .scroll-hint__icon { flex: 0 0 auto; font-size: 17px; line-height: 1; color: #3b82ac; } .scroll-hint__label { flex: 0 0 auto; white-space: nowrap; } .scroll-hint + .scroll-table-wrapper, .scroll-hint + .scroll-table-hscroll-shell, .scroll-hint + .order-tab-hscroll-shell, .scroll-hint + .gw-producer-stats-table-wrap, .scroll-hint + .piecework-detail-products-table-wrap, .scroll-hint + .settings-table-wrapper, .scroll-hint + .gw-entry-table-wrap, .scroll-hint + .viewkilnslip-table-wrapper, [class*="-scroll-hint"] + .scroll-table-wrapper, [class*="-scroll-hint"] + .scroll-table-hscroll-shell, [class*="-scroll-hint"] + .order-tab-hscroll-shell, [class*="-scroll-hint"] + .gw-producer-stats-table-wrap, [class*="-scroll-hint"] + .piecework-detail-products-table-wrap, [class*="-scroll-hint"] + .settings-table-wrapper, [class*="-scroll-hint"] + .gw-entry-table-wrap, [class*="-scroll-hint"] + .viewkilnslip-table-wrapper, .order-tab-hscroll-block > .scroll-hint + .order-tab-hscroll-shell, .order-tab-hscroll-block > .scroll-hint + .scroll-table-wrapper { margin-top: 0 !important; } @media (max-width: 1199px) { .scroll-table:not(.order-vieworder-tab-table) { width: max-content !important; min-width: 600px !important; } .scroll-table-wrapper:not(.order-tab-hscroll-shell .scroll-table-wrapper) > .scroll-table.order-vieworder-tab-table { width: max-content !important; min-width: 960px !important; } } .gw-order-ops-flash { margin: 8px 10px; font-size: 14px; line-height: 1.45; } .gw-order-ops-bar { margin: 0 0 8px; padding: 8px 11px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f8f9fa; font-size: 14px; line-height: 1.4; box-sizing: border-box; } .gw-order-ops-bar--open { background: #f1f8f4; border-color: #c8e6c9; } .gw-order-ops-bar--closed { background: #fff8e1; border-color: #ffe082; } .gw-order-ops-bar__main { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 30px; } .gw-order-ops-bar__left { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .gw-order-ops-bar__title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #37474f; white-space: nowrap; } .gw-order-ops-bar__status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .gw-order-ops-bar__status--open { color: #2e7d32; background: rgba(46, 125, 50, 0.12); } .gw-order-ops-bar__status--closed { color: #e65100; background: rgba(230, 81, 0, 0.12); } .gw-order-ops-bar__meta, .gw-order-ops-bar__hint { font-size: 12px; font-weight: 500; color: #78909c; } .gw-order-ops-bar__actions { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: auto; } .gw-order-ops-bar__form { margin: 0; display: inline-flex; } .gw-order-ops-bar__btn { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 11px; border-radius: 6px; border: 1px solid transparent; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .gw-order-ops-bar__btn--close { background: #fff3e0; border-color: #ffcc80; color: #e65100; } .gw-order-ops-bar__btn--close:hover { background: #ffe0b2; border-color: #ffb74d; color: #bf360c; } .gw-order-ops-bar__btn--reopen-toggle { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; } .gw-order-ops-bar__btn--reopen-toggle:hover, .gw-order-ops-bar__btn--reopen-toggle.is-open { background: #c8e6c9; border-color: #81c784; color: #1b5e20; } .gw-order-ops-bar__btn--reopen-submit { background: #2e7d32; border-color: #2e7d32; color: #fff; } .gw-order-ops-bar__btn--reopen-submit:hover { background: #1b5e20; border-color: #1b5e20; } .gw-order-ops-bar__chev { font-size: 9px; opacity: 0.8; transition: transform 0.15s ease; } .gw-order-ops-bar__reopen { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .gw-order-ops-bar__reopen.is-open { display: block; } .gw-order-ops-bar__reopen-form { display: flex; flex-direction: column; gap: 6px; max-width: 480px; } .gw-order-ops-bar__reopen-label { font-size: 12px; font-weight: 700; color: #546e7a; } .gw-order-ops-bar__reopen-input { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 14px; padding: 7px 9px; border: 1px solid #cfd8dc; border-radius: 6px; resize: vertical; min-height: 52px; } .gw-order-ops-bar__reopen-actions { display: flex; justify-content: flex-end; } .gw-order-toolbar { margin: 0 10px 10px; padding: 8px 11px; border: 1px solid #e0e0e0; border-radius: 8px; background: #f8f9fa; font-size: 14px; line-height: 1.4; box-sizing: border-box; } .gw-order-toolbar--open { background: #f1f8f4; border-color: #c8e6c9; } .gw-order-toolbar--closed { background: #fff8e1; border-color: #ffe082; } .gw-order-toolbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; min-height: 30px; } .gw-order-toolbar__section { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; } .gw-order-toolbar__divider { width: 1px; align-self: stretch; min-height: 28px; background: rgba(0, 0, 0, 0.1); flex-shrink: 0; } .gw-order-toolbar__label { font-size: 12px; font-weight: 700; color: #546e7a; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } .gw-order-toolbar__pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.3; white-space: nowrap; } .gw-order-toolbar__pill--open { color: #2e7d32; background: rgba(46, 125, 50, 0.12); } .gw-order-toolbar__pill--closed { color: #e65100; background: rgba(230, 81, 0, 0.12); } .gw-order-toolbar__pill--off { color: #546e7a; background: rgba(84, 110, 122, 0.12); } .gw-order-toolbar__meta, .gw-order-toolbar__hint { font-size: 12px; font-weight: 500; color: #78909c; } .gw-order-toolbar__actions { display: inline-flex; align-items: center; flex-shrink: 0; margin-left: auto; } .gw-order-toolbar__form { margin: 0; display: inline-flex; } .gw-order-toolbar__btn { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 5px 11px; border-radius: 6px; border: 1px solid transparent; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .gw-order-toolbar__btn--close { background: #fff3e0; border-color: #ffcc80; color: #e65100; } .gw-order-toolbar__btn--close:hover { background: #ffe0b2; border-color: #ffb74d; color: #bf360c; } .gw-order-toolbar__btn--toggle { background: #e3f2fd; border-color: #90caf9; color: #1565c0; } .gw-order-toolbar__btn--toggle:hover { background: #bbdefb; border-color: #64b5f6; color: #0d47a1; } .gw-order-toolbar__btn--reopen-toggle { background: #e8f5e9; border-color: #a5d6a7; color: #2e7d32; } .gw-order-toolbar__btn--reopen-toggle:hover, .gw-order-toolbar__btn--reopen-toggle.is-open { background: #c8e6c9; border-color: #81c784; color: #1b5e20; } .gw-order-toolbar__btn--reopen-submit { background: #2e7d32; border-color: #2e7d32; color: #fff; } .gw-order-toolbar__btn--reopen-submit:hover { background: #1b5e20; border-color: #1b5e20; } .gw-order-toolbar__chev { font-size: 9px; opacity: 0.8; transition: transform 0.15s ease; } .gw-order-toolbar__reopen { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0, 0, 0, 0.06); } .gw-order-toolbar__reopen.is-open { display: block; } .gw-order-toolbar__reopen-form { display: flex; flex-direction: column; gap: 6px; max-width: 480px; } .gw-order-toolbar__reopen-label { font-size: 12px; font-weight: 700; color: #546e7a; } .gw-order-toolbar__reopen-input { width: 100%; max-width: 100%; box-sizing: border-box; font-size: 14px; padding: 7px 9px; border: 1px solid #cfd8dc; border-radius: 6px; resize: vertical; min-height: 52px; } .gw-order-toolbar__reopen-actions { display: flex; justify-content: flex-end; } .gw-order-toolbar__switch-wrap { display: inline-flex; align-items: center; gap: 8px; } .gw-order-toolbar__switch.switch { width: 42px; height: 22px; flex-shrink: 0; } .gw-order-toolbar__switch .slider:before { height: 16px; width: 16px; left: 3px; bottom: 3px; } .gw-order-toolbar__switch input:checked + .slider:before { transform: translateX(20px); } .gw-order-toolbar__switch-state { font-size: 12px; font-weight: 700; color: #37474f; min-width: 28px; } .gw-order-toolbar__form-hidden { display: none !important; } .gw-order-filter-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 8px 11px; border: 1px solid #e0e0e0; border-radius: 8px; background: #fafbfc; box-sizing: border-box; } .gw-order-filter-bar__search { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 0; } .gw-order-filter-bar__search .gw-order-search-input { flex: 1; min-width: 0; max-width: 420px; } .gw-order-filter-bar__count { flex-shrink: 0; white-space: nowrap; } .gw-order-filter-bar__filters { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0; } .gw-order-filter-bar__bulk { flex-shrink: 0; margin-left: auto; } .gw-filter-chip { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 5px 12px; border: 1px solid #90a4ae; border-radius: 999px; background: #fff; color: #455a64; font-size: 12px; font-weight: 600; line-height: 1.3; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .gw-filter-chip:hover, .gw-filter-chip:focus { border-color: #607d8b; background: #eceff1; color: #263238; } .gw-filter-chip.is-active { color: #fff; background: #546e7a; border-color: #546e7a; } .gw-filter-chip--warn.is-active { background: #e65100; border-color: #e65100; } .gw-filter-chip.is-active i { opacity: 0.95; } .gw-filter-chip--piecework.is-active, #gwPieceworkFilterBtn.is-active { background: #6a1b9a; border-color: #6a1b9a; color: #fff; } #gwPieceworkFilterBtn.is-active i { color: #e1bee7; } .gw-bulk-pick--filter-hidden { visibility: hidden; pointer-events: none; } .gw-bulk-cap-warn { margin-left: 0; margin-right: 0; } .gw-order-ops-wip-alert { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px; padding: 8px 11px; border: 1px solid #ffcc80; border-left: 3px solid #f57c00; border-radius: 6px; background: #fff8e1; font-size: 13px; line-height: 1.45; color: #5d4037; } .gw-order-ops-wip-alert .fa-exclamation-triangle { color: #f57c00; margin-top: 2px; flex-shrink: 0; } #gwProductTable th.gw-order-rank-col, #gwProductTable td.gw-order-rank-col, #gwProductTable th:nth-child(1), #gwProductTable td:nth-child(1) { width: 50px; min-width: 50px; max-width: 50px; white-space: nowrap; } #gwProductTable th.gw-order-photo-col, #gwProductTable td.gw-order-photo-col, #gwProductTable th:nth-child(2), #gwProductTable td:nth-child(2) { width: 100px; min-width: 100px; max-width: 100px; white-space: nowrap; } #gwProductTable th.gw-order-product-col, #gwProductTable td.gw-order-product-col { width: 30%; min-width: 280px; text-align: left; white-space: normal; word-wrap: break-word; word-break: break-word; overflow: visible; text-overflow: clip; } #gwProductTable th.gw-order-product-col.is-sticky-stuck, #gwProductTable td.gw-order-product-col.is-sticky-stuck { box-shadow: none !important; border-left: none !important; border-right: none !important; } #gwProductTable th.gw-order-product-col.is-sticky-stuck::after, #gwProductTable td.gw-order-product-col.is-sticky-stuck::after { content: none !important; display: none !important; } #gwProductTable th.gw-order-qty-col, #gwProductTable td.gw-order-qty-col, #gwProductTable th:nth-child(4), #gwProductTable td:nth-child(4) { width: 120px; min-width: 120px; max-width: 120px; white-space: nowrap; text-align: center; } #gwProductTable th.gw-order-stages-col, #gwProductTable td.gw-order-stages-col { width: 50%; min-width: 520px; } .scroll-table-wrapper.is-row-focus-mode #gwProductTable .gw-product-row--focus-target td.sticky-photo { background: #fff !important; } .scroll-table-wrapper.is-row-focus-mode #gwProductTable .gw-product-row:not(.gw-product-row--focus-target) { opacity: 0.38; filter: blur(2px); pointer-events: none; transition: opacity 0.22s ease, filter 0.22s ease; } .scroll-table-wrapper.is-row-focus-mode #gwProductTable .gw-product-row--focus-target { position: relative; z-index: 2; box-shadow: inset 0 0 0 2px rgba(21, 101, 192, 0.28); background-color: #fff; } .scroll-table-wrapper.is-row-focus-mode #gwProductTable .invoice-supplement-separator { opacity: 0.38; filter: blur(1px); pointer-events: none; } .gw-order-product-info { line-height: 1.35; white-space: normal; word-break: break-word; } .gw-order-product-info__code a { font-weight: 700; } .gw-order-product-info__title, .gw-order-product-info__finish { color: inherit; } .gw-order-product-info__title { margin-top: 2px; font-weight: 700; } .gw-order-product-info__finish { margin-top: 4px; } .gw-order-product-info__size { margin-top: 4px; font-size: 12px; } .gw-order-stages-col { min-width: 0; padding: 8px 10px !important; vertical-align: top; } .gw-order-stages-panel { border: 1px solid #dce3e8; border-radius: 0; overflow: hidden; background: #fff; box-shadow: none; } .gw-order-greenware-stages { width: 100%; max-width: 100%; min-width: 240px; table-layout: auto; border-collapse: collapse; box-sizing: border-box; font-size: 13px; line-height: 1.35; margin: 0; border: none; background: #fff; } .gw-producer-stats-table .gw-order-stages-panel .gw-order-greenware-stages th, .gw-producer-stats-table .gw-order-stages-panel .gw-order-greenware-stages td, .scroll-table .gw-order-stages-panel .gw-order-greenware-stages th, .scroll-table .gw-order-stages-panel .gw-order-greenware-stages td, .scroll-table .gw-order-stages-panel .gw-order-greenware-stages th, .scroll-table .gw-order-stages-panel .gw-order-greenware-stages td { border: none !important; min-width: 0; } .gw-producer-stats-table .gw-order-greenware-stages thead th, .gw-producer-stats-table .gw-order-greenware-stages thead th.gw-ost-h, .scroll-table .gw-order-greenware-stages thead th, .scroll-table .gw-order-greenware-stages thead th.gw-ost-h, .scroll-table .gw-order-greenware-stages thead th, .scroll-table .gw-order-greenware-stages thead th.gw-ost-h { position: static !important; top: auto !important; z-index: auto !important; background: #f0f4f7 !important; background-color: #f0f4f7 !important; color: #607d8b !important; border: none !important; border-bottom: 1px solid #dce3e8 !important; box-shadow: none !important; } .gw-order-greenware-stages thead .gw-ost-head { background: #f0f4f7; } .gw-order-greenware-stages .gw-ost-h { padding: 8px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #607d8b; text-align: center; white-space: nowrap; vertical-align: middle; } .gw-order-greenware-stages .gw-ost-h--stage { text-align: left; padding-left: 10px; width: 22%; } .gw-order-greenware-stages .gw-ost-h--stage.gw-ost-focus-trigger { cursor: pointer; user-select: none; transition: background-color 0.15s ease, color 0.15s ease; } .gw-order-greenware-stages .gw-ost-focus-head-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; } .gw-order-greenware-stages .gw-ost-focus-trigger__label { flex: 1 1 auto; min-width: 0; text-align: left; } .gw-order-greenware-stages .gw-ost-focus-trigger__badge { flex-shrink: 0; color: #607d8b; font-size: 12px; line-height: 1; } .gw-order-greenware-stages .gw-ost-focus-trigger:hover, .gw-order-greenware-stages .gw-ost-focus-trigger:focus-visible { background: rgba(21, 101, 192, 0.08); color: #1565c0; outline: none; } .gw-order-greenware-stages .gw-ost-focus-trigger:hover .gw-ost-focus-trigger__badge, .gw-order-greenware-stages .gw-ost-focus-trigger:focus-visible .gw-ost-focus-trigger__badge { color: #1565c0; } .gw-order-greenware-stages .gw-ost-focus-trigger.is-active { background: rgba(21, 101, 192, 0.14); color: #0d47a1; } .gw-order-greenware-stages .gw-ost-focus-trigger.is-active .gw-ost-focus-trigger__badge { color: #0d47a1; } .gw-order-greenware-stages .gw-ost-h--act { width: 88px; min-width: 88px; max-width: 88px; } .gw-order-greenware-stages .gw-ost-row { transition: background-color 0.12s ease; } .gw-order-greenware-stages tr.gw-ost-row-clickable td:not(.gw-ost-act) { cursor: pointer; } .gw-order-greenware-stages .gw-ost-act { cursor: default; } .gw-order-greenware-stages .gw-ost-act .button { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; width: 100%; box-sizing: border-box; white-space: nowrap; padding-left: 4px; padding-right: 4px; } .gw-order-greenware-stages .gw-ost-row:last-child .gw-ost-metric, .gw-order-greenware-stages .gw-ost-row:last-child .gw-stage-name-cell, .gw-order-greenware-stages .gw-ost-row:last-child .gw-ost-act { border-bottom: none; } .gw-order-greenware-stages .gw-ost-metric { text-align: center; vertical-align: middle; padding: 8px 10px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; color: #546e7a; border-bottom: 1px solid #eceff1; white-space: nowrap; background: transparent; } .gw-order-greenware-stages .gw-ost-metric.tooltip { cursor: help; } .gw-order-greenware-stages .gw-ost-metric--has-val.gw-ost-metric--in { color: #00838f; font-weight: 700; } .gw-order-greenware-stages .gw-ost-metric--prod-done { color: #2e7d32; font-weight: 700; } .gw-order-greenware-stages .gw-ost-metric--has-val.gw-ost-metric--def { color: #c62828; font-weight: 700; } .gw-order-greenware-stages .gw-ost-metric--def-warn { background: #fff5f5; } .gw-order-greenware-stages .gw-ost-metric--has-val.gw-ost-metric--out { color: #6a1b9a; font-weight: 700; } .gw-order-greenware-stages .gw-ost-metric--has-val.gw-ost-metric--stock { color: #2e7d32; font-weight: 700; } .gw-order-greenware-stages .gw-ost-empty { color: #cbd5e1; font-weight: 400; } .gw-order-greenware-stages .gw-ost-act { text-align: center; vertical-align: middle; padding: 6px 6px; white-space: nowrap; border-bottom: 1px solid #eceff1; background: transparent; width: 88px; min-width: 88px; max-width: 88px; box-sizing: border-box; } .gw-order-greenware-stages .gw-stage-name-cell.gw-stage-name-cell { position: relative; vertical-align: top; box-sizing: border-box; padding: 0 !important; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; background: transparent; border-bottom: 1px solid #eceff1; } .gw-order-greenware-stages th, .gw-order-greenware-stages td { overflow: visible; text-overflow: clip; } .gw-order-greenware-stages thead th { white-space: nowrap; } .gw-order-greenware-stages td.gw-col-produced, .gw-order-greenware-stages th.gw-col-produced, .gw-order-greenware-stages td.gw-col-defect, .gw-order-greenware-stages th.gw-col-defect { text-align: center !important; vertical-align: middle; } .gw-order-greenware-stages .gw-stage-name-issue { flex-shrink: 0; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; font-size: 12px; } .gw-order-greenware-stages .gw-stage-name-issue--issue { color: #f57c00; cursor: help; } .gw-order-greenware-stages .gw-stage-name-issue--qtywarn { color: #c62828; cursor: help; } .gw-order-greenware-stages .gw-stage-name-issue--defwarn { color: #e65100; cursor: help; } .gw-order-greenware-stages tbody tr.gw-order-stage-row-qtywarn .gw-stage-name-issue--defwarn { color: #e65100 !important; } .gw-order-greenware-stages .gw-stage-name-hit { position: absolute; top: 0; right: 0; left: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-start; line-height: 1.3; box-sizing: border-box; padding: 0; margin: 0; } .gw-order-greenware-stages .gw-stage-name-hit:not(.gw-stage-name-hit--no-progress) { padding-top: 1px; } .gw-order-greenware-stages .gw-stage-name-hit--no-progress { justify-content: center; padding: 2px 8px; } .gw-order-greenware-stages .gw-stage-name-hit .gw-stage-name-row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 4px; width: 100%; max-width: 100%; box-sizing: border-box; } .gw-order-greenware-stages .gw-stage-name-hit:not(.gw-stage-name-hit--no-progress) .gw-stage-name-row { flex: 1 1 auto; min-height: 0; padding: 1px 8px 2px 8px; } .gw-order-greenware-stages .gw-stage-name-hit:not(.gw-stage-name-hit--no-progress) .gw-stage-name-label { flex: 1 1 auto; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; text-align: left; box-sizing: border-box; } .gw-order-greenware-stages .gw-stage-name-hit:not(.gw-stage-name-hit--no-progress) .gw-stage-name-issue { flex-shrink: 0; line-height: 1; white-space: nowrap; } .gw-order-greenware-stages .gw-stage-name-issue--piecework { color: #6a1b9a; font-size: 13px; cursor: help; } .gw-order-greenware-stages .gw-stage-name-issue--piecework i { vertical-align: -1px; } .gw-order-greenware-stages .gw-stage-name-hit--no-progress .gw-stage-name-row { width: 100%; max-width: 100%; padding: 0; } .gw-order-greenware-stages .gw-stage-name-hit--no-progress .gw-stage-name-label { flex: 1 1 auto; min-width: 0; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; text-align: left; box-sizing: border-box; } .gw-order-greenware-stages .gw-order-stage-btn-transfer { background-color: #6a1b9a; border: 1px solid #5e1788; color: #fff; } .gw-order-greenware-stages .gw-order-stage-btn-transfer:hover { background-color: #5e1788; border-color: #4a148c; color: #fff; } .gw-order-greenware-stages .gw-ost-h--bulk-pick, .gw-order-greenware-stages .gw-ost-bulk-pick-cell { width: 28px; min-width: 28px; max-width: 28px; padding: 4px 2px !important; box-sizing: border-box; vertical-align: middle; } .gw-order-greenware-stages .gw-ost-h--bulk-pick { border-bottom: 1px solid #e0e6ed; } .gw-ost-bulk-pick-cell .gw-bulk-pick { display: inline-flex; align-items: center; justify-content: center; margin: 0; cursor: pointer; vertical-align: middle; } .gw-bulk-pick-cb { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: #2e7d32; } .gw-order-greenware-stages .gw-stage-name-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; } .gw-bulk-entry-btn.is-visible { display: inline-flex !important; } .gw-bulk-entry-btn--disabled, .gw-bulk-entry-btn[aria-disabled="true"] { opacity: 0.65; cursor: default; pointer-events: auto; } .gw-bulk-products-wrap { margin-bottom: 12px; } .gw-bulk-products-wrap--done .gw-bulk-td-qty { font-size: 15px; } .gw-bulk-done-meta td:first-child { vertical-align: top; } .gw-bulk-products-wrap .gw-bulk-products-table { width: 100%; min-width: 640px; table-layout: fixed; } .gw-bulk-products-wrap .gw-bulk-col-stt, .gw-bulk-products-wrap .gw-bulk-th-stt, .gw-bulk-products-wrap .gw-bulk-td-stt { width: 36px; min-width: 36px; max-width: 36px; } .gw-bulk-products-wrap .gw-bulk-col-photo { width: 92px; min-width: 92px; } .gw-bulk-products-wrap .gw-bulk-col-product { width: auto; min-width: 200px; } .gw-bulk-products-wrap .gw-bulk-col-order, .gw-bulk-products-wrap .gw-bulk-th-order, .gw-bulk-products-wrap .gw-bulk-td-order { width: 72px; min-width: 72px; max-width: 88px; } .gw-bulk-products-wrap .gw-bulk-col-produced, .gw-bulk-products-wrap .gw-bulk-col-defect, .gw-bulk-products-wrap .gw-bulk-th-qty, .gw-bulk-products-wrap .gw-bulk-td-qty { width: 96px; min-width: 88px; max-width: 110px; } .gw-bulk-products-wrap .gw-bulk-th-product { text-align: left !important; } .gw-bulk-products-wrap .gw-bulk-td-product { white-space: normal; word-break: break-word; } .gw-bulk-products-wrap .gw-bulk-products-table input[type="number"] { width: 100%; max-width: 88px; margin: 0 auto; box-sizing: border-box; } .gw-bulk-products-wrap .gw-bulk-tfoot-label { text-align: right !important; } .gw-bulk-products-wrap .scroll-table thead th.sticky-photo { z-index: 16; } .gw-bulk-products-wrap .scroll-table tbody td.sticky-photo { z-index: 2; } .gw-order-greenware-stages .gw-order-stage-action-cell { width: 88px; min-width: 88px; max-width: 88px; } .gw-order-greenware-stages .gw-stage-name-hit--no-progress .gw-stage-name-issue { flex-shrink: 0; line-height: 1; white-space: nowrap; } .gw-order-greenware-stages .gw-stage-name-hit--no-progress .gw-stage-name-issue--piecework { flex-shrink: 0; } .gw-order-greenware-stages .gw-stage-name-hit .progress-container.gw-hangmoc-progress { position: static; flex: 0 0 5px; width: 100% !important; max-width: 100% !important; height: 5px; min-height: 5px; border-radius: 0; background: #e8f5e9; overflow: hidden; box-sizing: border-box; margin: 0; align-self: stretch; } .gw-order-greenware-stages .gw-hangmoc-progress .progress-bar { background: linear-gradient(90deg, #81c784, #43a047); } .gw-order-greenware-stages .gw-hangmoc-progress .progress-bar--gw-warn { background: linear-gradient(90deg, #ffb74d, #f57c00) !important; } .gw-order-greenware-stages tbody tr.gw-order-stage-row-qtywarn td { color: #c62828 !important; } .gw-order-greenware-stages tbody tr.gw-order-stage-row-qtywarn .gw-stage-name-label, .gw-order-greenware-stages tbody tr.gw-order-stage-row-qtywarn td a:not(.button) { color: #c62828 !important; } .gw-order-greenware-stages tbody tr.gw-order-stage-row-qtywarn .gw-ost-metric--prod-done { color: #c62828 !important; } .gw-order-greenware-stages tbody tr.gw-order-stage-row-qtywarn .gw-hangmoc-progress .progress-bar--gw-warn { background: linear-gradient(90deg, #ef5350, #c62828) !important; } .gw-order-greenware-stages tbody tr:last-child td { border-bottom: none !important; } @media (max-width: 1199px) { #gwProductTable.scroll-table.order-vieworder-tab-table { width: max-content !important; min-width: 1190px !important; max-width: none !important; table-layout: fixed !important; } #gwProductTable th.gw-order-rank-col, #gwProductTable td.gw-order-rank-col, #gwProductTable th:nth-child(1), #gwProductTable td:nth-child(1) { width: 50px !important; min-width: 50px !important; max-width: 50px !important; } #gwProductTable th.gw-order-photo-col, #gwProductTable td.gw-order-photo-col, #gwProductTable th:nth-child(2), #gwProductTable td:nth-child(2) { width: 100px !important; min-width: 100px !important; max-width: 100px !important; } #gwProductTable th.gw-order-product-col, #gwProductTable td.gw-order-product-col { width: 300px !important; min-width: 300px !important; max-width: 300px !important; } #gwProductTable th.gw-order-qty-col, #gwProductTable td.gw-order-qty-col, #gwProductTable th:nth-child(4), #gwProductTable td:nth-child(4) { width: 120px !important; min-width: 120px !important; max-width: 120px !important; } #gwProductTable th.gw-order-stages-col, #gwProductTable td.gw-order-stages-col { width: 620px !important; min-width: 620px !important; max-width: none !important; } } @media (max-width: 1199px) { .scroll-table.gw-stages-settings-table { table-layout: auto; min-width: 880px !important; } } @media (min-width: 1200px) { .gw-stages-settings-table { width: 100% !important; max-width: 100% !important; table-layout: fixed; } } .gw-settings-tab-inner { padding-block: 10px; padding-inline: 0; box-sizing: border-box; } .gw-stages-settings-table { box-sizing: border-box; } .gw-stages-settings-table th, .gw-stages-settings-table td { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; min-width: 0; box-sizing: border-box; vertical-align: middle; } .gw-stages-settings-table col.gw-stages-col-sort { width: 40px; } .gw-stages-settings-table col.gw-stages-col-stage { width: 16%; } .gw-stages-settings-table col.gw-stages-col-dept { width: 9%; } .gw-stages-settings-table col.gw-stages-col-pct { width: 54px; } .gw-stages-settings-table col.gw-stages-col-toggle { width: 48px; } .gw-stages-settings-table col.gw-stages-col-signature { width: 76px; } .gw-stages-settings-table col.gw-stages-col-piecework { width: 68px; } .gw-stages-settings-table thead th { font-size: var(--mafa-th-font-size); font-weight: var(--mafa-th-font-weight); line-height: var(--mafa-th-line-height); text-transform: var(--mafa-th-text-transform); letter-spacing: var(--mafa-th-letter-spacing); color: #607d8b; text-align: center; vertical-align: middle; padding: 6px 4px; } .gw-stages-settings-table thead th.gw-stages-th-stage, .gw-stages-settings-table thead th.gw-stages-th-dept { white-space: nowrap; } .gw-stages-settings-table thead th.gw-stages-th-signature { white-space: normal; padding: 6px 3px; } .gw-stages-settings-table thead th.gw-stages-th-piecework { white-space: nowrap; padding: 6px 2px; } .gw-stages-settings-table thead th.gw-stages-th-sort { padding: 6px 2px; } .gw-stages-settings-table th.gw-stages-sticky-col, .gw-stages-settings-table td.gw-stages-sticky-col { position: sticky; left: 0; z-index: 2; background-color: #fff; box-shadow: 2px 0 6px -2px rgba(0, 0, 0, 0.12); } .gw-stages-settings-table thead th.gw-stages-sticky-col { z-index: 12; background-color: #f0f4f7 !important; box-shadow: inset -1px 0 0 #dce3e8, 2px 0 6px -2px rgba(0, 0, 0, 0.1); } .gw-stages-settings-table tbody tr:hover td.gw-stages-sticky-col { background-color: #f6fcff !important; } .gw-stages-settings-table tr.gw-stage-settings-row-clickable td:not(.gw-stage-sort-cell):not(.gw-stage-toggle-cell) { cursor: pointer; } .gw-stages-settings-table .gw-stage-sort-cell, .gw-stages-settings-table .gw-stage-toggle-cell { cursor: default; } .gw-stages-settings-table th.gw-stages-th-stage, .gw-stages-settings-table td.gw-stage-name-cell { vertical-align: top; font-size: 13px; line-height: 1.35; } .gw-stages-settings-table td.gw-stage-dept-cell { font-size: 13px; line-height: 1.35; vertical-align: middle; } .gw-stages-settings-table td.gw-stage-name-cell > .bold700 { text-transform: uppercase; letter-spacing: 0.02em; } .gw-stages-settings-table td.gw-stage-name-cell .small-text { font-size: 12px; line-height: 1.35; } .gw-stages-settings-table th.gw-stages-th-dept, .gw-stages-settings-table tr td:nth-child(3), .gw-stages-settings-table th.gw-stages-th-pct, .gw-stages-settings-table tr td:nth-child(4), .gw-stages-settings-table tr td:nth-child(5) { text-align: center; vertical-align: middle; } .gw-stages-settings-table th.gw-stages-th-sort, .gw-stages-settings-table td.gw-stage-sort-cell { text-align: center; white-space: nowrap; padding: 6px 2px; vertical-align: middle; } .gw-stages-settings-table .gw-stage-sort-arrows { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 2px; } .gw-stages-settings-table th.gw-stages-th-stage { width: 16%; } .gw-stages-settings-table td.gw-stage-toggle-cell { width: 1%; white-space: nowrap; vertical-align: middle; text-align: center; padding: 6px 4px; } .gw-stage-detail-shell { display: flow-root; --gw-detail-gutter: 8px; box-sizing: border-box; } .gw-stage-detail-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: var(--gw-detail-gutter); box-sizing: border-box; } .gw-stage-detail-title { font-size: 24px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; } .gw-stage-detail-shell .gw-ledger-stats-banner-outer, .gw-stage-detail-shell .gw-issues-panel-outer { margin-bottom: var(--gw-detail-gutter); } .gw-stage-detail-alert-wrap { margin: var(--gw-detail-gutter); } .nc-notify-settings__flash { margin-bottom: 12px; } .nc-notify-switch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .nc-notify-master-bar { margin-bottom: 16px; } .nc-notify-telegram-pane { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; background: #fff; } .nc-notify-telegram-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: #f5f7fa; font-weight: 700; font-size: 20px; line-height: 1.25; color: #1565c0; border-bottom: 1px solid #eceff1; } .nc-notify-telegram-header .fa-telegram { font-size: 24px; color: #0088cc; } .nc-notify-telegram-form { padding: 16px 16px 14px; box-sizing: border-box; } .nc-notify-telegram-form .settings-table { margin: 0; } .nc-notify-telegram-form tr.nc-notify-webhook-secret-row > td { vertical-align: top; } .nc-notify-telegram-form .nc-notify-webhook-secret-label { padding-top: 12px; white-space: nowrap; } .nc-notify-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; } .nc-notify-link-stats { margin: 8px 0 0; font-size: 13px; line-height: 1.4; color: #78909c; } .nc-notify-webhook-preview { margin-top: 10px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; max-width: 640px; box-sizing: border-box; } .nc-notify-webhook-preview__label { margin: 0 0 4px; color: #546e7a; } .nc-notify-webhook-preview__url { display: block; word-break: break-all; font-size: 12px; line-height: 1.5; color: #37474f; } .wrapper-payroll.bgwhite>.gw-workflow-tab-bar { border-top: 1px solid #e0e0e0; } .gw-settings-workflow-outer { margin-inline: 0px; box-sizing: border-box; } .gw-settings-workflow-outer .gw-workflow-section { width: 100%; } .gw-stage-detail-alert-wrap .alert { margin: 0; } .gw-stage-detail-alert-wrap .alert+.alert { margin-top: 10px; } .gw-stage-detail-shell>.alert:first-child { margin-top: 0 !important; } .gw-form-product-confirm { display: flex; align-items: center; gap: 15px; padding: 12px; border: 2px solid #90caf9; border-radius: 8px; margin-bottom: 14px; flex-wrap: wrap; box-sizing: border-box; } .gw-form-product-confirm .gw-form-product-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid #e0e0e0; flex-shrink: 0; } .gw-produce-cap-hint--exhausted #gwProduceCapRemainVal { color: #c62828; } #gwEntryForm input[name="qty_defective"]:disabled { background: #f5f5f5; color: #9e9e9e; cursor: not-allowed; } .gw-sig-canvas { box-sizing: border-box; border: 2px solid #90caf9; border-radius: 6px; background: #fff; touch-action: none; cursor: crosshair; display: block; vertical-align: top; pointer-events: auto; } .gw-sig-preview-box { display: inline-block; background: #fff; padding: 6px 8px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } .gw-sig-preview-box img { max-width: 280px; max-height: 100px; display: block; background: #fff; vertical-align: middle; } .gw-entry-col-sig .gw-sig-preview-box--list img { max-width: 180px; } .gw-sig-block { display: flex; flex-direction: column; align-items: stretch; } .gw-sig-block .gw-sig-canvas, .gw-sig-block .gw-sig-preview-box { width: 100%; max-width: 280px; } .gw-sig-name-field { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; width: 100%; max-width: 280px; } .gw-sig-name-field label { margin: 0; } .gw-sig-name-input { width: 100%; max-width: 280px; box-sizing: border-box; } .gw-sig-name-input:disabled { opacity: 1; cursor: default; background: #f0f2f5; color: #333; } .gw-ledger-stats-banner .gw-transfer-drill-btn { border: none; background: none; padding: 0; margin: 0; font: inherit; font-size: inherit; line-height: inherit; font-weight: 700; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .gw-ledger-stats-banner .gw-transfer-drill-btn:hover { opacity: 0.85; } .gw-ledger-stats-banner .kpi-strip__card--product { align-items: center; --kpi-accent: #5e35b1; border-top-color: var(--kpi-accent); } .gw-ledger-stats-banner .gw-kpi-product-inner { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; } .gw-ledger-stats-banner .gw-kpi-product-thumb { width: 50px; height: 50px; min-width: 50px; min-height: 50px; max-width: 50px; max-height: 50px; object-fit: cover; border-radius: 6px; border: 1px solid #e0e0e0; background: #fff; flex-shrink: 0; cursor: pointer; box-sizing: border-box; vertical-align: middle; } .gw-ledger-stats-banner .gw-kpi-product-thumb:hover { opacity: 0.88; } .gw-ledger-stats-banner .gw-kpi-product-thumb:focus-visible { outline: 2px solid #1565c0; outline-offset: 0; } .gw-ledger-stats-banner .gw-kpi-product-thumb--empty { display: flex; align-items: center; justify-content: center; color: #9e9e9e; font-size: 20px; } .gw-ledger-stats-banner .gw-kpi-product-meta { min-width: 0; flex: 1; line-height: 1.35; } .gw-ledger-stats-banner .gw-kpi-product-code { font-size: 15px; line-height: 1.3; } .gw-ledger-stats-banner .gw-kpi-product-qty { margin-top: 4px; font-size: 13px; color: #5c6b7a; } .gw-stats-kpi-area { min-width: 0; } .gw-stage-detail-shell .gw-workflow-section--stage-detail { margin-bottom: 0; border-left: none; border-right: none; border-radius: 0; } .gw-stage-detail-shell .gw-workflow-tab { padding: 10px 8px; font-size: 14px; } .gw-workflow-section { border: 1px solid #e0e0e0; border-radius: 8px; background: #fff; overflow: hidden; box-sizing: border-box; width: 100%; } .gw-workflow-tab-bar { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid #e0e0e0; background: #f5f7fa; } .gw-workflow-tab, button.gw-workflow-tab, a.gw-workflow-tab { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border: none; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; font: inherit; font-weight: 600; font-size: 15px; color: #546e7a; text-align: center; text-decoration: none; box-sizing: border-box; transition: background .15s, color .15s, border-color .15s; } button.gw-workflow-tab, a.gw-workflow-tab { display: flex; align-items: center; justify-content: center; } .gw-workflow-tab:hover, button.gw-workflow-tab:hover, a.gw-workflow-tab:hover { background: #eceff1; color: #1565c0; } .gw-workflow-tab.is-active, button.gw-workflow-tab.is-active, a.gw-workflow-tab.is-active { background: #fff; color: #1565c0; border-bottom-color: #1565c0; } .gw-workflow-tab-bar .dropdown-menu.gw-workflow-tab-dropdown { flex: 0 0 auto; display: flex; align-items: stretch; } .gw-workflow-tab-bar .dropdown-menu .menu-trigger.gw-workflow-tab { flex: 0 0 auto; } .customer-detail-tab-bar>a.gw-workflow-tab, .customer-detail-tab-bar>.dropdown-menu.gw-workflow-tab-dropdown { flex: 1 1 0; min-width: 0; } .customer-detail-tab-bar>.dropdown-menu.gw-workflow-tab-dropdown { display: flex; align-items: stretch; } .customer-detail-tab-bar>.dropdown-menu.gw-workflow-tab-dropdown .menu-trigger.gw-workflow-tab { flex: 1 1 auto; width: 100%; } .customer-detail-tab-bar-scroll { position: relative; overflow: visible; max-width: 100%; } @media (max-width: 1199px) { .customer-detail-tab-bar-scroll .customer-detail-tab-bar { flex-wrap: nowrap; align-items: stretch; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-behavior: auto; scrollbar-width: none; max-width: 100%; } .customer-detail-tab-bar-scroll:not(.is-scrollable) .customer-detail-tab-bar { overflow-x: hidden; } .customer-detail-tab-bar-scroll .customer-detail-tab-bar::-webkit-scrollbar { display: none; height: 0; } .customer-detail-tab-bar-scroll .customer-detail-tab-bar>a.gw-workflow-tab, .customer-detail-tab-bar-scroll .customer-detail-tab-bar>.dropdown-menu.gw-workflow-tab-dropdown { flex: 0 0 auto; min-width: max-content; white-space: nowrap; } .customer-detail-tab-bar-scroll .customer-detail-tab-bar>.dropdown-menu.gw-workflow-tab-dropdown .menu-trigger.gw-workflow-tab { flex: 0 0 auto; width: auto; } .customer-detail-tab-bar-scroll .customer-detail-tab-bar>a.gw-workflow-tab, .customer-detail-tab-bar-scroll .customer-detail-tab-bar .dropdown-menu .menu-trigger.gw-workflow-tab { padding: 10px 14px; font-size: 14px; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s, border-color .15s; } .customer-detail-tab-bar-scroll .customer-detail-tab-bar>a.gw-workflow-tab:hover:not(.is-active), .customer-detail-tab-bar-scroll .customer-detail-tab-bar>a.gw-workflow-tab:active:not(.is-active) { background: transparent; color: #546e7a; border-bottom-color: transparent; } .customer-detail-tab-bar-scroll .customer-detail-tab-bar .dropdown-menu .menu-trigger.gw-workflow-tab:hover:not(.is-active) { background: transparent; color: #546e7a; border-bottom-color: transparent; } .customer-detail-tab-bar-scroll .dropdown-menu.dropdown-click:hover .menu-content { display: none !important; opacity: 0 !important; } .customer-detail-tab-bar-scroll .dropdown-menu.is-open:not(.force-close) .menu-content { display: block !important; opacity: 1 !important; transform: none !important; translate: none !important; position: fixed !important; z-index: 10100; margin-top: 0; position-anchor: none; } .customer-detail-tab-bar-scroll:has(.dropdown-menu.is-open) { z-index: 10080; } } @media (min-width: 769px) { .customer-detail-tab-bar-scroll .dropdown-menu.dropdown-click:hover .menu-content { display: none !important; opacity: 0 !important; } .customer-detail-tab-bar-scroll .dropdown-menu.is-open:not(.force-close) .menu-content { display: block !important; opacity: 1 !important; } .customer-detail-tab-bar-scroll:has(.dropdown-menu.is-open) { z-index: 10080; } } @media (max-width: 640px) { .customer-detail-tab-bar-scroll .customer-detail-tab-bar>a.gw-workflow-tab, .customer-detail-tab-bar-scroll .customer-detail-tab-bar>.dropdown-menu.gw-workflow-tab-dropdown .menu-trigger.gw-workflow-tab { flex: 0 0 auto; width: auto; justify-content: center; text-align: center; } } .gw-workflow-tab-bar .dropdown-menu .menu-content { top: calc(100% - 1px); padding: 10px 0; min-width: 0; max-width: min(480px, calc(100vw - 16px)); overflow-wrap: anywhere; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } .gw-workflow-tab-bar .dropdown-menu .menu-content a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; white-space: normal; border-bottom: none; transition: background 0.2s; } .gw-workflow-tab-bar .dropdown-menu .menu-content a:hover { background: #f2f6ff; color: #007bff; border-bottom: none; } a.gw-workflow-tab.gw-workflow-tab--danger { color: #c62828; flex: 0 1 auto; } .customer-detail-tab-bar>a.gw-workflow-tab.gw-workflow-tab--danger { flex: 1 1 0; } a.gw-workflow-tab.gw-workflow-tab--danger:hover { background: #ffebee; color: #b71c1c; border-bottom-color: #ef5350; } .bgwhite>.gw-workflow-section, .wrapper-payroll.bgwhite>.gw-workflow-section { margin-bottom: 0; } .gw-workflow-tab-panels { padding: 8px var(--gw-detail-gutter, 8px); box-sizing: border-box; min-width: 0; } .gw-settings-page > .gw-workflow-tab-panels { padding-inline: 10px; } .gw-stage-detail-shell .gw-workflow-tab-panels { padding-inline: var(--gw-detail-gutter); } .gw-workflow-tab-panel { box-sizing: border-box; min-width: 0; } .gw-workflow-tab-panel[hidden] { display: none !important; } .gw-workflow-tab-intro { margin: 0 0 10px; line-height: 1.45; } .gw-workflow-tab-heading { margin: 0 0 10px; line-height: 1.35; } .gw-workflow-tab-panel>.alert:first-child, .gw-workflow-tab-panel>.gw-workflow-tab-intro:first-child, .gw-workflow-tab-panel>.gw-workflow-tab-heading:first-child { margin-top: 0; } .gw-workflow-tab-panel .settings-table.gw-workflow-form-table { margin: 0; } .gw-workflow-tab-panel .gw-workflow-sig-row { margin-top: 15px; } .gw-workflow-form-actions { margin-top: 15px; display: flex; gap: 10px; flex-wrap: wrap; } .gw-workflow-tab-panel .piecework-detail-expand-panel { margin-bottom: 12px; } .gw-workflow-tab-panel .gw-entry-list { margin-bottom: 0; } .gw-workflow-tab-panel .gw-entry-month:last-child { margin-bottom: 0; } .gw-workflow-tab-panel .piecework-detail-expand-panel:last-child { margin-bottom: 0; } .gw-producer-stats-panel--in-tab { border: 1px solid #dce3e8; border-radius: 10px; background: #fff; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); margin: 0 0 14px; } .gw-producer-stats-panel--in-tab:last-child { margin-bottom: 0; } .gw-producer-stats-panel--in-tab .gw-producer-stats-panel__head { padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid #e8edf0; } .gw-producer-stats-panel--in-tab .gw-producer-stats-kpis { margin-inline: 0; margin-bottom: 8px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-kpi__label { font-size: 12px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-kpi__value { font-size: 17px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-kpi__unit { font-size: 12px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table-wrap { margin-inline: 0; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) { width: 100%; min-width: 0; table-layout: fixed; font-size: 14px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) thead th { font-size: var(--mafa-th-font-size); padding: 9px 10px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) tbody td, .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) tfoot td { padding: 9px 10px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table):not(.piecework-detail-worker-stats-table) .gw-producer-stats-table__rank { width: 36px; min-width: 36px; max-width: 36px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table):not(.piecework-detail-worker-stats-table) .gw-producer-stats-table__name { width: auto; min-width: 120px; max-width: none; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table):not(.piecework-detail-worker-stats-table) .gw-producer-stats-table__num { width: 72px; min-width: 72px; max-width: 72px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table):not(.piecework-detail-worker-stats-table) .gw-producer-stats-table__share { width: 148px; min-width: 148px; max-width: 148px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-worker { gap: 8px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-worker__avatar { width: 32px; height: 32px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-worker__name { font-size: 14px; font-weight: 600; } .gw-producer-stats-panel--in-tab .gw-producer-stats-share { gap: 8px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-progress.progress-container { flex: 1 1 auto; width: auto; min-width: 72px; height: 9px; margin: 0; } .gw-producer-stats-panel--in-tab .gw-producer-stats-share__pct { min-width: 34px; font-size: 11px; font-weight: 700; } .gw-producer-stats-panel--in-tab .gw-producer-stats-panel__title { font-size: 15px; } .gw-producer-stats-panel--daily .gw-producer-stats-progress .progress-bar { background: linear-gradient(90deg, #42a5f5, #1565c0); } .gw-producer-stats-panel--piecework .gw-producer-stats-progress .progress-bar { background: linear-gradient(90deg, #ba68c8, #6a1b9a); } .gw-stage-detail-shell a.gw-workflow-tab { text-decoration: none; } .gw-stage-detail-shell a.gw-workflow-tab:focus-visible { outline: 2px solid #1565c0; outline-offset: -2px; } .gw-stage-detail-shell .gw-issues-panel-outer { margin-bottom: var(--gw-detail-gutter); } .gw-stage-detail-shell .gw-issues-panel-outer>.piecework-detail-expand-panel { margin: 0; padding: 8px var(--gw-detail-gutter); border-radius: 0; border-left: none; border-right: none; } .gw-issues-panel { font-size: 13px; line-height: 1.45; } .gw-issues-panel__title { margin: 0; font-size: 14px; font-weight: 700; color: #e65100; display: inline-flex; align-items: center; gap: 6px; } .gw-issues-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 28px; } .gw-issues-panel__head-right { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-left: auto; } .gw-issues-panel__counts { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gw-issues-panel__count { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; } .gw-issues-panel__count--open { color: #e65100; background: rgba(230, 81, 0, 0.1); } .gw-issues-history-toggle { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 3px 8px 3px 7px; border: 1px solid #c5e1a5; border-radius: 999px; background: rgba(85, 139, 47, 0.08); color: #558b2f; font-size: 11px; font-weight: 600; line-height: 1.3; cursor: pointer; white-space: nowrap; font-family: inherit; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .gw-issues-history-toggle:hover, .gw-issues-history-toggle:focus-visible { background: rgba(85, 139, 47, 0.14); border-color: #aed581; color: #33691e; outline: none; } .gw-issues-history-toggle__icon { font-size: 10px; opacity: 0.85; } .gw-issues-history-toggle__chev { font-size: 9px; opacity: 0.75; transition: transform 0.15s ease; } .gw-issues-panel--resolved-only:not(.gw-issues-panel--history-open) { padding-bottom: 6px; } .gw-issues-panel--resolved-only .gw-issues-panel__head { margin-bottom: 0; } .gw-issues-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .gw-issues-panel--resolved-only:not(.gw-issues-panel--history-open) .gw-issues-list--open { margin-top: 0; } .gw-issues-list--resolved { display: none; margin-top: 10px; } .gw-issues-list--resolved.is-open { display: flex; } .gw-issues-panel--resolved-only .gw-issues-list--resolved.is-open { margin-top: 8px; } .gw-issue-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 8px; padding: 10px 12px; box-sizing: border-box; } .gw-issue-card--open { border-left: 3px solid #f57c00; } .gw-issue-card--resolved { border-left: 3px solid #9e9e9e; background: #fafafa; } .gw-issue-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .gw-issue-card__head-left { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .gw-issue-card__status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; } .gw-issue-card__status--open { color: #e65100; } .gw-issue-card__status--open .fa-circle { font-size: 7px; vertical-align: middle; } .gw-issue-card__status--resolved { color: #558b2f; } .gw-issue-card__priority { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.35; } .gw-issue-card__priority--urgent { color: #b71c1c; background: #ffebee; } .gw-issue-card__issue-date { font-size: 12px; font-weight: 500; color: #78909c; white-space: nowrap; } .gw-issue-card__product { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: #263238; line-height: 1.35; } .gw-issue-card__message { margin: 0 0 8px; font-size: 13px; font-weight: 400; color: #424242; line-height: 1.45; } .gw-issue-card__meta { display: flex; flex-direction: column; gap: 3px; padding-top: 8px; border-top: 1px solid #eceff1; } .gw-issue-card__meta-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; line-height: 1.4; min-width: 0; } .gw-issue-card__meta-row--resolve .gw-issue-card__meta-value { color: #558b2f; font-weight: 600; } .gw-issue-card__meta-label { flex: 0 0 42px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #90a4ae; } .gw-issue-card__meta-value { flex: 1 1 auto; min-width: 0; color: #607d8b; word-break: break-word; } .gw-issue-card__actions { margin-top: 10px; display: flex; justify-content: flex-end; } .gw-stage-detail-shell .gw-ledger-stats-banner-outer { margin-bottom: var(--gw-detail-gutter); } .gw-workflow-form-table { width: 100%; max-width: 100%; } .gw-workflow-form-table td input[type="text"], .gw-workflow-form-table td input[type="number"], .gw-workflow-form-table td input[type="date"], .gw-workflow-form-table td select, .gw-workflow-form-table td textarea { width: 100%; max-width: 100%; box-sizing: border-box; } .gw-workflow-sig-row { display: flex; flex-wrap: wrap; gap: 14px; } .gw-workflow-sig-row .gw-sig-block { flex: 1 1 calc(50% - 14px); min-width: 260px; max-width: none; box-sizing: border-box; } @media (min-width: 641px) { .gw-workflow-sig-row--cols3 { flex-wrap: nowrap; gap: 10px; } .gw-workflow-sig-row--cols3 .gw-sig-block { flex: 1 1 0; min-width: 0; } .gw-workflow-sig-row--cols3 .gw-sig-block .gw-sig-canvas, .gw-workflow-sig-row--cols3 .gw-sig-block .gw-sig-preview-box { max-width: 100%; } .gw-workflow-sig-row--cols3 .gw-sig-name-field, .gw-workflow-sig-row--cols3 .gw-sig-name-input { max-width: 100%; } } @media (max-width: 640px) { .gw-stage-detail-shell { --gw-detail-gutter: 4px; } .gw-stage-detail-header { gap: 6px; padding-block: 6px; } .gw-stage-detail-title { font-size: 18px; } .gw-workflow-tab-panels { padding-block: 6px; } .gw-workflow-tab { flex: 1 1 100%; font-size: 14px; padding: 10px 8px; } .gw-workflow-form-table tr { display: block; } .gw-workflow-form-table td { display: block; width: 100% !important; white-space: normal; } .gw-workflow-form-table td:first-child { padding-bottom: 4px; border-bottom: none; } .gw-workflow-sig-row .gw-sig-block, .gw-workflow-sig-row--cols3 .gw-sig-block { flex: 1 1 100%; min-width: 0; } } .gw-producer-name-wrap { position: relative; } .gw-producer-worker-suggest { display: none; box-sizing: border-box; } .gw-producer-worker-suggest.gw-producer-worker-suggest--open { display: block; position: fixed; z-index: 10050; margin: 0; width: auto; max-width: none; -webkit-overflow-scrolling: touch; } .gw-producer-worker-searchresults { max-height: 220px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 6px; align-content: flex-start; padding: 6px; border: 1px solid #bdbdbd; border-radius: 8px; background: #fafafa; box-sizing: border-box; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); } .gw-producer-worker-searchresults .gw-worker-item { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; box-sizing: border-box; padding: 6px 8px; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; } .gw-producer-worker-searchresults .gw-worker-item .avatar-wrapper img { width: 32px; height: 32px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .gw-producer-worker-searchresults .gw-worker-item__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; } .gw-producer-worker-searchresults .gw-worker-item__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gw-producer-worker-searchresults .gw-worker-item__dept { font-size: 11px; color: #757575; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gw-producer-stats { margin: 0 0 16px 0; border: 1px solid #cfd8dc; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .gw-producer-stats__header { padding: 12px 14px 10px; background: linear-gradient(180deg, #f5f7fa 0%, #eef1f5 100%); border-bottom: 1px solid #dce3e8; } .gw-producer-stats__title { margin: 0; font-size: 15px; font-weight: 700; color: #37474f; display: flex; align-items: center; gap: 8px; line-height: 1.3; } .gw-producer-stats__title .fas { color: #546e7a; font-size: 14px; } .gw-producer-stats__subtitle { margin: 4px 0 0; line-height: 1.4; } .gw-producer-stats__grid { display: grid; grid-template-columns: 1fr; gap: 0; } .gw-producer-stats-panel { display: flex; flex-direction: column; min-width: 0; border-bottom: 1px solid #dce3e8; } .gw-producer-stats--panels-2 .gw-producer-stats-panel:first-child { border-right: 1px solid #dce3e8; } .gw-producer-stats--panels-2 .gw-producer-stats-panel { border-bottom: none; } .gw-producer-stats-panel.gw-producer-stats-panel--in-tab { border: 1px solid #dce3e8; border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); margin: 0 0 14px; } .gw-producer-stats-panel.gw-producer-stats-panel--in-tab:last-child { margin-bottom: 0; } .gw-producer-stats-panel__head { padding: 10px 12px 8px; border-bottom: 1px solid #e8edf0; } .gw-producer-stats-panel__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .gw-producer-stats-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; font-size: 12px; flex-shrink: 0; } .gw-producer-stats-panel--daily .gw-producer-stats-panel__title { color: #1565c0; } .gw-producer-stats-panel--piecework .gw-producer-stats-panel__title { color: #6a1b9a; } .gw-producer-stats-panel--piecework .gw-producer-stats-panel__icon { background: rgba(106, 27, 154, 0.12); color: #6a1b9a; } .gw-producer-stats-panel--all .gw-producer-stats-panel__title { color: #37474f; } .gw-producer-stats-panel--all .gw-producer-stats-panel__icon { background: rgba(55, 71, 79, 0.1); color: #546e7a; } .gw-producer-stats-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: #e0e0e0; border-bottom: 1px solid #e8edf0; align-items: stretch; } .gw-producer-stats-kpi { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 10px 6px 8px; background: #fafbfc; text-align: center; min-height: 58px; box-sizing: border-box; } .gw-producer-stats-kpi__label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #78909c; line-height: 1.2; flex: 0 0 auto; min-height: 13px; } .gw-producer-stats-kpi__value { font-size: 17px; font-weight: 700; color: #263238; line-height: 1.15; flex: 0 0 auto; min-height: 19px; } .gw-producer-stats-kpi__unit { font-size: 11px; font-weight: 600; color: #90a4ae; line-height: 1.2; flex: 0 0 auto; min-height: 13px; } .gw-producer-stats-kpi__unit--placeholder { visibility: hidden; user-select: none; pointer-events: none; } .gw-producer-stats-kpi--primary .gw-producer-stats-kpi__value { color: #1565c0; } .gw-producer-stats-kpi--danger .gw-producer-stats-kpi__value { color: #c62828; } .gw-producer-stats-kpi--success .gw-producer-stats-kpi__value { color: #2e7d32; } .gw-producer-stats-kpi--purple .gw-producer-stats-kpi__value { color: #7b1fa2; } .pw-norm-eff-bar--above { background: linear-gradient(90deg, #ba68c8, #7b1fa2) !important; } .pw-norm-eff-bar--on { background: linear-gradient(90deg, #66bb6a, #2e7d32) !important; } .pw-norm-eff-bar--below { background: linear-gradient(90deg, #ef5350, #c62828) !important; } .pw-norm-eff-text--above { color: #7b1fa2; } .pw-norm-eff-text--on { color: #2e7d32; } .pw-norm-eff-text--below { color: #c62828; } .gw-producer-stats-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 16px; color: #90a4ae; font-size: 13px; text-align: center; line-height: 1.45; } .gw-producer-stats-empty .fas { font-size: 22px; opacity: 0.55; } .gw-producer-stats-table-wrap { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; width: 100%; max-width: 100%; } .gw-producer-stats-table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 13px; line-height: 1.35; table-layout: fixed; } .gw-producer-stats-table thead th, .gw-producer-stats-table tbody td, .gw-producer-stats-table tfoot td { overflow: visible; text-overflow: clip; white-space: nowrap; } .gw-producer-stats-table thead th { padding: 8px 10px; font-size: var(--mafa-th-font-size); font-weight: var(--mafa-th-font-weight); text-transform: var(--mafa-th-text-transform); letter-spacing: var(--mafa-th-letter-spacing); color: #607d8b; background: #f0f4f7; border-bottom: 1px solid #dce3e8; } .gw-producer-stats-table tbody td, .gw-producer-stats-table tfoot td { padding: 9px 10px; border-bottom: 1px solid #eceff1; vertical-align: middle; } .gw-producer-stats-table tbody tr:last-child td { border-bottom: none; } .gw-producer-stats-panel--piecework .gw-producer-stats-table tbody tr:hover { background: rgba(106, 27, 154, 0.05); } .gw-producer-stats-table tfoot td { background: #f5f7fa; border-top: 2px solid #cfd8dc; border-bottom: none; font-weight: 700; } .gw-producer-stats-table__rank { width: 40px; min-width: 40px; max-width: 40px; text-align: center; color: #90a4ae; font-weight: 600; } .gw-producer-stats-table__name { width: auto; min-width: 120px; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; } .gw-producer-stats-table__num { width: 68px; min-width: 68px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .gw-producer-stats-panel--piecework .gw-producer-stats-table__num--prod { color: #6a1b9a; } .gw-producer-stats-table__num--def { font-weight: 700; color: #c62828; } .gw-producer-stats-table__share { width: 64px; min-width: 64px; max-width: 64px; } .gw-producer-stats-table__foot-label { text-align: right; color: #546e7a; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; } .gw-producer-stats-table__foot-pct { font-variant-numeric: tabular-nums; color: #546e7a; } .gw-producer-stats-worker { display: flex; align-items: center; gap: 8px; min-width: 0; } .gw-producer-stats-worker__avatar { flex-shrink: 0; width: 28px; height: 28px; margin: 0; border: 1px solid #e0e0e0; box-shadow: none; } .gw-producer-stats-worker__avatar--empty { background: #eceff1; } .gw-producer-stats-worker__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 32px; color: #90a4ae; font-size: 14px; } .gw-producer-stats-worker__name { font-weight: 600; color: #263238; white-space: nowrap; overflow: visible; text-overflow: clip; flex-shrink: 0; } .gw-producer-stats-share { display: flex; align-items: center; gap: 3px; min-width: 0; width: 100%; } .gw-producer-stats-share__track { flex: 1 1 auto; height: 5px; border-radius: 3px; background: #eceff1; overflow: hidden; min-width: 22px; } .gw-producer-stats-share__fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #42a5f5, #1565c0); min-width: 2px; transition: width 0.2s ease; } .gw-producer-stats-panel--piecework .gw-producer-stats-share__fill { background: linear-gradient(90deg, #ba68c8, #6a1b9a); } .gw-producer-stats-share__pct { flex: 0 0 auto; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; color: #546e7a; min-width: 26px; text-align: right; } .piecework-detail-products-panel { margin-top: 14px; border: 1px solid #dce3e8; border-radius: 10px; background: #fff; padding: 12px 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .piecework-detail-products-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 0 0 8px; margin-bottom: 4px; border-bottom: 1px solid #e8edf0; } .piecework-detail-products-panel__title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: #1565c0; } .piecework-detail-products-panel__icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; font-size: 12px; flex-shrink: 0; background: rgba(21, 101, 192, 0.12); color: #1565c0; } .piecework-detail-products-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .piecework-detail-products-table-wrap .piecework-detail-products-table, table.piecework-detail-products-table { width: 100% !important; min-width: 0 !important; max-width: 100% !important; table-layout: fixed !important; border-collapse: separate !important; border-spacing: 0; font-size: 13px; line-height: 1.35; } .piecework-detail-products-table th, .piecework-detail-products-table td { overflow: hidden; box-sizing: border-box; } .piecework-detail-products-table th.pw-products-table__photo, .piecework-detail-products-table td.pw-products-table__photo { overflow: visible; } .piecework-detail-products-table.gw-order-greenware-products-table { min-width: 920px; } .piecework-detail-products-table.op-prod-products-table { min-width: 980px; } .piecework-detail-products-table .pw-products-table__add { width: 44px; min-width: 44px; max-width: 44px; text-align: center; padding-left: 4px; padding-right: 4px; } .piecework-detail-products-table thead th { position: sticky; top: 0; z-index: 3; padding: 8px 10px; font-size: var(--mafa-th-font-size); font-weight: var(--mafa-th-font-weight); text-transform: var(--mafa-th-text-transform); letter-spacing: var(--mafa-th-letter-spacing); line-height: var(--mafa-th-line-height); color: #607d8b; background: #f0f4f7; border-bottom: 1px solid #dce3e8; vertical-align: middle; } .piecework-detail-products-table thead th.pw-products-table__desc { white-space: normal; word-break: break-word; } .piecework-detail-products-table thead th.gw-producer-stats-table__rank, .piecework-detail-products-table thead th.pw-products-table__add, .piecework-detail-products-table thead th.pw-products-table__code, .piecework-detail-products-table thead th.pw-products-table__photo, .piecework-detail-products-table thead th.pw-products-table__size, .piecework-detail-products-table thead th.gw-producer-stats-table__num, .piecework-detail-products-table thead th.pw-products-table__gw, .piecework-detail-products-table thead th[class*="op-prod-products-table__"], .piecework-detail-products-table thead th.gw-order-greenware-products-table__qty-stack, .piecework-detail-products-table thead th.gw-order-product-col, .piecework-detail-products-table thead th.gw-order-stages-col { white-space: nowrap; word-break: normal; } .piecework-detail-products-table tbody td { font-size: 14px; padding: 9px 10px; border-bottom: 1px solid #eceff1; vertical-align: middle; } .piecework-detail-products-table tbody .gw-producer-stats-table__rank, .piecework-detail-products-table tbody .pw-products-table__code, .piecework-detail-products-table tbody .gw-producer-stats-table__num { font-size: 14px; } .piecework-detail-products-table thead th.gw-producer-stats-table__rank, .piecework-detail-products-table thead th.pw-products-table__code, .piecework-detail-products-table thead th.pw-products-table__photo, .piecework-detail-products-table thead th.pw-products-table__desc, .piecework-detail-products-table thead th.gw-producer-stats-table__num, .piecework-detail-products-table thead th[class*="op-prod-products-table__"] { font-size: 12px; font-weight: 700; } .piecework-detail-products-table .pw-products-table__code { width: 108px; min-width: 108px; max-width: 108px; white-space: normal; word-break: break-word; text-align: left; } .piecework-detail-products-table .pw-products-table__photo { width: 100px; min-width: 100px; max-width: 100px; box-sizing: border-box; padding-left: 10px; padding-right: 10px; } .piecework-detail-products-table th.pw-products-table__photo, .piecework-detail-products-table td.pw-products-table__photo { position: sticky; left: 0; z-index: 2; box-shadow: none; overflow: visible; } .piecework-detail-products-table-wrap.is-sticky-photo-flush .piecework-detail-products-table th.pw-products-table__photo:not(.is-sticky-stuck), .piecework-detail-products-table-wrap.is-sticky-photo-flush .piecework-detail-products-table td.pw-products-table__photo:not(.is-sticky-stuck), .scroll-table-wrapper.is-sticky-photo-flush .piecework-detail-products-table th.pw-products-table__photo:not(.is-sticky-stuck), .scroll-table-wrapper.is-sticky-photo-flush .piecework-detail-products-table td.pw-products-table__photo:not(.is-sticky-stuck) { border-left: none !important; box-shadow: inset 1px 0 0 #ddd; } .piecework-detail-products-table thead th.pw-products-table__photo { top: 0; z-index: 5; background: #f0f4f7 !important; } .piecework-detail-products-table tbody td.pw-products-table__photo { top: auto; background-color: #fff !important; } .piecework-detail-products-table .pw-products-table__photo img { display: block; width: 80px; max-width: 100%; height: auto; margin: 0 auto; } .piecework-detail-products-table tbody tr:hover td.pw-products-table__photo { background: #f5f9fd !important; } .piecework-detail-products-table .pw-products-table__desc { width: 150px; min-width: 140px; max-width: 180px; white-space: normal !important; text-align: left; word-break: break-word; overflow-wrap: break-word; font-size: 13px; line-height: 1.35; } .piecework-detail-products-table .pw-products-table__size { width: 118px; min-width: 110px; max-width: 130px; white-space: normal !important; word-break: break-word; overflow-wrap: break-word; } .piecework-detail-products-table td.gw-producer-stats-table__num.text-center:not(.pw-products-table__gw), .piecework-detail-products-table thead th.gw-producer-stats-table__num.text-center:not(.pw-products-table__gw) { width: 84px; min-width: 76px; max-width: 96px; white-space: normal; word-break: break-word; overflow-wrap: break-word; } .piecework-detail-products-table td.gw-producer-stats-table__num.text-right:not(.bold700), .piecework-detail-products-table thead th.gw-producer-stats-table__num.text-right:nth-last-child(2) { width: 108px; min-width: 100px; max-width: none; white-space: nowrap; text-overflow: ellipsis; } .piecework-detail-products-table td.gw-producer-stats-table__num.text-right.bold700, .piecework-detail-products-table thead th.gw-producer-stats-table__num.text-right:last-child { width: 122px; min-width: 112px; max-width: none; white-space: nowrap; text-overflow: ellipsis; } .piecework-detail-products-table .gw-producer-stats-table__num { white-space: nowrap; text-overflow: ellipsis; } .piecework-detail-products-table .gw-producer-stats-table__rank { width: 36px; min-width: 36px; max-width: 36px; padding-inline: 4px; text-align: center; } .gw-order-greenware-products-table.piecework-detail-products-table .gw-order-greenware-products-table__qty-stack { width: 120px; min-width: 120px; max-width: 120px; white-space: normal !important; vertical-align: middle; } .gw-order-qty-stack { display: flex; flex-direction: column; gap: 0; text-align: left; font-size: 13px; line-height: 1.25; } .gw-order-qty-stack__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid #eceff1; } .gw-order-qty-stack__row:last-child { border-bottom: none; padding-bottom: 0; } .gw-order-qty-stack__row:first-child { padding-top: 0; } .gw-order-qty-stack__label { flex: 1 1 auto; min-width: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; color: #78909c; white-space: nowrap; } .gw-order-qty-stack__val { flex: 0 0 auto; font-variant-numeric: tabular-nums; text-align: right; } .gw-order-qty-stack__val--order { color: #1565c0; } .gw-order-greenware-products-table.piecework-detail-products-table .pw-products-table__desc, .gw-order-greenware-products-table.piecework-detail-products-table th.gw-order-product-col, .gw-order-greenware-products-table.piecework-detail-products-table td.gw-order-product-col { width: 200px; min-width: 200px; max-width: 200px; } .gw-order-greenware-products-table.piecework-detail-products-table .gw-order-stages-col { width: 460px; min-width: 460px; max-width: 460px; padding: 8px 10px !important; vertical-align: top; } .gw-order-greenware-products-table.piecework-detail-products-table .gw-order-stages-panel, .gw-order-greenware-products-table.piecework-detail-products-table .gw-order-greenware-stages { min-width: 440px; } .piecework-detail-products-table .pw-products-table__gw { width: 100px; min-width: 92px; max-width: 112px; white-space: normal !important; word-break: break-word; } .piecework-detail-products-panel .piecework-detail-products-table .gw-producer-stats-table__num--prod { color: #1565c0; } @media (min-width: 1200px) { .piecework-detail-products-table-wrap { overflow-x: visible; overflow-y: visible; } } @media (max-width: 1199px) { .piecework-detail-products-table-wrap .piecework-detail-products-table, table.piecework-detail-products-table { width: auto !important; min-width: 1080px !important; max-width: none !important; table-layout: auto !important; } .piecework-detail-products-table.gw-order-greenware-products-table { min-width: 920px; } .piecework-detail-products-table.op-prod-products-table { min-width: 980px; } } @media (max-width: 767px) { .gw-producer-stats-table:not(.piecework-detail-products-table) { min-width: 540px; table-layout: fixed; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) { min-width: 540px; width: max-content; max-width: none; table-layout: auto; } .piecework-detail-products-table-wrap .piecework-detail-products-table, table.piecework-detail-products-table { width: auto !important; min-width: 1080px !important; max-width: none !important; table-layout: auto !important; } .piecework-detail-products-table.gw-order-greenware-products-table { min-width: 920px; } .piecework-detail-products-table.op-prod-products-table { min-width: 980px; } .piecework-detail-products-table .gw-producer-stats-table__rank { width: 36px; min-width: 36px; max-width: 36px; padding-inline: 4px; } .piecework-detail-products-table .pw-products-table__code { width: 108px; min-width: 108px; max-width: 108px; } .piecework-detail-products-table .pw-products-table__photo { width: 100px; min-width: 100px; max-width: 100px; } .piecework-detail-products-table .pw-products-table__desc { width: 150px; min-width: 140px; max-width: 180px; } .piecework-detail-products-table .pw-products-table__size { width: 118px; min-width: 110px; max-width: 130px; } .piecework-detail-products-table td.gw-producer-stats-table__num.text-center:not(.pw-products-table__gw), .piecework-detail-products-table thead th.gw-producer-stats-table__num.text-center:not(.pw-products-table__gw) { width: 84px; min-width: 76px; max-width: 96px; padding-inline: 6px; white-space: normal; } .piecework-detail-products-table td.gw-producer-stats-table__num.text-right:not(.bold700), .piecework-detail-products-table .op-prod-products-table__surplus, .piecework-detail-products-table .op-prod-products-table__ralo, .piecework-detail-products-table .op-prod-products-table__pass, .piecework-detail-products-table .op-prod-products-table__refire, .piecework-detail-products-table .op-prod-products-table__reject { width: 108px; min-width: 100px; max-width: none; padding-inline: 6px; white-space: nowrap; } .piecework-detail-products-table td.gw-producer-stats-table__num.text-right.bold700 { width: 122px; min-width: 112px; max-width: none; padding-inline: 6px; white-space: nowrap; } .piecework-detail-products-table .pw-products-table__gw { width: 100px; min-width: 92px; max-width: 112px; padding-inline: 6px; white-space: normal; } .gw-order-greenware-products-table.piecework-detail-products-table .pw-products-table__desc, .gw-order-greenware-products-table.piecework-detail-products-table .gw-order-product-col { width: 200px; min-width: 200px; max-width: 200px; } .gw-order-greenware-products-table.piecework-detail-products-table .gw-order-greenware-products-table__qty-stack { width: 120px; min-width: 120px; max-width: 120px; } .gw-order-greenware-products-table.piecework-detail-products-table .gw-order-stages-col { width: 460px; min-width: 460px; max-width: 460px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table__name { width: auto; min-width: 120px; max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) .gw-producer-stats-table__rank { width: 28px; min-width: 28px; max-width: 28px; padding-inline: 4px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) .gw-producer-stats-table__num { width: auto; min-width: 44px; max-width: none; padding-inline: 6px; white-space: nowrap; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) .gw-producer-stats-table__share { width: auto; min-width: 92px; max-width: none; } .gw-producer-stats-panel--in-tab .gw-producer-stats-worker { align-items: flex-start; } .gw-producer-stats-panel--in-tab .gw-producer-stats-worker__avatar { width: 28px; height: 28px; margin-top: 1px; } .gw-producer-stats-panel--in-tab .gw-producer-stats-worker__name { white-space: nowrap; overflow: visible; text-overflow: clip; flex-shrink: 0; } .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) thead th.gw-producer-stats-table__name, .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) tbody td.gw-producer-stats-table__name, .gw-producer-stats-panel--in-tab .gw-producer-stats-table:not(.piecework-detail-products-table) tfoot td.gw-producer-stats-table__foot-label { white-space: nowrap; overflow: visible; text-overflow: clip; } } @media (max-width: 960px) { .gw-producer-stats--panels-2 .gw-producer-stats__grid { grid-template-columns: 1fr; } .gw-producer-stats--panels-2 .gw-producer-stats-panel:first-child { border-right: none; border-bottom: 1px solid #dce3e8; } } .gw-producer-totals-wrap { margin: 0 0 14px 0; } .gw-producer-totals-heading { margin-bottom: 10px; font-weight: 700; font-size: 14px; } .gw-producer-totals-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .gw-producer-pill { display: inline-block; vertical-align: top; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.35; border: 1px solid transparent; max-width: 100%; } .gw-producer-pill-layout { display: flex; align-items: flex-start; gap: 10px; } .gw-producer-pill-avatar.avatar-wrapper { flex-shrink: 0; width: 52px; margin: 0; border: 1px solid rgba(255, 255, 255, 0.95); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .gw-producer-pill-avatar--noprofile img { object-fit: contain; padding: 3px; opacity: 0.88; } .gw-producer-pill-avatar .gw-producer-pill-no-cover { font-size: 22px; color: rgba(0, 0, 0, 0.35); width: 100%; height: 100%; min-height: 48px; } .gw-producer-pill-body { flex: 1; min-width: 0; } .gw-producer-pill-name { display: block; font-weight: 700; word-break: break-word; } .gw-producer-pill-qty { display: block; margin-top: 2px; font-weight: 600; opacity: 0.92; } .gw-producer-pill-stats { display: block; margin-top: 4px; font-weight: 600; opacity: 0.92; } .gw-producer-pill-stat-line { display: block; line-height: 1.4; } .gw-producer-pill-stat-line+.gw-producer-pill-stat-line { margin-top: 2px; } .gw-producer-pill-money { display: block; margin-top: 4px; font-weight: 700; font-size: 13px; letter-spacing: 0.01em; } .piecework-detail-worker-gw-stats { margin-bottom: 14px; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab { margin-bottom: 0; border-radius: 5px; overflow: hidden; } @media (max-width: 639px) { .piecework-detail-worker-gw-stats .gw-producer-stats-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 992px) { .piecework-detail-worker-gw-stats .gw-producer-stats-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .gw-producer-stats-kpi { padding: 10px 4px 8px; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .gw-producer-stats-kpi__label { font-size: 11px; letter-spacing: 0.02em; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .gw-producer-stats-kpi__unit { font-size: 11px; } } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .gw-producer-stats-table__rank { width: 28px; min-width: 28px; max-width: 28px; padding-inline: 4px; text-align: center; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .gw-producer-stats-table__name { width: auto; min-width: 140px; max-width: none; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .gw-producer-stats-table__num:not(.piecework-detail-worker-stats-table__money) { width: 76px; min-width: 72px; max-width: 88px; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .piecework-detail-worker-stats-table__money { width: 108px; min-width: 100px; max-width: 120px; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .gw-producer-stats-table__share:not(.piecework-detail-worker-stats-table__eff) { width: 120px; min-width: 120px; max-width: 120px; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .piecework-detail-worker-stats-table__eff { width: 150px; min-width: 150px; max-width: 150px; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .gw-producer-stats-table__share:not(.piecework-detail-worker-stats-table__eff) .gw-producer-stats-progress.progress-container { min-width: 52px; } .piecework-detail-worker-gw-stats .gw-producer-stats-panel--in-tab .piecework-detail-worker-stats-table .piecework-detail-worker-stats-table__eff .gw-producer-stats-progress.progress-container { min-width: 44px; } .piecework-detail-worker-gw-stats .gw-producer-stats-worker { min-width: max-content; } .piecework-detail-worker-gw-stats .gw-producer-stats-worker__name { overflow: visible; text-overflow: clip; white-space: nowrap; flex-shrink: 0; } .piecework-detail-worker-gw-stats .piecework-detail-worker-stats-table__eff .gw-producer-stats-share__pct { min-width: 44px; flex-shrink: 0; } @media (min-width: 768px) { .piecework-detail-worker-gw-stats .gw-producer-stats-worker { min-width: 0; max-width: 100%; } .piecework-detail-worker-gw-stats .gw-producer-stats-worker__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; flex-shrink: 1; } } .piecework-norm-eff-cell { display: flex; align-items: center; justify-content: flex-end; gap: 4px; min-width: 0; } .piecework-norm-eff-cell--foot { justify-content: center; } .piecework-norm-eff-detail-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 76, 129, 0.08); color: #0f4c81; cursor: pointer; flex-shrink: 0; line-height: 1; transition: background 0.15s ease, color 0.15s ease; } .piecework-norm-eff-detail-btn:hover, .piecework-norm-eff-detail-btn:focus-visible { background: rgba(15, 76, 129, 0.16); color: #08385f; outline: none; } .piecework-norm-eff-detail-btn--kpi { width: 18px; height: 18px; font-size: 12px; vertical-align: middle; } .gw-producer-stats-kpi__label--with-action { display: inline-flex; align-items: center; justify-content: center; gap: 4px; } #pwNormEffExplainModal { align-items: flex-start; padding: 12px; box-sizing: border-box; } #pwNormEffExplainModal .popup-box { position: relative; width: min(640px, calc(100vw - 24px)); max-width: min(640px, calc(100vw - 24px)); max-height: min(92vh, 720px); overflow-y: auto; margin-top: 4vh; padding: 16px 44px 18px 18px; text-align: left; } #pwNormEffExplainModal .piecework-norm-eff-modal__head { margin-bottom: 12px; } #pwNormEffExplainModal .piecework-norm-eff-modal__title { margin: 0; font-size: 1.05rem; line-height: 1.35; padding-right: 4px; } #pwNormEffExplainModal .piecework-norm-eff-modal__close { position: absolute; top: 10px; right: 10px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.06); color: inherit; cursor: pointer; } #pwNormEffExplainModal .piecework-norm-eff-modal__close:hover, #pwNormEffExplainModal .piecework-norm-eff-modal__close:focus-visible { background: rgba(0, 0, 0, 0.1); outline: none; } #pwNormEffExplainModal .piecework-norm-eff-modal__params { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } #pwNormEffExplainModal .piecework-norm-eff-modal__chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #eef4fa; border: 1px solid rgba(15, 76, 129, 0.12); font-size: 12px; line-height: 1.35; color: #234; } #pwNormEffExplainModal .piecework-norm-eff-modal__formula { margin: 0 0 12px; font-size: 12px; line-height: 1.45; color: #5a6572; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #607d8b; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-panel { margin-bottom: 12px; border: 1px solid #e5e9ef; border-radius: 8px; overflow: hidden; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-scroll { overflow: auto; -webkit-overflow-scrolling: touch; max-height: min(128px, 18vh); border-top: 1px solid #e8ecf1; border-bottom: 1px solid #e8ecf1; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-panel .piecework-norm-eff-modal__table { width: 100%; min-width: 420px; table-layout: fixed; border-collapse: collapse; font-size: 13px; } #pwNormEffExplainModal .piecework-norm-eff-modal__table th, #pwNormEffExplainModal .piecework-norm-eff-modal__table td { padding: 8px 10px; border-bottom: 1px solid #e8ecf1; vertical-align: middle; color: #1e293b; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-head .piecework-norm-eff-modal__table thead th { background: #f4f7fb; font-weight: 700; white-space: nowrap; color: #0f172a; border-bottom: 0; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-scroll .piecework-norm-eff-modal__table tbody tr:last-child td { border-bottom: 0; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-foot .piecework-norm-eff-modal__table tfoot td { background: #fafbfd; border-bottom: 0; } #pwNormEffExplainModal .piecework-norm-eff-modal__code { font-weight: 600; word-break: break-word; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-compare { margin-bottom: 12px; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-col { padding: 10px 12px; border-radius: 8px; border: 1px solid #e5e9ef; background: #fafbfc; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-title { margin-bottom: 6px; font-size: 11px; font-weight: 700; line-height: 1.35; color: #546e7a; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-value { display: block; font-size: 15px; line-height: 1.35; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-value--theo { color: #c62828; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-value--piece { color: #1565c0; } #pwNormEffExplainModal .piecework-norm-eff-modal__pay-sub { margin-top: 6px; font-size: 11px; line-height: 1.4; color: #78909c; } #pwNormEffExplainModal .piecework-norm-eff-modal__summary { padding: 12px 14px; border-radius: 8px; background: linear-gradient(135deg, #eef6ff 0%, #f8fbff 100%); border: 1px solid rgba(15, 76, 129, 0.14); margin-bottom: 10px; } #pwNormEffExplainModal .piecework-norm-eff-modal__summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.5; } #pwNormEffExplainModal .piecework-norm-eff-modal__summary-row+.piecework-norm-eff-modal__summary-row { margin-top: 6px; } #pwNormEffExplainModal .piecework-norm-eff-modal__summary-row--result { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(15, 76, 129, 0.22); font-size: 14px; } #pwNormEffExplainModal .piecework-norm-eff-modal__note { margin: 0 0 14px; font-size: 11px; line-height: 1.45; color: #6b7280; } #pwNormEffExplainModal .piecework-norm-eff-modal__note code { font-size: 10px; } @media (max-width: 640px) { #pwNormEffExplainModal { align-items: flex-end; padding: 0; } #pwNormEffExplainModal .popup-box { width: 100%; max-width: 100%; min-width: 0; margin-top: 0; padding-right: 44px; border-radius: 14px 14px 0 0; max-height: 92vh; } #pwNormEffExplainModal .piecework-norm-eff-modal__table-scroll { max-height: min(112px, 16vh); } #pwNormEffExplainModal .piecework-norm-eff-modal__chip { font-size: 11px; } #pwNormEffExplainModal .piecework-norm-eff-modal__summary-row { flex-direction: column; gap: 2px; } } @media (max-width: 640px) { .piecework-detail-worker-gw-stats .piecework-detail-worker-stats-table .piecework-detail-worker-stats-table__money { width: auto; min-width: 88px; max-width: none; } .piecework-detail-worker-gw-stats .piecework-detail-worker-stats-table .piecework-detail-worker-stats-table__eff, .piecework-detail-worker-gw-stats .piecework-detail-worker-stats-table .gw-producer-stats-table__share:not(.piecework-detail-worker-stats-table__eff) { width: auto; min-width: 96px; max-width: none; } } .gw-producer-pill--h0 { background: hsl(200 62% 90%); color: hsl(205 55% 22%); border-color: hsl(200 45% 72%); } .gw-producer-pill--h1 { background: hsl(145 50% 88%); color: hsl(150 50% 20%); border-color: hsl(145 40% 68%); } .gw-producer-pill--h2 { background: hsl(275 48% 92%); color: hsl(275 45% 26%); border-color: hsl(275 38% 76%); } .gw-producer-pill--h3 { background: hsl(32 75% 90%); color: hsl(28 70% 22%); border-color: hsl(32 55% 72%); } .gw-producer-pill--h4 { background: hsl(330 55% 92%); color: hsl(330 50% 26%); border-color: hsl(330 42% 76%); } .gw-producer-pill--h5 { background: hsl(95 50% 88%); color: hsl(95 45% 20%); border-color: hsl(95 40% 68%); } .gw-producer-pill--h6 { background: hsl(245 52% 91%); color: hsl(245 48% 24%); border-color: hsl(245 40% 74%); } .gw-producer-pill--h7 { background: hsl(15 70% 91%); color: hsl(12 65% 24%); border-color: hsl(15 55% 74%); } @media (max-width: 768px) { .gw-producer-totals-bar { flex-direction: column; } .gw-producer-pill { display: block; width: 100%; } } body.dark .gw-producer-totals-heading, html.dark .gw-producer-totals-heading { color: #bdc1c6 !important; } body.dark .gw-producer-stats, html.dark .gw-producer-stats { background: #2d2e30; border-color: #3c4043; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } body.dark .gw-producer-stats__header, html.dark .gw-producer-stats__header { background: linear-gradient(180deg, #35363a 0%, #2d2e30 100%); border-bottom-color: #3c4043; } body.dark .gw-producer-stats__title, html.dark .gw-producer-stats__title { color: #e8eaed; } body.dark .gw-producer-stats__title .fas, html.dark .gw-producer-stats__title .fas { color: #9aa0a6; } body.dark .gw-producer-stats__subtitle, html.dark .gw-producer-stats__subtitle { color: #9aa0a6 !important; } body.dark .gw-producer-stats-panel, html.dark .gw-producer-stats-panel { border-bottom-color: #3c4043; } body.dark .gw-producer-stats-panel--in-tab, html.dark .gw-producer-stats-panel--in-tab { background: #2d2e30; border-color: #3c4043; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } body.dark .gw-producer-stats-panel--in-tab .gw-producer-stats-panel__head, html.dark .gw-producer-stats-panel--in-tab .gw-producer-stats-panel__head { border-bottom-color: #3c4043; } body.dark .gw-producer-stats--panels-2 .gw-producer-stats-panel:first-child, html.dark .gw-producer-stats--panels-2 .gw-producer-stats-panel:first-child { border-right-color: #3c4043; } body.dark .gw-producer-stats-panel__head, html.dark .gw-producer-stats-panel__head { border-bottom-color: #3c4043; } body.dark .gw-producer-stats-panel--daily .gw-producer-stats-panel__title, html.dark .gw-producer-stats-panel--daily .gw-producer-stats-panel__title { color: #8ab4f8; } body.dark .gw-producer-stats-panel--daily .gw-producer-stats-panel__icon, html.dark .gw-producer-stats-panel--daily .gw-producer-stats-panel__icon { background: rgba(138, 180, 248, 0.15); color: #8ab4f8; } body.dark .gw-producer-stats-panel--piecework .gw-producer-stats-panel__title, html.dark .gw-producer-stats-panel--piecework .gw-producer-stats-panel__title { color: #ce93d8; } body.dark .gw-producer-stats-panel--piecework .gw-producer-stats-panel__icon, html.dark .gw-producer-stats-panel--piecework .gw-producer-stats-panel__icon { background: rgba(206, 147, 216, 0.15); color: #ce93d8; } body.dark .piecework-detail-products-panel__title, html.dark .piecework-detail-products-panel__title { color: #8ab4f8; } body.dark .piecework-detail-products-panel__icon, html.dark .piecework-detail-products-panel__icon { background: rgba(138, 180, 248, 0.15); color: #8ab4f8; } body.dark .gw-producer-stats-panel--all .gw-producer-stats-panel__title, html.dark .gw-producer-stats-panel--all .gw-producer-stats-panel__title { color: #e8eaed; } body.dark .gw-producer-stats-kpis, html.dark .gw-producer-stats-kpis { background: #3c4043; border-bottom-color: #3c4043; } body.dark .gw-producer-stats-kpi, html.dark .gw-producer-stats-kpi { background: #35363a; } body.dark .gw-producer-stats-kpi__label, html.dark .gw-producer-stats-kpi__label { color: #9aa0a6; } body.dark .gw-producer-stats-kpi__value, html.dark .gw-producer-stats-kpi__value { color: #e8eaed; } body.dark .gw-producer-stats-kpi__unit, html.dark .gw-producer-stats-kpi__unit { color: #80868b; } body.dark .gw-producer-stats-kpi--primary .gw-producer-stats-kpi__value, html.dark .gw-producer-stats-kpi--primary .gw-producer-stats-kpi__value { color: #8ab4f8; } body.dark .gw-producer-stats-kpi--danger .gw-producer-stats-kpi__value, html.dark .gw-producer-stats-kpi--danger .gw-producer-stats-kpi__value { color: #f28b82; } body.dark .gw-producer-stats-empty, html.dark .gw-producer-stats-empty { color: #80868b; } body.dark .gw-producer-stats-table thead th, html.dark .gw-producer-stats-table thead th { background: #35363a; color: #9aa0a6; border-bottom-color: #3c4043; } body.dark .gw-producer-stats-table tbody td, html.dark .gw-producer-stats-table tbody td, body.dark .gw-producer-stats-table tfoot td, html.dark .gw-producer-stats-table tfoot td { border-bottom-color: #3c4043; } body.dark .gw-producer-stats-table tbody tr:hover, html.dark .gw-producer-stats-table tbody tr:hover { background: rgba(138, 180, 248, 0.08); } body.dark .gw-producer-stats-panel--piecework .gw-producer-stats-table tbody tr:hover, html.dark .gw-producer-stats-panel--piecework .gw-producer-stats-table tbody tr:hover { background: rgba(206, 147, 216, 0.1); } body.dark .piecework-detail-products-panel .piecework-detail-products-table tbody tr:hover, html.dark .piecework-detail-products-panel .piecework-detail-products-table tbody tr:hover { background: rgba(255, 255, 255, 0.06); } body.dark .piecework-detail-products-panel .piecework-detail-products-table tbody tr:hover td.pw-products-table__photo, html.dark .piecework-detail-products-panel .piecework-detail-products-table tbody tr:hover td.pw-products-table__photo { background-color: rgba(255, 255, 255, 0.06) !important; } body.dark .piecework-detail-products-panel .piecework-detail-products-table .gw-producer-stats-table__num--prod, html.dark .piecework-detail-products-panel .piecework-detail-products-table .gw-producer-stats-table__num--prod { color: #8ab4f8; } body.dark .op-prod-products-table .gw-producer-stats-table__num--prod, html.dark .op-prod-products-table .gw-producer-stats-table__num--prod { color: #8ab4f8; } body.dark .gw-order-qty-stack__row, html.dark .gw-order-qty-stack__row { border-bottom-color: #3c4043; } body.dark .gw-order-qty-stack__label, html.dark .gw-order-qty-stack__label { color: #9aa0a6; } body.dark .gw-order-qty-stack__val--order, html.dark .gw-order-qty-stack__val--order { color: #8ab4f8; } body.dark .gw-order-greenware-products-table .gw-producer-stats-table__num--prod, html.dark .gw-order-greenware-products-table .gw-producer-stats-table__num--prod { color: #8ab4f8; } body.dark .scroll-table-wrapper.is-row-focus-mode #gwProductTable .gw-product-row--focus-target td.sticky-photo, html.dark .scroll-table-wrapper.is-row-focus-mode #gwProductTable .gw-product-row--focus-target td.sticky-photo { background: #2d2e30 !important; } body.dark .scroll-table-wrapper.is-row-focus-mode #gwProductTable .gw-product-row--focus-target, html.dark .scroll-table-wrapper.is-row-focus-mode #gwProductTable .gw-product-row--focus-target { background-color: #2d2e30; } body.dark .gw-producer-stats-table tfoot td, html.dark .gw-producer-stats-table tfoot td { background: #35363a; border-top-color: #5f6368; } body.dark .gw-producer-stats-table__rank, html.dark .gw-producer-stats-table__rank { color: #80868b; } body.dark .gw-producer-stats-table__num--prod, html.dark .gw-producer-stats-table__num--prod { color: #8ab4f8; } body.dark .gw-producer-stats-panel--piecework .gw-producer-stats-table__num--prod, html.dark .gw-producer-stats-panel--piecework .gw-producer-stats-table__num--prod { color: #ce93d8; } body.dark .gw-producer-stats-table__num--def, html.dark .gw-producer-stats-table__num--def { color: #f28b82; } body.dark .gw-producer-stats-table__foot-label, html.dark .gw-producer-stats-table__foot-label, body.dark .gw-producer-stats-table__foot-pct, html.dark .gw-producer-stats-table__foot-pct, body.dark .gw-producer-stats-share__pct, html.dark .gw-producer-stats-share__pct { color: #9aa0a6; } body.dark .gw-producer-stats-worker__avatar, html.dark .gw-producer-stats-worker__avatar { border-color: #5f6368; } body.dark .gw-producer-stats-worker__avatar--empty, html.dark .gw-producer-stats-worker__avatar--empty { background: #3c4043; } body.dark .gw-producer-stats-worker__placeholder, html.dark .gw-producer-stats-worker__placeholder { color: #80868b; } body.dark .gw-producer-stats-worker__name, html.dark .gw-producer-stats-worker__name { color: #e8eaed; } body.dark .gw-producer-stats-share__track, html.dark .gw-producer-stats-share__track { background: #3c4043; } body.dark .gw-producer-stats-panel--piecework .gw-producer-stats-share__fill, html.dark .gw-producer-stats-panel--piecework .gw-producer-stats-share__fill { background: linear-gradient(90deg, #ce93d8, #8e24aa); } body.dark .gw-producer-stats-share__fill, html.dark .gw-producer-stats-share__fill { background: linear-gradient(90deg, #64b5f6, #1976d2); } @media (max-width: 960px) { body.dark .gw-producer-stats--panels-2 .gw-producer-stats-panel:first-child, html.dark .gw-producer-stats--panels-2 .gw-producer-stats-panel:first-child { border-bottom-color: #3c4043; } } body.dark .gw-producer-totals-section, html.dark .gw-producer-totals-section { background: #2a2a2a; border-color: #444; } body.dark .gw-producer-totals-section--daily .gw-producer-totals-section__title, html.dark .gw-producer-totals-section--daily .gw-producer-totals-section__title { color: #64b5f6; } body.dark .gw-producer-totals-section--piecework .gw-producer-totals-section__title, html.dark .gw-producer-totals-section--piecework .gw-producer-totals-section__title { color: #ce93d8; } body.dark .gw-producer-pill--h0, html.dark .gw-producer-pill--h0 { background: hsl(200 32% 26%); color: hsl(200 25% 94%); border-color: hsl(200 28% 42%); } body.dark .gw-producer-pill--h1, html.dark .gw-producer-pill--h1 { background: hsl(145 28% 24%); color: hsl(145 22% 93%); border-color: hsl(145 25% 40%); } body.dark .gw-producer-pill--h2, html.dark .gw-producer-pill--h2 { background: hsl(275 28% 28%); color: hsl(275 22% 94%); border-color: hsl(275 25% 44%); } body.dark .gw-producer-pill--h3, html.dark .gw-producer-pill--h3 { background: hsl(32 38% 26%); color: hsl(32 30% 94%); border-color: hsl(32 32% 42%); } body.dark .gw-producer-pill--h4, html.dark .gw-producer-pill--h4 { background: hsl(330 30% 28%); color: hsl(330 22% 94%); border-color: hsl(330 26% 44%); } body.dark .gw-producer-pill--h5, html.dark .gw-producer-pill--h5 { background: hsl(95 28% 24%); color: hsl(95 22% 93%); border-color: hsl(95 25% 40%); } body.dark .gw-producer-pill--h6, html.dark .gw-producer-pill--h6 { background: hsl(245 30% 28%); color: hsl(245 22% 94%); border-color: hsl(245 26% 44%); } body.dark .gw-producer-pill--h7, html.dark .gw-producer-pill--h7 { background: hsl(15 35% 27%); color: hsl(15 28% 94%); border-color: hsl(15 30% 43%); } .settings-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; border-collapse: collapse; table-layout: auto !important; box-sizing: border-box !important; } .settings-table.table-fixed-width { table-layout: fixed !important; } .settings-table.settings-form-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .settings-table, .settings-table * { box-sizing: border-box; } .settings-table td { border-bottom: 1px solid #eee; padding: 10px 6px; vertical-align: middle; font-size: 14px; max-width: 100%; min-width: 0; box-sizing: border-box; white-space: normal; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; } .settings-table input, .settings-table select, .settings-table textarea { width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 14px; box-sizing: border-box !important; } .settings-table input[type="checkbox"], .settings-table input[type="radio"] { width: auto !important; max-width: none !important; min-width: 0; padding: 0; border: none; background: none; border-radius: 0; box-shadow: none; flex-shrink: 0; margin: 0 4px 0 0; align-self: center; vertical-align: middle; } .gw-stage-prod-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; max-width: 100%; } .settings-table .gw-stage-prod-filters.gw-stage-prod-filters--scroll { align-items: flex-start; align-content: flex-start; max-height: min(40vh, 320px); overflow-y: auto; overflow-x: hidden; padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fafafa; box-sizing: border-box; } body.dark .settings-table .gw-stage-prod-filters.gw-stage-prod-filters--scroll { border-color: #444; background: #252525; } .settings-table .gw-stage-prod-filters--custom .custom-checkbox label, .settings-table .gw-stage-prod-filters--custom .custom-checkbox label * { word-break: normal !important; overflow-wrap: normal; } .settings-table .gw-stage-prod-filters--custom .custom-checkbox { display: inline-flex !important; width: max-content; max-width: 100%; flex: 0 0 auto; } .settings-table .gw-stage-prod-filters--custom .custom-checkbox label { white-space: nowrap; width: max-content; max-width: 100%; min-width: 0; } @media (min-width: 601px) { .settings-table .gw-stage-prod-filters--custom .custom-checkbox--medium { min-width: min-content; } } .settings-table .gw-dept-pick-box { max-width: 400px; width: 100%; height: 150px; overflow-y: auto; overflow-x: hidden; border: 1px solid #ccc; border-radius: 6px; padding: 6px 8px; background: #fcfcfc; display: flex; flex-direction: column; gap: 2px; box-sizing: border-box; } .settings-table .gw-dept-pick-item { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; align-items: flex-start; gap: 8px; margin: 0; padding: 6px 8px; border-radius: 4px; border: 1px solid transparent; cursor: pointer; word-wrap: break-word; transition: background-color 0.12s ease, border-color 0.12s ease; } .settings-table .gw-dept-pick-item:hover { background-color: #f5f9fc; } .settings-table .gw-dept-pick-item:has(input[type="checkbox"]:checked) { background-color: #f0f7ff !important; border-color: #90caf9; } .settings-table .setting-holiday-dept-pick { max-width: min(100%, 480px); } .settings-table .setting-holiday-dept-pick .gw-dept-pick-item { border-color: #cbd5e1; } .settings-table tr.setting-holiday-dept-row[hidden], .settings-table tr.setting-holiday-dept-row.is-collapsed { display: none !important; } .settings-table input[type="text"], .settings-table input[type="password"], .settings-table input[type="email"], .settings-table input[type="number"], .settings-table input[type="tel"], .settings-table input[type="url"], .settings-table input[type="search"], .settings-table input[type="date"], .settings-table input[type="datetime-local"], .settings-table input[type="month"], .settings-table input[type="time"] { max-width: 100% !important; width: 100% !important; } .settings-table th { white-space: nowrap; word-wrap: normal; } .settings-table th.text-center { text-align: center; } @media (min-width: 1200px) { .settings-table-wrapper { overflow-x: visible; } } @media (max-width: 1199px) { .settings-table-wrapper { overflow-x: auto; } .settings-table.settings-form-table { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } } .packinglist-primary-action { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 36px; line-height: 1; box-sizing: border-box; } .packing-items-table tbody tr td { border-bottom: 1px solid #ddd !important; } .packinglist-view-controls { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; justify-content: flex-start; width: 100%; min-height: 34px; } .packinglist-view-controls .packing-select-all-btn .packing-select-all-visible-cb { width: 18px; height: 18px; margin: 0; flex-shrink: 0; pointer-events: none; } .packinglist-view-controls>button.button.small.gray, .packinglist-view-controls .packing-box-date-trigger.button.small.gray { height: auto; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: 1.2; white-space: nowrap; vertical-align: middle; } .packinglist-view-controls .pdf-export-dropdown.packing-box-date-dropdown { align-self: center; flex-shrink: 0; } .packinglist-view-controls .view-mode-toggle { margin-left: auto; flex: 0 0 auto; padding: 2px; gap: 2px; } .packinglist-view-controls .packing-box-code-search-wrap { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; } .packinglist-view-controls .packing-box-code-search { width: clamp(110px, 18vw, 200px); font-size: 13px; padding: 0 10px; height: 34px; min-height: 34px; line-height: 1.2; box-sizing: border-box; } .packinglist-view-controls .view-mode-btn { padding: 5px 11px; font-size: 12px; font-weight: 600; line-height: 1.2; } .packinglist-view-controls .packing-box-date-dropdown { z-index: 2106; } .packinglist-view-controls .packing-box-date-dropdown-menu { left: 0; right: auto; min-width: min(288px, calc(100vw - 48px)); max-height: min(320px, 55vh); overflow-x: hidden; overflow-y: auto; } .packing-box-date-dropdown-actions { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eaeaea; } .pdf-export-dropdown { position: relative; display: inline-flex; padding-bottom: 6px; margin-bottom: -6px; z-index: 2120; isolation: isolate; } .pdf-export-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; right: auto; min-width: 250px; background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 8px 10px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); z-index: 2110; } .pdf-export-dropdown:hover .pdf-export-dropdown-menu, .pdf-export-dropdown:focus-within .pdf-export-dropdown-menu { display: block; } .pdf-export-option { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; user-select: none; font-size: 13px; color: #333; } .pdf-export-title { font-weight: 600; font-size: 13px; color: #555; margin-bottom: 4px; } .pdf-export-option input[type="checkbox"], .pdf-export-option input[type="radio"] { margin: 0; } .pdf-export-divider { margin: 6px 0; border-top: 1px solid #eaeaea; } .packing-list-view-table-wrapper .packing-list-view-table { min-width: 980px; width: 100%; } .packing-list-view-table th.packing-list-col-select, .packing-list-view-table td.packing-list-col-select { width: 36px; min-width: 36px; max-width: 40px; box-sizing: border-box; padding: 8px 4px; vertical-align: middle; } .packing-list-view-table td.packing-list-col-select input[type="checkbox"] { margin: 0; } .packing-list-view-table th.packing-list-col-stt, .packing-list-view-table td.packing-list-col-stt { width: 44px; } .packing-list-box-code { margin-bottom: 4px; } .packing-list-box-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12px; color: #666; line-height: 1.35; } .packing-list-products { display: flex; flex-direction: column; gap: 3px; } .packing-list-product-row { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .packing-list-product-main { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .packing-list-product-desc { font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; } .packing-list-note { display: inline-block; max-width: 320px; white-space: normal; overflow-wrap: anywhere; vertical-align: bottom; } @media (min-width: 1200px) { .packing-items-table-wrapper .packing-items-table { width: 100% !important; min-width: 100% !important; } } @media (max-width: 1199px) { .packing-items-table-wrapper .packing-items-table { width: max-content !important; min-width: 960px !important; } .packinglist-view-controls { justify-content: space-between; flex-wrap: wrap; } .packinglist-view-controls .view-mode-toggle { width: auto; justify-content: flex-start; } .packinglist-view-controls .view-mode-btn { flex: 0 0 auto; padding: 5px 11px; font-size: 12px; } .packinglist-view-controls .packing-box-code-search { width: min(160px, 42vw); height: 34px; min-height: 34px; } #packingListView .view-mode-btn { padding: 5px 11px; font-size: 12px; } } .gw-pw-badge { display: inline-flex; align-items: center; justify-content: center; color: #6a1b9a; font-size: 14px; line-height: 1; text-decoration: none; flex-shrink: 0; } a.gw-pw-badge:hover, a.gw-pw-badge:focus { color: #4a148c; } .gw-piecework-filter-link { display: inline-block; margin: 0; padding: 5px 12px; border: 1px solid #6a1b9a; border-radius: 6px; background: #fff; color: #6a1b9a; font-size: 13px; font-weight: 600; line-height: 1.3; cursor: pointer; text-decoration: none; white-space: nowrap; } .gw-piecework-filter-link:hover, .gw-piecework-filter-link:focus { color: #4a148c; border-color: #4a148c; background: #f3e5f5; } .gw-piecework-filter-link.is-active { color: #fff; background: #6a1b9a; border-color: #6a1b9a; } .gw-piecework-filter-link.is-active i { color: #e1bee7; } .bom-manage-list { display: flex; flex-direction: column; gap: 8px; } .bom-manage-list-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #f0f7ff; border: 1px solid #dbeafe; } .bom-cat-sort-arrows { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; min-width: 36px; } .bom-manage-list-item.is-inactive { opacity: 0.65; } .bom-manage-list-actions { display: flex; gap: 6px; flex-shrink: 0; flex-wrap: wrap; } .bom-manage-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .bom-manage-filter, .bom-add-categories { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .bom-items-list-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .bom-type-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 100%; min-width: 0; margin-bottom: 12px; } .bom-type-detail-head>div:first-child { flex: 1 1 auto; min-width: 0; max-width: 100%; } .bom-type-detail-head .settings-page-title { word-break: break-word; overflow-wrap: anywhere; } .bom-type-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; max-width: 100%; } .bom-type-block-header-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .bom-type-block-header-row::after { content: ''; display: table; clear: both; } .bom-type-block-header-actions { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 100%; } .bom-type-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 100%; min-width: 0; } .bom-type-detail-grid>.data-block { min-width: 0; max-width: 100%; width: 100%; box-sizing: border-box; overflow: hidden; } .bom-type-detail-grid .data-block-body { min-width: 0; max-width: 100%; box-sizing: border-box; } .bom-type-detail-grid #bomTypeInfoView .settings-table { width: 100%; max-width: 100%; table-layout: fixed; } .bom-type-detail-grid #bomTypeInfoView .settings-table td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; } .bom-type-price-form { padding: 12px; background: var(--bg-light-blue, #f0f7ff); border-radius: 8px; box-sizing: border-box; max-width: 100%; } .bom-type-price-chart-wrap { position: relative; width: 100%; max-width: 100%; min-width: 0; height: 220px; margin-bottom: 16px; box-sizing: border-box; } .bom-type-price-chart-wrap canvas { display: block; width: 100% !important; max-width: 100% !important; height: 100% !important; } .scroll-table-wrapper.bom-type-price-history-scroll { max-height: min(360px, 50vh); overflow-y: auto; -webkit-overflow-scrolling: touch; } .bom-type-price-table.scroll-table { min-width: 520px; } .bom-type-price-table .bom-type-price-th-note, .bom-type-price-table .bom-type-price-td-note { white-space: normal; word-break: break-word; min-width: 100px; max-width: 180px; } @media (max-width: 768px) { .bom-manage-toolbar { justify-content: stretch; margin-bottom: 12px; } .bom-manage-list-item { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; } .bom-manage-list-item-main { width: 100%; min-width: 0; } .bom-manage-list-item-main .bold600 { word-break: break-word; overflow-wrap: anywhere; } .bom-cat-sort-arrows { flex-direction: row; align-self: flex-start; gap: 6px; } .bom-manage-list-actions { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; } .bom-manage-list-actions .button { width: 100%; margin: 0; text-align: center; box-sizing: border-box; white-space: normal; line-height: 1.35; } .bom-manage-filter { gap: 8px; } .bom-cat-pill { max-width: 100%; box-sizing: border-box; word-break: break-word; text-align: center; } .bom-type-detail-actions, .bom-type-block-header-actions { width: 100%; justify-content: flex-start; } .bom-type-detail-actions .button, .bom-type-block-header-actions .button { flex: 0 1 auto; min-width: 0; max-width: 100%; } .bom-type-block-header-actions { justify-content: stretch; } .bom-type-detail-grid #bomTypeInfoView .settings-table tr { display: table-row !important; } .bom-type-detail-grid #bomTypeInfoView .settings-table td { display: table-cell !important; width: auto !important; } .bom-type-detail-grid #bomTypeInfoView .settings-table td:first-child { width: 38% !important; padding-bottom: 10px; } .bom-type-price-table.scroll-table { min-width: 560px !important; } } .bom-cat-pill { display: inline-block; padding: 5px 12px; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; color: #475569; font-size: 13px; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; } .bom-cat-pill:hover { background: #f1f5f9; border-color: #94a3b8; } .bom-cat-pill.active { background: #2563eb; border-color: #2563eb; color: #fff; } body.dark .bom-manage-list-item { background: #1e293b; border-color: #334155; } body.dark .bom-cat-pill { background: #1e293b; border-color: #475569; color: #cbd5e1; } body.dark .bom-cat-pill:hover { background: #273548; } body.dark .bom-cat-pill.active { background: #2563eb; border-color: #2563eb; color: #fff; } .product-bom-stack.data-block-grid { display: flex; flex-direction: column; gap: 10px; max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: clip; } .product-bom-stack>* { min-width: 0; max-width: 100%; box-sizing: border-box; } .product-bom-stack .product-bom-block-head { margin-bottom: 10px; } .product-bom-stack .product-bom-block-head::after { content: ''; display: table; clear: both; } .product-bom-stack .product-bom-block-head-actions { float: right; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; } .product-bom-stack .scroll-table-wrapper { width: 100%; max-width: 100%; min-width: 0; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .product-bom-stack .bom-add-categories { max-width: 100%; min-width: 0; } .product-bom-view-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .product-bom-view-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; } .product-bom-add-search { position: relative; margin: 12px 0 14px; max-width: 100%; min-width: 0; } .product-bom-searchresults.searchUsers { display: none; left: 0; top: 100%; width: 100%; max-width: 100%; min-width: 0; max-height: min(280px, 45vh); z-index: 10050; } .product-bom-search-item { flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; } .product-bom-empty-row td { background: #f8fafc; } body.dark .product-bom-empty-row td { background: #1e293b; } @media (max-width: 768px) { .product-bom-stack .scroll-table.product-bom-view-table, .product-bom-stack .scroll-table.product-bom-edit-table { width: max-content !important; min-width: 780px !important; table-layout: auto; } } .kilnload-page--addnew .kl-page-body { flex: 0 0 auto; align-self: stretch; } .kilnload-page--addnew .kl-sheet { flex: 0 0 auto; min-height: 0; height: auto; padding: 0; } @media print { body * { visibility: hidden; } body { print-color-adjust: exact; -webkit-print-color-adjust: exact; } }