/*
 * ToolsForge — TF UI Windows v1.0
 * Generator Stołów — pilot ETAP 2B.1
 * Zakres: wyłącznie warstwa wizualna/responsive okien i przycisków zamknięcia.
 * Nie zmienia logiki otwierania/zamykania, danych, obliczeń, 3D ani przepływu etapów.
 */

:root{
  --tf-ui-red:#b23434;
  --tf-ui-red-hover:#922727;
  --tf-ui-blue:#2f4a68;
  --tf-ui-slate:#2f3742;
  --tf-ui-text:#5f6874;
  --tf-ui-soft:#f7f8fa;
  --tf-ui-line:#e3e6ea;
  --tf-ui-white:#fff;
  --tf-ui-backdrop:rgba(18,30,45,.74);
  --tf-ui-shadow:0 28px 80px rgba(16,25,34,.34);
}

/* =========================================================
   WSPÓLNY PRZYCISK X — SVG, bez glifu fontowego
   ========================================================= */
#tf-plugin-wrapper .tf-ui-close,
body .tf-ui-close{
  display:grid!important;
  place-items:center!important;
  width:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid var(--tf-ui-red)!important;
  border-radius:0!important;
  background:var(--tf-ui-red)!important;
  color:#fff!important;
  box-shadow:none!important;
  cursor:pointer!important;
  line-height:1!important;
  font-size:0!important;
  text-decoration:none!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
#tf-plugin-wrapper .tf-ui-close svg,
body .tf-ui-close svg{
  display:block!important;
  width:24px!important;
  height:24px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:2.2!important;
  stroke-linecap:square!important;
  stroke-linejoin:miter!important;
  pointer-events:none!important;
}
#tf-plugin-wrapper .tf-ui-close:hover,
#tf-plugin-wrapper .tf-ui-close:focus-visible,
body .tf-ui-close:hover,
body .tf-ui-close:focus-visible{
  border-color:var(--tf-ui-red-hover)!important;
  background:var(--tf-ui-red-hover)!important;
  color:#fff!important;
  outline:3px solid rgba(178,52,52,.18)!important;
  outline-offset:2px!important;
}

/* =========================================================
   TYP B — PODSUMOWANIE PROJEKTU
   ========================================================= */
.tfn-project-summary-backdrop{
  background:var(--tf-ui-backdrop)!important;
  backdrop-filter:blur(2px);
}
.tfn-project-summary-dialog{
  width:min(1420px,90vw)!important;
  height:min(88dvh,calc(100dvh - 40px))!important;
  max-height:calc(100dvh - 40px)!important;
  border-radius:0!important;
  box-shadow:var(--tf-ui-shadow)!important;
}
.tfn-project-summary-head{
  padding:24px 28px 20px!important;
}
.tfn-project-summary-scroll{
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}
.tfn-project-summary-actions{
  padding:18px 28px!important;
}

/* =========================================================
   TYP B — ZESTAWIENIE ELEMENTÓW / KOSZYK
   ========================================================= */
.tfn-documentation-shopping-modal{
  padding:20px!important;
  background:transparent!important;
}
.tfn-documentation-shopping-backdrop{
  background:var(--tf-ui-backdrop)!important;
  backdrop-filter:blur(2px);
}
.tfn-documentation-shopping-dialog{
  width:min(1180px,90vw)!important;
  height:min(88dvh,calc(100dvh - 40px))!important;
  max-height:calc(100dvh - 40px)!important;
  border-radius:0!important;
  box-shadow:var(--tf-ui-shadow)!important;
}
.tfn-documentation-shopping-head{
  padding:22px 76px 18px 28px!important;
}
.tfn-documentation-shopping-body{
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}

/* =========================================================
   TYP B — WYBÓR BLATÓW
   Jedyny scroll: grid. Header/footer pozostają dostępne.
   ========================================================= */
.tf-panel-picker{
  padding:20px!important;
}
.tf-panel-picker-backdrop{
  background:var(--tf-ui-backdrop)!important;
  backdrop-filter:blur(2px)!important;
}
.tf-panel-picker-dialog{
  display:flex!important;
  flex-direction:column!important;
  width:min(1360px,90vw)!important;
  height:min(88dvh,calc(100dvh - 40px))!important;
  max-height:calc(100dvh - 40px)!important;
  overflow:hidden!important;
  border-radius:0!important;
  box-shadow:var(--tf-ui-shadow)!important;
}
.tf-panel-picker-head{
  position:relative!important;
  top:auto!important;
  flex:0 0 auto!important;
  padding:22px 28px 18px!important;
}
.tf-panel-picker-grid{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
  align-content:start!important;
  grid-auto-rows:max-content!important;
  padding:22px 28px!important;
}
.tf-panel-picker-card{
  height:auto!important;
  min-height:0!important;
  align-self:stretch!important;
}
.tf-panel-picker-foot{
  position:relative!important;
  bottom:auto!important;
  flex:0 0 auto!important;
  padding:16px 28px!important;
}

/* =========================================================
   TYP B-WIDE — PEŁNOEKRANOWY PODGLĄD 2D/3D
   Nie zmieniamy jego działania; tylko shell i X.
   ========================================================= */
#tf-plugin-wrapper .tfn-preview-fullscreen{
  background:var(--tf-ui-white)!important;
  border-radius:0!important;
}
#tf-plugin-wrapper .tfn-preview-fullscreen .tfn-preview-fullscreen-head{
  min-height:64px!important;
  padding:10px 12px 10px 20px!important;
  background:#fff!important;
  border-bottom:1px solid var(--tf-ui-line)!important;
}
#tf-plugin-wrapper .tfn-preview-fullscreen .tfn-preview-fullscreen-head h2{
  color:var(--tf-ui-blue)!important;
}
#tf-plugin-wrapper .tfn-preview-fullscreen .tfn-preview-fullscreen-close{
  flex:0 0 42px!important;
}

