/* ========================================================= СТАТУС TICKET ========================================================= */ /* ========================================================= ШЕСТИУГОЛЬНЫЕ ОБЪЕКТЫ ========================================================= */ .ticket-status-square-sky, .ticket-status-square-blue, .ticket-status-square-navy, .ticket-status-square-graphite { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; clip-path: polygon( 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50% ); transition: transform .25s ease; } /* ========================================================= НАВЕДЕНИЕ ========================================================= */ .ticket-status-square-sky:hover, .ticket-status-square-blue:hover, .ticket-status-square-navy:hover, .ticket-status-square-graphite:hover { transform: scale(1.08); } /* ========================================================= СВЕТЛО-ГОЛУБОЙ ========================================================= */ .ticket-status-square-sky { background: radial-gradient( circle at 18% 28%, #E0F2FE 0%, #7DD3FC 22%, #38BDF8 58%, #0284C7 100% ); } /* ========================================================= СИНИЙ ========================================================= */ .ticket-status-square-blue { background: radial-gradient( circle at 28% 28%, #DBEAFE 0%, #60A5FA 18%, #2563EB 58%, #1E3A8A 100% ); } /* ========================================================= ТЕМНО-СИНИЙ ========================================================= */ .ticket-status-square-navy { background: radial-gradient( circle at 28% 28%, #A5B4FC 0%, #4F7DFF 18%, #1E40AF 56%, #172554 100% ); } /* ========================================================= ГРАФИТОВЫЙ ========================================================= */ .ticket-status-square-graphite { background: radial-gradient( circle at 28% 28%, #F9FAFB 0%, #D1D5DB 18%, #6B7280 56%, #374151 100% ); } /* ========================================================= ТЕКСТ СТАТУСА TICKET ========================================================= */ .ticket-status { font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; color: #374151; } /* ========================================================= КНОПКА TICKET ========================================================= */ .ticket-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 15px; border-radius: 8px; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; text-decoration: none; cursor: pointer; width: 200px; box-sizing: border-box; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } /* ========================================================= РАССТОЯНИЕ МЕЖДУ КНОПКАМИ TICKET ========================================================= */ .ticket-buttons { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } /* ========================================================= СИНЯЯ КНОПКА ========================================================= */ .ticket-button-blue { background: var(--blue); color: #FFFFFF; border: 1px solid var(--blue); box-shadow: 0 1px 3px rgba(30, 64, 175, .15); } /* ========================================================= СИНЯЯ КНОПКА — HOVER ========================================================= */ .ticket-button-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 4px 10px rgba(30, 64, 175, .20); transform: translateY(-1px); } /* ========================================================= СИНЯЯ КНОПКА — ACTIVE ========================================================= */ .ticket-button-blue:active { transform: translateY(0); } /* ========================================================= СИНЯЯ КНОПКА — FOCUS ========================================================= */ .ticket-button-blue:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ========================================================= ТЕМНО-СЕРАЯ КНОПКА ========================================================= */ .ticket-button-gray { background: #6B7280; color: #FFFFFF; border: 1px solid #6B7280; box-shadow: 0 1px 3px rgba(17, 24, 39, .12); } /* ========================================================= ТЕМНО-СЕРАЯ КНОПКА — HOVER ========================================================= */ .ticket-button-gray:hover { background: #4B5563; border-color: #4B5563; color: #FFFFFF; box-shadow: 0 4px 10px rgba(17, 24, 39, .18); transform: translateY(-1px); } /* ========================================================= ТЕМНО-СЕРАЯ КНОПКА — ACTIVE ========================================================= */ .ticket-button-gray:active { transform: translateY(0); } /* ========================================================= ТЕМНО-СЕРАЯ КНОПКА — FOCUS ========================================================= */ .ticket-button-gray:focus-visible { outline: 2px solid #6B7280; outline-offset: 2px; } /* ========================================================= СТАНДАРТНЫЕ ТАБЛИЦЫ ПЛАТФОРМЫ ========================================================= */ /* ========================================================= ОСНОВНАЯ ТАБЛИЦА ========================================================= */ .ticket-table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: Inter, system-ui, sans-serif; font-size: 16px; color: #374151; background: #FFFFFF; } /* ========================================================= ЗАГОЛОВОК ТАБЛИЦЫ ========================================================= */ .ticket-table thead { background: #F5F7FA; } /* ========================================================= ЗАГОЛОВКИ СТОЛБЦОВ ========================================================= */ .ticket-table th { padding: 12px 14px; border-top: 1px solid #E5E7EB; border-bottom: 1px solid #E5E7EB; font-family: Inter, system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.4; color: #1D4ED8; text-align: left; white-space: nowrap; } /* ========================================================= ПЕРВЫЙ ЗАГОЛОВОК ========================================================= */ .ticket-table th:first-child { border-left: 1px solid #E5E7EB; border-top-left-radius: 8px; } /* ========================================================= ПОСЛЕДНИЙ ЗАГОЛОВОК ========================================================= */ .ticket-table th:last-child { border-right: 1px solid #E5E7EB; border-top-right-radius: 8px; } /* ========================================================= СТРОКИ ========================================================= */ .ticket-table tbody tr { transition: background .2s ease; } /* ========================================================= НАВЕДЕНИЕ НА СТРОКУ ========================================================= */ .ticket-table tbody tr:hover { background: #F9FAFB; } /* ========================================================= ЯЧЕЙКИ ========================================================= */ .ticket-table td { padding: 13px 14px; border-bottom: 1px solid #E5E7EB; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.4; color: #374151; vertical-align: middle; } /* ========================================================= ЛЕВАЯ ГРАНИЦА ========================================================= */ .ticket-table td:first-child { border-left: 1px solid #E5E7EB; } /* ========================================================= ПРАВАЯ ГРАНИЦА ========================================================= */ .ticket-table td:last-child { border-right: 1px solid #E5E7EB; } /* ========================================================= НИЖНИЕ УГЛЫ ТАБЛИЦЫ ========================================================= */ .ticket-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; } .ticket-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; } /* ========================================================= CSS названия таблицы + счетчики ========================================================= */ /* ========================================================= ЗАГОЛОВОК ТАБЛИЦЫ ========================================================= */ .ticket-table-title { display: flex; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; margin: 0 0 18px 0; padding: 0 2px; font-family: Inter, system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; color: #4B5563; letter-spacing: .05px; } /* ========================================================= НАЗВАНИЕ ТАБЛИЦЫ ========================================================= */ .ticket-table-title-text { color: #4B5563; } /* ========================================================= ПРАВАЯ ЧАСТЬ ========================================================= */ .ticket-table-count { display: inline-flex; align-items: center; gap: 6px; } /* ========================================================= ПОДПИСЬ СЧЁТЧИКА ========================================================= */ .ticket-table-count-label { color: #4B5563; font-size: 15px; font-weight: 500; } /* ========================================================= СЧЁТЧИК ========================================================= */ .ticket-table-counter { color: #1D4ED8; font-size: 16px; font-weight: 600; } /* ========================================================= КОНТЕЙНЕР КНОПКИ TICKET ========================================================= */ .ticket-buttons { display: flex; justify-content: center; width: 100%; margin-top: 15px; } /* ========================================================= КНОПКА TICKET ========================================================= */ .ticket-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 15px; border-radius: 8px; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; text-decoration: none; cursor: pointer; width: 200px; box-sizing: border-box; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } /* ========================================================= КНОПКА TICKET НА ГЛАВНОЙ ========================================================= */ /* ========================================================= ОСНОВНАЯ КНОПКА TICKET ========================================================= */ .ticket_main_button { display: flex; align-items: center; justify-content: center; width: 220px; margin: 0 0 18px 0; padding: 8px 15px; box-sizing: border-box; border-radius: 8px; font-family: Inter, system-ui, sans-serif; font-size: 17px; font-weight: 500; line-height: 1.3; color: #FFFFFF; background: var(--blue); border: 1px solid var(--blue); box-shadow: 0 1px 3px rgba(30, 64, 175, .15); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } /* ========================================================= НАВЕДЕНИЕ ========================================================= */ .ticket_main_button:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 5px 12px rgba(30, 64, 175, .22); transform: translateY(-1px); } /* ========================================================= НАЖАТИЕ ========================================================= */ .ticket_main_button:active { transform: translateY(0); } /* ========================================================= FOCUS ========================================================= */ .ticket_main_button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ========================================================= ЗАГОЛОВОК ========================================================= */ .ticket-table-title-four { display: flex; align-items: center; width: 100%; box-sizing: border-box; margin: 0 0 18px 0; margin-left: 13px; margin-top: 5px; padding: 0 2px; font-family: Inter, system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.4; color: #4B5563; letter-spacing: .05px; } /* ========================================================= СИНИЙ НОМЕР ОБРАЩЕНИЯ ========================================================= */ .ticket-table-title-four-blue { color: #1D4ED8; } /* ========================================================= ВЫБОР КАТЕГОРИИ ОБРАЩЕНИЯ ========================================================= */ .ticket-category-select { width: 280px; padding: 9px 14px; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 8px; background: #FFFFFF; color: #374151; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; cursor: pointer; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* ========================================================= НЕДОСТУПНОЕ ЗНАЧЕНИЕ ========================================================= */ .ticket-category-select:invalid { color: #6B7280; } /* ========================================================= FOCUS ========================================================= */ .ticket-category-select:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59, 130, 246, .12); } /* ========================================================= НАВЕДЕНИЕ ========================================================= */ .ticket-category-select:hover { border-color: #9CA3AF; } /* ========================================================= ПОЛЯ ОБРАЩЕНИЯ ========================================================= */ /* ========================================================= ПОДПИСЬ ПОЛЯ ========================================================= */ .ticket-field-label { display: block; margin-bottom: 8px; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; color: #4B5563; } /* ========================================================= ТЕМА ОБРАЩЕНИЯ ========================================================= */ .ticket-subject-field { width: 500px; padding: 9px 14px; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 8px; background: #FFFFFF; color: #374151; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.3; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* ========================================================= ТЕКСТ ОБРАЩЕНИЯ ========================================================= */ .ticket-message-field { width: 800px; min-height: 180px; padding: 9px 14px; box-sizing: border-box; border: 1px solid #D1D5DB; border-radius: 8px; background: #FFFFFF; color: #374151; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; outline: none; resize: vertical; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } /* ========================================================= PLACEHOLDER ========================================================= */ .ticket-subject-field::placeholder, .ticket-message-field::placeholder { color: #6B7280; } /* ========================================================= FOCUS ========================================================= */ .ticket-subject-field:focus, .ticket-message-field:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(59, 130, 246, .12); } /* ========================================================= НАВЕДЕНИЕ ========================================================= */ .ticket-subject-field:hover, .ticket-message-field:hover { border-color: #9CA3AF; } /* ========================================================= ДОПОЛНИТЕЛЬНАЯ СИНЯЯ КНОПКА TICKET ========================================================= */ .ticket_action_button-blue { display: flex; align-items: center; justify-content: center; width: 220px; margin: 0 0 18px 0; padding: 8px 15px; box-sizing: border-box; border-radius: 8px; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; color: #FFFFFF; background: var(--blue); border: 1px solid var(--blue); box-shadow: 0 1px 3px rgba(30, 64, 175, .15); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } /* ========================================================= НАВЕДЕНИЕ ========================================================= */ .ticket_action_button-blue:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 5px 12px rgba(30, 64, 175, .22); transform: translateY(-1px); } /* ========================================================= НАЖАТИЕ ========================================================= */ .ticket_action_button-blue:active { transform: translateY(0); } /* ========================================================= FOCUS ========================================================= */ .ticket_action_button-blue:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ========================================================= КНОПКА ПРИКРЕПЛЕНИЯ ДОКУМЕНТОВ ========================================================= */ .upload_button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 210px; min-height: 56px; padding: 8px 15px; box-sizing: border-box; border-radius: 8px; font-family: Inter, system-ui, sans-serif; font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; color: #FFFFFF; background: var(--blue); border: 1px solid var(--blue); box-shadow: 0 1px 3px rgba(30, 64, 175, .15); cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; } /* ========================================================= SVG ========================================================= */ .upload_button svg { width: 32px; height: 32px; flex: 0 0 32px; display: block; } /* ========================================================= НАВЕДЕНИЕ ========================================================= */ .upload_button:hover { background: var(--blue-dark); border-color: var(--blue-dark); box-shadow: 0 4px 10px rgba(30, 64, 175, .20); transform: translateY(-1px); } /* ========================================================= НАЖАТИЕ ========================================================= */ .upload_button:active { transform: translateY(0); } /* ========================================================= FOCUS ========================================================= */ .upload_button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* ========================================================= ИКОНКА ПРИКРЕПЛЕННОГО ФАЙЛА ========================================================= */ .ticket-attachment-icon { display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: middle; } /* ========================================================= КНОПКА УДАЛЕНИЯ ПРИКРЕПЛЕННЫХ ФАЙЛОВ ========================================================= */ .ticket-remove-file { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: none; background: transparent; cursor: pointer; line-height: 0; } .ticket-remove-file-icon { display: block; width: 22px; height: 22px; position: relative; top: 1px; } .ticket-attachment-row { display: flex; align-items: center; margin-left: 10px; position: relative; top: 8px; .ticket-attachment-row span { display: inline-flex; align-items: center; line-height: 1.3; } .ticket-remove-file { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: 0; padding: 0; border: none; background: transparent; color: #6B7280; cursor: pointer; line-height: 0; } /* ========================================================= НАВЕДЕНИЕ НА УДАЛЕНИЕ ФАЙЛА ========================================================= */ .ticket-remove-file { transition: color .15s ease; } /* ========================================================= ЦВЕТ КРЕСТИКА ========================================================= */ .ticket-remove-file-icon path { stroke: #6B7280; } /* ========================================================= КРЕСТИК — НАВЕДЕНИЕ ========================================================= */ .ticket-remove-file:hover .ticket-remove-file-icon path { stroke: var(--blue); } /* ========================================================= КЛИКАБЕЛЬНЫЕ ПРИСОЕДИНЕННЫЕ ФАЙЛЫ ========================================================= */ .ticket-attachment-name { display: flex; align-items: center; gap: 7px; font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; color: #4B5563; text-decoration: none; } .ticket-attachment-name:hover { color: #1D4ED8; } /* ========================================================= ТЕКСТ ДЛЯ ПРИСОЕДИНЕННЫX ФАЙЛОВ ========================================================= */ .ticket-not-attachment-name { display: flex; align-items: center; gap: 7px; font-family: Inter, system-ui, sans-serif; font-size: 15px; font-weight: 500; line-height: 1.4; color: #4B5563; text-decoration: none; }