/* KBH_STAGE_146_UX_FORMS_MESSAGES_TABLES_V1 */

/* ---------- Krok 1: sekcje Klient / Projekt / Kontakt ---------- */
#clientForm > .grid.kbh-s1-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px;
  align-items: start;
  max-width: none !important;
  width: 100% !important;
}
#clientForm > .grid.kbh-s1-grid > .kbh-s1-sec { grid-column: auto !important; width: auto !important; max-width: none !important; }
#clientForm > .grid.kbh-s1-grid > .kbh-s1-sec.kbh-s1-wide { grid-column: 1 / -1 !important; }
#clientForm .kbh-s1-fields > label { width: auto !important; max-width: none !important; }
#clientForm .kbh-s1-wide .kbh-s1-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kbh-s1-sec {
  border: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 14px;
  padding: 14px 16px 6px;
  background: rgba(255,255,255,.55);
}
.kbh-s1-sec.kbh-s1-wide { grid-column: 1 / -1; }
.kbh-s1-sec > h4 {
  margin: 0 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65;
  display: flex; align-items: center; gap: 8px;
}
.kbh-s1-sec > h4 .kbh-s1-num {
  width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(244,196,0,.25); font-size: 11px; opacity: 1;
}
.kbh-s1-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.kbh-s1-fields > label { margin: 0 0 8px; }
.kbh-s1-fields > label input, .kbh-s1-fields > label select, .kbh-s1-fields > label textarea { width: 100%; box-sizing: border-box; }
.kbh-s1-fields > .kbh-s1-full { grid-column: 1 / -1; }
.kbh-field-error input, .kbh-field-error select { border-color: #d32f2f !important; box-shadow: 0 0 0 3px rgba(211,47,47,.12) !important; }
.kbh-field-msg { display: block; color: #c62828; font-size: 12px; margin-top: 3px; font-weight: 600; }
.kbh-field-hint { display: block; color: #8a6d00; font-size: 12px; margin-top: 3px; }

/* ---------- Krok 2 ---------- */
/* wybrany typ zlecenia – wyraźnie */
[data-project-type].is-selected {
  border: 2px solid #f4b400 !important;
  background: linear-gradient(180deg, rgba(244,196,0,.16), rgba(244,196,0,.05)) !important;
  box-shadow: 0 6px 18px rgba(244,180,0,.18) !important;
  position: relative;
}
[data-project-type].is-selected::after {
  content: "✓ wybrane"; position: absolute; top: 10px; right: 12px;
  font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px;
  background: #f4b400; color: #3b2f00;
}
/* ustalenia przeniesione pod parametry */
#baseForm .step2-extra-fields.kbh-moved {
  margin: 14px 0 6px; padding: 14px 16px; border-radius: 14px;
  border: 1px solid var(--border, rgba(0,0,0,.08)); background: rgba(244,196,0,.05);
}
#baseForm .step2-extra-fields.kbh-moved::before {
  content: "Ustalenia i wiadomość do Wykonawcy"; display: block; margin-bottom: 8px;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; font-weight: 700;
}
/* przyciski zapisu zawsze widoczne */
#baseForm > .actions, #clientForm > .actions {
  position: sticky; bottom: 0; z-index: 5;
  background: var(--card, #fff);
  padding: 10px 12px; margin: 12px -12px -12px;
  border-top: 1px solid var(--border, rgba(0,0,0,.08));
  border-radius: 0 0 14px 14px;
  box-shadow: 0 -8px 18px rgba(15,23,42,.06);
}
#skipStep3WithBasePriceBtn { background: transparent !important; border: 1px dashed var(--border, #ccc) !important; color: inherit !important; font-weight: 600 !important; }

/* ---------- Stan zapisu ---------- */
.kbh-save-state {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; vertical-align: middle;
  font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none;
  padding: 3px 10px; border-radius: 999px; background: rgba(100,116,139,.12); color: #475569;
}
.kbh-save-state.dirty { background: rgba(245,158,11,.16); color: #92400e; }
.kbh-save-state.saved { background: rgba(22,163,74,.13); color: #166534; }
.kbh-save-state.saving { background: rgba(59,130,246,.12); color: #1d4ed8; }

/* ---------- Dymki (zamiast okna „Komunikat”) ---------- */
#kbhToasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 100050;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none;
}
.kbh-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  min-width: 260px; max-width: 440px; padding: 12px 14px; border-radius: 14px;
  background: #fff; color: #1f2937; font-size: 14px; line-height: 1.4;
  box-shadow: 0 14px 40px rgba(15,23,42,.18), 0 2px 6px rgba(15,23,42,.08);
  border-left: 4px solid #3b82f6;
  animation: kbhToastIn .18s ease-out;
}
.kbh-toast.success { border-left-color: #16a34a; }
.kbh-toast.warn { border-left-color: #f59e0b; }
.kbh-toast .kbh-toast-ico { font-size: 16px; line-height: 1.3; }
.kbh-toast .kbh-toast-txt { flex: 1; white-space: pre-line; }
.kbh-toast .kbh-toast-act { margin-left: 4px; font-weight: 700; cursor: pointer; background: none; border: 0; color: #1d4ed8; padding: 0; }
.kbh-toast button.kbh-toast-x { all: unset; cursor: pointer; opacity: .5; font-size: 16px; padding: 0 2px; }
.kbh-toast button.kbh-toast-x:hover { opacity: 1; }
@keyframes kbhToastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.theme-dark .kbh-toast { background: #1f2533; color: #e5e7eb; }

/* ---------- Krótkie statusy ---------- */
.kbh-st { display: inline-flex; align-items: center; gap: 6px; }
.kbh-st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex: 0 0 8px; }
.kbh-st.tone-amber::before { background: #f59e0b; }
.kbh-st.tone-blue::before { background: #3b82f6; }
.kbh-st.tone-green::before { background: #16a34a; }
.kbh-st.tone-red::before { background: #dc2626; }

/* ---------- Tabele Zapytań / Zleceń: widok kompaktowy ---------- */
.kbh-view-switch { display: inline-flex; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 999px; overflow: hidden; margin-left: auto; }
#ordersListCard > div:first-child { display: flex; align-items: center; }
#ordersListCard .kbh-view-switch button { all: unset !important; cursor: pointer !important; padding: 5px 12px !important; font-size: 12.5px !important; font-weight: 600 !important; }
#ordersListCard .kbh-view-switch button[aria-pressed="true"] { background: #f4b400 !important; color: #3b2f00 !important; }
body.kbh-compact .orders-table tr.order-status-row.kbh-compact-hidden { display: none !important; }
body.kbh-compact .orders-table td { padding-top: 7px !important; padding-bottom: 7px !important; }
body.kbh-compact .orders-table td.cell-status { min-width: 210px; }
.kbh-compact-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kbh-compact-status .order-management-control { font-size: 11.5px; opacity: .85; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.kbh-compact-status .order-management-control select { padding: 2px 6px; font-size: 12px; }