/* Taplio v16.01 — opaque, readable and viewport-safe Sales CRM dialog */
.sales-dialog{
  width:min(980px,94vw);
  height:min(860px,92dvh);
  max-height:92dvh;
  padding:0;
  overflow:hidden;
  border:1px solid #d9d4e4;
  border-radius:18px;
  background:#ffffff;
  color:#181426;
  box-shadow:0 30px 100px #09051680;
}
.sales-dialog::backdrop{background:#171126b8;backdrop-filter:blur(5px)}
.sales-dialog>.sales-form{
  height:100%;
  padding:20px;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  background:#ffffff;
  color:#181426;
}
.sales-dialog .dialog-head{
  top:-20px;
  background:#ffffff;
  border-bottom-color:#d9d4e4;
}
.sales-dialog .dialog-head small,.sales-dialog label{color:#39314d}
.sales-dialog h2,.sales-dialog h3,.sales-dialog b{color:#181426}
.sales-dialog input,.sales-dialog select,.sales-dialog textarea{
  border:1px solid #c9c3d7;
  background:#f8f7fc;
  color:#181426;
  box-shadow:none;
}
.sales-dialog input::placeholder,.sales-dialog textarea::placeholder{color:#746d83;opacity:1}
.sales-dialog input:focus,.sales-dialog select:focus,.sales-dialog textarea:focus{border-color:#7147e8;outline:3px solid #7147e824}
.sales-dialog .sales-items>div,.sales-dialog .sales-total span{border-color:#ddd8e8;background:#f5f3fa;color:#181426}
.sales-dialog .sales-total span:nth-child(2){background:#eee8ff;color:#5d35cf}
.sales-dialog .dialog-head button{border:1px solid #cfc7df;background:#f5f2fb;color:#251b3b}
.sales-dialog .form-actions{
  position:sticky;
  z-index:5;
  bottom:-20px;
  margin:0 -20px -20px;
  padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid #d9d4e4;
  background:#fffffff2;
  backdrop-filter:blur(12px);
}
html[data-theme="dark"] .sales-dialog,html[data-theme="dark"] .sales-dialog>.sales-form,html[data-theme="dark"] .sales-dialog .dialog-head{background:#171321;color:#f8f6ff}
html[data-theme="dark"] .sales-dialog{border-color:#41394f}
html[data-theme="dark"] .sales-dialog h2,html[data-theme="dark"] .sales-dialog h3,html[data-theme="dark"] .sales-dialog b{color:#ffffff}
html[data-theme="dark"] .sales-dialog .dialog-head small,html[data-theme="dark"] .sales-dialog label{color:#d7d0e2}
html[data-theme="dark"] .sales-dialog input,html[data-theme="dark"] .sales-dialog select,html[data-theme="dark"] .sales-dialog textarea{border-color:#554c65;background:#252031;color:#ffffff}
html[data-theme="dark"] .sales-dialog input::placeholder,html[data-theme="dark"] .sales-dialog textarea::placeholder{color:#aaa1b8}
html[data-theme="dark"] .sales-dialog .sales-items>div,html[data-theme="dark"] .sales-dialog .sales-total span{border-color:#484052;background:#211c2b;color:#ffffff}
html[data-theme="dark"] .sales-dialog .form-actions{border-top-color:#41394f;background:#171321f2}
html[data-theme="dark"] .sales-dialog .dialog-head button{border-color:#554c65;background:#292334;color:#ffffff}
@media(max-width:700px){
  .sales-dialog{width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0}
  .sales-dialog>.sales-form{height:100%;padding:14px}
  .sales-dialog .dialog-head{top:-14px}
  .sales-dialog .form-actions{bottom:-14px;margin:0 -14px -14px;padding:12px 14px calc(12px + env(safe-area-inset-bottom))}
  .sales-dialog .form-actions .btn{flex:1}
}