/* Unified module UI (Patterns + Supplychain) - scoped, theme-color aware */
:root{
  --fw-ui-radius: 16px;
  --fw-ui-radius-sm: 12px;
  --fw-ui-border: rgba(0,0,0,.08);
  --fw-ui-shadow: 0 14px 40px rgba(0,0,0,.10);
  --fw-ui-shadow-soft: 0 10px 28px rgba(0,0,0,.08);
  --fw-ui-bg: rgba(255,255,255,.84);
  --fw-ui-bg-2: rgba(255,255,255,.72);
  --fw-ui-text: #141414;
  --fw-ui-muted: rgba(0,0,0,.62);
  --fw-ui-primary: var(--color-primary, #2f5daa);
}

/* ---------- Patterns ---------- */
.fw-company-patterns{
  border: 1px solid var(--fw-ui-border);
  border-radius: var(--fw-ui-radius);
  background: linear-gradient(135deg, rgba(47,93,218,.10), rgba(255,255,255,.75));
  box-shadow: var(--fw-ui-shadow-soft);
  padding: 18px 16px;
}
.fw-company-patterns > h2{
  margin: 0 0 14px 0;
  font-size: 16px;
  line-height: 1.2;
  color: var(--fw-ui-text);
  letter-spacing: -.2px;
  display:flex;
  align-items:center;
  gap:10px;
}
.fw-company-patterns > h2:before{
  content:"";
  width: 28px; height: 28px;
  border-radius: 10px;
  background: rgba(47,93,218,.14);
  border: 1px solid rgba(47,93,218,.18);
  box-shadow: 0 10px 22px rgba(47,93,218,.10);
  flex: 0 0 auto;
}

.fw-company-patterns__group{
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}
.fw-company-patterns__group > h3{
  margin: 0 0 10px 0;
  font-size: 14px;
  color: var(--fw-ui-muted);
  font-weight: 700;
  display:flex;
  align-items:center;
  gap:8px;
}
.fw-company-patterns__group > h3:before{
  content:"";
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--fw-ui-primary);
  opacity: .8;
}

.fw-company-patterns__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
@media (max-width: 560px){
  .fw-company-patterns__grid{ grid-template-columns: 1fr; }
}

.fw-pattern-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--fw-ui-radius-sm);
  background: var(--fw-ui-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 12px 26px rgba(0,0,0,.08);
  overflow: hidden;
  padding: 12px;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.fw-pattern-card__thumb img{
  width:100%;
  height:auto;
  display:block;
  border-radius: 12px;
}

.fw-pattern-card__thumb{
  position: relative;
  display: block;
}

.fw-pattern-card__badge{
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  letter-spacing: .2px;
}
.fw-pattern-card__title{
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -.2px;
}
.fw-pattern-card__title a{
  color: var(--fw-ui-text);
  text-decoration: none;
}
.fw-pattern-card__title a:hover{ text-decoration: underline; }
.fw-pattern-card__designer{
  font-size: 13px;
  color: var(--fw-ui-muted);
}
.fw-pattern-card__designer a{ color: inherit; text-decoration:none; }
.fw-pattern-card__designer a:hover{ text-decoration: underline; }

.fw-pattern-card__link a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(47,93,218,.25);
  background: rgba(47,93,218,.08);
  color: var(--fw-ui-primary);
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  width: fit-content;
}
.fw-pattern-card__link a:hover{
  background: rgba(47,93,218,.14);
  border-color: rgba(47,93,218,.33);
}

