/* ============================================ Offers Module ============================================ */ /* Editor section cards */ .offers-editor-section { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.5rem; } /* Settings grid */ .offers-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .offers-settings-grid > .admin-card { margin-bottom: 0; } @media (max-width: 900px) { .offers-settings-grid { grid-template-columns: 1fr; } } /* Logo section */ .offers-logo-section { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem; } .offers-logo-preview { max-width: 200px; max-height: 100px; border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0.5rem; background: #fff; } .offers-logo-preview img { max-width: 100%; max-height: 80px; object-fit: contain; } /* Items table */ .offers-items-table { overflow-x: auto; overflow-y: hidden; margin-bottom: 1rem; border: 1px solid var(--border-color); border-radius: 0.5rem; } .offers-items-table .admin-table { min-width: 700px; margin: 0; } .offers-items-table .admin-table thead th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); padding: 8px 10px; white-space: nowrap; } .offers-items-table .admin-table td { vertical-align: top; padding: 8px; } .offers-items-table .admin-table tbody tr { transition: background var(--transition); } .offers-items-table .admin-table tbody tr:hover { background: var(--table-row-hover); } .offers-items-table .admin-table td .admin-form-input { display: block; padding: 6px 8px; font-size: 13px; min-height: 32px; } /* Totals summary */ .offers-totals-summary { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; padding-top: 0.75rem; border-top: 1px solid var(--border-color); } .offers-totals-row { display: flex; gap: 2rem; justify-content: flex-end; min-width: 250px; padding: 0.25rem 0; font-size: 0.875rem; color: var(--text-secondary); } .offers-totals-row span:last-child { min-width: 100px; text-align: right; font-weight: 500; color: var(--text-primary); } .offers-totals-total { border-top: 2px solid var(--text-primary); margin-top: 0.25rem; padding-top: 0.5rem; font-size: 1rem; font-weight: 600; } .offers-totals-total span:last-child { font-weight: 700; } /* Scope sections list wrapper */ .offers-scope-list { margin-top: 1.25rem; display: flex; flex-direction: column; gap: 1rem; } /* Scope section card */ .offers-scope-section { border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: visible; transition: border-color var(--transition); background: var(--bg-primary); } .offers-scope-content { overflow: hidden; } .offers-scope-section:hover { border-color: color-mix(in srgb, var(--border-color) 70%, var(--accent-color)); } .offers-scope-section-header { display: flex; align-items: center; padding: 0.625rem 1rem; background: var(--bg-tertiary); border-bottom: 1px solid var(--border-color); border-radius: 0.5rem 0.5rem 0 0; gap: 0.5rem; } .offers-scope-section-header .offers-scope-number { font-size: 0.75rem; font-weight: 600; color: var(--text-tertiary); flex-shrink: 0; min-width: 1.25rem; } .offers-scope-section-header .offers-scope-title { font-weight: 600; font-size: 0.875rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .offers-scope-section-header .offers-scope-actions { display: flex; gap: 0.25rem; margin-left: auto; flex-shrink: 0; } .offers-scope-section .admin-form { padding: 1rem; } /* Customer selector */ .offers-customer-select { position: relative; } .offers-customer-selected { display: flex; align-items: center; gap: 0.5rem; height: 36px; padding: 0 12px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); background: var(--input-bg); font-size: 13px; font-weight: 500; color: var(--text-primary); } .offers-customer-selected span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .offers-customer-selected .admin-btn-icon { flex-shrink: 0; width: 22px; height: 22px; margin-right: -4px; } .offers-customer-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; background: var(--bg-primary); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 4px 0; } .offers-customer-dropdown::-webkit-scrollbar { width: 5px; } .offers-customer-dropdown::-webkit-scrollbar-track { background: transparent; } .offers-customer-dropdown::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 99px; } .offers-customer-dropdown::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .offers-customer-dropdown-item { padding: 8px 12px; cursor: pointer; transition: background var(--transition); border-radius: 4px; margin: 0 4px; } .offers-customer-dropdown-item:hover { background: var(--bg-secondary); } .offers-customer-dropdown-item div:first-child { font-size: 13px; font-weight: 500; color: var(--text-primary); line-height: 1.3; } .offers-customer-dropdown-item div:last-child { font-size: 11.5px; color: var(--text-tertiary); margin-top: 1px; } .offers-customer-dropdown-empty { padding: 0.75rem; text-align: center; color: var(--text-tertiary); font-size: 0.8125rem; } /* Template dropdown menu */ .offers-template-menu { position: absolute; top: 100%; right: 0; z-index: 100; min-width: 200px; max-height: 250px; overflow-y: auto; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); margin-top: 0.25rem; } .offers-template-menu-item { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.875rem; transition: background var(--transition); } .offers-template-menu-item:hover { background: var(--bg-secondary); } /* Language badges */ .offers-lang-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.25rem; padding: 0 0.375rem; border-radius: 0.25rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: color-mix(in srgb, var(--info) 15%, transparent); color: var(--info); margin-right: 0.375rem; vertical-align: middle; } .offers-lang-badge-cz { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); } /* Compact form row for 3+ columns */ .offers-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; } @media (max-width: 768px) { .offers-form-row-3 { grid-template-columns: 1fr; } } /* Tabs - zachovany pro zpetnou kompatibilitu, nove pouzivat admin-tabs/admin-tab */ .offers-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: 0.625rem; margin-bottom: 1.5rem; max-width: 100%; overflow-x: auto; } .offers-tab { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.25rem; background: transparent; border: none; border-radius: 0.5rem; color: var(--text-muted); font-size: 0.8125rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; letter-spacing: 0.01em; white-space: nowrap; } .offers-tab:hover { color: var(--text-primary); } .offers-tab.active { color: var(--text-primary); font-weight: 600; background: var(--bg-secondary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border-color); } /* RichEditor (Quill) */ .rich-editor { border: 1px solid var(--border-color); border-radius: 0.5rem; overflow: visible; } .rich-editor .quill { display: flex; flex-direction: column; } /* Toolbar */ .rich-editor .ql-toolbar.ql-snow { background: var(--bg-secondary); border: none; border-bottom: 1px solid var(--border-color); border-radius: 0.5rem 0.5rem 0 0; padding: 0.5rem; flex-wrap: wrap; gap: 2px; } .rich-editor .ql-toolbar .ql-formats { margin-right: 8px; } /* Toolbar buttons */ .rich-editor .ql-snow .ql-stroke { stroke: var(--text-secondary); } .rich-editor .ql-snow .ql-fill { fill: var(--text-secondary); } .rich-editor .ql-snow .ql-picker-label { color: var(--text-secondary); border-color: var(--border-color); } .rich-editor .ql-snow button:hover .ql-stroke, .rich-editor .ql-snow .ql-picker-label:hover .ql-stroke { stroke: var(--text-primary); } .rich-editor .ql-snow button:hover .ql-fill, .rich-editor .ql-snow .ql-picker-label:hover .ql-fill { fill: var(--text-primary); } .rich-editor .ql-snow button:hover, .rich-editor .ql-snow .ql-picker-label:hover { color: var(--text-primary); } /* Active state */ .rich-editor .ql-snow button.ql-active { color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 15%, transparent); border-radius: 4px; } .rich-editor .ql-snow button.ql-active .ql-stroke { stroke: var(--accent-color); } .rich-editor .ql-snow button.ql-active .ql-fill, .rich-editor .ql-snow button.ql-active .ql-stroke.ql-fill { fill: var(--accent-color); } .rich-editor .ql-snow .ql-picker-item.ql-selected { color: var(--accent-color); } .rich-editor .ql-snow .ql-picker-label.ql-active { color: var(--accent-color); } .rich-editor .ql-snow .ql-picker-label.ql-active .ql-stroke { stroke: var(--accent-color); } /* Dropdowns (font, size, color, align) */ .rich-editor .ql-snow .ql-picker-options { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0.375rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); z-index: 1000; padding: 0.25rem; } .rich-editor .ql-snow .ql-picker-item { color: var(--text-secondary); padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .rich-editor .ql-snow .ql-picker-item:hover { color: var(--text-primary); background: var(--bg-secondary); } /* Font picker */ .rich-editor .ql-snow .ql-font .ql-picker-options { min-width: 11rem; max-height: 200px; overflow-y: auto; } .rich-editor .ql-snow .ql-size .ql-picker-options { max-height: 200px; overflow-y: auto; } /* Font labels - vysoka specificita kvuli quill.snow.css */ .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="arial"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="arial"]::before { content: 'Arial' !important; font-family: Arial, sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="tahoma"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="tahoma"]::before { content: 'Tahoma' !important; font-family: Tahoma, sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="verdana"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="verdana"]::before { content: 'Verdana' !important; font-family: Verdana, sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="georgia"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="georgia"]::before { content: 'Georgia' !important; font-family: Georgia, serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="times-new-roman"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="times-new-roman"]::before { content: 'Times New Roman' !important; font-family: 'Times New Roman', serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="courier-new"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="courier-new"]::before { content: 'Courier New' !important; font-family: 'Courier New', monospace; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="trebuchet-ms"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="trebuchet-ms"]::before { content: 'Trebuchet MS' !important; font-family: 'Trebuchet MS', sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="impact"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="impact"]::before { content: 'Impact' !important; font-family: Impact, sans-serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="comic-sans-ms"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="comic-sans-ms"]::before { content: 'Comic Sans MS' !important; font-family: 'Comic Sans MS', cursive; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="lucida-console"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="lucida-console"]::before { content: 'Lucida Console' !important; font-family: 'Lucida Console', monospace; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="palatino-linotype"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="palatino-linotype"]::before { content: 'Palatino Linotype' !important; font-family: 'Palatino Linotype', serif; } .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before, .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before { content: 'Garamond' !important; font-family: Garamond, serif; } /* Font classes */ .ql-font-arial { font-family: Arial, sans-serif; } .ql-font-tahoma { font-family: Tahoma, sans-serif; } .ql-font-verdana { font-family: Verdana, sans-serif; } .ql-font-georgia { font-family: Georgia, serif; } .ql-font-times-new-roman { font-family: 'Times New Roman', serif; } .ql-font-courier-new { font-family: 'Courier New', monospace; } .ql-font-trebuchet-ms { font-family: 'Trebuchet MS', sans-serif; } .ql-font-impact { font-family: Impact, sans-serif; } .ql-font-comic-sans-ms { font-family: 'Comic Sans MS', cursive; } .ql-font-lucida-console { font-family: 'Lucida Console', monospace; } .ql-font-palatino-linotype { font-family: 'Palatino Linotype', serif; } .ql-font-garamond { font-family: Garamond, serif; } /* Size picker */ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="8px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="8px"]::before { content: '8px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="9px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="9px"]::before { content: '9px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { content: '10px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="11px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="11px"]::before { content: '11px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28px"]::before { content: '28px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before { content: '36px' !important; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48px' !important; } /* Editor area */ .rich-editor .ql-container.ql-snow { border: none; border-radius: 0 0 0.5rem 0.5rem; font-size: 0.875rem; } .rich-editor .ql-editor { min-height: var(--re-min-height, 120px); padding: 0.75rem; color: var(--text-primary); line-height: 1.6; font-size: 0.875rem; background: var(--input-bg); } .rich-editor .ql-editor.ql-blank::before { color: var(--text-tertiary); font-style: normal; } /* Lists inside editor */ .rich-editor .ql-editor ul, .rich-editor .ql-editor ol { padding-left: 1.5rem; } /* Color picker */ .rich-editor .ql-snow .ql-color-picker .ql-picker-options[aria-hidden="false"] { width: 176px; padding: 0.375rem; display: flex; flex-wrap: wrap; gap: 2px; } .rich-editor .ql-snow .ql-color-picker .ql-picker-item { width: 18px; height: 18px; border-radius: 2px; margin: 0; padding: 0; flex-shrink: 0; } /* Tooltip (link editor) */ .rich-editor .ql-snow .ql-tooltip { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 0.375rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); color: var(--text-primary); } .rich-editor .ql-snow .ql-tooltip input[type="text"] { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0.25rem; color: var(--text-primary); padding: 0.25rem 0.5rem; } .rich-editor .ql-snow .ql-tooltip a { color: var(--accent-color); } /* Read-only rendered rich text (Quill HTML output) */ .rich-text-view { color: var(--text-secondary); line-height: 1.6; font-size: 0.875rem; overflow-wrap: break-word; word-break: break-word; min-width: 0; } .rich-text-view ul, .rich-text-view ol { padding-left: 1.5rem; margin: 0.25rem 0 0.75rem; } .rich-text-view li { margin-bottom: 0.15rem; } .rich-text-view a { color: var(--accent-color); } .rich-text-view strong, .rich-text-view b { font-weight: 600; color: var(--text-primary); display: inline-block; margin-top: 0.5rem; } .rich-text-view br + b, .rich-text-view br + strong { margin-top: 0.75rem; } .rich-text-view > br:first-child, .rich-text-view ul + br, .rich-text-view ol + br { display: none; } @media (max-width: 640px) { .offers-editor-section { padding: 1rem; } .offers-items-table { margin: 0 -1rem; width: calc(100% + 2rem); } .offers-totals-summary { align-items: stretch; } .offers-totals-row { min-width: unset; } } /* Offer draft row in table */ .offers-draft-row { background: var(--row-draft); } .offers-draft-row-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); padding: 0.2rem 0.55rem; border-radius: 99px; } /* Expired offer without order */ .offers-expired-row { background: var(--row-expired); } .offers-expired-row td { color: var(--danger) !important; } .offers-expired-row a { color: var(--danger) !important; } /* Invalidated offer */ .offers-invalidated-row { opacity: 0.6; } .offers-invalidated-row td { color: var(--text-muted) !important; } .offers-invalidated-row a { color: var(--text-muted) !important; } /* Read-only form (invalidated offer detail) */ .offers-readonly input[readonly], .offers-readonly select:disabled { background-color: var(--bg-secondary); cursor: default; } /* Offer draft indicator */ .offers-draft-indicator { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; color: var(--text-tertiary); margin-top: 0.2rem; opacity: 0.8; }