/* ============================================================
   Seyco Group — форма сайты
   Токендер: терең индиго + күңгірт янтарь акцент.
   ============================================================ */
:root{
  --ink:        #10192e;
  --ink-soft:   #3c4a68;
  --paper:      #f4f6f9;
  --paper-2:    #ffffff;
  --line:       #dde3ee;
  --navy:       #17264a;
  --navy-2:     #223564;
  --amber:      #c8862a;
  --amber-2:    #e0a34e;
  --ok:         #2f7d5a;
  --err:        #b3432f;
  --radius:     10px;
  --shadow:     0 1px 2px rgba(16,25,46,.06), 0 8px 24px -12px rgba(16,25,46,.18);
  --font-ui:    "Manrope","Segoe UI",system-ui,sans-serif;
  --font-num:   "IBM Plex Mono", ui-monospace, monospace;
}

@font-face { font-family: "Manrope"; src: local("Manrope"); }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
h1,h2,h3{ font-weight:800; letter-spacing:-.01em; margin:0 0 .4em; }
p{ margin:0 0 1em; color: var(--ink-soft); }

/* ---------- layout shell ---------- */
.site-header{
  background: var(--navy);
  color:#fff;
}
.site-header-inner{
  max-width: 880px; margin: 0 auto; padding: 14px 20px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff; width:max-content; }