/* Mały podgląd 3D — to nie Typ B, ale X ma być identyczny. */
body > .tfn-mini-3d-window .tfn-mini-3d-close.tf-ui-close{
  width:38px!important;
  min-width:38px!important;
  max-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
}
body > .tfn-mini-3d-window .tfn-mini-3d-close.tf-ui-close svg{
  width:21px!important;
  height:21px!important;
}

/* Etapy 2–4: obecny X jest funkcjonalnie przyciskiem „wróć do projektu”. */
#tf-plugin-wrapper .tfn-screen-close.tf-ui-close,
.tfn-screen-close.tf-ui-close{
  flex:0 0 44px!important;
  width:44px!important;
  min-width:44px!important;
  max-width:44px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
}

/* =========================================================
   TYP C — WSPÓLNY SHELL MAŁYCH MODALI
   Dotyczy tylko elementów oznaczonych podczas migracji 2B.1.
   ========================================================= */
.tf-ui-modal--compact{
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  box-sizing:border-box!important;
  background:var(--tf-ui-backdrop)!important;
  backdrop-filter:blur(2px);
}
.tf-ui-dialog--compact{
  position:relative!important;
  width:min(680px,calc(100vw - 36px))!important;
  max-width:680px!important;
  max-height:min(86dvh,760px)!important;
  overflow:auto!important;
  box-sizing:border-box!important;
  border:1px solid var(--tf-ui-line)!important;
  border-top:4px solid var(--tf-ui-red)!important;
  border-left:1px solid var(--tf-ui-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:var(--tf-ui-shadow)!important;
  overscroll-behavior:contain!important;
}
.tf-ui-dialog--compact.tf-ui-dialog--success{
  width:min(760px,calc(100vw - 36px))!important;
  max-width:760px!important;
}
.tf-ui-dialog--compact.tf-ui-dialog--warning{
  border-top:4px solid var(--tf-ui-red)!important;
  border-left:1px solid var(--tf-ui-line)!important;
}
.tf-ui-dialog--compact .tf-ui-close{
  position:absolute!important;
  top:16px!important;
  right:16px!important;
  z-index:5!important;
}

/* Waitlist: dotychczasowe inline style zostają logicznie nietknięte,
   ale shell jest podciągnięty do wspólnego standardu. */
#modal-waitlist .tf-ui-dialog--compact{
  width:min(550px,calc(100vw - 36px))!important;
  max-width:550px!important;
  padding:44px 34px 34px!important;
}
#modal-waitlist .tf-modal-close.tf-ui-close{
  top:14px!important;
  right:14px!important;
}

/* Modal konta/projektu jest generowany przez klasę projektu i ma własny runtime.
   Ujednolicamy tylko wizualny X, bez przepinania funkcji. */
.tf-table-account-modal-close.tf-ui-close{
  flex:0 0 42px!important;
}

/* =========================================================
   RESPONSIVE — tablet
   ========================================================= */
