/* public/css/catalog.css */
/* Namespace: ffcat-* (to avoid collisions with other pages) */

.ffcat-page .card { padding:16px; margin-bottom:16px; }

.ffcat-title { margin:0 0 6px; }
.ffcat-sub  { margin:0 0 10px; font-size:14px; color:#555; }
.ffcat-total{ margin:0 0 14px; font-size:13px; color:#777; }

.ffcat-form { display:block; }
.ffcat-row {
  display:grid;
  grid-template-columns: 2fr 1.2fr 1fr 1fr 0.9fr 0.6fr;
  gap:12px;
  align-items:end;
}
.ffcat-f label { display:block; font-size:12px; color:#666; margin:0 0 6px; }
.ffcat-f input[type="text"],
.ffcat-f input[type="number"],
.ffcat-f select{
  width:100%;
  height:36px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:6px 10px;
  background:#fff;
  outline:none;
}
.ffcat-f input:focus,
.ffcat-f select:focus{
  border-color: rgba(47,107,255,.55);
  box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}

.ffcat-actions{ display:flex; gap:10px; margin:12px 0; align-items:center; }

.ffcat-adv{ margin-top:12px; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:10px 12px; background:#fafafa; }
.ffcat-adv > summary{ cursor:pointer; font-weight:600; list-style:none; }
.ffcat-adv > summary::-webkit-details-marker{ display:none; }
.ffcat-adv > summary:after{ content:"▾"; float:right; opacity:.65; }
.ffcat-adv[open] > summary:after{ content:"▴"; }

.ffcat-adv-grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  align-items:end;
}
.ffcat-range2{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; }

.ffcat-muted{ color:#777; font-size:12px; }
.ffcat-help { color:#777; font-size:12px; margin-top:8px; }

.ffcat-table-wrap{ overflow:auto; border:1px solid rgba(0,0,0,.08); border-radius:12px; }
.ffcat-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width: 1100px;
}
.ffcat-th, .ffcat-td{ padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.06); vertical-align:middle; }
.ffcat-th{ text-align:left; font-size:12px; text-transform:none; letter-spacing:.2px; color:#666; background:#fcfcfc; position:sticky; top:0; z-index:1; }
.ffcat-td-r{ text-align:right; }
.ffcat-td-nw{ white-space:nowrap; }
.ffcat-company{ max-width:340px; }
.ffcat-company a{ text-decoration:none; }
.ffcat-company a:hover{ text-decoration:underline; }

.ffcat-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08);
}

.ffcat-flag{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
}
.ffcat-flag.good{ background:rgba(0,160,0,.08); border-color:rgba(0,160,0,.25); }
.ffcat-flag.bad { background:rgba(200,0,0,.08);  border-color:rgba(200,0,0,.25); }
.ffcat-flag.neutral{ opacity:.9; }

.ffcat-pager{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:12px;
  font-size:13px;
  flex-wrap:wrap;
}

.ffcat-pf{
  display:flex;
  align-items:center;
  gap:8px;
}
.ffcat-pf-qty{
  width:52px;
  height:32px;
  padding:4px 8px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
}
.ffcat-pf-qty:focus{
  border-color: rgba(47,107,255,.55);
  box-shadow: 0 0 0 3px rgba(47,107,255,.12);
}
.ffcat-pf-btn{
  height:32px;
  padding:5px 10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.14);
  background:#fff;
  cursor:pointer;
  margin: 0px;
}
.ffcat-cat {max-width: 120px;}
.ffcat-pf-btn:hover{ background:rgba(0,0,0,.03); }
.ffcat-pf-state{ margin-top:4px; font-size:12px; color:#777; }

.ffcat-delta.up{ color:#0a8a0a; }
.ffcat-delta.down{ color:#cc0000; }
.ffcat-delta.flat{ color:#666; }

/* ===== Modal (catalog portfolio) ===== */
.ffcat-trade-modal{ position:fixed; inset:0; display:none; z-index:1000; }
.ffcat-trade-modal[aria-hidden="false"]{ display:block; }
.ffcat-trade-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); }
.ffcat-trade-panel{
  position:relative;
  width:min(520px, calc(100% - 24px));
  margin: 10vh auto 0;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  overflow:hidden;
}
.ffcat-trade-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.ffcat-trade-title{ font-weight:700; }
.ffcat-trade-x{
  width:36px; height:36px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}
.ffcat-trade-x:hover{ background:rgba(0,0,0,.03); }
.ffcat-trade-body{ padding:14px; display:grid; gap:12px; }
.ffcat-trade-row{ display:grid; gap:6px; }
.ffcat-trade-label{ font-size:12px; color:#666; }
.ffcat-trade-ctrl{
  height:36px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:6px 10px;
  background:#fff;
}
.ffcat-trade-meta{ font-size:12px; color:#777; }
.ffcat-trade-foot{
  padding:12px 14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

/* Mobile */
@media (max-width: 980px){
  .ffcat-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px){
  .ffcat-adv-grid{ grid-template-columns: 1fr 1fr; }
  .ffcat-table{ min-width: 980px; }
  .ffcat-trade-panel{ margin-top: 6vh; }
}

.ffcat-presets{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 8px 0 14px;
}

.ffcat-preset{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  background:#fff;
  text-decoration:none;
  font-weight:600;
  font-size:13px;
  color:inherit;
}

.ffcat-preset:hover{
  border-color: rgba(0,0,0,.20);
}

@media (max-width: 720px){
  .ffcat-presets{ gap:8px; }
  .ffcat-preset{ width:100%; justify-content:center; }
}

/* Catalog mobile: prevent "Мой выбор" chip from overflowing */
@media (max-width: 820px){
  .ffcat-actions{
    flex-wrap: wrap;
    gap: 8px;
  }

  /* saved slot should start from new line and not push layout */
  #ffcat-saved-slot{
    margin-left: 0 !important;
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  /* buttons/links inside should not exceed viewport */
  #ffcat-saved-slot .btn{
    max-width: 100%;
    white-space: normal; /* разрешаем перенос текста */
  }
}

/* ===== Onboarding ===== */

.ffcat-onboarding{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px;
  margin:12px 0 18px;
  border-radius:16px;
  background:linear-gradient(135deg,#eef4ff,#f8fbff);
  border:1px solid rgba(37,99,235,.15);
}

.ffcat-onb-title{
  font-size:16px;
  font-weight:800;
}

.ffcat-onb-sub{
  font-size:14px;
  color:#475569;
}

/* ===== Mode switch ===== */

.ffcat-mode-switch{
  display:flex;
  gap:8px;
  margin:10px 0 14px;
}

.ffcat-mode{
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  border-radius:999px;
  padding:6px 12px;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
}

.ffcat-mode.active{
  background:#2563eb;
  color:#fff;
  border-color:#2563eb;
}

/* ===== Simple mode ===== */

.ffcat-simple .ffcat-pro{
  display:none;
}

/* ===== Portfolio UX ===== */

.ffcat-pf{
  display:flex;
  align-items:center;
  gap:6px;
}

.ffcat-pf-qty{
  width:46px;
  text-align:center;
  font-weight:700;
}

.ffcat-pf-btn{
  background:#2563eb;
  color:#fff;
  border:none;
}

.ffcat-pf-btn:hover{
  opacity:.9;
}

@media (max-width:720px){
  .ffcat-table{
    min-width:720px;
  }

  .ffcat-table-wrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}