/* ============================================================
   MONOPAK — Kataloq Generatoru · interfeys
   ============================================================ */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#EEF1F5;color:#14395C;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  font-size:14px;-webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid #2C7BE5;outline-offset:2px;border-radius:6px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#C6D0DA;border-radius:99px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#A9B7C5;background-clip:content-box;border:3px solid transparent}

/* ---------- Ümumi elementlər ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 15px;border-radius:9px;border:1px solid #D5DDE6;
  background:#fff;color:#14395C;font-weight:600;font-size:13.5px;
  transition:.15s ease;white-space:nowrap;
}
.btn:hover{background:#F6F8FA;border-color:#BECAD6}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:#0B3B5F;border-color:#0B3B5F;color:#fff;box-shadow:0 2px 8px rgba(11,59,95,.24)}
.btn-primary:hover{background:#0E4A76;border-color:#0E4A76}
.btn-red{background:#A32833;border-color:#A32833;color:#fff}
.btn-red:hover{background:#B93340;border-color:#B93340}
.btn-ghost{border-color:transparent;background:transparent}
.btn-ghost:hover{background:#E7ECF1;border-color:transparent}
.btn-sm{height:31px;padding:0 10px;font-size:12.5px;border-radius:8px}
.btn-icon{width:31px;height:31px;padding:0;border-radius:8px}
.btn[disabled]{opacity:.45;pointer-events:none}

.field{display:block;margin-bottom:11px}
.field>span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:#7B8CA0;margin-bottom:5px}
.input,select.input,textarea.input{
  width:100%;height:38px;padding:0 11px;border:1px solid #D9E0E8;border-radius:9px;
  background:#fff;transition:.15s;
}
textarea.input{height:auto;padding:9px 11px;resize:vertical;line-height:1.45}
.input:hover{border-color:#C2CDD9}
.input:focus{outline:none;border-color:#2C7BE5;box-shadow:0 0 0 3px rgba(44,123,229,.14)}
.input::placeholder{color:#A9B6C4}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%237B8CA0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

.switch{display:flex;align-items:center;gap:10px;cursor:pointer;padding:7px 0;user-select:none}
.switch input{display:none}
.switch i{width:38px;height:22px;border-radius:99px;background:#CBD5E0;position:relative;transition:.18s;flex:none}
.switch i::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch input:checked + i{background:#008A48}
.switch input:checked + i::after{transform:translateX(16px)}
.switch b{font-weight:600;font-size:13.5px}

/* ---------- Üst panel ---------- */
.topbar{
  height:62px;background:#fff;border-bottom:1px solid #DFE5EC;
  display:flex;align-items:center;gap:14px;padding:0 16px;position:relative;z-index:40;
  box-shadow:0 1px 3px rgba(20,57,92,.05);
}
.topbar .brand{display:flex;align-items:center;gap:11px;flex:none}
.topbar .brand img{height:26px;display:block}
.topbar .brand .sep{width:1px;height:26px;background:#E1E7ED}
.topbar .brand .nm{font-weight:700;font-size:14px;letter-spacing:-.01em;line-height:1.15}
.topbar .brand .nm small{display:block;font-weight:500;font-size:11px;color:#8697A9;letter-spacing:.02em}
.topbar .spacer{flex:1}
.saved{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#7B8CA0;font-weight:600;white-space:nowrap}
.saved .dt{width:7px;height:7px;border-radius:50%;background:#008A48;transition:.2s}
.saved.busy .dt{background:#E0A400}
.topbar .tb-actions{display:flex;align-items:center;gap:8px}

/* ---------- Əsas şəbəkə ---------- */
.app{display:grid;grid-template-columns:min(455px,42vw) 1fr;height:calc(100vh - 62px);height:calc(100dvh - 62px)}
.sidebar{background:#fff;border-right:1px solid #DFE5EC;display:flex;flex-direction:column;min-height:0}
.side-scroll{overflow-y:auto;overflow-x:hidden;padding:14px 16px 22px;flex:1;min-height:0}

.sec{border:1px solid #E4EAF0;border-radius:13px;margin-bottom:14px;background:#fff;overflow:hidden}
.sec>summary{
  list-style:none;cursor:pointer;padding:12px 14px;display:flex;align-items:center;gap:9px;
  font-weight:700;font-size:13.5px;user-select:none;background:#F8FAFC;
}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary .chev{width:14px;height:14px;color:#8697A9;transition:.18s;margin-left:auto}
.sec[open]>summary .chev{transform:rotate(180deg)}
.sec>summary .ic{width:26px;height:26px;border-radius:8px;background:#EAF0F6;color:#0B3B5F;
  display:flex;align-items:center;justify-content:center;flex:none}
.sec>summary .ic svg{width:15px;height:15px}
.sec .sec-body{padding:14px;border-top:1px solid #EDF1F5}

.list-head{display:flex;align-items:center;gap:10px;margin:4px 2px 11px}
.list-head h3{margin:0;font-size:14px;font-weight:800;letter-spacing:-.01em}
.list-head .cnt{background:#EAF0F6;color:#4A6785;border-radius:99px;padding:2px 9px;font-size:12px;font-weight:700}
.list-head .spacer{flex:1}

.search{position:relative;margin-bottom:11px}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#9AA9B8}
.search .input{padding-left:33px}

/* ---------- Məhsul kartı ---------- */
.plist{display:flex;flex-direction:column;gap:9px}
.pcard{border:1px solid #E4EAF0;border-radius:13px;background:#fff;transition:.15s;overflow:hidden}
.pcard:hover{border-color:#CFDAE5;box-shadow:0 2px 10px rgba(20,57,92,.07)}
.pcard.open{border-color:#B9CBDD;box-shadow:0 4px 18px rgba(20,57,92,.1)}
.pcard.dragging{opacity:.4}
.pcard.drop-before{box-shadow:0 -3px 0 0 #2C7BE5}
.pcard.drop-after{box-shadow:0 3px 0 0 #2C7BE5}
.pc-head{display:flex;align-items:center;gap:10px;padding:9px 11px;cursor:pointer}
.pc-grab{color:#B6C3D0;cursor:grab;flex:none;display:flex;padding:3px;touch-action:none}
.pc-grab:active{cursor:grabbing}
.pc-grab svg{width:15px;height:15px}
.pc-thumb{width:46px;height:46px;border-radius:9px;border:1px solid #E7ECF1;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc-thumb img{max-width:88%;max-height:88%;object-fit:contain}
.pc-thumb .no{color:#C3CFDB}
.pc-thumb .no svg{width:17px;height:17px}
.pc-main{flex:1;min-width:0}
.pc-code{display:inline-block;background:#A32833;color:#fff;border-radius:99px;padding:1px 7px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;margin-bottom:3px}
.pc-code.empty{background:#E7ECF1;color:#93A3B3}
.pc-name{font-weight:700;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-name.empty{color:#A9B6C4;font-weight:500;font-style:italic}
.pc-sub{font-size:11.5px;color:#8697A9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pc-price{font-weight:800;font-size:13.5px;color:#A32833;white-space:nowrap;flex:none}
.pc-price.empty{color:#C3CFDB}
.pc-acts{display:flex;gap:2px;flex:none}
.pc-body{padding:2px 13px 14px;border-top:1px solid #EDF1F5;margin-top:2px}
.pc-warn{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#B8860B;
  background:#FFF8E6;border:1px solid #F5E3B3;border-radius:8px;padding:6px 9px;margin-bottom:11px}
.pc-warn svg{width:14px;height:14px;flex:none}

/* şəkil yükləmə */
.drop{
  display:flex;align-items:center;gap:13px;border:1.5px dashed #CFDAE5;border-radius:11px;
  padding:11px;background:#FAFCFE;transition:.15s;cursor:pointer;margin-bottom:12px
}
.drop:hover{border-color:#2C7BE5;background:#F4F9FF}
.drop.over{border-color:#2C7BE5;background:#EAF4FF}
.drop .prev{width:62px;height:62px;border-radius:9px;border:1px solid #E7ECF1;background:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.drop .prev img{max-width:88%;max-height:88%;object-fit:contain}
.drop .prev .no{color:#C3CFDB}
.drop .prev .no svg{width:22px;height:22px}
.drop .txt{flex:1;min-width:0}
.drop .txt b{display:block;font-size:13px;font-weight:700}
.drop .txt small{display:block;color:#8697A9;font-size:11.5px;margin-top:2px;line-height:1.35}
.drop input[type=file]{display:none}

.hint{font-size:11.5px;color:#8697A9;line-height:1.45;margin:-4px 0 11px}
.add-wrap{padding:11px 16px;border-top:1px solid #E4EAF0;background:#fff;display:flex;gap:8px}
.add-wrap .btn{flex:1;height:42px}

.empty-state{text-align:center;padding:38px 20px;color:#8697A9}
.empty-state svg{width:44px;height:44px;color:#C3CFDB;margin-bottom:10px}
.empty-state b{display:block;color:#14395C;font-size:14px;margin-bottom:4px}
.empty-state p{margin:0;font-size:12.5px;line-height:1.5}

/* ---------- Ön baxış ---------- */
.preview{position:relative;background:#E4E9EF;min-height:0;display:flex;flex-direction:column}
.pv-bar{height:44px;flex:none;display:flex;align-items:center;gap:10px;padding:0 14px;
  background:rgba(255,255,255,.75);backdrop-filter:blur(8px);border-bottom:1px solid #D9E1E9;font-size:12.5px;color:#5C7186}
.pv-bar .spacer{flex:1}
.pv-bar b{color:#14395C}
.zoom{display:flex;align-items:center;gap:2px;background:#fff;border:1px solid #DCE3EA;border-radius:9px;padding:2px}
.zoom button{width:27px;height:26px;border:0;background:transparent;border-radius:6px;display:flex;
  align-items:center;justify-content:center;color:#4A6785}
.zoom button:hover{background:#EEF2F6}
.zoom span{min-width:44px;text-align:center;font-weight:700;font-size:12px;color:#14395C}
.pv-scroll{flex:1;overflow:auto;padding:24px 24px 60px;min-height:0}
.pages{display:flex;flex-direction:column;align-items:center;gap:24px}
.page-frame{position:relative;flex:none}
.page-frame .lbl{position:absolute;top:-19px;left:0;font-size:11px;font-weight:700;color:#7B8CA0;letter-spacing:.03em}
.page-frame .page,.page-frame .cover{transform-origin:top left;box-shadow:0 6px 26px rgba(20,57,92,.18);border-radius:2px}

/* ---------- Modal ---------- */
.mask{position:fixed;inset:0;background:rgba(11,34,54,.55);backdrop-filter:blur(3px);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:22px;opacity:0;pointer-events:none;transition:.18s}
.mask.on{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:17px;width:min(520px,100%);max-height:86vh;overflow:auto;
  box-shadow:0 22px 60px rgba(11,34,54,.35);transform:translateY(10px) scale(.98);transition:.2s}
.mask.on .modal{transform:none}
.modal h2{margin:0 0 6px;font-size:19px;letter-spacing:-.01em}
.modal .m-body{padding:22px}
.modal p.lead{margin:0 0 16px;color:#6E8093;font-size:13.5px;line-height:1.5}
.modal .m-foot{display:flex;gap:9px;justify-content:flex-end;padding:14px 22px;border-top:1px solid #EDF1F5;background:#FAFCFE;
  border-radius:0 0 17px 17px;position:sticky;bottom:0}
.chk-list{border:1px solid #E4EAF0;border-radius:11px;overflow:hidden;margin-bottom:16px}
.chk-list .it{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;font-size:13px;line-height:1.4}
.chk-list .it + .it{border-top:1px solid #EDF1F5}
.chk-list .it .ic{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.chk-list .it .ic svg{width:11px;height:11px;color:#fff}
.chk-list .it.ok .ic{background:#008A48}
.chk-list .it.warn .ic{background:#E0A400}
.chk-list .it.err .ic{background:#A32833}
.chk-list .it b{display:block;font-weight:700;margin-bottom:1px}
.chk-list .it span{color:#7B8CA0;font-size:12px}

/* ---------- Progress + toast ---------- */
.prog{height:6px;background:#E7ECF1;border-radius:99px;overflow:hidden;margin:14px 0 8px}
.prog i{display:block;height:100%;background:linear-gradient(90deg,#0B3B5F,#2C7BE5);width:0;transition:width .25s}
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:#0B2236;color:#fff;padding:11px 17px;border-radius:11px;font-size:13.5px;font-weight:600;
  box-shadow:0 10px 30px rgba(11,34,54,.3);display:flex;align-items:center;gap:9px;
  animation:tin .22s ease;max-width:88vw}
.toast.ok{background:#0B5136}
.toast.err{background:#8C2028}
.toast svg{width:16px;height:16px;flex:none}
@keyframes tin{from{opacity:0;transform:translateY(12px)}}

/* ---------- Mobil ---------- */
.mob-tabs{display:none}
@media (max-width:900px){
  body{overflow:auto}
  .app{grid-template-columns:1fr;height:auto}
  .mob-tabs{display:flex;gap:6px;padding:9px 12px;background:#fff;border-bottom:1px solid #DFE5EC;
    position:sticky;top:0;z-index:30}
  .mob-tabs button{flex:1;height:36px;border-radius:9px;border:1px solid #DCE3EA;background:#fff;font-weight:700;font-size:13px}
  .mob-tabs button.on{background:#0B3B5F;border-color:#0B3B5F;color:#fff}
  .sidebar,.preview{height:auto}
  .app[data-tab=edit] .preview{display:none}
  .app[data-tab=view] .sidebar{display:none}
  .side-scroll{overflow:visible}
  .pv-scroll{overflow:auto;padding:16px 12px 40px}
  .topbar{flex-wrap:wrap;height:auto;padding:9px 12px;gap:9px}
  .topbar .tb-actions .lbl-hide{display:none}
  .saved{display:none}
}

/* ---------- ÇAP ---------- */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff!important;overflow:visible!important;height:auto!important}
  .topbar,.sidebar,.pv-bar,.mob-tabs,.toast-wrap,.mask,.page-frame .lbl{display:none!important}
  .app{display:block!important;height:auto!important}
  .preview{background:#fff!important;display:block!important}
  .pv-scroll{overflow:visible!important;padding:0!important;flex:none!important}
  .pages{display:block!important;gap:0!important}
  .page-frame{width:auto!important;height:auto!important;margin:0!important;page-break-after:always;break-after:page}
  .page-frame:last-child{page-break-after:auto;break-after:auto}
  .page-frame .page,.page-frame .cover{
    transform:none!important;box-shadow:none!important;border-radius:0!important;
    width:210mm!important;height:297mm!important;
  }
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
}