/* ---------- Supplychain ---------- */
.fw-supplychains{
  border: 1px solid var(--fw-ui-border);
  border-radius: var(--fw-ui-radius);
  background: linear-gradient(135deg, rgba(47,93,218,.08), rgba(255,255,255,.78));
  box-shadow: var(--fw-ui-shadow-soft);
  padding: 18px 16px;
}
.fw-supplychains .fw-section-title{
  margin: 0 0 14px 0;
  font-size: 16px;
  border: 0;
  padding: 0;
}
.fw-supplychain-group{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--fw-ui-radius-sm);
  background: var(--fw-ui-bg-2);
  overflow: hidden;
  margin: 12px 0 0;
}
.fw-supplychain-summary{
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  color: var(--fw-ui-text);
  list-style: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.fw-supplychain-summary::-webkit-details-marker{ display:none; }
.fw-supplychain-summary:after{
  content: "›";
  margin-left: auto;
  transform: rotate(90deg);
  opacity: .65;
}
details[open] > .fw-supplychain-summary:after{
  transform: rotate(-90deg);
}

.fw-supplychain-count{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  color: var(--fw-ui-primary);
  border: 1px solid rgba(47,93,218,.22);
  background: rgba(47,93,218,.08);
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.fw-supplychain-timeline{
  margin: 0;
  padding: 12px 14px 14px 46px;
  list-style: none;
  display: grid;
  gap: 10px;
  position: relative;
}
.fw-supplychain-timeline:before{
  content:"";
  position:absolute;
  left: 26px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: rgba(47,93,218,.16);
  border-radius: 999px;
}
.fw-supplychain-step{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  padding: 12px;
  position: relative;
}
.fw-supplychain-step:before{
  content:"";
  position:absolute;
  left: -28px;
  top: 18px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--fw-ui-primary);
  box-shadow: 0 10px 20px rgba(47,93,218,.18);
  border: 1px solid rgba(47,93,218,.20);
}
.fw-supplychain-step-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom: 6px;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.fw-supplychain-step-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.fw-supplychain-step-num{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 900;
  color: var(--fw-ui-primary);
  background: rgba(47,93,218,.10);
  border: 1px solid rgba(47,93,218,.22);
  flex: 0 0 auto;
}
.fw-supplychain-step-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--fw-ui-muted);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Info icon (Frontend): i in a circle + CSS tooltip via data-tip */
.fw-supplychains .fw-info{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--fw-ui-primary);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  cursor: help;
  user-select: none;
}
.fw-supplychains .fw-info:focus{
  outline: 2px solid rgba(47,93,218,.35);
  outline-offset: 2px;
}
.fw-supplychains .fw-info{
  position: relative;
}
.fw-supplychains .fw-info::after{
  content: attr(data-tip);
  position: absolute;
  z-index: 9999;
  right: 0;
  top: calc(100% + 8px);
  width: max-content;
  max-width: min(260px, 85vw);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(17,17,17,.96);
  color: #fff;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.fw-supplychains .fw-info:hover::after,
.fw-supplychains .fw-info:focus::after,
.fw-supplychains .fw-info:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}
/* Slightly smaller when used next to the step label */
.fw-supplychains .fw-info.fw-supplychain-info{
  width: 16px;
  height: 16px;
  font-size: 11px;
}
.fw-supplychain-badge{
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(0,0,0,.72);
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.08);
  padding: 6px 10px;
  border-radius: 999px;
  line-height: 1;
}
.fw-supplychain-badge--external{
  color: rgba(47,93,218,.95);
  background: rgba(47,93,218,.08);
  border-color: rgba(47,93,218,.20);
}
.fw-supplychain-step-link,
.fw-supplychain-step-name{
  font-size: 14px;
  font-weight: 900;
  color: var(--fw-ui-text);
  text-decoration:none;
  display:block;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.fw-supplychain-step-link:hover{ text-decoration: underline; }
.fw-supplychain-step-link{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.72);
}
.fw-supplychain-step-link:hover{
  background: rgba(47,93,218,.06);
  border-color: rgba(47,93,218,.14);
  text-decoration:none;
}
.fw-supplychain-step-link.is-external:after{
  content: "↗";
  margin-left: 8px;
  font-weight: 900;
  opacity: .6;
}
.fw-supplychain-step-meta{
  margin-top: 4px;
  display:block;
  font-size: 13px;
  color: var(--fw-ui-muted);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Mobile polish: tighter paddings, bigger touch targets, less visual noise */
@media (max-width: 768px){
  .fw-supplychains{ padding: 14px 12px; }
  .fw-supplychain-summary{ padding: 12px 12px; }
  .fw-supplychain-count{ padding: 6px 9px; }
  .fw-supplychain-timeline{ padding: 10px 12px 12px 42px; gap: 10px; }
  .fw-supplychain-timeline:before{ left: 24px; }
  .fw-supplychain-step{ padding: 12px; }
  .fw-supplychain-step:before{ left: -26px; }
  .fw-supplychain-step-label{ max-width: 100%; }
  .fw-supplychain-step-left{ flex-wrap: wrap; }
  .fw-supplychain-step-link{ padding: 12px 12px; }
}

@media (max-width: 420px){
  .fw-supplychain-step-head{ align-items:flex-start; }
  .fw-supplychain-step-label{ white-space: normal; line-height: 1.2; }
  .fw-supplychain-badge{ margin-left: 0; }
  .fw-supplychain-summary{ flex-wrap: wrap; }
}

/* Popover body inside modal: provide breathing room */
.fw-popover-body .fw-company-patterns,
.fw-popover-body .fw-supplychains{
  margin: 0;
}


/* ---------- Premium Gallery (Dashboard) ---------- */
.fw-premium-gallery-section{
  max-width: 100%;
}
.fw-premium-gallery-card{
  max-width: 100%;
}
.fw-premium-gallery-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  max-width: 100%;
}
.fw-premium-gallery-item{
  max-width: 100%;
}
.fw-premium-gallery-item img,
.fw-premium-gallery-item video{
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 14px;
  object-fit: cover;
}

/* Remove horizontal overflow caused by long button labels / inline controls */
.fw-premium-gallery-card .fw-form-row,
.fw-premium-gallery-card .fw-btn,
.fw-premium-gallery-card button,
.fw-premium-gallery-card input,
.fw-premium-gallery-card select,
.fw-premium-gallery-card textarea{
  max-width: 100%;
  box-sizing: border-box;
}

/* Mobile: single column, tighter spacing */
@media (max-width: 768px){
  .fw-premium-gallery-grid{
    grid-template-columns: 1fr;
  }
}


/* ---------- Supplychain Editor (Dashboard) - mobile width fixes ---------- */
.fw-sc-chain-header{ max-width: 100%; }
.fw-sc-chain-title{ min-width: 0; }
.fw-sc-chain-title input{ max-width: 100%; box-sizing: border-box; }

@media (max-width: 768px){
  .fw-sc-chain-header{
    flex-direction: column;
    align-items: stretch !important;
  }
  .fw-sc-chain-actions{
    margin-left: 0 !important;
    width: 100%;
  }
  .fw-sc-chain-actions .button{
    width: 100%;
    white-space: normal;
  }
}