/* ===== CSS VARIABLES ===== */
:root{
/* Цветовая палитра */
--bg-primary:#0d1117;
--bg-secondary:#161b22;
--bg-tertiary:#21262d;
--text-primary:#f0f6fc;
--text-secondary:#8b949e;
--text-muted:#6e7681;
--border-color:#30363d;
/* Семантические цвета */
--c-ok:#34d399;
--c-warn:#f59e0b;
--c-info:#60a5fa;
--c-jobs:#8b5cf6;
--c-err:#ef4444;
--c-arch:#9aa4ae;
/* Акцентные цвета */
--accent-blue:#58a6ff;
--ring:0 0 0 3px rgba(88,166,255,.25);
--shadow:0 16px 32px rgba(1,4,9,.35);
--radius:16px;
/* Анимации */
--ease:cubic-bezier(.4,0,.2,1);
--t-fast:.16s;
--t-base:.22s;
--t-smooth:.42s;
--ease-smooth:cubic-bezier(.22,.61,.36,1);
/* Контейнер */
--container-w: 1400px;
/* Мобильная навигация */
--mbnav-h: 90px;
--mb-stroke: 2.6;
}
/* ===== BASE STYLES ===== */
*{box-sizing:border-box}
html,body{height:100%}
/* Исправление мобильных глюков - только для кнопок */
button, .btn, [role="button"] {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Разрешаем выделение текста в полях ввода */
input, textarea, [contenteditable] {
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
body{
margin:0;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif;
background:var(--bg-primary);
color:var(--text-primary);
scrollbar-width:thin;
scrollbar-color:#435166 transparent;
/* Убираем мобильные глюки */
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-overflow-scrolling: touch;
}
body::-webkit-scrollbar{width:10px;height:10px}
body::-webkit-scrollbar-thumb{
background:#435166;
border-radius:10px;
border:2px solid transparent;
background-clip:content-box;
}
/* Скролл-гаттер для предотвращения скачков */
@supports (scrollbar-gutter: stable) {
html{ scrollbar-gutter: stable both-edges; }
}
@supports not (scrollbar-gutter: stable) {
body{ overflow-y: scroll; }
}
/* ===== HEADER & NAVIGATION ===== */
.app-header{
position:sticky;
top:0;
z-index:1200;
}
.app-title{
color:var(--accent-blue);
font-weight:700;
font-size:18px;
margin-right:auto;
}
/* Поиск */
.search-wrap{
position:relative;
width:clamp(220px,40vw,520px);
}
.search-ico{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
width:14px;
height:14px;
border:2px solid var(--text-secondary);
border-radius:50%;
}
.search-ico::after{
content:"";
position:absolute;
width:8px;
height:2px;
background:var(--text-secondary);
right:-6px;
bottom:-3px;
transform:rotate(45deg);
}
#global-search{
width:100%;
padding:12px 14px 12px 38px;
border-radius:12px;
border:1px solid var(--border-color);
background:var(--bg-tertiary);
color:var(--text-primary);
transition:border-color .2s cubic-bezier(.25,.46,.45,.94), box-shadow .2s cubic-bezier(.25,.46,.45,.94) !important;
}
#global-search:focus{
outline:none;
box-shadow:var(--ring);
border-color:var(--accent-blue);
}
/* Десктопные действия */
.header-actions-desktop{display:none}
@media(min-width:769px){
.header-actions-desktop{display:flex;gap:10px}
#burger{display:none}
}
/* ===== GLASS CAPSULE HEADER ===== */
/* Десктоп: капсула с эффектом стекла */
@media (min-width:769px){
.app-bar{
position:sticky;
top:0px;
background:transparent !important;
border-bottom:none !important;
display:flex !important;
align-items:center !important;
gap:12px !important;
padding:16px 0 !important;
padding-inline:max(16px, calc(50vw - var(--container-w, 1400px)/2)) !important;
margin-top: 20px;
}
.app-bar::before{
content:"";
position:absolute;
left:50%;
transform:translateX(-50%);
width:min(var(--container-w, 1400px), calc(100% - 32px));
height:80px;
border-radius:30px;
background:linear-gradient(145deg, rgba(13,17,23,.85), rgba(22,27,34,.92));
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:0 10px 28px rgba(1,4,9,.45), 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.28) inset;
z-index:0;
}
.app-bar > *{
position:relative;
z-index:1;
}
.app-logo{
display:inline-flex;
align-items:center;
margin-left:12px;
margin-right:12px;
}
.app-logo img{
height:42px;
width:auto;
border-radius:10px;
}
.search-wrap{
margin-left:auto;
flex:0 1 clamp(220px, 24vw, 360px);
max-width:360px;
}
.header-actions-desktop{
display:flex;
gap:10px;
margin-left:12px;
margin-right:12px; /* такой же отступ как у логотипа слева */
}
}
/* Мобильная версия: капсула с отступом сверху */
@media (max-width:768px){
.app-bar{
position:relative;
background:transparent !important;
border-bottom:none !important;
padding: 20px 10px !important;
display:flex !important;
align-items:center;
gap:12px;
}
.app-bar::before{
content:"";
position:absolute;
top:10px;
left:8px;
right:20px;
bottom:6px;
border-radius:24px;
z-index:0;
background:linear-gradient(145deg, rgba(13,17,23,.85), rgba(22,27,34,.92));
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(12px) saturate(160%);
-webkit-backdrop-filter:blur(12px) saturate(160%);
box-shadow:0 10px 24px rgba(1,4,9,.42), 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.28) inset;
}
.app-bar > *{
position:relative;
z-index:1;
}
.app-logo{
display:inline-flex;
align-items:center;
margin-left:10px;
margin-right:20px; /* больше отступа для красоты */
}
.app-logo img{
height:30px;
width:auto;
border-radius:8px;
}
.search-wrap{
flex:1;
margin-right:30px; /* отступ от правой границы капсулы */
}
#global-search{
width:100%;
max-width:100%;
border-radius: 15px; /* скругление как у капсулы */
}
}
/* ===== BURGER MENU ===== */
.icon-btn{
position:relative;
width:36px;
height:36px;
border:none;
background:transparent;
color:var(--text-primary);
cursor:pointer;
border-radius:10px;
transition:transform var(--t-fast) var(--ease);
}
.icon-btn:focus-visible{
outline:none;
box-shadow:var(--ring);
}
.burger-line{
position:absolute;
left:7px;
right:7px;
height:2px;
background:#fff;
border-radius:2px;
transition:transform var(--t-fast) var(--ease), top var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger-line:nth-child(1){top:10px}
.burger-line:nth-child(2){top:17px}
.burger-line:nth-child(3){top:24px}
/* Анимация бургера при открытии */
.mnav-trigger.mnav--open .burger-line:nth-child(1){
top:17px;
transform:rotate(45deg);
background:var(--accent-blue);
}
.mnav-trigger.mnav--open .burger-line:nth-child(2){
opacity:0;
transform:scale(.6);
}
.mnav-trigger.mnav--open .burger-line:nth-child(3){
top:17px;
transform:rotate(-45deg);
background:var(--accent-blue);
}
/* Бургер-триггер для мобильного меню */
.mnav-trigger{
display:none;
position:relative;
width:36px;
height:36px;
background:transparent;
border:none;
cursor:pointer;
padding:0;
z-index:100000;
}
.mnav-trigger .burger-line{
left:0;
right:0;
}
/* Показываем бургер только на планшетах (769px-1024px) */
@media(min-width:769px) and (max-width:1024px){
.mnav-trigger{display:block !important}
.mnav{display:block !important}
.header-actions-desktop{display:none !important}
}
/* Скрываем бургер на мобильных (до 768px) */
@media(max-width:768px){
.mnav-trigger{display:none !important}
.header-actions-desktop{display:none !important}
}
/* Скрываем бургер на десктопе (1025px+) */
@media(min-width:1025px){
.mnav-trigger{
display:none !important;
visibility:hidden !important;
opacity:0 !important;
}
.header-actions-desktop{display:flex !important}
}
.drawer[hidden]{display:none}
.drawer{position:fixed;inset:0;z-index:2000}
.drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.drawer-panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);background:rgba(22,27,34,.9);border-right:1px solid rgba(88,166,255,.18);box-shadow:var(--shadow);transform:translateX(-100%);transition:transform var(--t-base) var(--ease)}
.drawer[open] .drawer-panel{transform:translateX(0)}
/* ===== MOBILE NAVIGATION ===== */
.mobile-nav{
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:var(--bg-primary);
transform:translateX(-100%);
transition:transform var(--t-base) var(--ease);
z-index:1999;
padding-top:80px;
overflow-y:auto;
}
.mobile-nav.active{
transform:translateX(0);
}
.mobile-search{
position:relative;
padding:12px 16px;
}
.mobile-search input{
width:100%;
padding:10px 12px 10px 34px;
border:1px solid var(--border-color);
border-radius:12px;
background:var(--bg-tertiary);
color:var(--text-primary);
}
/* ===== BUTTONS ===== */
.btn{
padding:10px 14px;
border:none;
border-radius:12px;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:transform .2s cubic-bezier(.25,.46,.45,.94), filter .2s cubic-bezier(.25,.46,.45,.94), box-shadow .2s cubic-bezier(.25,.46,.45,.94) !important;
/* Исправление мобильных глюков */
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Убираем остаточные следы */
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
.btn:hover{
transform:translateY(-1px);
filter:brightness(1.06);
box-shadow:0 8px 20px rgba(0,0,0,.18);
}
/* Исправление мобильных глюков с нажатием */
.btn:active{
transform:translateY(0);
filter:brightness(0.95);
box-shadow:0 2px 8px rgba(0,0,0,.15);
transition:transform .1s ease, filter .1s ease, box-shadow .1s ease;
}
/* Убираем фокус на мобильных */
.btn:focus{
outline: none;
box-shadow: none;
}
/* Удалены все конфликтующие мобильные стили */
.btn-primary{
background:linear-gradient(135deg,#58a6ff,#3b82f6);
color:#fff;
}
.btn-secondary{
background:var(--bg-tertiary);
color:var(--text-primary);
border:1px solid var(--border-color);
}
.btn-danger{
background:linear-gradient(135deg,#ef4444,#dc2626);
color:#fff;
}
.btn-success{
background:linear-gradient(135deg,#22c55e,#16a34a);
color:#fff;
}
.btn-outline{
background:transparent;
color:var(--text-secondary);
border:1px solid var(--border-color);
}
.btn-outline:hover{
background:var(--bg-tertiary);
color:var(--text-primary);
border-color:var(--accent-blue);
}
/* ===== LAYOUT ===== */
main{
padding:26px 16px;
max-width:1400px;
margin:0 auto;
}
.contractors-grid{
display:flex;
flex-wrap:wrap;
gap:18px;
align-items:flex-start;
justify-content: flex-start; /* По умолчанию по левому краю */
}
/* Выравнивание карточек по центру только на экранах 1024px */
@media (min-width: 1024px) and (max-width: 1024px) {
.contractors-grid {
justify-content: center !important;
}
}
.contractor-card-compact{
flex:0 0 360px;
max-width:calc(50% - 9px);
}
/* Стили для обычных модалок контрагентов */
.modal-content {
background: white;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Стили для Telegram модального окна - удалены, используются динамические стили */
.telegram-header {
display: flex;
align-items: center;
padding: 16px 16px 12px 16px;
border-bottom: 1px solid #e1e5e9;
}
.telegram-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #0088cc;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-right: 12px;
flex-shrink: 0;
}
.avatar-circle {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, #0088cc, #00a8ff);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
}
.telegram-info {
flex: 1;
min-width: 0;
}
.telegram-name {
font-weight: 600;
color: #000;
margin: 0 0 4px 0;
font-size: 15px;
line-height: 1.2;
}
.telegram-time {
color: #707579;
font-size: 13px;
margin: 0;
line-height: 1.2;
}
.telegram-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.telegram-content {
padding: 0 16px 16px 16px;
}
.telegram-text {
line-height: 1.4;
color: #000;
margin: 0;
font-size: 15px;
white-space: pre-wrap;
word-wrap: break-word;
}
.telegram-text .telegram-link {
color: #0088cc;
text-decoration: none;
word-break: break-all;
}
.telegram-text .telegram-link:hover {
text-decoration: underline;
}
.telegram-media {
margin: 12px 0;
}
.telegram-photo {
margin: 8px 0;
border-radius: 8px;
overflow: hidden;
}
.telegram-image {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
.telegram-video {
margin: 8px 0;
border-radius: 8px;
overflow: hidden;
}
.telegram-video-player {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
.telegram-audio {
margin: 8px 0;
padding: 12px;
background: #f8f9fa;
border-radius: 8px;
}
.telegram-audio-player {
width: 100%;
height: 40px;
}
.telegram-footer {
padding: 12px 16px 16px 16px;
border-top: 1px solid #e1e5e9;
display: flex;
justify-content: space-between;
align-items: center;
background: #f8f9fa;
border-radius: 0 0 12px 12px;
}
.telegram-source {
color: #707579;
font-size: 13px;
text-decoration: none;
}
.telegram-source:hover {
color: #0088cc;
text-decoration: underline;
}
/* ========== СТИЛИ ДЛЯ КНОПКИ ПАРСИНГА ПОСТА ========== */
/* Контейнер для поля ввода и кнопки */
.field-input {
position: relative;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
}
/* Поле ввода ссылки */
.field-input input[name="post_link"] {
flex: 1;
height: 42px;
box-sizing: border-box;
min-width: 0; /* Позволяет input сжиматься */
}
/* Основные стили кнопки парсинга */
.parse-post-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 12px 14px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: opacity 0.3s ease;
opacity: 0;
white-space: nowrap;
min-width: 120px;
text-align: center;
position: relative;
flex-shrink: 0;
height: 42px;
box-sizing: border-box;
}
/* Состояния кнопки */
.parse-post-btn.show {
opacity: 1;
}
.parse-post-btn:hover:not(.completed) {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.parse-post-btn:disabled:not(.completed) {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Состояние парсинга */
.parse-post-btn.parsing {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
animation: pulse 1.5s infinite;
}
/* Состояние завершения (галочка) */
.parse-post-btn.completed {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
min-width: 42px;
width: 42px;
height: 42px;
padding: 0;
pointer-events: none;
font-size: 18px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
flex-grow: 0;
transform: none !important;
animation: shrinkToIcon 0.5s ease-out forwards;
line-height: 1;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes shrinkToIcon {
0% {
min-width: 120px;
width: 120px;
height: 42px;
padding: 12px 14px;
font-size: 14px;
}
30% {
min-width: 100px;
width: 100px;
height: 42px;
padding: 12px 14px;
font-size: 15px;
}
60% {
min-width: 50px;
width: 50px;
height: 42px;
padding: 6px 8px;
font-size: 16px;
}
100% {
min-width: 42px;
width: 42px;
height: 42px;
padding: 0;
font-size: 18px;
}
}
/* Стили для кнопки Сохранить во время парсинга - убираем, это не нужно */
/* Контейнер кнопок формы */
.form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 20px;
padding: 0;
justify-content: flex-end;
}
.form-actions .btn {
flex-shrink: 0;
min-width: 100px;
}
/* Спейсер для симметрии кнопок в модалке */
.form-actions .spacer {
flex: 1;
}
/* Спейсер для модалки на десктопе */
.modal-content .form-actions .spacer {
flex: 1;
min-height: 20px;
}
/* Стили для модалки на десктопе */
@media (min-width: 769px) {
.modal-content .form-actions {
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-top: 20px !important;
padding: 0 !important;
justify-content: flex-end !important;
flex-direction: row !important;
}
.modal-content .form-actions .btn {
flex-shrink: 0 !important;
min-width: 100px !important;
width: auto !important;
}
.modal-content .form-actions .spacer {
display: block !important;
flex: 1 !important;
}
}
/* Кнопка удаления в стиле Telegram */
.telegram-delete-btn {
background: #ff4757;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.telegram-delete-btn:hover {
background: #ff3742;
}
.telegram-delete-btn:active {
background: #ff2f3a;
}
/* Адаптивность для карточек */
@media (max-width: 768px) {
.contractor-card-compact{
flex:0 0 100%;
max-width:100%;
}
}
/* Исправление переноса бейджа "Посты" на экранах до 375px */
@media (max-width: 375px) {
.contractor-card-compact {
min-width: 320px; /* Минимальная ширина для предотвращения переноса */
}
.link-badges {
flex-wrap: nowrap !important; /* Запрещаем перенос бейджей */
overflow-x: auto; /* Добавляем горизонтальный скролл если нужно */
-webkit-overflow-scrolling: touch;
}
.link-badge {
white-space: nowrap !important; /* Запрещаем перенос текста внутри бейджа */
flex-shrink: 0 !important; /* Запрещаем сжатие бейджей */
}
}
/* Дополнительные стили для предотвращения переноса бейджей */
@media (max-width: 480px) {
.link-badges {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.link-badge {
white-space: nowrap;
flex-shrink: 0;
}
/* Адаптивность для Telegram модального окна - удалены, используются динамические стили */
.telegram-header {
padding: 12px;
}
.telegram-content {
padding: 0 12px 12px 12px;
}
.telegram-footer {
padding: 8px 12px 12px 12px;
}
}
@media (min-width: 1200px) {
.contractor-card-compact{
flex:0 0 calc(33.333% - 12px);
max-width:calc(33.333% - 12px);
}
}
/* ===== UTILITY CLASSES ===== */
.transition-smooth{
transition:transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease), filter var(--t-base) var(--ease);
}
.transition-fast{
transition:transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.hover-lift:hover{
transform:translateY(-1px);
filter:brightness(1.05);
box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.hidden{display:none !important}
/* ===== CARDS ===== */
.contractor-card-compact{
position:relative;
padding:16px;
border:1px solid rgba(88,166,255,.12);
background:linear-gradient(145deg,var(--bg-secondary),rgba(33,38,45,.96));
border-radius:16px;
cursor:pointer;
box-shadow:0 4px 10px rgba(0,0,0,.2);
transition:transform .3s cubic-bezier(.25,.46,.45,.94), box-shadow .3s cubic-bezier(.25,.46,.45,.94), border-color .3s cubic-bezier(.25,.46,.45,.94) !important;
}
.contractor-card-compact:hover{
transform:translateY(-3px);
box-shadow:0 8px 22px rgba(1,4,9,.28),0 4px 10px rgba(88,166,255,.12);
border-color:rgba(88,166,255,.28);
}
.contractor-card-compact::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:6px;
border-top-left-radius:16px;
border-top-right-radius:16px;
background:linear-gradient(90deg,var(--ribbon,#58a6ff),transparent 70%);
}
/* Цветовое кодирование карточек по статусам */
.card--ok{--ribbon:var(--c-ok)}
.card--warn{--ribbon:var(--c-warn)}
.card--info{--ribbon:var(--c-info)}
.card--jobs{--ribbon:var(--c-jobs)}
.card--arch{--ribbon:var(--c-arch)}
.card--err{--ribbon:var(--c-err)}
/* Дополнительные классы для цветового кодирования фона карточек */
.contractor-card-compact.card-active-paid{
background: linear-gradient(145deg, rgba(52, 211, 153, .08) 0%, rgba(34, 197, 94, .05) 100%);
border-color: rgba(52, 211, 153, .2);
}
.contractor-card-compact.card-active-unpaid{
background: linear-gradient(145deg, rgba(11, 198, 245, 0.08) 0%, rgba(36, 154, 251, 0.13) 100%);
border-color: rgba(11, 105, 245, 0.2);
}
.contractor-card-compact.card-to-delete{
background: linear-gradient(145deg, rgba(239, 68, 68, .08) 0%, rgba(220, 38, 38, .05) 100%);
border-color: rgba(239, 68, 68, .2);
}
.contractor-card-compact.card-completed{
background: linear-gradient(145deg, rgba(156, 163, 175, .08) 0%, rgba(107, 114, 128, .05) 100%);
border-color: rgba(156, 163, 175, .2);
}
.contractor-card-compact.card-jobs-paid{
background: linear-gradient(145deg, rgba(139, 92, 246, .08) 0%, rgba(124, 58, 237, .05) 100%);
border-color: rgba(139, 92, 246, .2);
}
.contractor-card-compact.card-jobs-unpaid{
background: linear-gradient(145deg, rgba(168, 85, 247, .08) 0%, rgba(147, 51, 234, .05) 100%);
border-color: rgba(168, 85, 247, .2);
}
.card-header{display:flex;justify-content:space-between;gap:8px;margin:8px 0 14px 0}
.card-title{font-size:18px;font-weight:800;letter-spacing:.1px}
.card-type-wrapper{display:flex;align-items:center;gap:8px}
.card-type{padding:4px 8px;border-radius:999px;font-size:11px;color:#fff;background:#4493f8}
.card-type.human{background:#3b82f6} .card-type.ip{background:#22c55e} .card-type.ooo{background:#d97706}
/* Кнопка комментария */
.comment-toggle{
display:flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border:none;
background:rgba(88,166,255,.1);
border-radius:50%;
cursor:pointer;
transition:all 0.2s ease;
color:rgba(88,166,255,.7);
}
.comment-toggle:hover{
background:rgba(88,166,255,.2);
color:rgba(88,166,255,1);
transform:scale(1.1);
}
.comment-toggle:active{
transform:scale(0.95);
}
.card-block{margin-top:12px;padding-top:10px;border-top:1px solid rgba(48,54,61,.5)}
.card-block-title{color:var(--text-secondary);font-weight:700;font-size:12px;margin:0 0 10px 0;text-transform:uppercase}
.field{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.field:has(.field-input) {
align-items: center;
justify-content: flex-start;
}
.field:has(.field-input) .field-input {
flex: 1;
max-width: calc(100% - 120px); /* Оставляем место для лейбла */
}
.field-label{color:var(--text-secondary);font-size:12px;min-width:100px}
.field-value{font-size:14px;color:var(--text-primary)}
.field-value.empty{color:var(--text-muted);font-style:italic}
/* Стили для выпадающего блока комментария */
.comment-block{
margin-top:8px;
padding:12px;
background:rgba(88,166,255,.08);
border-radius:8px;
border-left:3px solid rgba(88,166,255,.3);
animation:slideDown 0.3s ease-out;
}
.comment-block .field-value{
padding:0;
background:none;
border:none;
font-style:italic;
line-height:1.5;
color:var(--text-primary);
}
@keyframes slideDown {
from {
opacity:0;
transform:translateY(-10px);
}
to {
opacity:1;
transform:translateY(0);
}
}
/* Ссылки */
.link-badges{display:flex;gap:8px;flex-wrap:wrap}
.link-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px;color:#fff;text-decoration:none;transition:transform .2s cubic-bezier(.25,.46,.45,.94), filter .2s cubic-bezier(.25,.46,.45,.94), box-shadow .2s cubic-bezier(.25,.46,.45,.94) !important;white-space:nowrap;flex-shrink:0}
.link-badge:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 6px 14px rgba(0,0,0,.18)}
.link-badge svg{width:16px;height:16px}
.link-badge.tg{background:linear-gradient(135deg,#2ca5e0,#1e88e5)}
.link-badge.post{background:linear-gradient(135deg,#2ea043,#22863a)}
/* ===== STATUS PILLS ===== */
.card-statuses{
display:flex;
flex-wrap:nowrap;
gap:6px;
margin-top:8px;
overflow-x:auto;
-webkit-overflow-scrolling:touch;
position:relative;
padding:2px 0;
margin:8px -2px 0 -2px;
padding-left:2px;
padding-right:2px;
}
.status-pill{
display:inline-flex;
align-items:center;
gap:4px;
padding:4px 8px;
border-radius:999px;
font-size:10px;
font-weight:600;
border:none;
color:#fff;
cursor:pointer;
white-space:nowrap;
min-height:24px;
transition:transform .2s cubic-bezier(.25,.46,.45,.94), filter .2s cubic-bezier(.25,.46,.45,.94), box-shadow .2s cubic-bezier(.25,.46,.45,.94) !important;
position:relative;
z-index:1;
}
.status-pill:hover{
transform:translateY(-1px);
filter:brightness(1.1);
box-shadow:0 4px 12px rgba(0,0,0,.2);
}
/* Цвета статусов */
.status--ok{background:var(--c-ok);color:#052b1b}
.status--warn{background:var(--c-warn);color:#2b1f05}
.status--info{background:var(--c-info);color:#041225}
.status--jobs{background:var(--c-jobs);color:#150532}
.status--err{background:var(--c-err);color:#2b0606}
/* Dropdown (listbox) */
.dropdown{position:absolute;z-index:5000;min-width:220px;max-width:280px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:14px;box-shadow:var(--shadow);padding:6px;animation:fadeIn var(--t-base) var(--ease)}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalSlideIn{
0%{opacity:0;transform:scale(0.8) translateY(30px);backdrop-filter:blur(0px)}
50%{opacity:0.8;transform:scale(0.95) translateY(10px);backdrop-filter:blur(3px)}
100%{opacity:1;transform:scale(1) translateY(0);backdrop-filter:blur(6px)}
}
@keyframes modalSlideInMobile{
0%{opacity:0;transform:scale(0.9) translateY(20px);backdrop-filter:blur(0px)}
100%{opacity:1;transform:scale(1) translateY(0);backdrop-filter:blur(6px)}
}
@keyframes modalFadeIn{
0%{opacity:0;transform:scale(0.9) translateY(20px)}
100%{opacity:1;transform:scale(1) translateY(0)}
}
.dropdown[hidden]{display:none}
.dropdown [role="option"]{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;color:var(--text-primary);cursor:pointer}
.dropdown [role="option"][aria-selected="true"]{background:rgba(88,166,255,.15);border:1px solid rgba(88,166,255,.35)}
.dropdown [role="option"]:hover{background:rgba(255,255,255,.06)}
/* ===== FORMS ===== */
.form-section{
margin-bottom:18px;
padding-bottom:12px;
border-bottom:1px solid var(--border-color);
}
.form-section:last-child{
border-bottom:none;
}
.form label{
display:block;
color:var(--text-secondary);
font-size:13px;
margin:10px 0 6px;
}
.form input,
.form select,
.form textarea{
width:100%;
background:var(--bg-tertiary);
border:1px solid var(--border-color);
border-radius:12px;
padding:12px 14px;
color:var(--text-primary);
font-size:14px;
transition:border-color .2s cubic-bezier(.25,.46,.45,.94), box-shadow .2s cubic-bezier(.25,.46,.45,.94) !important;
}
.form select,
.form input[type="date"]{
height:42px;
line-height:42px;
padding:0 40px 0 14px;
appearance:none;
}
.form select{
background-image:url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23b3c0d1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:18px 18px;
}
.form input:focus,
.form select:focus,
.form textarea:focus{
outline:none;
box-shadow:var(--ring);
border-color:var(--accent-blue);
}
/* Специальные стили для поля креатива */
#creative-texts {
min-height: 120px;
resize: vertical;
font-family: inherit;
line-height: 1.5;
}
/* Радио‑карточки типа */
.type-selector-inline{display:flex;gap:12px;flex-wrap:wrap}
.type-card-compact{flex:1;min-width:200px;display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(145deg,var(--bg-tertiary),rgba(33,38,45,.92));border:2px solid var(--border-color);border-radius:14px;cursor:pointer;transition:border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);color:var(--text-primary)}
.type-card-compact:hover{border-color:var(--accent-blue);transform:translateY(-2px)}
.type-card-compact.selected{border-color:var(--accent-blue);background:linear-gradient(145deg,rgba(88,166,255,.08),var(--bg-tertiary))}
.type-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--text-secondary);box-shadow:inset 0 0 0 4px transparent;transition:box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease)}
.type-card-compact[aria-checked="true"] .type-radio{border-color:var(--accent-blue);box-shadow:inset 0 0 0 4px var(--accent-blue)}
.type-info h4{margin:0 0 4px 0;color:var(--text-primary)}
.type-info p{margin:0;color:var(--text-secondary);font-size:12px}
@media(max-width:768px){.type-card-compact{align-items:flex-start}.type-info h4,.type-info p{line-height:1.25}}
/* Стили для модального окна добавления контрагента */
.modal .type-selector-inline{
display:grid !important;
grid-template-columns:repeat(3, minmax(0,1fr)) !important;
gap:8px !important;
align-items:stretch
}
.modal .type-card-compact{
position:relative;
isolation:isolate;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:6px;
padding:12px !important;
text-align:center;
aspect-ratio:1/1;
min-height:clamp(80px, 24vw, 132px);
border-radius:16px !important;
border:1px solid rgba(255,255,255,.10) !important;
background:linear-gradient(145deg, rgba(33,38,45,.74), rgba(33,38,45,.56)) !important;
backdrop-filter:blur(12px) saturate(150%) !important;
-webkit-backdrop-filter:blur(12px) saturate(150%) !important;
box-shadow:0 10px 24px rgba(0,0,0,.22);
min-width:0 !important;
width:100% !important;
transition: all .3s cubic-bezier(.25,.46,.45,.94);
cursor:pointer;
}
@media (min-width:769px){
.modal .type-card-compact{
min-height:176px;
gap:8px
}
}
/* Скрыть радиодырки только в модалке, оставить доступность */
.modal .type-radio{
display:none !important
}
/* Иконки для карточек типа */
.modal .type-card-compact::before{
content:"";
display:block;
flex:0 0 auto;
align-self:center;
width:clamp(30px, 9vw, 50px);
height:clamp(30px, 9vw, 50px);
border-radius:12px;
background:transparent;
border:none;
transition: transform .3s cubic-bezier(.25,.46,.45,.94);
position:relative;
background-size: 60%;
background-repeat: no-repeat;
background-position: center;
}
/* Тексты под иконками */
.modal .type-info{
display:flex;
flex-direction:column;
align-items:center;
gap:2px
}
.modal .type-info h4{
margin:0;
font-weight:800;
font-size:15px;
line-height:1.25;
color:var(--text-primary)
}
.modal .type-info p{
margin:0;
font-size:12px;
color:var(--text-secondary)
}
@media (max-width:600px){
.modal .type-info h4{
font-size:14px
}
.modal .type-info p{
font-size:12px
}
}
/* Hover эффекты для карточек */
.modal .type-card-compact:hover{
transform:translateY(-4px) scale(1.02);
filter:brightness(1.05);
border-color:rgba(88,166,255,.3);
box-shadow:0 15px 35px rgba(0,0,0,.3), 0 0 0 1px rgba(88,166,255,.2);
}
/* Selected состояния для карточек */
.modal .type-card-compact.selected,
.modal .type-card-compact[aria-checked="true"]{
transform:translateY(-2px) scale(1.01);
border-color:var(--accent-blue) !important;
box-shadow:0 0 0 2px rgba(88,166,255,.4), 0 20px 40px rgba(88,166,255,.2) !important;
background:linear-gradient(145deg, rgba(88,166,255,.15), rgba(33,38,45,.7)) !important;
}
/* SVG иконки для каждой карточки */
.modal .type-selector-inline .type-card-compact:nth-child(1)::before{
background-image: url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(2)::before{
background-image: url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(3)::before{
background-image: url("data:image/svg+xml;utf8,");
}
/* Hover эффекты для иконок */
.modal .type-card-compact:hover::before{
transform:scale(1.1);
}
.modal .type-selector-inline .type-card-compact:nth-child(1):hover::before{
background-image: url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(2):hover::before{
background-image: url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(3):hover::before{
background-image: url("data:image/svg+xml;utf8,");
}
/* Selected состояния для иконок */
.modal .type-card-compact.selected::before,
.modal .type-card-compact[aria-checked="true"]::before{
transform:scale(1.05);
}
.modal .type-selector-inline .type-card-compact:nth-child(1).selected::before,
.modal .type-selector-inline .type-card-compact:nth-child(1)[aria-checked="true"]::before{
background-image: url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(2).selected::before,
.modal .type-selector-inline .type-card-compact:nth-child(2)[aria-checked="true"]::before{
background-image: url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(3).selected::before,
.modal .type-selector-inline .type-card-compact:nth-child(3)[aria-checked="true"]::before{
background-image: url("data:image/svg+xml;utf8,");
}
/* Disclosure «Реквизиты» (SVG chevron + aria-expanded) */
.organization-details .org-toggle-header{display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:12px 14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;margin-bottom:10px;color:var(--text-primary)}
.organization-details .toggle-icon{width:18px;height:18px;transition:transform var(--t-fast) var(--ease);color:var(--text-primary)}
.organization-details .org-toggle-header[aria-expanded="true"] .toggle-icon{transform:rotate(180deg)}
.org-data-content{padding:12px;background:rgba(33,38,45,.35);border-radius:12px;border:1px solid rgba(88,166,255,.12)}
/* Модалки и темная нативная тема виджетов */
.modal{
position:fixed;
z-index:3000;
inset:0;
background:rgba(0,0,0,.65);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
display:none;
align-items:center;
justify-content:center;
}
.modal.show{
display:flex !important;
}
.modal-content{
width:min(1000px,96vw);
max-height:90vh;
overflow:auto;
background:linear-gradient(145deg,var(--bg-secondary),var(--bg-tertiary));
border:1px solid var(--border-color);
border-radius:16px;
padding:35px;
box-shadow:var(--shadow);
position:relative;
color:var(--text-primary);
/* Убираем скроллбар полностью */
scrollbar-width:none;
-ms-overflow-style:none;
/* Центрирование модального окна */
margin: 0 auto;
animation: modalSlideIn 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modal-content::-webkit-scrollbar{
display:none;
}
.form,.modal-content{color-scheme:dark}
/* Стили для кнопок в модальных окнах */
.modal-content .btn {
padding: 12px 20px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
transition: all 0.2s ease;
}
.modal-content .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Специальный стиль для кнопки "Управление ОРД" */
#manage-ord-btn {
padding: 12px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
white-space: nowrap !important;
min-width: auto !important;
width: auto !important;
}
/* Стили для полей иностранного агента */
.foreign-agent-fields {
margin-top: 16px;
padding: 16px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
transition: all 0.3s ease;
}
.foreign-agent-fields.hidden {
display: none;
}
.foreign-agent-fields:not(.hidden) {
display: block;
animation: slideDown 0.3s ease;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Стили для подсказок в формах */
.form-hint {
font-size: 12px;
color: var(--text-secondary);
margin-top: 8px;
font-style: italic;
}
/* Стили для ERID бейджа */
.erid-badge {
display: inline-block;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 2px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
}
.erid-badge:hover {
background: linear-gradient(135deg, #5a6fd8, #6a4190);
transform: scale(1.05);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.erid-badge:active {
transform: scale(0.95);
}
/* Стили для кнопок акта */
.form-actions .ord-btn {
flex: 1;
min-width: 140px;
}
.close{
position:absolute;
right:14px;
top:10px;
border:none;
background:transparent;
color:var(--text-secondary);
font-size:28px;
cursor:pointer;
transition:color .3s cubic-bezier(.25,.46,.45,.94), transform .3s cubic-bezier(.25,.46,.45,.94), filter .3s cubic-bezier(.25,.46,.45,.94);
border-radius:50%;
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
}
.close:hover{
color:#ef4444;
transform:scale(1.1) rotate(90deg);
filter:drop-shadow(0 2px 8px rgba(239,68,68,.3));
}
.close:active{
transform:scale(0.95) rotate(90deg);
}
/* Date адаптация */
input[type="date"]{background:linear-gradient(135deg,var(--bg-tertiary),rgba(33,38,45,.9));border-radius:12px}
input[type="date"]::-webkit-calendar-picker-indicator{width:18px;height:18px;margin-right:2px;border-radius:6px;filter: invert(70%) sepia(20%) saturate(400%) hue-rotate(180deg) brightness(110%) contrast(95%);cursor:pointer;transition:background var(--t-fast) var(--ease)}
input[type="date"]::-webkit-calendar-picker-indicator:hover{background-color:rgba(88,166,255,.12)}
/* Пустые состояния и тосты */
.loading,.empty-state{text-align:center;color:var(--text-secondary)}
.toast{position:fixed;top:20px;right:20px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;padding:12px 14px;color:var(--text-primary);box-shadow:0 8px 32px rgba(0,0,0,.3);backdrop-filter:blur(10px);z-index:4000;opacity:0;transform:translateX(100%);transition:transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease)}
.toast.show{opacity:1;transform:translateX(0)}
/* Гарантированно скрытый «теневой» индекс */
#shadow-all{position:absolute !important;width:1px;height:1px;margin:-1px;border:0;padding:0;white-space:nowrap;clip-path:inset(50%);clip:rect(0 0 0 0);overflow:hidden}
/* ==== Утилиты ==== */
@media (min-width: 769px){
#burger { display:none !important; }
.burger-menu { display:none !important; }
}
.close-btn{position:relative;width:36px;height:36px;border:none;background:transparent;color:#fff;border-radius:8px}
.close-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.close-line{position:absolute;width:18px;height:2px;background:#fff;left:50%;top:50%;transform-origin:center}
.close-btn .close-line:nth-child(1){transform:translate(-50%,-50%) rotate(45deg)}
.close-btn .close-line:nth-child(2){transform:translate(-50%,-50%) rotate(-45deg)}
.form-report-checkbox{margin:8px 0}
.form-report-checkbox .switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.form-report-checkbox input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.form-report-checkbox .switch-ui{
--w:42px; --h:24px; --knob:18px;
position:relative; width:var(--w); height:var(--h); border-radius:999px;
background:#8b949e55; border:1px solid var(--border-color); transition:background .2s var(--ease), border-color .2s var(--ease);
}
.form-report-checkbox .switch-ui::before{
content:""; position:absolute; top:50%; left:3px; width:var(--knob); height:var(--knob);
border-radius:50%; background:#fff; transform:translateY(-50%); box-shadow:0 1px 2px rgba(0,0,0,.3); transition:transform .2s var(--ease);
}
.form-report-checkbox input:focus-visible + .switch-ui{ box-shadow:var(--ring); }
.form-report-checkbox input:checked + .switch-ui{ background:#22c55e66; border-color:#22c55e; }
.form-report-checkbox input:checked + .switch-ui::before{ transform:translate(calc(var(--w) - var(--knob) - 6px), -50%); }
.form-report-checkbox .switch-label{font-weight:600;color:var(--text-primary)}
/* ========== MobileNav v2 (Bottom Sheet) ========== */
.mnav--open .burger-line:nth-child(1){top:17px; transform:rotate(45deg); background:var(--accent-blue)}
.mnav--open .burger-line:nth-child(2){opacity:0; transform:scale(.6)}
.mnav--open .burger-line:nth-child(3){top:17px; transform:rotate(-45deg); background:var(--accent-blue)}
/* Контейнер */
.mnav{position:fixed; inset:0; z-index:2000; pointer-events:none;}
.mnav[aria-hidden="true"]{visibility:hidden;}
.mnav[aria-hidden="false"]{visibility:visible; pointer-events:auto;}
/* Затемнение */
.mnav__overlay{
position:absolute; inset:0; background:rgba(0,0,0,.55);
opacity:0;
transition:opacity .5s cubic-bezier(.25,.46,.45,.94);
}
.mnav[aria-hidden="false"] .mnav__overlay{
opacity:1;
}
/* Панель */
.mnav__panel{
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(145deg,var(--bg-secondary),var(--bg-tertiary));
border-top-left-radius:16px; border-top-right-radius:16px;
border:1px solid var(--border-color); border-bottom:none;
box-shadow:0 16px 32px rgba(1,4,9,.45);
transform:translateY(100%);
transition:transform .5s cubic-bezier(.25,.46,.45,.94), opacity .5s cubic-bezier(.25,.46,.45,.94);
max-height:min(88vh, 720px); display:flex; flex-direction:column;
opacity:0;
}
.mnav[aria-hidden="false"] .mnav__panel{
transform:translateY(0);
opacity:1;
}
/* Шапка и крестик */
.mnav__header{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border-color)}
.mnav__close{position:relative; width:36px; height:36px; border:none; background:transparent; border-radius:8px; cursor:pointer}
.mnav__close:focus-visible{outline:none; box-shadow:var(--ring)}
.mnav__x{position:absolute; left:50%; top:50%; width:18px; height:2px; background:#fff; transform-origin:center}
.mnav__x:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.mnav__x:last-child{transform:translate(-50%,-50%) rotate(-45deg)}
/* Поиск */
.mnav__search{position:relative; padding:12px 14px; border-bottom:1px solid var(--border-color)}
.mnav__search .search-ico{left:22px}
.mnav__search input{
width:100%; padding:10px 12px 10px 42px; border:1px solid var(--border-color);
border-radius:12px; background:var(--bg-tertiary); color:var(--text-primary);
}
.mnav__search input:focus{outline:none; box-shadow:var(--ring); border-color:var(--accent-blue)}
/* Контент */
.mnav__content{display:flex; flex-direction:column; gap:10px; padding:12px 14px; overflow:auto}
.mnav__action{
width:100%;
/* Исправление мобильных глюков */
-webkit-tap-highlight-color: transparent !important;
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
outline: none !important;
-webkit-appearance: none !important;
appearance: none !important;
/* Убираем остаточные следы */
background-clip: padding-box;
-webkit-background-clip: padding-box;
}
/* Подвал и safe-area */
.mnav__footer{padding:8px 14px 12px; border-top:1px solid var(--border-color); color:var(--text-secondary); font-size:12px}
.mnav__safe{height:calc(env(safe-area-inset-bottom, 0px));}
/* Десктоп: скрыть весь компонент */
@media (min-width: 1025px){
.mnav{display:none}
}
/* Удалены конфликтующие глобальные стили */
#global-search{
width:100%;
padding:10px 14px 10px 38px;
}
.search-ico{ left:14px; }
/* ==== Лента: поддержка градиента через переменные ==== */
.contractor-card-compact::after{
background: linear-gradient(90deg, var(--r1, var(--ribbon,#58a6ff)), var(--r2, transparent) 70%);
}
/* Активный + не оплачен: зелёный -> жёлтый */
.contractor-card-compact.card-active-unpaid{ --r1: var(--c-ok); --r2: var(--c-info); }
/* Активный + оплачен: зелёный -> синий */
.contractor-card-compact.card-active-paid{ --r1: var(--c-ok); --r2: var(--c-ok); }
/* На удаление: сплошная красная */
.contractor-card-compact.card-to-delete{ --r1: var(--c-err); --r2: var(--c-err); }
/* Вакансии: только во вью jobs — фиолетовые полоски */
body[data-view="jobs"] .contractor-card-compact.card-completed.card--jobs::after{
background: repeating-linear-gradient(45deg, var(--c-jobs) 0 10px, rgba(139,92,246,.4) 10px 20px);
}
/* Подсветка «возвращённой вакансии» под заголовком вне вкладки вакансий */
.card-header{ position:relative; }
body:not([data-view="jobs"]) .contractor-card-compact.card-jobs-paid .card-header::before,
.contractor-card-compact.card-active-wait{
--r1: var(--c-ok);
--r2: var(--c-warn);
}
/* === Edge Ambilight: блики на КРАЯХ карточки, привязаны к положению пиллов === */
.contractor-card-compact{
/* Слоты (до 6 пиллов); по умолчанию — прозрачные */
--amb1-x:0px; --amb1-y:0px; --amb1-left:transparent; --amb1-right:transparent; --amb1-top:transparent; --amb1-bottom:transparent;
--amb2-x:0px; --amb2-y:0px; --amb2-left:transparent; --amb2-right:transparent; --amb2-top:transparent; --amb2-bottom:transparent;
--amb3-x:0px; --amb3-y:0px; --amb3-left:transparent; --amb3-right:transparent; --amb3-top:transparent; --amb3-bottom:transparent;
--amb4-x:0px; --amb4-y:0px; --amb4-left:transparent; --amb4-right:transparent; --amb4-top:transparent; --amb4-bottom:transparent;
--amb5-x:0px; --amb5-y:0px; --amb5-left:transparent; --amb5-right:transparent; --amb5-top:transparent; --amb5-bottom:transparent;
--amb6-x:0px; --amb6-y:0px; --amb6-left:transparent; --amb6-right:transparent; --amb6-top:transparent; --amb6-bottom:transparent;
}
/* Отдельный слой под лентой ::after */
.contractor-card-compact::before{
content:"";
position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
mix-blend-mode:plus-lighter;
opacity:0; /* скрыто по умолчанию */
transition: opacity 2.98s ease-in; /* плавное затухание на выходе (твоя настройка) */
/* твои текущие размеры "толщины" и дефолтной длины вдоль кромки */
--edge-w: 90px; /* дефолт длины (фолбэк, если JS не успел проставить) */
--edge-h: 18px; /* толщина слева/справа — внутрь карточки */
--edge-w-top: 150px; /* дефолт длины по верху/низу */
--edge-h-top: 15px; /* толщина по верху/низу */
/* ВАЖНО: для левой/правой граней "толщина" = --edge-h, "длина" = --ambN-len-side;
для верха/низа "толщина" = --edge-h-top, "длина" = --ambN-len-top */
background:
/* SLOT 1 */
radial-gradient(var(--edge-h) var(--amb1-len-side, var(--edge-w)) at 0 var(--amb1-y), var(--amb1-left) 0%, var(--amb1-left) 16%, transparent 48%),
radial-gradient(var(--edge-h) var(--amb1-len-side, var(--edge-w)) at 100% var(--amb1-y), var(--amb1-right) 0%, var(--amb1-right) 16%, transparent 48%),
radial-gradient(var(--amb1-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb1-x) 0, var(--amb1-top) 0%, var(--amb1-top) 14%, transparent 46%),
radial-gradient(var(--amb1-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb1-x) 100%, var(--amb1-bottom) 0%, var(--amb1-bottom)14%, transparent 46%),
/* SLOT 2 */
radial-gradient(var(--edge-h) var(--amb2-len-side, var(--edge-w)) at 0 var(--amb2-y), var(--amb2-left) 0%, var(--amb2-left) 16%, transparent 48%),
radial-gradient(var(--edge-h) var(--amb2-len-side, var(--edge-w)) at 100% var(--amb2-y), var(--amb2-right) 0%, var(--amb2-right) 16%, transparent 48%),
radial-gradient(var(--amb2-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb2-x) 0, var(--amb2-top) 0%, var(--amb2-top) 14%, transparent 46%),
radial-gradient(var(--amb2-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb2-x) 100%, var(--amb2-bottom) 0%, var(--amb2-bottom)14%, transparent 46%),
/* SLOT 3 */
radial-gradient(var(--edge-h) var(--amb3-len-side, var(--edge-w)) at 0 var(--amb3-y), var(--amb3-left) 0%, var(--amb3-left) 16%, transparent 48%),
radial-gradient(var(--edge-h) var(--amb3-len-side, var(--edge-w)) at 100% var(--amb3-y), var(--amb3-right) 0%, var(--amb3-right) 16%, transparent 48%),
radial-gradient(var(--amb3-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb3-x) 0, var(--amb3-top) 0%, var(--amb3-top) 14%, transparent 46%),
radial-gradient(var(--amb3-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb3-x) 100%, var(--amb3-bottom) 0%, var(--amb3-bottom)14%, transparent 46%),
/* SLOT 4 */
radial-gradient(var(--edge-h) var(--amb4-len-side, var(--edge-w)) at 0 var(--amb4-y), var(--amb4-left) 0%, var(--amb4-left) 16%, transparent 48%),
radial-gradient(var(--edge-h) var(--amb4-len-side, var(--edge-w)) at 100% var(--amb4-y), var(--amb4-right) 0%, var(--amb4-right) 16%, transparent 48%),
radial-gradient(var(--amb4-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb4-x) 0, var(--amb4-top) 0%, var(--amb4-top) 14%, transparent 46%),
radial-gradient(var(--amb4-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb4-x) 100%, var(--amb4-bottom) 0%, var(--amb4-bottom)14%, transparent 46%),
/* SLOT 5 */
radial-gradient(var(--edge-h) var(--amb5-len-side, var(--edge-w)) at 0 var(--amb5-y), var(--amb5-left) 0%, var(--amb5-left) 16%, transparent 48%),
radial-gradient(var(--edge-h) var(--amb5-len-side, var(--edge-w)) at 100% var(--amb5-y), var(--amb5-right) 0%, var(--amb5-right) 16%, transparent 48%),
radial-gradient(var(--amb5-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb5-x) 0, var(--amb5-top) 0%, var(--amb5-top) 14%, transparent 46%),
radial-gradient(var(--amb5-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb5-x) 100%, var(--amb5-bottom) 0%, var(--amb5-bottom)14%, transparent 46%),
/* SLOT 6 */
radial-gradient(var(--edge-h) var(--amb6-len-side, var(--edge-w)) at 0 var(--amb6-y), var(--amb6-left) 0%, var(--amb6-left) 16%, transparent 48%),
radial-gradient(var(--edge-h) var(--amb6-len-side, var(--edge-w)) at 100% var(--amb6-y), var(--amb6-right) 0%, var(--amb6-right) 16%, transparent 48%),
radial-gradient(var(--amb6-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb6-x) 0, var(--amb6-top) 0%, var(--amb6-top) 14%, transparent 46%),
radial-gradient(var(--amb6-len-top, var(--edge-w-top)) var(--edge-h-top) at var(--amb6-x) 100%, var(--amb6-bottom) 0%, var(--amb6-bottom)14%, transparent 46%);
}
/* Вход: короткое «нарастание» света на hover по конкретному пиллу */
@keyframes ambIn { from { opacity:0 } to { opacity:.37 } }
.contractor-card-compact.amb-hover::before{
opacity:.07;
animation: ambIn 1.22s cubic-bezier(.22,.61,.36,1) both;
}
/* 2) Убираем «скачок» ширины при появлении скролла */
@supports (scrollbar-gutter: stable) {
html{ scrollbar-gutter: stable both-edges; } /* резерв под полосу всегда */
}
/* Фолбэк для Safari/старых движков: всегда держим вертикальную полосу */
@supports not (scrollbar-gutter: stable) {
body{ overflow-y: scroll; } /* резервирует место под полосу на всех вкладках */
}
/* 3) Плавное «въезжание» контента вкладки (визуально сглаживает смену) */
.view-enter{
opacity:0; transform:translateY(4px);
transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.view-enter.view-enter--on{
opacity:1; transform:none;
}
/* ===== МОБИЛЬНОЕ МЕНЮ ===== */
/* Блок‑оверрайд: скрыть бургер на телефонах, оставить планшетный триггер */
@media (max-width: 600px){
#burger,
.burger-menu {
display: none !important;
}
}
/* ===== MOBILE BOTTOM NAVIGATION (FAB) ===== */
/* Резерв под мобильную капсулу навигации */
@media (max-width: 600px){
main{ padding-bottom: calc(var(--mbnav-h) + 12px); }
}
/* Центрированная стеклянная капсула навигации (универсальный селектор) */
:is(.mb-nav, .mobile-bottom-nav){
position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:3000;
width:clamp(240px, 72vw, 380px); height:74px; padding:0 10px; gap:6px;
display:flex; align-items:center; justify-content:space-between;
background:linear-gradient(145deg, rgba(13,17,23,.85), rgba(22,27,34,.92));
border:1px solid rgba(255,255,255,.08); border-radius:28px;
backdrop-filter:blur(14px) saturate(160%);
box-shadow:0 10px 28px rgba(1,4,9,.45), 0 1px 0 rgba(255,255,255,.08) inset, 0 -1px 0 rgba(0,0,0,.28) inset;
}
@media (min-width: 601px){ :is(.mb-nav, .mobile-bottom-nav){ display:none; } }
/* ===== КНОПКИ НАВИГАЦИИ ===== */
/* ОРИГИНАЛЬНЫЕ СТИЛИ С ПРАВИЛЬНЫМ СБРОСОМ */
:is(.mb-nav__btn, .mobile-bottom-nav__btn){
position:relative; isolation:isolate; border:none; background:transparent; cursor:pointer;
display:flex; align-items:center; justify-content:center; color:#c9d4e3;
width:62px; height:58px; border-radius:18px;
transition: transform .4s cubic-bezier(.25,.46,.45,.94), filter .4s cubic-bezier(.25,.46,.45,.94), color .4s cubic-bezier(.25,.46,.45,.94);
}
:is(.mb-nav__btn, .mobile-bottom-nav__btn) svg{
width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2.6;
stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
filter: drop-shadow(0 0 6px rgba(255,255,255,.08));
transition: transform .4s cubic-bezier(.25,.46,.45,.94), filter .4s cubic-bezier(.25,.46,.45,.94);
}
/* Псевдоэлемент подсветки */
:is(.mb-nav__btn, .mobile-bottom-nav__btn)::before{
content:""; position:absolute; width:54px; height:54px; border-radius:999px; z-index:0;
background:radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.12), rgba(255,255,255,.06));
box-shadow:0 10px 22px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.06) inset;
opacity:0; transform:scale(.9);
transition: opacity .4s cubic-bezier(.25,.46,.45,.94), transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s cubic-bezier(.25,.46,.45,.94), background .4s cubic-bezier(.25,.46,.45,.94);
}
/* Hover эффекты */
:is(.mb-nav__btn, .mobile-bottom-nav__btn):hover::before{
opacity:0.6; transform:scale(1.02);
background:radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.15), rgba(88,166,255,.08));
box-shadow:0 12px 24px rgba(88,166,255,.15), 0 0 0 2px rgba(88,166,255,.1) inset;
}
:is(.mb-nav__btn, .mobile-bottom-nav__btn):hover{
color:#88c0ff; transform:translateY(-1px);
}
:is(.mb-nav__btn, .mobile-bottom-nav__btn):hover svg{
transform:scale(1.05); filter: drop-shadow(0 2px 8px rgba(88,166,255,.2));
}
/* Активные состояния */
:is(.mb-nav__btn, .mobile-bottom-nav__btn).is-press::before,
:is(.mb-nav__btn, .mobile-bottom-nav__btn):active::before,
:is(.mb-nav__btn, .mobile-bottom-nav__btn)[aria-pressed="true"]::before{
opacity:1; transform:scale(1.04);
background:radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.25), rgba(88,166,255,.15));
box-shadow:0 14px 28px rgba(88,166,255,.2), 0 0 0 2px rgba(88,166,255,.2) inset;
}
:is(.mb-nav__btn, .mobile-bottom-nav__btn).is-press svg,
:is(.mb-nav__btn, .mobile-bottom-nav__btn):active svg{
transform:scale(1.1); filter: drop-shadow(0 2px 10px rgba(88,166,255,.25));
}
:is(.mb-nav__btn, .mobile-bottom-nav__btn)[aria-pressed="true"]{
color:#58a6ff; transform:translateY(-1px);
}
/* ВАЖНО: Принудительный сброс ::before когда НЕ активен */
:is(.mb-nav__btn, .mobile-bottom-nav__btn):not(:hover):not(:active):not(.is-press):not([aria-pressed="true"])::before{
opacity:0 !important;
transform:scale(.9) !important;
background:radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
box-shadow:0 10px 22px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.06) inset !important;
transition: opacity .2s ease, transform .2s ease, background .2s ease, box-shadow .2s ease !important;
}
/* ПРИНУДИТЕЛЬНЫЙ СБРОС через JavaScript переменную */
:is(.mb-nav__btn, .mobile-bottom-nav__btn)[style*="--force-reset"]::before{
opacity:0 !important;
transform:scale(.9) !important;
background:radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
box-shadow:0 10px 22px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.06) inset !important;
transition: none !important;
}
/* Мобильные стили теперь по умолчанию, десктопные - как исключение */
/* FAB (shared) — видимость и плавность иконки плюс */
.mb-nav__fab,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add{
position:relative; isolation:isolate;
width:82px; height:82px; border-radius:999px; margin-top:-20px;
background:linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,.12));
border:1px solid rgba(255,255,255,.22);
backdrop-filter:blur(12px) saturate(160%);
transition: transform .5s cubic-bezier(.25,.46,.45,.94), filter .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s cubic-bezier(.25,.46,.45,.94), background .5s cubic-bezier(.25,.46,.45,.94), border-color .5s cubic-bezier(.25,.46,.45,.94) !important;
box-shadow: 0 12px 28px rgba(0,0,0,.5);
}
.mb-nav__fab .mb-fab-core,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add .mb-fab-core{
position:absolute; inset:0; margin:auto; width:66px; height:66px; border-radius:999px; background:#fff;
box-shadow:0 12px 30px rgba(0,0,0,.20), 0 2px 0 rgba(0,0,0,.18) inset; transform:scale(.96); z-index:1;
transition: transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s cubic-bezier(.25,.46,.45,.94) !important;
}
.mb-nav__fab svg,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add svg{
width:30px; height:30px; color:#f59e0b; z-index:2; position:relative; fill:currentColor !important; stroke:none !important;
transition: transform .5s cubic-bezier(.25,.46,.45,.94), color .5s cubic-bezier(.25,.46,.45,.94) !important;
}
/* FAB псевдоэлемент для подсветки */
.mb-nav__fab::before,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add::before{
content:""; position:absolute; inset:0; border-radius:999px; z-index:0;
background:radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.2), rgba(88,166,255,.1));
box-shadow:0 0 0 2px rgba(88,166,255,.15) inset;
opacity:0; transform:scale(.95);
transition: opacity .5s cubic-bezier(.25,.46,.45,.94), transform .5s cubic-bezier(.25,.46,.45,.94), box-shadow .5s cubic-bezier(.25,.46,.45,.94), background .5s cubic-bezier(.25,.46,.45,.94);
}
/* FAB Hover эффекты */
.mb-nav__fab:hover,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:hover{
transform:translateY(-4px) scale(1.08);
background:linear-gradient(145deg, rgba(88,166,255,.25), rgba(88,166,255,.15));
border-color:rgba(88,166,255,.3);
box-shadow:0 20px 40px rgba(88,166,255,.3), 0 0 0 1px rgba(88,166,255,.2) inset;
}
.mb-nav__fab:hover::before,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:hover::before{
opacity:0.8; transform:scale(1.02);
background:radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.3), rgba(88,166,255,.2));
box-shadow:0 0 0 3px rgba(88,166,255,.25) inset;
}
/* FAB Активные состояния */
.mb-nav__fab.is-press,
.mb-nav__fab:active,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add.is-press,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:active{
transform:translateY(-4px) scale(1.08);
background:linear-gradient(145deg, rgba(88,166,255,.35), rgba(88,166,255,.25));
border-color:rgba(88,166,255,.4);
box-shadow:0 20px 40px rgba(88,166,255,.4), 0 0 0 2px rgba(88,166,255,.3) inset;
}
.mb-nav__fab.is-press::before,
.mb-nav__fab:active::before,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add.is-press::before,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:active::before{
opacity:1; transform:scale(1.05);
background:radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.4), rgba(88,166,255,.3));
box-shadow:0 0 0 4px rgba(88,166,255,.3) inset;
}
.mb-nav__fab:hover .mb-fab-core,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:hover .mb-fab-core{
transform:scale(1.05);
box-shadow:0 20px 40px rgba(88,166,255,.2), 0 2px 0 rgba(88,166,255,.1) inset;
}
.mb-nav__fab.is-press .mb-fab-core,
.mb-nav__fab:active .mb-fab-core,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add.is-press .mb-fab-core,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:active .mb-fab-core{
transform:scale(1.05);
box-shadow:0 20px 40px rgba(88,166,255,.3), 0 2px 0 rgba(88,166,255,.2) inset;
}
.mb-nav__fab:hover svg,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:hover svg{
transform:scale(1.1) rotate(90deg);
color:#58a6ff;
filter: drop-shadow(0 2px 8px rgba(88,166,255,.3));
}
.mb-nav__fab.is-press svg,
.mb-nav__fab:active svg,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add.is-press svg,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:active svg{
transform:scale(1.1) rotate(90deg);
color:#58a6ff;
filter: drop-shadow(0 2px 12px rgba(88,166,255,.4));
}
/* ВАЖНО: Принудительный сброс ::before для FAB когда НЕ активен */
.mb-nav__fab:not(:hover):not(:active):not(.is-press)::before,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add:not(:hover):not(:active):not(.is-press)::before{
opacity:0 !important;
transform:scale(.95) !important;
transition: opacity .2s ease, transform .2s ease !important;
}
/* ПРИНУДИТЕЛЬНЫЙ СБРОС для FAB через JavaScript переменную */
.mb-nav__fab[style*="--force-reset"]::before,
.mobile-bottom-nav__btn.mobile-bottom-nav__btn--add[style*="--force-reset"]::before{
opacity:0 !important;
transform:scale(.95) !important;
background:radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.2), rgba(88,166,255,.1)) !important;
box-shadow:0 0 0 2px rgba(88,166,255,.15) inset !important;
transition: none !important;
}
/* ===== MODAL (GLASS) & TYPE SELECTOR ===== */
/* Стеклянный фон панели модалки */
.modal .modal-content,
.modal-content{
background:linear-gradient(145deg, rgba(22,27,34,.72), rgba(33,38,45,.50)) !important;
border:1px solid rgba(255,255,255,.12) !important;
backdrop-filter:blur(14px) saturate(160%) !important;
-webkit-backdrop-filter:blur(14px) saturate(160%) !important;
box-shadow:0 16px 32px rgba(1,4,9,.45), 0 1px 0 rgba(255,255,255,.06) inset, 0 -1px 0 rgba(0,0,0,.35) inset !important
}
/* 3-up на мобиле без налезания: сбиваем глобальный min-width и растягиваем по сетке */
.modal .type-selector-inline{ display:grid !important; grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:8px !important; align-items:stretch }
.modal .type-card-compact{
position:relative; isolation:isolate;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
padding:12px !important; text-align:center; aspect-ratio:1/1;
min-height:clamp(80px, 24vw, 132px); border-radius:16px !important;
border:1px solid rgba(255,255,255,.10) !important;
background:linear-gradient(145deg, rgba(33,38,45,.74), rgba(33,38,45,.56)) !important;
backdrop-filter:blur(12px) saturate(150%) !important; -webkit-backdrop-filter:blur(12px) saturate(150%) !important;
box-shadow:0 10px 24px rgba(0,0,0,.22);
min-width:0 !important; width:100% !important;
--ico-color:#b3c0d1;
transition: transform .42s cubic-bezier(.22,.61,.36,1), filter .42s cubic-bezier(.22,.61,.36,1), box-shadow .42s cubic-bezier(.22,.61,.36,1), border-color .42s cubic-bezier(.22,.61,.36,1), background .42s cubic-bezier(.22,.61,.36,1) !important;
}
@media (min-width:769px){ .modal .type-card-compact{ min-height:176px; gap:8px } }
/* Скрыть радиодырки только в модалке, оставить доступность */
.modal .type-radio{ display:none !important }
/* Тексты под иконками */
.modal .type-info{ display:flex; flex-direction:column; align-items:center; gap:2px }
.modal .type-info h4{ margin:0; font-weight:800; font-size:15px; line-height:1.25; color:var(--text-primary) }
.modal .type-info p{ margin:0; font-size:12px; color:var(--text-secondary) }
@media (max-width:600px){ .modal .type-info h4{ font-size:14px } .modal .type-info p{ font-size:12px } }
/* Hover/Selected — цвет иконки не меняем, только поверхность */
.modal .type-card-compact:hover{ transform:translateY(-2px) scale(1.02); filter:brightness(1.03) }
.modal .type-card-compact.selected,
.modal .type-card-compact[aria-checked="true"]{
border-color:rgba(88,166,255,.45) !important;
box-shadow:0 0 0 2px rgba(88,166,255,.25), 0 14px 32px rgba(0,0,0,.35) !important;
background:linear-gradient(145deg, rgba(88,166,255,.16), rgba(33,38,45,.56)) !important;
}
/* ===== DESKTOP HEADER TABS ===== */
@media (min-width:769px){
.header-actions-desktop{ display:flex; gap:10px }
.header-actions-desktop .btn:not(.btn-primary):not(.btn--primary):not([data-action="add"]) { background:linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); color:#c9d4e3; border:1px solid rgba(255,255,255,.10); border-radius:12px; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.22); }
.header-actions-desktop .btn:not(.btn-primary):not(.btn--primary):not([data-action="add"]):hover{ transform:translateY(-1px); filter:brightness(1.05) }
.header-actions-desktop .btn:not(.btn-primary):not(.btn--primary):not([data-action="add"]):active{ transform:translateY(0) scale(.98) }
.header-actions-desktop .btn[aria-pressed="true"]:not(.btn-primary):not(.btn--primary):not([data-action="add"]) { color:#fff; border-color:transparent; background:linear-gradient(135deg, var(--accent-blue,#58a6ff), #3b82f6); box-shadow:0 12px 28px rgba(88,166,255,.30) }
.header-actions-desktop .btn.btn-primary,
.header-actions-desktop .btn.btn--primary,
.header-actions-desktop .btn[data-action="add"]{ background:linear-gradient(135deg, var(--accent-blue,#58a6ff), #3b82f6); color:#fff; border:none; border-radius:12px; font-weight:700; box-shadow:0 10px 24px rgba(88,166,255,.25); }
.header-actions-desktop .btn.btn-primary:hover,
.header-actions-desktop .btn.btn--primary:hover,
.header-actions-desktop .btn[data-action="add"]:hover{ transform:translateY(-1px); filter:brightness(1.05) }
.header-actions-desktop .btn.btn-primary:active,
.header-actions-desktop .btn.btn--primary:active,
.header-actions-desktop .btn[data-action="add"]:active{ transform:translateY(0) scale(.98) }
}
/* Персональные маски и цвета по позициям — цвет не меняется на hover/press */
.modal .type-selector-inline .type-card-compact:nth-child(1){
--ico-color:#7dd3fc;
--ico-mask:url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(2){
--ico-color:#34d399;
--ico-mask:url("data:image/svg+xml;utf8,");
}
.modal .type-selector-inline .type-card-compact:nth-child(3){
--ico-color:#f59e0b;
--ico-mask:url("data:image/svg+xml;utf8,");
}
/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce){
/* Отключаем анимации для всех элементов кроме интерактивных */
*:not(.mb-nav__fab):not(.mobile-bottom-nav__btn--add):not(.mb-fab-core):not(.status-pill):not(.contractor-card-compact):not(.btn):not(.link-badge):not(.form input):not(.form select):not(.form textarea):not(#global-search):not(.mb-nav__btn):not(.mobile-bottom-nav__btn):not(.modal .type-card-compact):not(.modal .type-card-compact::before){
transition:none !important;
animation:none !important
}
/* Сокращаем анимации для интерактивных элементов */
.btn,
.status-pill,
.contractor-card-compact,
.link-badge,
#global-search,
.form input,
.form select,
.form textarea,
.mb-nav__btn,
.mobile-bottom-nav__btn,
.modal .type-card-compact,
.modal .type-card-compact::before{
transition-duration:.18s !important;
}
/* FAB кнопка сохраняет свою плавность */
.mb-nav__fab,
.mobile-bottom-nav__btn--add,
.mb-fab-core{
transition-duration:.5s !important;
}
}
/* ==== Z-order fix: modal above mobile bottom nav and any sheets ==== */
.modal{ z-index:5000 !important; }
.modal .modal-content{ z-index:5001 !important; position:relative; }
.modal .dropdown{ z-index:6000 !important; }
/* ===== TABLET STYLES ===== */
@media (min-width:769px) and (max-width:1024px){
.app-header{
position:sticky;
top:0;
z-index:1200;
}
.app-bar{
display:flex !important;
align-items:center;
gap:12px;
}
.app-logo{
display:inline-flex;
align-items:center;
margin-left:12px;
margin-right:auto;
}
.app-logo img{
height:42px;
width:auto;
border-radius:10px;
}
.search-wrap{
flex:1;
max-width:400px;
margin-right:12px;
}
.mnav-trigger{
display:block !important;
margin-right:12px;
}
.header-actions-desktop{
display:none;
}
}
/* ===== DESKTOP STYLES ===== */
@media (min-width:1025px){
.app-header{
position:sticky;
top:0;
z-index:1200;
}
.app-logo{
display:inline-flex;
align-items:center;
margin-left:12px;
margin-right:12px;
}
.app-logo img{
height:42px;
width:auto;
border-radius:10px;
}
.header-actions-desktop{
display:flex;
gap:10px;
}
#burger{
display:none;
}
}
/* ===== ОРД - СОВРЕМЕННЫЙ ВОЗДУШНЫЙ ДИЗАЙН ===== */
/* Стили для секции "Новый договор" */
.ord-new-contract-section {
margin-bottom: 20px;
text-align: center;
padding: 16px;
background: var(--bg-secondary);
border-radius: 8px;
border: 1px solid var(--border-color);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.ord-new-contract-section .ord-btn {
font-size: 14px;
padding: 10px 20px;
font-weight: 500;
background: var(--accent-blue);
color: white;
border: 1px solid var(--accent-blue);
border-radius: 6px;
transition: all 0.2s ease;
}
.ord-new-contract-section .ord-btn:hover {
background: #3b82f6;
border-color: #3b82f6;
}
/* Страница ОРД */
.ord-page {
max-width: 1200px;
margin: 0 auto;
padding: 12px;
}
/* Секции ОРД - увеличенные размеры */
.ord-page .ord-section {
margin-bottom: 20px !important;
padding: 20px !important;
background: var(--bg-secondary) !important;
border-radius: 12px !important;
border: 1px solid var(--border-color) !important;
}
.ord-page .ord-section h3 {
margin: 0 0 16px 0 !important;
color: var(--text-primary) !important;
font-size: 18px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* Шапка ОРД - увеличенные размеры */
.ord-page .ord-header {
margin-bottom: 20px !important;
padding: 20px !important;
background: var(--bg-secondary) !important;
border-radius: 12px !important;
border: 1px solid var(--border-color) !important;
}
.ord-page .ord-header-content {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 20px !important;
}
.ord-page .ord-header-left {
flex: 1 !important;
}
.ord-page .ord-header-right {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
/* Стили для ERID в шапке */
.ord-erid-container {
display: flex;
align-items: center;
gap: 8px;
margin-right: 20px;
}
.ord-erid-label {
font-size: 14px;
color: #666;
font-weight: 500;
}
.auto-save-indicator {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 8px;
background: rgba(88, 166, 255, 0.1);
border: 1px solid rgba(88, 166, 255, 0.3);
border-radius: 6px;
font-size: 12px;
color: var(--accent-blue);
animation: pulse 1.5s ease-in-out infinite;
}
.auto-save-indicator .save-icon {
font-size: 14px;
}
.auto-save-indicator .save-text {
font-weight: 500;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.ord-page .ord-title {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--text-primary) !important;
margin: 0 !important;
line-height: 1.2 !important;
}
.ord-page .ord-status {
padding: 6px 12px !important;
border-radius: 6px !important;
font-weight: 600 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
display: inline-block !important;
}
.ord-status--not-sent { background: var(--c-warn); color: #2b1f05; }
.ord-status--counterparty-created { background: var(--c-info); color: #041225; }
.ord-status--contract-created { background: var(--c-info); color: #041225; }
.ord-status--creative-created { background: var(--c-info); color: #041225; }
.ord-status--act-created { background: var(--c-info); color: #041225; }
.ord-status--act-submitted { background: var(--c-ok); color: #052b1b; }
.ord-status--error { background: var(--c-err); color: #2b0606; }
/* Стили для информации о контрагенте удалены - больше не используются */
.ord-counterparty-field input:focus {
outline: none;
background: var(--bg-secondary);
border: 1px solid var(--accent-blue);
border-radius: 4px;
padding: 4px 6px;
}
/* Вкладки ОРД - минималистичные */
.ord-tabs {
display: flex;
gap: 2px;
margin-bottom: 20px;
padding: 2px;
background: var(--bg-tertiary);
border-radius: 6px;
border: 1px solid var(--border-color);
}
.ord-tab {
flex: 1;
padding: 8px 16px;
background: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
transition: all 0.15s ease;
text-align: center;
}
.ord-tab:hover {
color: var(--text-primary);
background: rgba(88, 166, 255, 0.08);
}
.ord-tab.active {
color: var(--accent-blue);
background: rgba(88, 166, 255, 0.12);
font-weight: 600;
}
.ord-tab-content {
display: none;
}
.ord-tab-content.active {
display: block;
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Формы ОРД - ультра-воздушные */
.ord-form-section {
background: var(--bg-secondary);
border-radius: 8px;
padding: 16px;
border: 1px solid var(--border-color);
margin-bottom: 16px;
}
.ord-form-section h3 {
margin: 0 0 12px 0;
color: var(--text-primary);
font-size: 16px;
font-weight: 600;
text-align: left;
}
.ord-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.ord-form-group,
.form-group {
position: relative;
margin-bottom: 0;
}
.ord-form .ord-form-group label,
.ord-form .form-group label {
display: block;
margin-bottom: 4px;
color: var(--text-secondary);
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ord-form .ord-form-group input,
.ord-form .ord-form-group select,
.ord-form .ord-form-group textarea,
.ord-form .form-group input,
.ord-form .form-group select,
.ord-form .form-group textarea {
width: 100%;
padding: 8px 12px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
color: var(--text-primary);
font-size: 13px;
font-weight: 400;
transition: all 0.15s ease;
position: relative;
}
.ord-form .ord-form-group input:focus,
.ord-form .ord-form-group select:focus,
.ord-form .ord-form-group textarea:focus,
.ord-form .form-group input:focus,
.ord-form .form-group select:focus,
.ord-form .form-group textarea:focus {
outline: none;
border-color: var(--accent-blue);
box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1);
background: var(--bg-secondary);
}
.ord-form .ord-form-group input:hover,
.ord-form .ord-form-group select:hover,
.ord-form .ord-form-group textarea:hover,
.ord-form .form-group input:hover,
.ord-form .form-group select:hover,
.ord-form .form-group textarea:hover {
border-color: rgba(88, 166, 255, 0.4);
}
.ord-form .ord-form-group textarea,
.ord-form .form-group textarea {
min-height: 60px;
resize: vertical;
font-family: inherit;
line-height: 1.4;
}
.ord-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
/* Чекбокс - минималистичный */
.ord-form .form-group:has(input[type="checkbox"]) {
display: flex;
align-items: center;
gap: 6px;
padding: 0;
background: transparent;
border: none;
margin: 0;
}
.ord-form .form-group:has(input[type="checkbox"]) input[type="checkbox"] {
width: 14px;
height: 14px;
margin: 0;
accent-color: var(--accent-blue);
cursor: pointer;
}
.ord-form .form-group:has(input[type="checkbox"]) label {
margin: 0;
font-size: 12px;
font-weight: 400;
color: var(--text-secondary);
cursor: pointer;
line-height: 1.3;
text-transform: none;
letter-spacing: normal;
}
/* Кнопки ОРД - увеличенные размеры */
.ord-btn {
padding: 10px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ord-btn--primary {
background: var(--accent-blue);
color: white;
}
.ord-btn--primary:hover {
background: #3b82f6;
transform: translateY(-1px);
}
.ord-btn--secondary {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-color);
}
.ord-btn--secondary:hover {
background: var(--bg-secondary);
border-color: var(--accent-blue);
}
.ord-btn--danger {
background: var(--c-err);
color: white;
}
.ord-btn--danger:hover {
background: #dc2626;
transform: translateY(-1px);
}
.ord-btn--success {
background: var(--c-ok);
color: white;
}
.ord-btn--success:hover {
background: #059669;
}
.ord-btn--warning {
background: #f59e0b;
color: white;
}
.ord-btn--warning:hover {
background: #d97706;
}
/* Секции ОРД - ультра-воздушные */
.ord-edit-section {
background: var(--bg-secondary);
border-radius: 6px;
padding: 16px;
border: 1px solid var(--border-color);
margin-bottom: 12px;
}
.ord-lists-section {
background: var(--bg-secondary);
border-radius: 6px;
border: 1px solid var(--border-color);
padding: 16px;
margin-bottom: 12px;
}
.ord-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.ord-section-header h3 {
margin: 0;
color: var(--text-primary);
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Стили для списков ОРД */
.ord-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.ord-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 12px;
}
.ord-list-item-info {
flex: 1;
}
.ord-list-item-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
}
.ord-list-item-details {
color: var(--text-secondary);
font-size: 14px;
}
.ord-list-item-actions {
display: flex;
gap: 8px;
}
/* Стили для статусов ОРД */
.ord-status-badge {
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}
.ord-status-badge--ord {
background: #dcfce7;
color: #166534;
}
.ord-status-badge--local {
background: #fef3c7;
color: #92400e;
}
/* Стили для действий ОРД */
.ord-actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--border-color);
}
/* Дублирующиеся стили удалены */
/* Контейнер ОРД - ультра-воздушный */
.ord-content {
background: var(--bg-primary);
min-height: 100vh;
padding: 12px;
position: relative;
}
.ord-content.active {
animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Принудительные стили для полей формы */
.ord-form .form-group {
display: flex !important;
flex-direction: column !important;
position: relative;
margin-bottom: 12px !important;
}
.ord-form .form-group label {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin-bottom: 4px !important;
font-weight: 500 !important;
font-size: 12px !important;
color: var(--text-secondary) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.ord-form .form-group input,
.ord-form .form-group select,
.ord-form .form-group textarea {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
min-height: 32px !important;
padding: 8px 12px !important;
background: var(--bg-tertiary) !important;
border: 1px solid var(--border-color) !important;
border-radius: 6px !important;
color: var(--text-primary) !important;
font-size: 13px !important;
font-weight: 400 !important;
transition: all 0.15s ease !important;
}
.ord-form .form-group input:focus,
.ord-form .form-group select:focus,
.ord-form .form-group textarea:focus {
border-color: var(--accent-blue) !important;
box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.1) !important;
background: var(--bg-secondary) !important;
}
.ord-form .form-group input:hover,
.ord-form .form-group select:hover,
.ord-form .form-group textarea:hover {
border-color: rgba(88, 166, 255, 0.4) !important;
}
/* Блок "Существующие данные" - компактный */
.ord-lists-section {
min-height: 300px;
display: flex;
flex-direction: column;
}
.ord-lists-section .ord-section-header {
margin-bottom: 8px;
padding-bottom: 6px;
}
.ord-lists-section .ord-section-header h3 {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.ord-lists-section .ord-section-header .ord-btn {
padding: 6px 12px;
font-size: 11px;
font-weight: 500;
}
.ord-empty-state {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 24px 16px;
color: var(--text-secondary);
}
.ord-empty-state p {
margin: 0 0 12px 0;
font-size: 13px;
line-height: 1.4;
}
.ord-empty-state .ord-btn {
margin-top: 6px;
}
/* Списки ОРД */
.ord-list {
margin-top: 12px;
}
.ord-list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 12px;
transition: all 0.15s ease;
}
.ord-list-item:hover {
background: var(--bg-secondary);
border-color: rgba(88, 166, 255, 0.3);
}
.ord-list-item-info {
flex: 1;
}
.ord-list-item-title {
font-weight: 600;
color: var(--text-primary);
margin-bottom: 4px;
font-size: 14px;
}
.ord-list-item-details {
font-size: 12px;
color: var(--text-secondary);
}
.ord-list-item-actions {
display: flex;
gap: 8px;
}
/* Модальные окна */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.modal-title {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.modal-close {
background: none;
border: none;
color: var(--text-secondary);
font-size: 18px;
cursor: pointer;
padding: 4px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: all 0.15s ease;
}
.modal-close:hover {
background: var(--bg-tertiary);
color: var(--text-primary);
}
.modal-body {
margin-bottom: 12px;
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 8px;
padding-top: 8px;
border-top: 1px solid var(--border-color);
}
/* Статусные индикаторы */
.status-indicator {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 4px;
}
.status-indicator--not-sent { background: var(--c-warn); }
.status-indicator--counterparty-created { background: var(--c-info); }
.status-indicator--contract-created { background: var(--c-info); }
.status-indicator--creative-created { background: var(--c-info); }
.status-indicator--act-created { background: var(--c-info); }
.status-indicator--act-submitted { background: var(--c-ok); }
.status-indicator--error { background: var(--c-err); }
/* Утилиты */
.loading {
text-align: center;
padding: 20px;
color: var(--text-secondary);
font-size: 13px;
}
.error {
color: var(--c-err);
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: 6px;
padding: 8px 12px;
margin: 12px 0;
font-size: 12px;
}
.success {
color: var(--c-ok);
background: rgba(52, 211, 153, 0.1);
border: 1px solid rgba(52, 211, 153, 0.3);
border-radius: 6px;
padding: 8px 12px;
margin: 12px 0;
font-size: 12px;
}
.hidden {
display: none !important;
}
/* Скрытые элементы */
#edit-section {
display: none;
}
#edit-actions {
display: none;
}
#send-act-btn {
display: none;
}
/* Классы для показа/скрытия */
.show {
display: block !important;
}
.show-flex {
display: flex !important;
}
.show-inline {
display: inline-block !important;
}
.hide {
display: none !important;
}
/* Стили для режима редактирования */
.ord-edit-section {
margin-top: 16px;
}
/* Стили для пустых состояний */
.ord-empty-message {
color: var(--text-secondary);
text-align: center;
padding: 20px;
font-size: 13px;
line-height: 1.4;
}
/* Дополнительные стили для форм ОРД */
.ord-form .form-group input[type="checkbox"] {
width: auto;
margin-right: 8px;
accent-color: var(--accent-blue);
}
.ord-form .form-group label:has(input[type="checkbox"]) {
display: flex;
flex-direction: row;
align-items: center;
cursor: pointer;
font-size: 12px;
font-weight: 400;
color: var(--text-secondary);
text-transform: none;
letter-spacing: normal;
}
/* Стили для действий */
.ord-actions {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 12px;
border-top: 1px solid var(--border-color);
}
/* Стили для кнопки отправки акта */
#send-act-btn {
background: var(--c-warn);
color: #2b1f05;
padding: 6px 12px;
border: none;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
text-transform: uppercase;
letter-spacing: 0.3px;
}
#send-act-btn:hover {
background: #f6ad55;
transform: translateY(-1px);
}
/* Стили для кнопок модального окна */
.btn-cancel {
background: var(--bg-tertiary);
color: var(--text-primary);
border: 1px solid var(--border-color);
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.15s ease;
}
.btn-cancel:hover {
background: var(--bg-secondary);
border-color: var(--accent-blue);
}
.btn-save {
background: var(--accent-blue);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.15s ease;
}
.btn-save:hover {
background: #4a9eff;
transform: translateY(-1px);
}
/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
.ord-page {
padding: 8px;
}
.ord-header {
padding: 12px;
}
.ord-header-content {
flex-direction: column;
gap: 12px;
}
.ord-header-right {
align-items: flex-start;
}
.ord-title {
font-size: 18px;
}
.ord-counterparty-info {
grid-template-columns: 1fr;
}
.ord-tabs {
flex-direction: column;
gap: 4px;
}
.ord-tab {
text-align: center;
}
.ord-form-row {
grid-template-columns: 1fr;
}
.modal-content {
margin: 20px;
padding: 20px;
width: calc(100vw - 40px);
max-width: none;
}
/* Кнопки в модальных окнах на мобильных устройствах */
.modal-content .form-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 20px;
}
.modal-content .form-actions .btn {
width: 100% !important;
padding: 14px 16px !important;
font-size: 14px !important;
justify-content: center;
box-sizing: border-box;
}
/* Специальный стиль для кнопки "Управление ОРД" на мобильных */
.modal-content .form-actions #manage-ord-btn {
width: 100% !important;
padding: 14px 16px !important;
font-size: 14px !important;
white-space: nowrap !important;
min-width: auto !important;
}
/* Порядок кнопок на мобильных устройствах */
.modal-content .form-actions .btn[type="submit"] {
order: 1; /* Сохранить - первая */
}
.modal-content .form-actions #manage-ord-btn {
order: 2; /* Управление ОРД - вторая */
}
.modal-content .form-actions .btn[data-close] {
order: 3; /* Отмена - третья */
}
.modal-content .form-actions #delete-contractor-btn {
order: 4; /* Удалить - четвертая */
}
/* Скрыть спейсер на мобильных */
.modal-content .form-actions .spacer {
display: none;
}
}
/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
.modal-content {
margin: 10px;
padding: 16px;
width: calc(100vw - 20px);
}
.modal-content .form-actions .btn {
padding: 12px 14px;
font-size: 13px;
}
/* Кнопки в две строки для очень маленьких экранов */
.modal-content .form-actions {
flex-direction: column;
gap: 8px;
}
.modal-content .form-actions .btn {
width: 100% !important;
flex: none;
min-width: auto;
}
/* Порядок кнопок на очень маленьких экранах (тот же) */
.modal-content .form-actions .btn[type="submit"] {
order: 1; /* Сохранить - первая */
}
.modal-content .form-actions #manage-ord-btn {
order: 2; /* Управление ОРД - вторая */
}
.modal-content .form-actions .btn[data-close] {
order: 3; /* Отмена - третья */
}
.modal-content .form-actions #delete-contractor-btn {
order: 4; /* Удалить - четвертая */
}
}
/* ===== СТИЛИ ДЛЯ ОТОБРАЖЕНИЯ ЗАГРУЖЕННЫХ ФАЙЛОВ ===== */
.uploaded-files-list {
margin-top: 12px;
padding: 12px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
}
.media-files-group {
/* display управляется JavaScript в зависимости от типа креатива */
margin-top: 12px;
}
/* Специальное правило для скрытия медиа-блока */
.media-files-group[style*="display: none"] {
display: none !important;
}
/* Принудительное скрытие медиа-блока для текстовых блоков */
.ord-form .form-group#media-files-group {
display: none !important;
}
.ord-form .form-group#media-files-group[style*="display: block"] {
display: block !important;
}
/* Убираем конфликтующие правила - JavaScript управляет видимостью */
.ord-form .form-group#media-files-group {
display: none;
}
.uploaded-files-title {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 8px;
}
.uploaded-file-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
margin-bottom: 6px;
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 13px;
}
.uploaded-file-item:last-child {
margin-bottom: 0;
}
.uploaded-file-info {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
.uploaded-file-icon {
width: 16px;
height: 16px;
color: var(--c-info);
}
.uploaded-file-status {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--c-ok);
}
.file-preview {
margin-left: 10px;
}
.file-preview img {
max-width: 80px;
max-height: 60px;
object-fit: cover;
border-radius: 4px;
border: 1px solid var(--border-color);
}
.uploaded-file-name {
color: var(--text-primary);
font-weight: 500;
}
.uploaded-file-size {
color: var(--text-secondary);
font-size: 12px;
}
.uploaded-file-remove {
background: none;
border: none;
color: var(--c-err);
cursor: pointer;
padding: 4px;
border-radius: 4px;
transition: background-color var(--t-fast) var(--ease);
}
.uploaded-file-remove:hover {
background: rgba(239, 68, 68, 0.1);
}
.uploaded-file-remove svg {
width: 14px;
height: 14px;
}
.selected-file-item {
display: flex;
align-items: center;
padding: 8px;
margin: 4px 0;
background: #f0f8ff;
border: 1px solid #b3d9ff;
border-radius: 4px;
}
/* ===== ORD STATUS BADGE IMPROVEMENTS ===== */
.ord-status-badge {
font-size: 12px;
padding: 2px 8px;
border-radius: 12px;
font-weight: 500;
display: inline-block;
}
.ord-status-badge--ord {
background: rgba(52, 211, 153, 0.2);
color: var(--c-ok);
border: 1px solid rgba(52, 211, 153, 0.3);
}
.ord-status-badge--local {
background: rgba(139, 149, 174, 0.2);
color: var(--c-arch);
border: 1px solid rgba(139, 149, 174, 0.3);
}
/* ===== ORD LIST IMPROVEMENTS ===== */
.ord-list-item {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 8px;
margin-bottom: 12px;
transition: all var(--t-fast) var(--ease);
overflow: hidden;
}
.ord-list-item:hover {
border-color: var(--accent-blue);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.ord-list-item-content {
padding: 16px;
}
.ord-data-line {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
padding: 8px 0;
border-bottom: 1px solid rgba(48, 54, 61, 0.2);
min-height: 36px;
align-items: center;
}
.ord-data-item {
font-size: 13px;
color: var(--text-primary);
padding: 6px 10px;
background: linear-gradient(135deg, rgba(88, 166, 255, 0.1), rgba(88, 166, 255, 0.05));
border-radius: 4px;
border: 1px solid rgba(88, 166, 255, 0.2);
font-weight: 500;
flex: 1;
min-width: 150px;
text-align: center;
transition: all var(--t-fast) var(--ease);
}
.ord-data-item:hover {
background: linear-gradient(135deg, rgba(88, 166, 255, 0.15), rgba(88, 166, 255, 0.08));
border-color: rgba(88, 166, 255, 0.3);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(88, 166, 255, 0.1);
}
@media (max-width: 768px) {
.ord-data-item {
min-width: 120px;
font-size: 12px;
padding: 4px 8px;
}
}
.ord-statuses {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
padding: 8px 0;
}
.ord-item-footer {
padding: 12px 0 0 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
border-top: 1px solid rgba(48, 54, 61, 0.2);
padding-top: 12px;
}
.ord-item-info {
flex: 1;
min-width: 200px;
}
.ord-item-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.ord-btn--small {
padding: 6px 12px;
font-size: 12px;
min-width: auto;
}
/* ===== CHECKBOX IMPROVEMENTS ===== */
.checkbox-label {
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
font-size: 14px !important;
line-height: 1.4 !important;
margin: 8px 0 !important;
width: auto !important;
height: auto !important;
justify-content: flex-start !important;
text-align: left !important;
}
.checkbox-label input[type="checkbox"] {
margin: 0 !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
accent-color: var(--accent-blue) !important;
cursor: pointer !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
}
.checkbox-text {
flex: 1 !important;
text-align: left !important;
user-select: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* Исправляем стили для switch чекбоксов */
.switch {
display: flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
margin: 8px 0 !important;
width: auto !important;
height: auto !important;
position: relative !important;
}
.switch input[type="checkbox"] {
margin: 0 !important;
width: 16px !important;
height: 16px !important;
accent-color: var(--accent-blue) !important;
cursor: pointer !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
}
.switch-label {
user-select: none !important;
font-size: 14px !important;
margin: 0 !important;
padding: 0 !important;
}
/* Специальные стили для чекбокса в form-row */
.form-group.form-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 12px !important;
padding: 0 !important;
background: transparent !important;
border: none !important;
}
.form-group.form-row .checkbox-label {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
font-size: 14px !important;
line-height: 1.4 !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
height: auto !important;
text-align: left !important;
position: static !important;
}
.form-group.form-row .checkbox-label input[type="checkbox"] {
margin: 0 !important;
flex-shrink: 0 !important;
width: 16px !important;
height: 16px !important;
accent-color: var(--accent-blue) !important;
cursor: pointer !important;
position: static !important;
opacity: 1 !important;
visibility: visible !important;
}
.form-group.form-row .checkbox-label .checkbox-text {
font-size: 14px !important;
color: var(--text-primary) !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: normal !important;
line-height: 1.4 !important;
}
/* Стили для красивой кнопки загрузки файлов */
.file-upload-wrapper {
position: relative;
display: flex;
justify-content: flex-start;
width: 100%;
}
.file-upload-wrapper input[type="file"] {
position: absolute;
left: -9999px;
opacity: 0;
pointer-events: none;
}
.file-upload-button {
display: flex !important;
align-items: center !important;
gap: 8px !important;
width: auto !important;
min-width: 200px !important;
height: 36px !important;
padding: 8px 16px !important;
background: linear-gradient(135deg, var(--accent-blue, #58a6ff), #3b82f6) !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
font-weight: 600 !important;
font-size: 13px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 4px 12px rgba(88, 166, 255, 0.25) !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.file-upload-button:hover {
transform: translateY(-1px);
filter: brightness(1.05);
box-shadow: 0 8px 20px rgba(88, 166, 255, 0.35);
}
.file-upload-button:active {
transform: translateY(0) scale(0.98);
}
.file-upload-button svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
/* Перекрываем стили label для кнопки загрузки */
.ord-form .form-group .file-upload-button {
color: #ffffff !important;
text-transform: none !important;
letter-spacing: normal !important;
font-size: 13px !important;
font-weight: 600 !important;
margin-bottom: 0 !important;
}
/* Стили для отображения сохраненных данных */
.ord-saved-data-section {
margin-bottom: 24px;
padding: 20px;
background: var(--bg-secondary);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
border: 1px solid var(--border-color);
}
.ord-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.ord-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.ord-btn--small {
padding: 6px 12px;
font-size: 12px;
border-radius: 6px;
font-weight: 500;
}
.ord-section-actions {
margin-top: 12px;
display: flex;
justify-content: flex-end;
}
.ord-section-header h3 {
margin: 0;
color: #ffffff;
font-size: 18px;
font-weight: 600;
}
.ord-data-display {
min-height: 100px;
}
.ord-empty-message {
text-align: center;
color: #999;
font-style: italic;
padding: 40px 20px;
margin: 0;
}
.ord-data-card {
background: var(--bg-primary);
border-radius: 8px;
padding: 16px;
border: 1px solid var(--border-color);
}
.ord-data-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border-color);
}
.ord-data-header h4 {
margin: 0;
color: var(--text-primary);
font-size: 18px;
font-weight: 600;
}
.ord-header-actions {
display: flex;
align-items: center;
gap: 12px;
}
.ord-status-badge {
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.ord-status--sent {
background: #d4edda;
color: #155724;
}
.ord-status--local {
background: #fff3cd;
color: #856404;
}
.ord-data-section {
margin-bottom: 20px;
padding: 16px;
background: var(--bg-secondary);
border-radius: 8px;
border: 1px solid var(--border-color);
}
.ord-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.ord-section-header h5 {
margin: 0;
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
/* Индикаторы статуса документов */
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
transition: all 0.3s ease;
margin: 0;
flex-shrink: 0;
}
.status-indicator--success {
background: linear-gradient(135deg, #34d399, #10b981);
border: 2px solid #34d399;
box-shadow:
0 0 12px rgba(52, 211, 153, 0.6),
0 0 24px rgba(52, 211, 153, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
}
.status-indicator--success::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #34d399, #10b981);
border-radius: 50%;
opacity: 0.3;
filter: blur(4px);
z-index: -1;
}
.status-indicator--warning {
background: linear-gradient(135deg, #f59e0b, #d97706);
border: 2px solid #f59e0b;
box-shadow:
0 0 12px rgba(245, 158, 11, 0.6),
0 0 24px rgba(245, 158, 11, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative;
}
.status-indicator--warning::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, #f59e0b, #d97706);
border-radius: 50%;
opacity: 0.3;
filter: blur(4px);
z-index: -1;
}
.status-indicator--pending {
background: linear-gradient(135deg, #8b949e, #6b7280);
border: 2px solid #8b949e;
box-shadow:
0 0 4px rgba(139, 149, 174, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ord-data-section:last-child {
margin-bottom: 0;
}
.ord-data-section h5 {
margin: 0 0 16px 0;
color: var(--text-primary);
font-size: 16px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid var(--border-color);
}
.ord-data-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
.ord-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.ord-field label {
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.ord-field span {
font-size: 14px;
color: var(--text-primary);
font-weight: 500;
padding: 8px 12px;
background: var(--bg-primary);
border-radius: 6px;
border: 1px solid var(--border-color);
}
.ord-erid {
color: #007bff !important;
cursor: pointer;
text-decoration: underline;
font-family: 'Courier New', monospace;
font-size: 13px !important;
background: rgba(0, 123, 255, 0.1) !important;
padding: 4px 8px !important;
border-radius: 4px !important;
border: 1px solid rgba(0, 123, 255, 0.3) !important;
transition: all 0.2s ease !important;
display: inline-block !important;
user-select: all !important;
}
.ord-erid:hover {
color: #0056b3 !important;
background: rgba(0, 123, 255, 0.2) !important;
border-color: #007bff !important;
transform: scale(1.02) !important;
}
.ord-erid:active {
transform: scale(0.98) !important;
background: rgba(0, 123, 255, 0.3) !important;
}
/* ERID в статусе */
.ord-status .ord-erid {
margin-left: 8px !important;
font-size: 11px !important;
padding: 2px 6px !important;
border-radius: 3px !important;
}
.ord-btn--small {
padding: 6px 12px;
font-size: 12px;
height: auto;
min-height: 28px;
}
/* Мобильные стили для бейджа и кнопки редактировать */
@media (max-width: 768px) {
.ord-status-badge {
padding: 2px 6px;
font-size: 9px;
border-radius: 10px;
}
.ord-btn--small {
padding: 4px 8px;
font-size: 10px;
min-height: 24px;
border-radius: 4px;
}
.ord-header-actions {
gap: 6px;
}
/* Адаптивность для статусов на мобильных */
.ord-status {
flex-direction: row !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
width: auto !important;
}
.status-indicator {
font-size: 9px;
padding: 4px 8px;
border-radius: 12px;
flex-shrink: 0 !important;
}
.status-separator {
font-size: 12px;
margin: 0 2px;
}
}
/* Планшеты */
@media (min-width: 769px) and (max-width: 1024px) {
.ord-status {
flex-wrap: wrap;
gap: 6px;
}
.status-indicator {
font-size: 10px;
padding: 3px 6px;
}
}
/* Стили для подсказки тоггла отчета */
.report-toggle-hint {
margin-top: 8px;
padding: 6px 12px;
background: rgba(88, 166, 255, 0.1);
border-radius: 6px;
border-left: 3px solid var(--accent-blue);
}
.report-toggle-hint small {
color: var(--text-secondary);
font-size: 11px;
line-height: 1.4;
font-style: italic;
}
/* ===== МОБИЛЬНАЯ КНОПКА "ВСЕ КРЕАТИВЫ" В ШАПКЕ ===== */
.mobile-header-btn {
display: none;
position: relative;
isolation: isolate;
border: none;
background: transparent;
cursor: pointer;
align-items: center;
justify-content: center;
color: #c9d4e3;
width: 45px;
height: 45px;
border-radius: 12px;
margin-right: 28px;
padding-top: 5px;
transition: transform .4s cubic-bezier(.25,.46,.45,.94), filter .4s cubic-bezier(.25,.46,.45,.94), color .4s cubic-bezier(.25,.46,.45,.94);
}
.mobile-header-btn img {
width: 45px;
height: 45px;
filter: drop-shadow(0 0 6px rgba(255,255,255,.08));
transition: transform .4s cubic-bezier(.25,.46,.45,.94), filter .4s cubic-bezier(.25,.46,.45,.94);
}
/* Псевдоэлемент подсветки */
.mobile-header-btn::before {
content: "";
position: absolute;
width: 41px;
height: 41px;
border-radius: 999px;
z-index: 0;
background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,.12), rgba(255,255,255,.06));
box-shadow: 0 10px 22px rgba(0,0,0,.22), 0 0 0 2px rgba(255,255,255,.06) inset;
opacity: 0;
transform: scale(.9);
transition: opacity .4s cubic-bezier(.25,.46,.45,.94), transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s cubic-bezier(.25,.46,.45,.94), background .4s cubic-bezier(.25,.46,.45,.94);
}
/* Hover эффекты */
.mobile-header-btn:hover::before {
opacity: 0.6;
transform: scale(1.02);
background: radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.15), rgba(88,166,255,.08));
box-shadow: 0 12px 24px rgba(88,166,255,.15), 0 0 0 2px rgba(88,166,255,.1) inset;
}
.mobile-header-btn:hover {
color: #88c0ff;
transform: translateY(-1px);
}
.mobile-header-btn:hover img {
transform: scale(1.05);
filter: drop-shadow(0 2px 8px rgba(88,166,255,.2));
}
/* Активные состояния */
.mobile-header-btn:active::before {
opacity: 1;
transform: scale(1.04);
background: radial-gradient(60% 60% at 50% 40%, rgba(88,166,255,.25), rgba(88,166,255,.15));
box-shadow: 0 14px 28px rgba(88,166,255,.2), 0 0 0 2px rgba(88,166,255,.2) inset;
}
.mobile-header-btn:active img {
transform: scale(1.1);
filter: drop-shadow(0 2px 10px rgba(88,166,255,.25));
}
/* Показываем только на мобильных устройствах */
@media (max-width: 768px) {
.mobile-header-btn {
display: flex;
}
}
/* Скрываем на планшетах и десктопе */
@media (min-width: 769px) {
.mobile-header-btn {
display: none !important;
}
}
/* Специальные стили для кнопки сброса - предотвращаем наследование активных стилей */
.filter-actions .filter-btn#clear-filters {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.filter-actions .filter-btn#clear-filters:hover {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.filter-actions .filter-btn#clear-filters:focus {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
outline: 2px solid var(--accent-blue);
outline-offset: 2px;
}
.filter-actions .filter-btn#clear-filters:active {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
/* Принудительный сброс :active состояния на мобильных устройствах */
@media (max-width: 768px) {
.filter-btn:not(:focus) {
background: var(--bg-primary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
.filter-btn:not(:focus):hover {
background: var(--bg-secondary) !important;
color: var(--text-primary) !important;
border-color: var(--border-color) !important;
}
}