/* Shared visual theme for the multi-category shell and quotation modules. */
.multi-shell,
.helmet-app,
.tailbox-app{
  --biz-ink:#17232d;
  --biz-muted:#64727d;
  --biz-line:#d8e0dc;
  --biz-paper:#fff;
  --biz-canvas:#f3f6f4;
  --biz-green:#08786d;
  --biz-green-dark:#075d55;
  --biz-green-soft:#e8f5f1;
  --biz-gold:#b86f25;
  --biz-gold-soft:#fff5e8;
  --biz-nav:#1e2a33;
  --biz-shadow:0 8px 24px rgba(28,43,38,.06);
  color:var(--biz-ink);
  background:var(--biz-canvas);
  letter-spacing:0;
}

/* Multi-category shell */
.multi-shell .category-bar{
  grid-template-columns:210px minmax(320px,1fr) 260px;
  gap:16px;
  padding:0 20px;
  background:var(--biz-paper);
  border-bottom-color:var(--biz-line);
  box-shadow:0 3px 14px rgba(28,43,38,.06);
}
.multi-shell .system-name{gap:11px}
.multi-shell .system-name span{
  width:32px;
  height:32px;
  border-radius:7px;
  background:var(--biz-green);
  color:#fff;
  font-size:16px;
}
.multi-shell .system-name strong{font-size:15px}
.multi-shell .category-tabs{height:100%;gap:8px;padding:9px}
.multi-shell .category-tabs button{
  min-width:142px;
  border:1px solid transparent;
  border-radius:6px;
  padding:0 18px;
  color:var(--biz-muted);
}
.multi-shell .category-tabs button.active{
  border-color:#a9d3ca;
  background:var(--biz-green-soft);
  color:var(--biz-green-dark);
}
.multi-shell .category-tabs button.active::after{display:none}
.multi-shell .category-bar small{color:var(--biz-muted);font-size:11px}
.multi-shell #moduleFrame{background:var(--biz-canvas)}

