/* ===== СКЛАДСКАЯ СИСТЕМА v2.1 — АДАПТИВНАЯ ТЕМА ===== */ @import url("/assets/umko-tokens.css?v=20260903a"); /* #аудит-UI 29.08.2026: ручной бамп версии — см. тот же комментарий в assets/eco-light.css. */ :root { --sidebar-w: 220px; --topbar-h: 56px; --bg: #f0f2f5; --bg2: #ffffff; --bg3: #f7f8fa; --card: #ffffff; --border: rgba(0,0,0,.10); --border2: rgba(0,0,0,.06); --text: #1a1d2e; --text2: #4b5563; --text3: #9ca3af; --accent: #6500B2; --accent2: #5F7000; --accent-light: rgba(101,0,178,.12); --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; --success-bg: #f0fdf4; --warning-bg: #fffbeb; --danger-bg: #fef2f2; --info-bg: #eff6ff; --radius: var(--umko-radius-2sm, 10px); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); /* 31.08.2026: Inter self-host, единый шрифт экосистемы — грузится через @import в umko-ds.css, который подключается позже в этой страницы. */ font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: var(--umko-text-base, 14px); min-height: 100vh; overflow-x: hidden; overflow-y: visible; /* 08.07: overflow-x без overflow-y неявно даёт overflow-y:auto (спека CSS) -> body становится скролл-контейнером -> position:sticky у эко-шапки перестаёт держаться при прокрутке. Явно возвращаем visible. */ } /* ===== LAYOUT ===== */ .app-layout { display: flex; min-height: 100vh; } /* ===== SIDEBAR ===== */ .sidebar { width: var(--sidebar-w); background: var(--bg2); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; overflow-y: auto; z-index: 100; transition: transform .25s; box-shadow: 2px 0 8px rgba(0,0,0,.04); flex-shrink: 0; } .sidebar-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 10px; } .sidebar-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; color: var(--accent); } .sidebar-logo i { font-size: 20px; } .sidebar-nav { padding: 8px 0 80px; flex: 1; } .nav-section { font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); padding: 14px 16px 5px; } .nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text2); text-decoration: none; border-radius: var(--umko-radius-sm, 8px); margin: 1px 6px; font-size:var(--umko-text-base, 13px); transition: background .12s, color .12s; cursor: pointer; white-space: nowrap; overflow: hidden; } .nav-link i { width: 18px; text-align: center; font-size: var(--umko-text-base, 14px); flex-shrink: 0; } .nav-link span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .nav-link:hover { background: var(--bg3); color: var(--text); } .nav-link.active { background: var(--accent-light); color: var(--accent); font-weight: 500; } .nav-link.active i { color: var(--accent); } .sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: var(--umko-text-sm, 12px); } /* ===== MAIN CONTENT ===== */ .main-content { margin-left: var(--sidebar-w); flex: 1; display: flex; flex-direction: column; min-height: 100vh; min-width: 0; /* важно для flex */ max-width: 100%; } /* ===== TOPBAR ===== */ .topbar { height: var(--topbar-h); background: var(--bg2); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 20px 0 10px; position: sticky; top: 0; z-index: var(--umko-z-sticky, 50); gap: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.05); min-width: 0; } .page-title { font-size: var(--umko-text-md, 16px); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } .topbar-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } /* ===== GLOBAL SEARCH ===== */ .global-search { position: relative; display: flex; align-items: center; } .global-search i { position: absolute; left: 10px; color: var(--text3); font-size:var(--umko-text-base, 13px); pointer-events: none; } .global-search input { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--umko-radius-sm, 8px); color: var(--text); padding: 6px 12px 6px 30px; font-size:var(--umko-text-base, 13px); width: 200px; outline: none; transition: border-color .15s, width .2s, box-shadow .15s; } .global-search input:focus { border-color: var(--accent); width: 260px; box-shadow: 0 0 0 3px rgba(101,0,178,.12); } .global-search input::placeholder { color: var(--text3); } .search-dropdown { position: absolute; top: calc(100% + 4px); left: 0; width: 320px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.10); z-index: 200; overflow: hidden; display: none; } .search-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; cursor: pointer; border-bottom: 1px solid var(--border2); color: var(--text); font-size:var(--umko-text-base, 13px); transition: background .1s; } .search-item:last-child { border: none; } .search-item:hover { background: var(--bg3); } /* ===== CONTENT AREA ===== */ .content-area { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg); margin-left: var(--sidebar-w); } .page-content { padding: 20px; max-width: 100%; min-width: 0; overflow-x: auto; } .page-loader { display: flex; justify-content: center; align-items: center; height: 300px; } /* ===== CARDS ===== */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-weight: 500; font-size:var(--umko-text-base, 13px); color: var(--text); background: var(--bg2); } .card-body { padding: 14px 16px; } /* ===== STAT CARDS ===== */ .stat-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s; height: 100%; } .stat-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); } .stat-card-sm { padding: 10px 12px; } .stat-icon { font-size: 22px; margin-bottom: 4px; } .stat-value { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 2px; word-break: break-word; line-height: 1.2; } .stat-label { font-size: var(--umko-text-xs, 11px); color: var(--text3); } /* ===== TABLES ===== */ .table { color: var(--text); margin: 0; border-color: var(--border); width: 100%; } .table thead th { background: var(--bg3); color: var(--text2); font-weight: 600; font-size: var(--umko-text-sm, 12px); border-color: var(--border); padding: 9px 12px; white-space: nowrap; } .table td { border-color: var(--border2); padding: 9px 12px; vertical-align: middle; } .table-hover tbody tr:hover { background: rgba(101,0,178,.04); } .table-light { background: var(--bg3) !important; } .table-danger { background: var(--danger-bg) !important; } .table-warning { background: var(--warning-bg) !important; } .table-success { background: var(--success-bg) !important; } .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sidebar-toggle { display:none; background:none; border:none; font-size:18px; color:var(--text); cursor:pointer; padding:6px 10px; margin-right:4px; } @media (max-width:768px){ .sidebar-toggle{ display:inline-flex; align-items:center; } } /* ===== FORMS ===== */ .form-control, .form-select { background: var(--bg2); border: 1px solid var(--border); color: var(--text); border-radius: var(--umko-radius-sm, 8px); font-size:var(--umko-text-base, 13px); padding: 7px 10px; transition: border-color .15s, box-shadow .15s; width: 100%; } .form-control:focus, .form-select:focus { background: var(--bg2); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px rgba(101,0,178,.12); outline: none; } .form-control::placeholder { color: var(--text3); } .form-label { color: var(--text2); font-size: var(--umko-text-sm, 12px); font-weight: 500; margin-bottom: 4px; } .form-check-input { background-color: var(--bg2); border-color: var(--border); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } .input-group-text { background: var(--bg3); border-color: var(--border); color: var(--text2); } /* ===== BUTTONS ===== */ .btn { border-radius: var(--umko-radius-sm, 8px); font-size:var(--umko-text-base, 13px); font-weight: 500; padding: 6px 12px; transition: all .15s; border: 1px solid transparent; white-space: nowrap; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: #00777a; color: #fff; } .btn-success { background: var(--success); color: #fff; } .btn-success:hover { background: #15803d; color: #fff; } .btn-warning { background: var(--warning); color: #fff; } .btn-danger { background: var(--danger); color: #fff; } .btn-secondary { background: var(--bg3); color: var(--text2); border-color: var(--border); } .btn-secondary:hover { background: #e5e7eb; } .btn-outline-primary { color: var(--accent); border-color: var(--accent); background: transparent; } .btn-outline-primary.active, .btn-outline-primary:hover { background: var(--accent); color: #fff; } .btn-outline-secondary { color: var(--text2); border-color: var(--border); background: transparent; } .btn-outline-secondary:hover { background: var(--bg3); } .btn-outline-success { color: var(--success); border-color: var(--success); background: transparent; } .btn-outline-success:hover { background: var(--success); color: #fff; } .btn-outline-warning { color: var(--warning); border-color: var(--warning); background: transparent; } .btn-outline-warning:hover { background: var(--warning); color: #fff; } .btn-outline-danger { color: var(--danger); border-color: var(--danger); background: transparent; } .btn-outline-danger:hover { background: var(--danger); color: #fff; } .btn-outline-info { color: var(--info); border-color: var(--info); background: transparent; } .btn-outline-info:hover { background: var(--info); color: #fff; } .btn-sm { padding: 4px 9px; font-size: var(--umko-text-sm, 12px); border-radius: var(--umko-radius-2xs, 6px); } .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-radius: 8px 0 0 8px; } .btn-group .btn:last-child { border-radius: 0 8px 8px 0; } .btn:disabled { opacity: .55; cursor: not-allowed; } /* ===== BADGES ===== */ .badge { font-size: 10px; font-weight: 600; border-radius: var(--umko-radius-2xs, 5px); padding: 2px 6px; } .bg-primary { background: var(--accent) !important; } .bg-success { background: var(--success) !important; } .bg-warning { background: var(--warning) !important; } .bg-danger { background: var(--danger) !important; } .bg-info { background: var(--info) !important; } .bg-secondary { background: #6b7280 !important; } /* ===== MODAL ===== */ .modal-content { background: var(--card); border: 1px solid var(--border); border-radius: var(--umko-radius-lg, 14px); box-shadow: 0 20px 60px rgba(0,0,0,.15); } .modal-header { border-bottom: 1px solid var(--border); padding: 14px 18px; background: var(--bg2); } .modal-title { font-size: 15px; font-weight: 600; color: var(--text); } .modal-body { padding: 18px; } .modal-footer { border-top: 1px solid var(--border); padding: 12px 18px; gap: 8px; background: var(--bg3); } /* ===== DROPDOWN ===== */ /* #аудит 13.08: без max-height/overflow — длинный список (организации/товары/юзеры) вылезал за экран без возможности проскроллить до нижних пунктов. Централизовано для ВСЕХ .dropdown-menu разом (короткие меню это правило не затрагивает — overflow-y:auto молчит, пока контент не переполнил max-height). Кастомные попапы (#org-dd/#notif-dd/#ctx-dd и т.п.) под этот класс не попадают — у них нет общего класса, каждый стилизован по отдельности инлайн. */ .dropdown-menu { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.10); padding: 6px; max-height: 70vh; overflow-y: auto; } .dropdown-item { color: var(--text2); border-radius: var(--umko-radius-2xs, 6px); font-size:var(--umko-text-base, 13px); padding: 7px 12px; } .dropdown-item:hover { background: var(--bg3); color: var(--text); } .dropdown-item.active { background: var(--accent-light); color: var(--accent); } .dropdown-divider { border-color: var(--border); } .dropdown-header { color: var(--text3); font-size: var(--umko-text-xs, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; padding: 5px 12px; } /* ===== ALERTS ===== */ .alert-info { background: var(--info-bg); border-color: #bfdbfe; color: #1e40af; } .alert-warning { background: var(--warning-bg); border-color: #fde68a; color: #92400e; } .alert-danger { background: var(--danger-bg); border-color: #fecaca; color: #991b1b; } .alert-success { background: var(--success-bg); border-color: #bbf7d0; color: #14532d; } /* ===== PROGRESS ===== */ .progress { background: var(--bg3); border-radius: var(--umko-radius-2xs, 4px); } .progress-bar { background: var(--accent); } /* ===== AI ВИДЖЕТ ===== */ .ai-widget { position: fixed; bottom: 24px; right: 24px; width: 360px; height: 480px; background: var(--card); border: 1px solid var(--border); border-radius: var(--umko-radius-2lg, 16px); box-shadow: 0 16px 48px rgba(0,0,0,.12); z-index: 300; display: none; flex-direction: column; overflow: hidden; } /* Поддержка обоих id */ #ai-chat-panel { position: fixed; bottom: 24px; right: 24px; width: 360px; height: 480px; background: var(--card); border: 1px solid var(--border); border-radius: var(--umko-radius-2lg, 16px); box-shadow: 0 16px 48px rgba(0,0,0,.12); z-index: 300; flex-direction: column; overflow: hidden; } .ai-widget-header, .ai-widget > div:first-child { padding: 12px 16px; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: var(--umko-text-base, 14px); color: #fff; } .ai-messages, #ai-chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg3); } .ai-msg { max-width: 85%; padding: 9px 12px; border-radius: var(--radius); font-size:var(--umko-text-base, 13px); line-height: 1.5; } .ai-msg.user { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; align-self: flex-end; } .ai-msg.assistant { background: var(--card); color: var(--text); align-self: flex-start; border: 1px solid var(--border); } .ai-typing { display: flex; gap: 4px; padding: 10px; } .ai-typing span { width: 7px; height: 7px; background: var(--text3); border-radius: 50%; animation: bounce .8s infinite alternate; } .ai-typing span:nth-child(2) { animation-delay: .2s; } .ai-typing span:nth-child(3) { animation-delay: .4s; } @keyframes bounce { to { transform: translateY(-5px); opacity: .5; } } .ai-input-row { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--bg2); } /* ===== SEARCH BOX ===== */ .search-box { position: relative; } .search-box i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text3); font-size: var(--umko-text-sm, 12px); pointer-events: none; } .search-box input { padding-left: 30px; } /* ===== UTILS ===== */ .fw-500 { font-weight: 500; } .font-monospace { font-family: 'Courier New', monospace !important; } .text-primary { color: var(--accent) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-info { color: var(--info) !important; } .text-muted { color: var(--text3) !important; } .border-bottom { border-color: var(--border) !important; } .bg-light { background: var(--bg3) !important; } /* ===== TABS ===== */ .nav-tabs { border-color: var(--border); } .nav-tabs .nav-link { color: var(--text2); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 7px 12px; } .nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border); background: none; } .nav-tabs .nav-link.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; background: none; } /* ===== PRODUCT CARDS ===== */ .product-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s, transform .1s; } .product-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-1px); } .product-card img { width: 100%; height: 140px; object-fit: cover; background: var(--bg3); } .product-card .card-body { padding: 10px; } .product-card .price { font-size: 15px; font-weight: 700; color: var(--accent); } .product-card .cost { font-size: var(--umko-text-xs, 11px); color: var(--text3); } /* ===== MOBILE (< 768px) ===== */ @media (max-width: 768px) { :root { --sidebar-w: 240px; } .sidebar { transform: translateX(-100%); width: var(--sidebar-w); } .sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,.15); } .main-content { margin-left: 0; } .content-area { margin-left: 0; } /* живая обёртка — иначе на мобиле сдвиг 240px */ .topbar { padding: 0 12px; gap: 6px; } .page-title { font-size: var(--umko-text-base, 14px); } .global-search input { width: 130px; } .global-search input:focus { width: 180px; } .page-content { padding: 12px; } .stat-value { font-size: 15px; } #ai-chat-panel, .ai-widget { width: calc(100vw - 24px); right: 12px; bottom: 12px; } .search-dropdown { width: calc(100vw - 40px); } } /* ===== TABLET (768px - 1024px) ===== */ @media (min-width: 769px) and (max-width: 1024px) { :root { --sidebar-w: 200px; } .page-content { padding: 16px; } .stat-value { font-size: var(--umko-text-md, 16px); } } /* ===== OVERLAY для мобильного сайдбара ===== */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99; } .sidebar.open ~ .sidebar-overlay, .sidebar-overlay.active { display: block; } /* ===== TOAST ===== */ .toast-container { position: fixed; top: 70px; right: 16px; z-index: var(--umko-z-toast, 9999); display: flex; flex-direction: column; gap: 8px; max-width: 340px; } .toast-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.12); font-size:var(--umko-text-base, 13px); animation: slideIn .2s ease; } .toast-item.success { border-left: 4px solid var(--success); } .toast-item.error { border-left: 4px solid var(--danger); } .toast-item.info { border-left: 4px solid var(--info); } .toast-item.warning { border-left: 4px solid var(--warning); } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ===== MISC ===== */ .table-danger-light { background: rgba(220,38,38,.04); } .table-success-light { background: rgba(22,163,74,.04); } .px-price-inp { transition: border-color .15s !important; } .px-price-inp:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(101,0,178,.15) !important; } /* ===== АККОРДЕОН МЕНЮ ===== */ .nav-section-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 4px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); cursor: pointer; user-select: none; transition: color .2s; } .nav-section-toggle:hover { color: var(--text); } .nav-section-toggle .toggle-icon { font-size: 10px; transition: transform .2s; } .nav-section-toggle.collapsed .toggle-icon { transform: rotate(-90deg); } .nav-section-body { overflow: hidden; transition: max-height .25s ease; } .nav-section-body.collapsed { max-height: 0 !important; } .nav-section-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; flex-shrink: 0; } /* ===== UMKO: единые подсказки (кружок «?») ===== */ .umko-help{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%; background:#2c3447;color:#9aa3b8;font-size:10px;font-weight:700;cursor:help;margin-left:5px;position:relative; vertical-align:middle;user-select:none;line-height:1} .umko-help:hover{background:#cb11ab;color:#fff} .umko-help::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%); background:#11151f;color:#e6e9f0;border:1px solid #2c3447;border-radius:var(--umko-radius-sm, 8px);padding:9px 12px;font-size:var(--umko-text-sm, 12px);font-weight:400; line-height:1.45;width:max-content;max-width:260px;white-space:normal;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.45); opacity:0;visibility:hidden;transition:.12s;z-index:var(--umko-z-tooltip, 10000);pointer-events:none} .umko-help::before{content:'';position:absolute;bottom:calc(100% + 3px);left:50%;transform:translateX(-50%); border:6px solid transparent;border-top-color:#2c3447;opacity:0;visibility:hidden;transition:.12s;z-index:var(--umko-z-tooltip, 10000)} .umko-help:hover::after,.umko-help:hover::before{opacity:1;visibility:visible} /* возвраты: подсказки «?» поверх и без обрезки в карточках */ .card:has(.umko-help){overflow:visible} .col:has(.umko-help),.col-6:has(.umko-help),[class*='col-']:has(.umko-help){overflow:visible} #ret-kpi .card{overflow:visible} .umko-help:hover{z-index:100001} .umko-help::after{z-index:100002} .umko-help::before{z-index:100002} /* full product names: wrap long tokens (28.06) */ .table td:not(.text-nowrap){ overflow-wrap:anywhere; } /* ===== UMKO global responsive (umko-global-resp) — пропорциональное масштабирование кабинета под устройства ===== */ @media (max-width:768px){ .btn-group{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch} .nav-tabs,.umko-mp-tabs{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch} .nav-tabs .nav-link,.btn-group .btn{white-space:nowrap} .table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch} } @media (max-width:576px){ .btn{font-size:clamp(11px,2.7vw,14px);padding:.32rem .55rem} .btn-sm{font-size:clamp(10px,2.5vw,13px);padding:.26rem .45rem} .btn-xs{font-size:clamp(9px,2.2vw,11px)!important;padding:2px 5px!important} .form-control-sm,.form-select-sm{font-size:clamp(11px,2.6vw,13px)} .form-control,.form-select{font-size:clamp(12px,2.8vw,15px)} table.table,.table-sm{font-size:clamp(10px,2.4vw,12px)} .stat-value{font-size:clamp(14px,4vw,18px)} .modal-dialog{margin:.4rem auto;max-width:98vw} h3{font-size:clamp(16px,4.2vw,22px)}h4{font-size:clamp(15px,4vw,20px)}h5{font-size:clamp(14px,3.6vw,18px)} .alert{font-size:clamp(11px,2.6vw,13px)} } /* === umko-resp-tables (30.06, владелец: таблицы/кнопки/текст масштабировать под все экраны) === Любая таблица в .table-responsive на узком экране: мельче шрифт, перенос текста, гасим фикс-ширины, мельче кнопки. Десктоп не трогаем. */ @media (max-width: 768px){ .table-responsive > table.table, .table-responsive > table { font-size: clamp(10px, 2.5vw, 13px); } .table-responsive > table th, .table-responsive > table td { padding: .35rem .4rem !important; } } @media (max-width: 576px){ .table-responsive > table.table, .table-responsive > table { font-size: clamp(9px, 2.7vw, 12px); } .table-responsive > table th, .table-responsive > table td { padding: .28rem .32rem !important; white-space: normal !important; word-break: break-word; min-width: 0 !important; } .table-responsive > table th[style*="width"], .table-responsive > table td[style*="width"], .table-responsive > table th[style*="min-width"], .table-responsive > table td[style*="min-width"] { width: auto !important; min-width: 0 !important; max-width: none !important; } .table-responsive .btn, .table-responsive .btn-sm { font-size: var(--umko-text-xs, 11px) !important; padding: .2rem .35rem !important; } .table-responsive td .d-flex.gap-1, .table-responsive td .d-flex.gap-2 { gap: 2px !important; } .table-responsive td .d-flex.flex-wrap .btn { margin-bottom: 2px; } } /* === umko-resp-tabs (30.06, владелец: вкладки этапов и бар МП не масштабируются на узком экране) === Перебивает глобальный nowrap-скролл: вкладки переносятся и масштабируются (clamp), а не уезжают в скролл. */ @media (max-width: 768px){ #ret-tabs.btn-group, #ret-tabs{ flex-wrap: wrap !important; overflow: visible !important; gap: 4px !important; } #ret-tabs .btn{ font-size: clamp(10px,2.6vw,13px) !important; padding: .25rem .5rem !important; white-space: normal !important; } #ret-tabs .btn .badge{ font-size: 9px !important; padding: .2em .4em !important; } .umko-mp-tabs{ flex-wrap: wrap !important; overflow: visible !important; } .umko-mp-tab{ font-size: clamp(10px,2.6vw,13px) !important; padding: .25rem .5rem !important; } } @media (max-width: 576px){ #ret-tabs .btn{ font-size: clamp(9px,3vw,12px) !important; flex: 1 1 auto; padding: .2rem .35rem !important; } #ret-tabs .btn .badge{ font-size: 8px !important; } .umko-mp-tab{ font-size: clamp(9px,3vw,12px) !important; padding: .2rem .4rem !important; } .umko-mp-tab .badge, .umko-mp-tab .conn{ font-size: 8px !important; } } /* пилюля «Склад ▾» + хлебные крошки — адаптивны к теме (переменные style.css/sklad-theme) */ .sklad-switch{display:inline-flex;align-items:center;gap:8px;margin-left:-2px;background:var(--card);border:1px solid var(--border);border-radius:var(--umko-radius-md, 12px);padding:7px 15px;font-weight:800;color:var(--text);cursor:pointer;font-size:14.5px;line-height:1;white-space:nowrap;transition:.15s} .sklad-switch .ic{font-size:var(--umko-text-md, 16px)} .sklad-switch .ar{color:var(--text2);font-size:var(--umko-text-sm, 12px)} .sklad-switch:hover{border-color:var(--accent)} .sklad-crumb{color:var(--text2);font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sklad-crumb .sep{opacity:.5;margin:0 2px} .sklad-crumb b{color:var(--text);font-weight:800} /* тонкий аккуратный скроллбар (тема-адаптивный) */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--umko-radius-2xs, 4px)} ::-webkit-scrollbar-thumb:hover{background:var(--accent)} ::-webkit-scrollbar-track{background:transparent} *{scrollbar-width:thin;scrollbar-color:var(--border) transparent}