@media (max-width:1023px){
  .tfn-project-summary-dialog,
  .tfn-documentation-shopping-dialog,
  .tf-panel-picker-dialog{
    width:94vw!important;
    height:min(92dvh,calc(100dvh - 28px))!important;
    max-height:calc(100dvh - 28px)!important;
  }
  .tf-panel-picker-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

/* =========================================================
   RESPONSIVE — telefon / wąski tablet
   Duże okna B -> pełnoekranowy panel.
   Małe C -> prawie pełna szerokość, ale NIE fullscreen.
   ========================================================= */
@media (max-width:760px){
  .tfn-project-summary-modal,
  .tfn-documentation-shopping-modal,
  .tf-panel-picker{
    padding:0!important;
    align-items:stretch!important;
    justify-content:stretch!important;
  }

  .tfn-project-summary-dialog,
  .tfn-documentation-shopping-dialog,
  .tf-panel-picker-dialog{
    width:100vw!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:100vh!important;
    max-height:100dvh!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
  }

  .tfn-project-summary-head,
  .tf-panel-picker-head{
    padding-top:max(13px,env(safe-area-inset-top))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
  }
  .tfn-documentation-shopping-head{
    padding-top:max(15px,env(safe-area-inset-top))!important;
    padding-right:max(66px,calc(env(safe-area-inset-right) + 58px))!important;
    padding-left:max(16px,env(safe-area-inset-left))!important;
  }

  .tfn-project-summary-head h2{
    font-size:clamp(20px,6.4vw,25px)!important;
  }
  .tf-panel-picker-head h3{
    font-size:clamp(20px,6.4vw,24px)!important;
  }
  .tfn-documentation-shopping-head h3{
    font-size:clamp(20px,6.4vw,25px)!important;
  }

  .tfn-project-summary-scroll,
  .tfn-documentation-shopping-body,
  .tf-panel-picker-grid{
    padding-right:max(14px,env(safe-area-inset-right))!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
  }
  .tfn-project-summary-scroll{
    padding-top:20px!important;
    padding-bottom:max(24px,env(safe-area-inset-bottom))!important;
  }
  .tfn-documentation-shopping-body{
    padding-top:14px!important;
    padding-bottom:max(14px,env(safe-area-inset-bottom))!important;
  }
  .tf-panel-picker-grid{
    grid-template-columns:1fr!important;
    gap:13px!important;
    padding-top:14px!important;
    padding-bottom:14px!important;
  }

  .tfn-project-summary-actions,
  .tf-panel-picker-foot{
    padding-right:max(14px,env(safe-area-inset-right))!important;
    padding-bottom:max(14px,env(safe-area-inset-bottom))!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
  }

  .tf-panel-picker-foot{
    flex-direction:column!important;
    align-items:stretch!important;
    gap:10px!important;
  }
  .tf-panel-picker-cancel{
    width:100%!important;
    min-height:44px!important;
  }

  /* Compact C — techniczny margines 10–12 px. */
  .tf-ui-modal--compact{
    padding:10px!important;
  }
  .tf-ui-dialog--compact,
  .tf-ui-dialog--compact.tf-ui-dialog--success,
  #modal-waitlist .tf-ui-dialog--compact{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 20px)!important;
    padding:58px 18px 22px!important;
  }
  .tf-ui-dialog--compact .tf-ui-close{
    top:10px!important;
    right:10px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
  }
  .tf-ui-dialog--compact [style*="display:flex"][style*="gap:12px"],
  .tf-ui-dialog--compact [style*="display: flex"][style*="gap:12px"]{
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .tf-ui-dialog--compact .tf-btn{
    width:100%!important;
    min-width:0!important;
  }

  #tf-plugin-wrapper .tfn-preview-fullscreen .tfn-preview-fullscreen-head{
    min-height:58px!important;
    padding-top:max(8px,env(safe-area-inset-top))!important;
    padding-right:max(8px,env(safe-area-inset-right))!important;
    padding-left:max(14px,env(safe-area-inset-left))!important;
  }
  #tf-plugin-wrapper .tfn-preview-fullscreen .tfn-preview-fullscreen-head h2{
    font-size:clamp(18px,5.8vw,23px)!important;
  }
}

/* Project Manager — małe modalne decyzje/logowanie (Typ C). */
.tf-table-modal-backdrop{
  padding:18px!important;
  background:var(--tf-ui-backdrop)!important;
  backdrop-filter:blur(2px)!important;
}
.tf-table-modal{
  width:min(600px,calc(100vw - 36px))!important;
  max-height:min(86dvh,760px)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:0!important;
  box-shadow:var(--tf-ui-shadow)!important;
}
.tf-table-modal-head,
.tf-table-modal-actions{
  flex:0 0 auto!important;
}
.tf-table-modal-body{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
}
.tf-table-modal-close.tf-ui-close{
  flex:0 0 42px!important;
}
@media(max-width:760px){
  .tf-table-modal-backdrop{padding:10px!important;}
  .tf-table-modal{
    width:calc(100vw - 20px)!important;
    max-width:none!important;
    max-height:calc(100dvh - 20px)!important;
  }
}