:root{
    --bg:#f2f4f8;
    --card:#fff;
    --text:#222;
    --muted:#6b7280;
    --border:#ccd2e0;
    --shadow:0 4px 12px rgba(0,0,0,0.08);
    --radius:12px;

    --yellow:#fde68a;
    --gray:#9ca3af;
    --red:#fca5a5;
    --orange:#fdba74;
  }
  body{
    font-family: Arial, sans-serif;
    margin:0; padding:20px;
    background:var(--bg);
    color:var(--text);
  }
  .wrap{ max-width:980px; margin:0 auto; }
  .card{
    background:var(--card);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:18px 20px 20px;
  }
  h1{ margin:0 0 6px 0; font-size:20px; text-align:center; }
  .subtitle{ text-align:center; font-size:13px; color:var(--muted); margin-bottom:14px; }

  .hidden{ display:none !important; }

  .section-title{
    margin-top:18px;
    margin-bottom:8px;
    font-weight:800;
    font-size:14px;
    color:#111827;
  }
  label{
    display:block;
    margin-top:10px;
    margin-bottom:4px;
    font-size:13px;
    font-weight:700;
  }
  input[type="text"], input[type="tel"], textarea, select{
    width:100%;
    box-sizing:border-box;
    padding:8px 10px;
    border-radius:10px;
    border:1px solid var(--border);
    font-size:13px;
    background:#fff;
  }
  textarea{ min-height:90px; resize:vertical; }
  
  /* Стиль для read-only поля */
  textarea[readonly] {
    background-color: #f9fafb;
    border-color: #d1d5db;
    color: #6b7280;
    cursor: not-allowed;
  }

  .row{ display:flex; gap:10px; flex-wrap:wrap; }
  .row > div{ flex:1; min-width:180px; }

  .top-actions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
  }
  .pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#eef2ff;
    border:1px solid #c7d2fe;
    color:#3730a3;
    padding:8px 10px;
    border-radius:999px;
    font-size:12px;
  }
  .btn{
    padding:10px 14px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
    font-size:14px;
    transition:0.15s;
  }
  .btn.secondary{ background:#e5e7eb; color:#111827; }
  .btn.primary{ background:#2f80ed; color:#fff; opacity:0.65; }
  .btn.primary.active{ opacity:1; }
  .btn:disabled{ cursor:not-allowed; opacity:0.6; }

  .error{
    margin-top:10px;
    color:#b30000;
    font-size:12px;
    font-weight:700;
  }
  .error-field{ border-color:#b30000 !important; }
  .warn{ margin-top:6px; color:#b36b00; font-size:12px; font-weight:700; }

  .dir-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:10px;
    margin-top:10px;
  }
  @media (max-width: 900px){ .dir-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  .dir{
    border-radius:14px;
    padding:12px 12px;
    cursor:pointer;
    position:relative;
    border:2px solid transparent;
    min-height:70px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    transition:0.15s;
    user-select:none;
  }
  .dir .title{ font-weight:700; font-size:14px; margin-bottom:6px; }
  .dir .hint{ font-size:12px; color:#1f2937cc; }
  .dir.selected{ border-color:#111827; transform: translateY(-1px); box-shadow:0 0 0 2px rgba(17,24,39,0.10) inset; }

  .dir[data-key="zakupka"]{ background: var(--yellow); }
  .dir[data-key="ochik"]{ background: var(--gray); }
  .dir[data-key="buh"]{ background: var(--orange); }

  .user-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    margin-top:10px;
  }
  @media (max-width: 900px){ .user-grid{ grid-template-columns: 1fr; } }
  .box{
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:10px;
    background:#fafafa;
  }
  .box .head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
    margin-bottom:8px;
  }
  .box .head b{ font-size:13px; }
  .search{ width: 45%; min-width:180px; }

  .list{
    max-height:260px;
    overflow:auto;
    padding-right:6px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:6px;
  }
  @media (max-width: 620px){ .list{ grid-template-columns: 1fr; } }

  .item{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 8px;
    border-radius:10px;
    cursor:pointer;
    user-select:none;
    background:#fff;
    border:1px solid #e5e7eb;
  }
  .item:hover{ background:#f3f4f6; }
  .item input{ transform: translateY(1px); pointer-events:none; }
  .item span{ pointer-events:none; font-size:13px; }

  .exec-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
  @media (max-width: 900px){ .exec-grid{ grid-template-columns: 1fr; } }

  .checklist{
    max-height:240px;
    overflow:auto;
    padding-right:6px;
  }
  .check{
    display:flex;
    align-items:center;
    gap:8px;
    padding:6px 6px;
    border-radius:10px;
    cursor:pointer;
    user-select:none;
  }
  .check:hover{ background:#f3f4f6; }
  .check input{ transform: translateY(1px); pointer-events:none; }
  .check span{ pointer-events:none; font-size:13px; }

  .picked-box{
    border:1px dashed #cbd5e1;
    border-radius:12px;
    padding:10px 12px;
    background:#fff;
    margin-top:10px;
    font-size:12px;
  }
  .picked-box b{ display:block; margin-bottom:6px; }
  .picked-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
  }
  .tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    padding:6px 8px;
    border-radius:999px;
    font-size:12px;
  }

  .toggles{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .toggle{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    cursor:pointer;
    user-select:none;
  }
  .toggle input{ transform: translateY(1px); pointer-events:none; }

  .group-box{
    border-left:4px solid #60a5fa;
    background:#eef6ff;
    padding:10px 12px;
    border-radius:12px;
    margin-top:10px;
    font-size:12px;
    color:#1f2937;
  }

  .address-status{ font-size:11px; margin-top:4px; }
  .status-ok{ color:#0a7a1f; }
  .status-warn{ color:#b36b00; }
  .status-bad{ color:#b30000; }

  .inline-help{
    margin-top:6px;
    font-size:12px;
    color:#6b7280;
  }

  /* ✅ Стиль для індикатора завантаження */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  #formSendingIndicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
  }

  .spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
  }

  /* ✅ Новое: блок названия (скрывается при Логистике/Почте) */
  #titleBlock.hidden{ display:none !important; }

  /* ===========================
     ✅ FIX: кликабельность кнопок + слои
     (это и есть "корректировки")
  =========================== */

  /* 1) Панель с кнопками всегда выше */
  #formActions{
    position: relative;
    z-index: 60;
    pointer-events: auto !important;
  }
  #formActions *{
    pointer-events: auto !important;
  }

  /* 2) Индикатор не перехватывает клики (важно!) */
  #formSendingIndicator{
    position: relative;
    z-index: 40;
    pointer-events: none;
  }
  #formSendingIndicator *{
    pointer-events: none;
  }

  /* 3) Сами кнопки ещё выше на всякий случай */
  #closeBtn, #sendBtn{
    position: relative;
    z-index: 9999;
  }
  /* ===========================
   ✅ Floating close button (always visible)
  =========================== */
	#closeBtn{
	  position: fixed !important;
	  right: 18px;
	  bottom: 18px;
	  z-index: 100000 !important;
	  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
	}

	/* чтобы на мобиле не перекрывалось */
	@media (max-width: 520px){
	  #closeBtn{
		right: 12px;
		bottom: 12px;
	  }
	}

	/* немного “отступа” чтобы нижние поля не прятались под плавающую кнопку */
	#formStep{
	  padding-bottom: 80px;
	}