/* Shared module frame */
.helmet-app,
.tailbox-app{overflow-x:hidden}
.helmet-app .app,
.tailbox-app .app{
  grid-template-columns:210px minmax(0,1fr);
  background:var(--biz-canvas);
}
.helmet-app .side,
.tailbox-app .side{
  background:var(--biz-nav);
  padding:20px 14px;
}
.helmet-app .brand,
.tailbox-app .brand{gap:11px;padding:0 4px}
.helmet-app .mark,
.tailbox-app .mark{
  width:34px;
  height:34px;
  border-radius:7px;
  background:var(--biz-green-soft);
  color:var(--biz-green-dark);
}
.helmet-app .brand strong,
.tailbox-app .brand strong{font-size:15px}
.helmet-app .brand small,
.tailbox-app .brand small{font-size:11px}
.helmet-app .nav,
.tailbox-app .nav{gap:4px;margin-top:28px}
.helmet-app .nav button,
.tailbox-app .nav button{
  height:42px;
  border-radius:6px;
  padding:0 13px;
  color:#c9d1d7;
  font-weight:700;
}
.helmet-app .nav .active,
.tailbox-app .nav .active{
  background:#31404b;
  box-shadow:inset 3px 0 var(--biz-green);
  color:#fff;
}
.tailbox-app .knowledge-count{border-top-color:#35434d}
.tailbox-app .knowledge-count strong{font-size:22px}
.helmet-app .main,
.tailbox-app .main{padding:24px 28px 36px}
.helmet-app .top,
.tailbox-app .top{align-items:flex-end;margin-bottom:17px}
.helmet-app .top h1,
.tailbox-app .top h1{font-size:25px;line-height:1.25}
.helmet-app .top p,
.tailbox-app .top p{margin-top:5px;color:var(--biz-muted);font-size:13px}
.helmet-app .primary,
.tailbox-app .primary{
  height:38px;
  border-radius:6px;
  background:var(--biz-green);
  padding:0 16px;
  font-weight:800;
}
.helmet-app .primary:hover,
.tailbox-app .primary:hover,
.helmet-app .copy-btn:hover,
.tailbox-app .quote-actions button:hover{background:var(--biz-green-dark)}

/* Panels and headings */
.helmet-app .panel,
.helmet-app .card,
.tailbox-app .panel{
  border-color:var(--biz-line);
  border-radius:8px;
  background:var(--biz-paper);
  box-shadow:var(--biz-shadow);
}
.helmet-app .panel,
.tailbox-app .panel{padding:18px 19px}
.helmet-app .search,
.tailbox-app .search{margin-bottom:16px}
.helmet-app .ph,
.tailbox-app .panel-head{margin-bottom:14px}
.helmet-app .ph h2,
.tailbox-app .panel-head h2{font-size:16px}
.helmet-app .ph span,
.tailbox-app .panel-head span{color:var(--biz-muted);font-size:11px}

/* Quotation condition area */
.helmet-app .quote-form,
.tailbox-app .quote-form{
  display:grid;
  grid-template-columns:repeat(3,minmax(180px,1fr));
  gap:14px 16px;
}
.helmet-app .quote-form label,
.tailbox-app .quote-form label{
  gap:6px;
  color:#40505c;
  font-size:12px;
  font-weight:800;
}
.helmet-app .quote-form input,
.tailbox-app .quote-form input,
.tailbox-app .quote-form select{
  min-width:0;
  width:100%;
  height:43px;
  border-color:#cbd6d0;
  border-radius:6px;
  padding:0 12px;
  font-size:14px;
  font-weight:700;
}
.helmet-app .quote-form input:focus,
.tailbox-app .quote-form input:focus,
.tailbox-app .quote-form select:focus{
  border-color:var(--biz-green);
  box-shadow:0 0 0 3px rgba(8,120,109,.12);
}
.helmet-app .quote-form input[readonly],
.tailbox-app .quote-form input[readonly]{background:#f6f8f7;color:#34424c}
.helmet-app #quoteUnitInput,
.tailbox-app #quoteUnitInput{
  border-color:#92c8bd;
  background:#f0faf7;
  color:var(--biz-green-dark);
}
.helmet-app .status,
.tailbox-app .status{margin-top:11px;color:var(--biz-muted);font-size:12px}

/* Product information */
.helmet-app .grid,
.tailbox-app .two-column{gap:16px}
.helmet-app .grid{grid-template-columns:minmax(310px,.88fr) minmax(520px,1.45fr)}
.helmet-app .facts,
.tailbox-app .facts{gap:0}
.helmet-app .facts div,
.tailbox-app .facts div{
  min-height:42px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid #edf1ef;
  font-size:13px;
}
.helmet-app .facts dt,
.tailbox-app .facts dt{color:var(--biz-muted)}
.helmet-app .facts dd,
.tailbox-app .facts dd{color:var(--biz-ink)}
.helmet-app .note,
.tailbox-app .data-note{color:#8c531a;font-size:12px}

/* Foreign-trade quotation sheet treatment */
.helmet-app .profit-rows,
.tailbox-app .profit-rows{
  gap:0;
  overflow:hidden;
  border:1px solid #cbd7d1;
  border-radius:6px;
}
.helmet-app .profit-row,
.tailbox-app .profit-row{gap:0}
.helmet-app .profit-row .metric,
.tailbox-app .profit-row .metric{
  min-height:78px;
  margin:0;
  border:0;
  border-right:1px solid var(--biz-line);
  border-bottom:1px solid var(--biz-line);
  border-radius:0;
  padding:13px 15px;
}
.helmet-app .profit-row .metric:last-child,
.tailbox-app .profit-row .metric:last-child{border-right:0}
.helmet-app .profit-row:first-child,
.tailbox-app .profit-row:first-child{background:#f3fbf8}
.helmet-app .profit-row:first-child strong,
.tailbox-app .profit-row:first-child strong{color:var(--biz-green-dark)}
.helmet-app .profit-row.single,
.tailbox-app .profit-row.single{background:var(--biz-gold-soft)}
.helmet-app .profit-row.single .metric,
.tailbox-app .profit-row.single .metric{border-bottom:0;background:transparent}
.helmet-app .profit-row.single strong,
.tailbox-app .profit-row.single strong{color:#8c531a}
.helmet-app .metric span,
.tailbox-app .metric span{color:var(--biz-muted);font-size:11px}
.helmet-app .metric strong,
.tailbox-app .metric strong{font-size:20px;margin-top:6px}

/* Packaging, logistics and copied quote */
.helmet-app .grid+.grid,
.tailbox-app .lower{margin-top:16px}
.helmet-app .carton,
.tailbox-app .carton-display{
  border-color:#cfe0d9;
  border-radius:6px;
  background:#f6fbf9;
}
.helmet-app .carton{padding:13px}
.helmet-app .carton.active{border-color:var(--biz-green);background:var(--biz-green-soft)}
.tailbox-app .carton-display{min-height:64px;padding:17px}
.helmet-app .metrics,
.tailbox-app .logistics{gap:0;overflow:hidden;border:1px solid var(--biz-line);border-radius:6px}
.helmet-app .metrics .metric,
.tailbox-app .logistics .metric{
  margin:0;
  border:0;
  border-right:1px solid var(--biz-line);
  border-radius:0;
  padding:12px 13px;
}
.helmet-app .metrics .metric:last-child,
.tailbox-app .logistics .metric:last-child{border-right:0}
.helmet-app .quote-copy,
.tailbox-app .quote-copy{margin-top:16px}
.helmet-app .quote-box,
.tailbox-app .quote-copy textarea{
  min-height:126px;
  border:1px solid var(--biz-line);
  border-left:3px solid var(--biz-gold);
  border-radius:0;
  background:#fff;
  padding:13px 15px;
  font-size:13px;
  line-height:1.7;
}
.helmet-app .copy-btn,
.tailbox-app .quote-actions button{
  height:38px;
  border-radius:6px;
  background:var(--biz-green);
}
.helmet-app .history,
.tailbox-app .history{margin-top:16px}
.helmet-app th,
.tailbox-app th{background:#f4f8f6;color:#40505c}

@media(max-width:1050px){
  .helmet-app .app,
  .tailbox-app .app{grid-template-columns:1fr}
  .helmet-app .side,
  .tailbox-app .side{display:none}
  .helmet-app .grid,
  .tailbox-app .two-column{grid-template-columns:1fr}
}

@media(max-width:760px){
  .multi-shell .category-bar{
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 14px;
  }
  .multi-shell .category-tabs{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    width:100%;
    min-width:0;
    height:42px;
    padding:0;
  }
  .multi-shell .category-tabs button{
    width:100%;
    min-width:0;
    padding:0 4px;
    font-size:12px;
    line-height:1.25;
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .multi-shell .category-bar small{display:none}
}

@media(max-width:680px){
  .multi-shell,
  .helmet-app,
  .tailbox-app{overflow-x:hidden}
  .helmet-app .main,
  .tailbox-app .main{min-width:0;padding:16px 13px 28px}
  .helmet-app .top,
  .tailbox-app .top{align-items:flex-start;flex-direction:column}
  .helmet-app .top h1,
  .tailbox-app .top h1{font-size:22px}
  .helmet-app .primary,
  .tailbox-app .primary{width:100%}
  .helmet-app .panel,
  .tailbox-app .panel{padding:15px}
  .helmet-app .quote-form,
  .tailbox-app .quote-form,
  .helmet-app .grid,
  .tailbox-app .two-column,
  .helmet-app .profit-row,
  .tailbox-app .profit-row,
  .helmet-app .metrics,
  .tailbox-app .logistics{grid-template-columns:minmax(0,1fr)}
  .helmet-app .profit-row .metric,
  .tailbox-app .profit-row .metric,
  .helmet-app .metrics .metric,
  .tailbox-app .logistics .metric{
    border-right:0;
    border-bottom:1px solid var(--biz-line);
  }
  .helmet-app .profit-row .metric:last-child,
  .tailbox-app .profit-row .metric:last-child,
  .helmet-app .metrics .metric:last-child,
  .tailbox-app .logistics .metric:last-child{border-bottom:0}
  .helmet-app .ph,
  .tailbox-app .panel-head{align-items:flex-start}
  .helmet-app .facts div,
  .tailbox-app .facts div{gap:12px}
}