/* Suminvent RFQ Basket
   Designed to inherit theme palette via CSS variables:
   --color-bg, --color-surface, --color-text, --color-text-muted, --color-border,
   --color-primary, --radius-*, --shadow-*, --transition
*/

.sumi-rfq{
  width: 100%;
  margin: 24px 0;
  padding: 18px 18px 20px;
  color: var(--color-text, #111);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06));
}

/* If theme already provides .card, keep it – just add padding/spacing above. */
.sumi-rfq.card{
  overflow: visible;
}

.sumi-rfq.card:hover{ box-shadow: var(--shadow-sm, 0 6px 18px rgba(0,0,0,.06)); transform: none; }

.sumi-rfq-header{ margin-bottom: 10px; }
.sumi-rfq-title{ margin: 0 0 6px; font-size: 1.6rem; }
.sumi-rfq-subtitle{ margin: 0; color: var(--color-text-muted, rgba(0,0,0,.7)); }
.sumi-rfq-microhint{ margin-top: 10px; font-size: .95rem; color: var(--color-text-muted, rgba(0,0,0,.7)); }

.sumi-rfq-progress{
  width: 100%;
  height: 10px;
  background: rgba(127,127,127,.18);
  border-radius: 999px;
  overflow: hidden;
  margin: 14px 0 12px;
}
.sumi-rfq-progress-bar{
  height: 100%;
  width: 33%;
  background: var(--color-primary, #0a5c9e);
  transition: width .25s ease;
}

.sumi-rfq-steps{
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: .95rem;
}
.sumi-rfq-steps li{
  flex: 1;
  padding: 10px 12px;
  border-radius: var(--radius-md, 12px);
  background: rgba(127,127,127,.10);
  color: var(--color-text-muted, rgba(0,0,0,.7));
  opacity: .85;
}
.sumi-rfq-steps li.is-active{
  opacity: 1;
  background: rgba(127,127,127,.16);
  color: var(--color-text, #111);
  font-weight: 700;
}

.sumi-rfq-step{ display: none; }
.sumi-rfq-step.is-active{ display: block; }

.sumi-rfq-actions-top{
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.sumi-rfq-table-wrap{
  overflow-x: auto;
  border: 1px solid var(--color-border, rgba(0,0,0,.12));
  border-radius: var(--radius-lg, 16px);
  background: rgba(127,127,127,.06);
}

.sumi-rfq-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
}

.sumi-rfq-table th, .sumi-rfq-table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(127,127,127,.14);
  vertical-align: top;
}

.sumi-rfq-table th{
  text-align: left;
  background: rgba(127,127,127,.10);
  font-weight: 800;
  font-size: .95rem;
  color: var(--color-text, #111);
}

.sumi-empty{ padding: 18px 10px; text-align: center; color: var(--color-text-muted, rgba(0,0,0,.7)); }

.sumi-rfq-import{
  margin-top: 12px;
  border: 1px solid rgba(127,127,127,.18);
  border-radius: var(--radius-lg, 16px);
  padding: 12px 12px;
  background: rgba(127,127,127,.06);
}
.sumi-rfq-import summary{ cursor: pointer; font-weight: 800; }

.sumi-rfq-import-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-top: 12px;
}
@media (max-width: 900px){
  .sumi-rfq-import-grid{ grid-template-columns: 1fr; }
}

/* Drag & drop import */
.sumi-rfq-import-dropzone{
  margin-top: 14px;
  border: 1px dashed rgba(127,127,127,.35);
  border-radius: var(--radius-lg, 16px);
  padding: 14px 14px;
  background: rgba(127,127,127,.05);
}
.sumi-rfq-import-dropzone.is-dragover{
  border-color: var(--color-primary, #0a5c9e);
  background: rgba(10,92,158,.08);
}
.sumi-rfq-drop-title{ font-weight: 800; margin-bottom: 6px; }
.sumi-rfq-drop-sub{ font-size: .92rem; color: var(--color-text-muted, rgba(0,0,0,.7)); margin-bottom: 10px; }
.sumi-rfq-drop-actions{ display:flex; gap: 12px; align-items:center; flex-wrap:wrap; }
.sumi-rfq-drop-status{ font-size: .95rem; color: var(--color-text-muted, rgba(0,0,0,.7)); }
.sumi-rfq-drop-status.is-error{ color: var(--color-danger, #b00020); font-weight: 700; }
.sumi-rfq-drop-status.is-ok{ color: var(--color-success, #0f7a3b); font-weight: 700; }

/* Document import (Google-style card) */
.sumi-rfq-docimport{
  margin-top: 12px;
  border: 1px solid rgba(127,127,127,.18);
  border-radius: var(--radius-lg, 16px);
  padding: 12px 12px;
  background: rgba(127,127,127,.06);
}

/* Template downloads */
.sumi-rfq-templates{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}
.sumi-rfq-templates-title{
  font-weight: 700;
  color: var(--color-text-muted, rgba(0,0,0,.7));
}

/* Import preview */
.sumi-rfq-preview{
  margin-top: 12px;
  border: 1px solid rgba(127,127,127,.18);
  border-radius: var(--radius-lg, 16px);
  padding: 12px 12px;
  background: rgba(127,127,127,.06);
}
.sumi-rfq-preview-head{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.sumi-rfq-preview-title{ font-weight: 800; margin-bottom: 4px; }
.sumi-rfq-preview-sub{ font-size: .92rem; color: var(--color-text-muted, rgba(0,0,0,.7)); }
.sumi-rfq-preview-toggles{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sumi-rfq-check{ font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }

.sumi-rfq-preview-summary{
  margin: 10px 0 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sumi-rfq-preview-summary .muted{ font-weight: 700; opacity: .8; }
.sumi-rfq-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.25);
  background: rgba(127,127,127,.08);
  font-weight: 800;
  font-size: .85rem;
  color: var(--color-text, #111);
}
.sumi-rfq-pill.is-ok{ border-color: rgba(15,122,59,.35); }
.sumi-rfq-pill.is-warn{ border-color: rgba(200,120,0,.35); }
.sumi-rfq-pill.is-bad{ border-color: rgba(176,0,32,.35); }

.sumi-rfq-status{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .85rem;
  border: 1px solid rgba(127,127,127,.25);
  background: rgba(127,127,127,.08);
}
.sumi-rfq-status.is-ok{ color: var(--color-success, #0f7a3b); border-color: rgba(15,122,59,.35); }
.sumi-rfq-status.is-warn{ color: var(--color-warning, #a05a00); border-color: rgba(200,120,0,.35); }
.sumi-rfq-status.is-bad{ color: var(--color-danger, #b00020); border-color: rgba(176,0,32,.35); }
.sumi-rfq-docimport-title{ font-weight: 800; margin-bottom: 4px; }
.sumi-rfq-docimport-sub{ font-size: .92rem; color: var(--color-text-muted, rgba(0,0,0,.7)); margin-bottom: 10px; }

.sumi-rfq-docimport-dropzone{
  border: 1px dashed rgba(127,127,127,.35);
  border-radius: var(--radius-lg, 16px);
  padding: 14px 14px;
  background: rgba(127,127,127,.05);
}
.sumi-rfq-docimport-dropzone.is-dragover{
  border-color: var(--color-primary, #0a5c9e);
  background: rgba(10,92,158,.08);
}

.sumi-rfq-or{
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  color: var(--color-text-muted, rgba(0,0,0,.7));
}
.sumi-rfq-or:before,
.sumi-rfq-or:after{
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: rgba(127,127,127,.25);
}
.sumi-rfq-or span{
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,.25);
  background: rgba(127,127,127,.08);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .02em;
}

.sumi-rfq-docimport-linkrow{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.sumi-rfq-docimport-linkrow input{
  flex: 1 1 260px;
  min-width: 220px;
}
@media (max-width: 520px){
  .sumi-rfq-docimport-linkrow{ flex-direction: column; align-items: stretch; }
  .sumi-rfq-docimport-linkrow input{ min-width: 0; }
  .sumi-rfq-docimport-linkrow button{ width: 100%; }
}

.sumi-rfq-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
@media (max-width: 720px){
  .sumi-rfq-grid{ grid-template-columns: 1fr; }
  .sumi-rfq-field.is-span-2{ grid-column: auto; }
}

.sumi-rfq-field{ display: flex; flex-direction: column; gap: 6px; }
.sumi-rfq-field.is-span-2{ grid-column: span 2; }
.sumi-rfq-field label{ font-weight: 700; }

.sumi-rfq-hint{ font-size: .92rem; color: var(--color-text-muted, rgba(0,0,0,.7)); }

.req{ color: var(--color-danger, #b00020); font-weight: 900; }
.opt{ font-weight: 600; color: var(--color-text-muted, rgba(0,0,0,.7)); font-size: .9em; }

.sumi-rfq-error{ min-height: 18px; font-size: .92rem; color: var(--color-danger, #b00020); margin-top: 8px; }

.sumi-rfq-radio{ display: flex; gap: 18px; flex-wrap: wrap; }
.sumi-rfq-radio label{ font-weight: 600; display: inline-flex; gap: 8px; align-items: center; }

.sumi-rfq-actions{ display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

.sumi-rfq-success, .sumi-rfq-fatal{
  margin-top: 10px;
  padding: 16px;
  border-radius: var(--radius-lg, 16px);
  border: 1px solid rgba(127,127,127,.22);
  background: rgba(127,127,127,.08);
}

.sumi-rfq-consent{ font-weight: 600; display: flex; gap: 10px; align-items: center; }

.sumi-rfq-filelist ul{ margin: 8px 0 0; padding-left: 18px; }
.sumi-rfq-filelist li{ font-size: .95rem; opacity: .9; }

.sumi-rfq-hp{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Inputs */
.sumi-inp{
  width: 100%;
  padding: .65rem .75rem;
  border-radius: var(--radius-md, 12px);
  border: 1px solid var(--color-border, rgba(0,0,0,.18));
  background: var(--color-bg, #f7f7f7);
  color: var(--color-text, #111);
  outline: none;
}
.sumi-inp:focus{
  border-color: var(--color-primary, #0a5c9e);
  box-shadow: 0 0 0 4px rgba(10,92,158,.18);
}

/* Button micro overrides inside plugin scope */
.sumi-btn.is-danger{
  border-color: rgba(0,0,0,.18);
  color: var(--color-danger, #b00020);
}
.sumi-btn.is-danger:hover{
  border-color: var(--color-danger, #b00020);
  background: rgba(176,0,32,.08);
}

.sumi-rfq-add-btn.is-added{
  opacity: .9;
  transform: translateY(-1px);
}

/* Injection wrappers */
.sumi-rfq-inject{
  margin: 12px 0;
}
.sumi-rfq-inject-loop .sumi-rfq-add-btn{
  width: 100%;
  justify-content: center;
}

/* Mobile: stacked line items (no horizontal scrolling) */
@media (max-width: 820px){
  .sumi-rfq-table{ min-width: 0; }
  .sumi-rfq-table thead{ display:none; }
  .sumi-rfq-table,
  .sumi-rfq-table tbody,
  .sumi-rfq-table tr,
  .sumi-rfq-table td{
    display:block;
    width:100%;
  }
  .sumi-rfq-table tr[data-line-id]{
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, rgba(0,0,0,.12));
    border-radius: var(--radius-lg, 16px);
    margin: 10px 10px;
    padding: 10px 12px;
  }
  .sumi-rfq-table td{
    border: 0;
    padding: 8px 0;
    display:flex;
    gap: 10px;
    align-items:center;
  }
  .sumi-rfq-table td:before{
    content: attr(data-label);
    flex: 0 0 42%;
    font-weight: 800;
    color: var(--color-text-muted, rgba(0,0,0,.7));
  }
  .sumi-rfq-table td:last-child{
    justify-content:flex-end;
  }
  .sumi-rfq-table td:last-child:before{
    content: '';
    display:none;
  }
  .sumi-rfq-table-wrap{
    border: 0;
    background: transparent;
    overflow: visible;
  }
  .sumi-empty{
    display:block;
    padding: 12px 10px;
  }
}