.brand-mark{
  display:block; height:40px; width:auto; border-radius:6px;
  background:#fff; padding:4px 8px; object-fit:contain;
}
.brand-text{ font-weight:700; font-size:15px; display:flex; flex-direction:column; line-height:1.15; }
.lang-switch{
  display:flex; align-items:center; gap:2px;
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  padding:3px; border-radius:10px; width:max-content;
}
.lang-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; padding:6px 12px; border-radius:7px;
  border:none; color:#c3ccdf; text-decoration:none;
  font-size:12px; font-weight:700; letter-spacing:.03em;
  background:transparent; transition: background .15s ease, color .15s ease;
}
.lang-btn:hover{ background:rgba(255,255,255,0.14); color:#fff; }
.lang-btn.active{ background: var(--amber); color:#241505; box-shadow: var(--shadow); }
.brand-text em{ font-style:normal; font-weight:500; font-size:11px; color:#c3ccdf; letter-spacing:.03em; }

.wrap{ max-width: 880px; margin: 0 auto; padding: 32px 20px 64px; }
.site-footer{ text-align:center; color:#8993a8; font-size:12px; padding:24px; }

/* ---------- home / form picker ---------- */
.hero{ margin-bottom: 28px; }
.hero .eyebrow{
  text-transform:uppercase; letter-spacing:.12em; font-size:11px;
  color: var(--amber); font-weight:700; margin-bottom:8px; display:block;
}
.form-grid{ display:grid; gap:14px; }
.form-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; text-decoration:none; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}
.form-card:hover{ transform: translateY(-2px); border-color: var(--amber-2); }
.form-card .num{ font-family: var(--font-num); color:#9aa4bb; font-size:13px; }
.form-card .title{ font-weight:700; font-size:16px; flex:1; margin-left:14px; }
.form-card .go{ color: var(--amber); font-weight:700; }
.empty-note{ color:#8993a8; font-size:13px; padding:20px; text-align:center; border:1px dashed var(--line); border-radius:var(--radius); }
.short-link-note{ font-size:12px; color:#8993a8; margin:-6px 0 4px 2px; }
.short-link-note code{ background:#eef1f6; padding:2px 7px; border-radius:5px; color:var(--ink-soft); font-family: var(--font-num); }

.confirm-share-box{
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 24px;
}
.confirm-share-box h2{ font-size:15px; margin-bottom:6px; }
.link-copy-row{ display:flex; gap:8px; margin-top:10px; }
.link-copy-row input{ flex:1; font-family: var(--font-num); font-size:13px; }
.warn-box{
  display:flex; gap:10px; align-items:flex-start;
  background:#fdf0e8; border:1px solid #f2c9ac; border-radius:8px;
  padding:12px 14px; margin-top:12px;
}
.warn-box-icon{ font-size:16px; line-height:1.4; color:#a15a1f; flex-shrink:0; }
.warn-box p{ margin:0; font-size:12.5px; line-height:1.5; color:#7a4118; }
.ack-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-top:12px;
}
.ack-check{
  display:flex; align-items:flex-start; gap:8px;
  font-size:13px; color: var(--ink-soft); cursor:pointer; user-select:none;
}
.ack-check input[type=checkbox]{ margin-top:3px; width:16px; height:16px; flex-shrink:0; cursor:pointer; }
.ack-row .btn:disabled{ opacity:.4; cursor:not-allowed; }
.link-copy-row button:disabled{ opacity:.45; cursor:not-allowed; }

/* ---------- forms ---------- */
.card{
  background: var(--paper-2); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px;
}
.field{ margin-bottom: 18px; }
.field label{ display:block; font-size:13px; font-weight:700; color: var(--ink-soft); margin-bottom:6px; }
.field .hint{ font-size:12px; color:#9aa4bb; margin-top:4px; }
input[type=text], input[type=number], input[type=date], input[type=password], textarea, select{
  width:100%; padding:10px 12px; font: inherit; font-size:14px;
  border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink);
}
input:focus, textarea:focus, select:focus{
  outline:2px solid var(--amber-2); outline-offset:1px; border-color: var(--amber-2);
}
textarea{ resize:vertical; min-height:70px; }

.items-table{ width:100%; border-collapse:collapse; margin-bottom:8px; }
.items-table th{
  text-align:left; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:#8993a8; font-weight:700; padding:0 8px 8px;
}
.items-table td{ padding:6px 8px 6px 0; vertical-align:top; }
.items-table td:last-child{ width:36px; }
.row-remove{
  border:none; background:none; color:#b8bfd0; font-size:18px; cursor:pointer; line-height:1;
  width:32px; height:32px; border-radius:6px;
}
.row-remove:hover{ background:#fbeae5; color:var(--err); }
.btn-add-row{
  border:1px dashed var(--line); background:none; color: var(--ink-soft);
  padding:8px 14px; border-radius:8px; font-size:13px; font-weight:700; cursor:pointer;
}
.btn-add-row:hover{ border-color: var(--amber-2); color: var(--amber); }

.sig-wrap{ border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; }
.sig-wrap canvas{ display:block; width:100%; height:150px; touch-action:none; cursor:crosshair; }
.sig-actions{ display:flex; justify-content:flex-end; padding:6px 8px; border-top:1px solid var(--line); background:#fafbfd; }
.sig-actions button{ border:none; background:none; color: var(--ink-soft); font-size:12px; cursor:pointer; font-weight:700; }

.actions-row{ display:flex; align-items:center; gap:14px; margin-top: 24px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  border:none; border-radius:8px; padding:12px 22px; font-weight:700; font-size:14px;
  cursor:pointer; text-decoration:none;
}
.btn-primary{ background: var(--navy); color:#fff; }
.btn-primary:hover{ background: var(--navy-2); }
.btn-ghost{ background:none; color: var(--ink-soft); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:#b8bfd0; }
.btn-amber{ background: linear-gradient(155deg, var(--amber-2), var(--amber)); color:#241505; }

.form-msg{ font-size:13px; margin-top:10px; }
.form-msg.err{ color: var(--err); }
.form-msg.ok{ color: var(--ok); }

/* ---------- success page ---------- */
.success-box{ text-align:center; padding: 40px 20px; }
.success-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
  background: var(--ok); color:#fff; display:grid; place-items:center; font-size:26px;
}

/* ---------- printable document (matches original form) ---------- */
.doc-sheet{
  background:#fff; color:#111; padding: 28px 30px; border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); font-size:13px;
}
.doc-logo{ text-align:center; margin-bottom:6px; }
.doc-logo img{ height:52px; width:auto; }
.doc-sheet h2{ font-size:16px; text-align:center; margin-bottom:18px; }
.doc-meta{ display:flex; justify-content:space-between; gap:20px; margin-bottom:16px; font-size:12.5px; }
.doc-table{ width:100%; border-collapse:collapse; margin-bottom:18px; }
.doc-table th, .doc-table td{ border:1px solid #444; padding:6px 8px; font-size:12.5px; vertical-align:top; }
.doc-table th{ background:#eef1f6; text-align:left; }
.doc-reason{ border:1px solid #444; padding:10px; min-height:60px; font-size:12.5px; margin-bottom:20px; }
.doc-sign-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; }
.doc-sign-row .who{ font-size:12.5px; }
.doc-sign-row img{ max-height:60px; }

/* ---------- admin ---------- */
.login-box{ max-width:380px; margin: 64px auto 0; position:relative; overflow:hidden; }
.login-box::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px;
  background: linear-gradient(90deg, var(--amber-2), var(--amber));
}
.login-box h1{ text-align:center; }
.login-box input[type=text], .login-box input[type=password]{ padding:11px 13px; font-size:14.5px; }
.login-box .btn-primary{ padding:12px 22px; font-size:14.5px; margin-top:4px; }
.admin-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:12px; flex-wrap:wrap; }
.admin-bar h1{ font-size:20px; margin:0; }
.pill{ display:inline-block; font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }
.pill-jana{ background:#fbeecb; color:#7a5410; }
.pill-otelgen{ background:#dcefe4; color: var(--ok); }
.pill-orindalyp_jatyr{ background:#fbeecb; color:#7a5410; }
.pill-orindaldy{ background:#dcefe4; color: var(--ok); }
.pill-orindalmady{ background:#fbe0da; color: var(--err); }
.status-select{
  font: inherit; font-size:12px; font-weight:700; letter-spacing:.01em;
  padding:5px 10px; border-radius:20px; border:1px solid transparent;
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-repeat:no-repeat; background-position:right 8px center; background-size:9px;
  padding-right:24px;
}
.status-select.status-jana{
  background-color:#dfeafc; color:#1a56b3;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a56b3' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.status-select.status-orindalyp_jatyr{
  background-color:#fbeecb; color:#7a5410;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a5410' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.status-select.status-orindaldy{
  background-color:#dcefe4; color: var(--ok);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232f7d5a' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.status-select.status-orindalmady{
  background-color:#fbe0da; color: var(--err);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23b3432f' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
table.list{ width:100%; border-collapse:collapse; background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
table.list th{ text-align:left; font-size:11px; text-transform:uppercase; color:#8993a8; padding:10px 12px; border-bottom:1px solid var(--line); }
table.list td{ padding:12px; border-bottom:1px solid var(--line); font-size:13.5px; }
table.list tr:last-child td{ border-bottom:none; }
table.list tr:hover td{ background:#fafbfd; }
table.list tfoot td{ border-top:2px solid var(--navy); border-bottom:none; background:#fafbfd; }
.row-link{ text-decoration:none; color:var(--navy); font-weight:700; }
.report-bar-cell{ position:relative; min-width:140px; height:22px; background:#eef1f6; border-radius:5px; overflow:hidden; }
.report-bar{ position:absolute; top:0; left:0; height:100%; background:linear-gradient(90deg, var(--amber-2), var(--amber)); border-radius:5px; min-width:2px; }
.report-bar-num{ position:relative; z-index:1; display:flex; align-items:center; height:100%; padding-left:8px; font-weight:700; font-size:12.5px; color: var(--ink); }
.stat-tiles{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.stat-tile{
  flex:1; min-width:150px; background: var(--paper-2); border:1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding:16px 18px;
}
.stat-tile .num{ font-size:28px; font-weight:800; font-family: var(--font-num); color: var(--ink); line-height:1.1; }
.stat-tile .label{ font-size:11px; color:#8993a8; font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:6px; }
.stat-tile.ok .num{ color: var(--ok); }
.stat-tile.err .num{ color: var(--err); }
.stat-tile.progress .num{ color:#a1701f; }
.detail-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-bottom:20px; }
.detail-grid .k{ font-size:11px; text-transform:uppercase; color:#8993a8; font-weight:700; }
.detail-grid .v{ font-size:14px; }

/* ---------- admin/report.php — baga-anketasy толық тізімі (Excel/Google Sheets
   стиліндегі кең кесте: әр сұрақ жеке баған + әр адамның жанында реттік нөмір) ---------- */
.survey-wide-table th, .survey-wide-table td{ white-space:nowrap; }
.survey-wide-table td:nth-last-child(1),
.survey-wide-table th:nth-last-child(1){ white-space:normal; }
.survey-wide-table .col-num{ width:44px; text-align:center; }
.survey-wide-table .col-score{ text-align:center; font-family: var(--font-num); font-weight:700; color: var(--ink-soft); }
.row-num-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%;
  background: linear-gradient(155deg, var(--amber-2), var(--amber)); color:#241505;
  font-size:12px; font-weight:800; font-family: var(--font-num);
}

/* ---------- forms/baga-anketasy.php (1-10 бағалау анкетасы) ---------- */
.scale-legend-box{
  background: linear-gradient(90deg, hsl(0,68%,95%), hsl(60,60%,95%), hsl(125,55%,94%));
  border:1px solid var(--line); border-radius:8px;
  padding:10px 14px; font-size:12.5px; color: var(--ink-soft); font-weight:700;
  margin-bottom:20px;
}
.survey-q label{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.q-num{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:20px; height:20px; border-radius:50%; background: var(--navy); color:#fff;
  font-size:11px; font-weight:800; font-family: var(--font-num); line-height:1;
}
.field > label > .q-num{ margin-right:2px; }
.survey-q .req{ color: var(--err); font-weight:700; }
.survey-q .opt-note{ color:#9aa4bb; font-weight:400; font-size:11.5px; }
.scale-picker{ margin-top:4px; }
.scale-buttons{ display:flex; flex-wrap:wrap; gap:6px; }
/* Әр батырма өз --h (hue, 0=қызыл..125=жасыл) айнымалысымен келеді —
   1 балл қызғылт-күрең, 10 балл ашық жасыл болатын жағымды,
   "толтырғысы келетін" градиент шкала жасайды (NPS/CSAT стилі). */
.scale-btn{
  flex:1 1 0; min-width:30px; height:40px; border-radius:9px;
  border:1px solid hsl(var(--h, 40), 55%, 78%);
  background: hsl(var(--h, 40), 68%, 93%);
  color: hsl(var(--h, 40), 48%, 30%);
  font-weight:800; font-size:13.5px; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.scale-btn:hover{
  background: hsl(var(--h, 40), 68%, 87%);
  border-color: hsl(var(--h, 40), 55%, 62%);
  transform: translateY(-1px);
}
.scale-btn.selected{
  background: hsl(var(--h, 40), 62%, 50%);
  border-color: hsl(var(--h, 40), 62%, 40%);
  color:#fff; box-shadow: var(--shadow); transform: translateY(-2px) scale(1.04);
}
.scale-labels{ display:flex; justify-content:space-between; font-size:11px; color:#9aa4bb; margin-top:5px; }
.yesno-picker{ display:flex; gap:8px; margin-top:4px; }
.yesno-btn{
  flex:1; padding:10px 14px; border-radius:9px; border:1px solid var(--line); background:#fff;
  color: var(--ink-soft); font-weight:700; font-size:13.5px; cursor:pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.yesno-btn:hover{ border-color: var(--amber-2); color: var(--amber); transform: translateY(-1px); }
.yesno-btn[data-value="yes"].selected{
  background: hsl(150, 55%, 42%); color:#fff; border-color: hsl(150, 55%, 34%);
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.yesno-btn[data-value="no"].selected{
  background: hsl(6, 65%, 52%); color:#fff; border-color: hsl(6, 65%, 42%);
  box-shadow: var(--shadow); transform: translateY(-1px);
}

@media (max-width: 640px){
  .wrap{ padding:20px 14px 48px; }
  .card, .doc-sheet{ padding:18px; }
  .detail-grid{ grid-template-columns:1fr; }
  .scale-btn{ min-width:26px; height:36px; font-size:12px; }
}

/* ---------- forms/akt-priema-peredachi.php: тауар фотосы + «Менің
   тауарларым» іздеу беті сілтемесі (2026-08-25) ---------- */
.item-photo-cell{ display:flex; align-items:center; gap:6px; }
.item-photo-btn{
  border:1px dashed var(--line); background:none; color: var(--ink-soft);
  font-size:16px; width:34px; height:34px; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.item-photo-btn:hover{ border-color: var(--amber-2); color: var(--amber); }
.item-photo-preview{
  width:34px; height:34px; object-fit:cover; border-radius:6px; border:1px solid var(--line);
}
.item-photo-remove{
  border:none; background:none; color:#b8bfd0; font-size:16px; cursor:pointer;
  width:22px; height:22px; border-radius:5px; display:inline-flex; align-items:center; justify-content:center;
}
.item-photo-remove:hover{ background:#fbeae5; color: var(--err); }

.lookup-cta{ margin-top:22px; }
.lookup-cta-link{
  display:flex; align-items:center; gap:14px;
  background: var(--paper-2); border:1px dashed var(--line); border-radius: var(--radius);
  padding:16px 20px; text-decoration:none; color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.lookup-cta-link:hover{ border-color: var(--amber-2); transform: translateY(-1px); }
.lookup-cta-icon{ font-size:22px; flex-shrink:0; }
.lookup-cta-link strong{ display:block; font-size:14px; }
.lookup-cta-desc{ font-size:12.5px; color:#8993a8; }

/* ---------- print ---------- */
@media print{
  .site-header, .site-footer, .no-print{ display:none !important; }
  body{ background:#fff; }
  .wrap{ max-width:none; padding:0; }
  .doc-sheet{ box-shadow:none; border:none; }
}